アクセシビリティの祭典2018に参加してきた
ネコメシでの視察業務的なニュアンス兼ねて、アクセシビリティの祭典2018に参加してきた。 小並感としては「参加して良かった」なんだけど、来年はネコメシ的に協賛企業として参加する感じにしていきたいかなとも。 セッション的には、もともと「週の真ん中に神戸かー。きついなー」と思いつつも、行ってみようってことになった、精神的に後押ししてくれたセッションが、サイバーエージェントvsサイボウズのプロレスセッションだったわけなのだけども、というのも、サイボウズの小林くんと、以前に日経コンピュータの企画で対談したことがあって、それで今はどういう取り組みをしているんだろうというのに興味があったというのもあって。で、期待にたがわず、一番面白かったし、興味深い内容だった。 ご参考 日経コンピュータの記事： 徹底対談前編：“想像力の欠如”がアクセシビリティを阻害する – そのWebサイト、使えません！：日経 xT
table要素をスクリーンリーダーが表として扱うかはCSS次第だったりする件
2017年12月4日 著 みるく姐さん@milk54さんが、Web Accessibility Advent Calendar 2017の2日目のために、Re: A Responsive Accessible Tableという記事を書いてくださいました。その中で、A11YJ Slackの#q_and_aチャンネルにおける自分の発言を引用してくださったのですけど、それでふと思ったのがアクセシビリティオブジェクトの存在って実はあまり認知されていないかもしれない、ということです。別の表現をするなら、CSSをどう書こうともマークアップで意図したセマンティクスが変わることは無いと信じて疑わない人が少なく無いかもしれない、ということ（自分もかつてはその一人でした）。 @milk54さんの立てた「NVDAがなぜCSSでdisplay: blockにすると「テーブル」と読み上げないか？」という問いの裏には
aria-current design patterns
The aria-current attribute indicates the element that represents the current item within a container or set of related elements. It is an enumerated type attribute that takes one of a number of predefined tokens ("page", "step", "location", "date" or "time"), or which may be set to "true". aria-current="date" Screen readers should announce "Current date" to indicate that Saturday 16th is the curre
aria-currentとかいう便利な属性
2017年1月26日 著 AccSellメールマガジン第106号における植木さんの連載「こんなブログ記事見つけました！」で、Using the aria-current attribute - Tinkが取り上げられていました。WAI-ARIA 1.1で追加された属性、aria-current（もんどさんによる素晴らしい和訳で読むならaria-current（ステート）参照）を紹介している記事で、自分もDiigo Bookmarks 01/16/2017にある通り、注目した記事ではあります。 ただ、件のBlog記事を読んで、うおおおaria-current属性ちょう便利！今スグ使おう！！ってならなかったのは、指定すべき値がちょっと悩ましいというか......step、date、timeの3種はそれほど悩まずに使えると思うんですけど、pageとlocationについては、どっちをどこでどう使
Webアクセシビリティの勉強に役立つツールやWebサイト、書籍いろいろ
Webアクセシビリティの勉強に役立つツールやWebサイト、書籍いろいろ以前からWebアクセシビリティにはちょこちょこ勉強中の私です。しかしWebアクセシビリティについて書かれたサイトや本ってあまり多くなく、リソースを探すだけで苦労してしまったり…。そんなわけで今回はWebアクセシビリティのチェックに使えるツールや役立つ本、Webサイト、ブログなどを集めてみました。 アクセシビリティとは？「アクセシビリティ」とは、アクセスのしやすさを意味する言葉で、転じて 利用環境や身体の制約に関係なく誰でも使えるという意味 で使われます。どのような状況でも Web 上のコンテンツや機能を十分に利用できる Web サイトを「アクセシブルである」と言えます。 「ユーザビリティ」と混同されがちですが、使えないものを使えるようにするのがアクセシビリティの向上、使いにくいものを使いやすくするのがユーザビリティの向上
ウェブアクセシビリティへの取り組みを公開する (JIS X8341-3:2016 を基に) | Accessible & Usable
公開日 : 2016年12月17日 (2018年1月17日 更新) カテゴリー : アクセシビリティ この記事は、Web Accessibility Advent Calendar 2016 の17日目の記事です。 ご自身が運営するウェブサイトにおいて、アクセシビリティの向上に取り組んでいるのであれば、その取り組みについて情報公開したいものです。社外に対するよいアピール (ひいては自社に対する信頼感やブランドイメージの向上) になり得ますし、内部的にもウェブサイトの品質基準を宣言し共有することにつながるからです。 具体的にどう情報を公開したらよいか、スタンダードがあれば参考にしたいところですが、幸い JIS X8341-3:2016 で「附属書 (参考)」という形で提示されています。 附属書 JA ウェブアクセシビリティの確保・維持・向上のプロセスに関する推奨事項 附属書 JB 試験方法
改めてWebサイトの品質について考える
制作における品質とは？ Webサイトにおける品質（クオリティ）とはどういう意味でしょうか。 制作者であれば同じように捉えているかのようにみえる言葉ですが、大きく 2 つの見方があると思います。ひとつは、様々な状況に堪えられるように必要最低限の見た目と操作性を保証するという意味での品質。もうひとつは、与えられた状況の中で最高の見た目と操作性を実現するという意味での品質です。どちらも「品質」という言葉で表現できるものの、見ている方向は大きく異なります。 品質に対する捉え方の違いを考える上で スターバックスの日本サイトと、米国サイトは良い比較になります。いずれもレスポンシブ Web サイトですが、スマートフォンとデスクトップで見た目を大きく変えている日本サイトに対して、米国のアプローチは極めてシンプルです。アイコンの使い方やグラフィックも日本語版のほうがバラエティに富んでいますし、ナビゲーション
「JIS X 8341-3」対応のPMとして思うこと
2016年のウェブアクセシビリティの営業状況 この記事は、Web Accessibility Advent Calendar 2016の22日目の記事です。 2016年は、2015年に比べるとお客様からウェブアクセシビリティのご相談をいただくことが5倍以上、多かったです。 これは「障害者差別解消法」「障害者雇用促進法」や「みんなの公共サイト運用ガイドライン」の影響だけでなく、ウェブアクセシビリティはWebサイトの効果を最大化するために有効だという認知が少しづつ広がってきているんだと思っています。 私はもともとはデザイナー兼コーダーとしてWebサイト制作に従事してきたのですが、近年、ウェブアクセシビリティの営業をすることが多いです。 ちなみに、私は15人くらいの小さな制作会社に所属しています。ウェブアクセシビリティとユーザビリティを強みとしています。 中小企業は強みがないとホントに厳しいと思
安全でアクセシブルなアイコン・フォント
Translation of: Bulletproof Accessible Icon Fonts by Filament Group アイコン・フォントを利用する場合、あらゆるユーザーに適切にアイコンを提供しようとすると、かなり気をつける必要があります。そのフォントが読み込まれなかった時にどうなりますか？@font-faceがまだサポートされていないブラウザーでは？ どうすれば安全に(bulletproofに)アイコン・フォントを利用できるかをこれから解説したいと思います。 効率的で機能的なウェブサイトを制作するという、この終わることのない探求において、ベクター形式のアイコンを提供する手段として、簡便であるフォントを利用することが何度も提案されてきました。対して私達は通常ベクター形式のアイコンとしてSVGをIan Featherがブログ書いたような理由から選んで(また、薦めて)おり、既に
Webページでよく使用されるコンポーネントをアクセシブルに実装するコードのまとめ -Frend
アコーディオンやタブ、ダイアログ、オフ キャンバス、ページ内リンクなど、Webページでよく使用されるコンポーネントをアクセシブルに実装するコードを紹介します。 Frend 実装にあたり Frendのコンポーネントは最小限で、他のスクリプトやCSSの依存はありません。Web標準をプライオリティとして構築されています。 WAI-ARIAに基づき、ARIA属性とイベントバインディングを利用し、ディテールを提供しています。すべてのコンポーネントはキーボードでの操作も可能です。 コンテンツあるいはインタラクションは、それを利用するためのベースラインを保証し、CSSやJavaScriptで拡張している箇所は必ずしもすべてのブラウザで同じように機能しません。しかし、それを利用することに問題はありません。 アクセシブルに実装されたコンポーネント 各ページでは実際のデモとコード、解説が掲載されています。
折り畳み UI のスクリーンリーダー対応 | Accessible & Usable
公開日 : 2015年7月1日 (2023年9月7日 更新) カテゴリー : アクセシビリティ 最近のウェブサイトでは、ユーザーの任意操作 (クリックやタップ) によって、機能やコンテンツを展開する/折り畳むユーザーインターフェース (UI) をよく見かけます。たとえば以下のようなものです。 メガメニュー ハンバーガーアイコン (押すとメニューが展開表示される) 虫眼鏡アイコン (押すと検索窓が出現する) アコーディオン これらの UI は当然アクセシビリティが担保されるべきで、キーボードによる操作 (Tab キーでフォーカスを当てて Enter キーで展開/折り畳みを実行する) が可能だったり、スクリーンリーダー (音声読み上げ) でも利用可能であることが求められます。 特にスクリーンリーダーでの利用に向けては、一連のインタラクションを完遂するうえで手掛かりとなる情報がすべて音声によって
ReactとWAI-ARIAでアクセシブルなアコーディオンUIを実装してみた / masuP.net
React の手習いに開閉式のいわゆるアコーディオンUIを実装してみましたので備忘録。 Javascript, ES2016, React, WAI-ARIA とも確信を持ってるわけではなく、いずれも調べながらの実装なので、マサカリツッコミやアドバイス歓迎です。 要件 アコーディオンUIは、コンテンツの表示トリガー（アコーディオンヘッダー）とコンテンツ（アコーディオンパネル）がグルーピングされたものが（主に縦方向に）並んでいるものを指していることが多いと思いますが、とりあえず次の要件で実装しました。 アコーディオンヘッダーをクリックでアコーディオンパネルの開閉を切り替え アコーディオンパネルの開閉の初期状態を設定可能 すべて開く / すべて閉じる ボタンの実装（ボタンを表示させるかは選択可能） フォーカスマネジメントする（隠れているアコーディオンパネル内の要素はフォーカスされない） キーボ
aria-selected – when (not) to use it
Making websites accessible for everybody can be a really tough job, especially these days when we are going for custom markup solutions. I'm happy that the #a11y (short for accessibility) topic gains more and more interest recently, because #a11y is nothing nice to have, but as James Williamson tweeted today: The biggest misconception about accessibility is that by adding it you're doing somebody
WEB+DB PRESS Vol.95 特集1の感想
2016年11月3日 著 前回、WEB+DB PRESS Vol.95について覚え書きした時点では、特集1「［実装例でわかる！］実践アクセシビリティ 読み上げ，タッチ，キーボードetc. 多様な操作に対応」はパラパラ眺めた程度だったのですけど、AccSellポッドキャスト第104回：「それではただいまより開封したいと思います」で取り上げられたのを機に、ちゃんと読み終えての感想を書いておくなど： 冒頭の記述で、デバイスや環境に違いがあっても、誰もが同じように情報にアクセスできること。それがWebにおけるアクセシビリティの目的です。の同じようにという言い回しがどうも気になりました。間違っている、というわけではないけれど......結果として同等の情報が得られるなら、アクセスの手段は違って良い（それこそ視覚的にであれと聴覚的にであれ）と思っているので。 p.22「障害者・高齢者だけが対象？」で、
WAI-ARIA はじめの一歩。サンプルソースで学ぶ WAI-ARIA 導入方法
WAI-ARIA をマークアップに取り入れるはじめの一歩として、まずは WAI-ARIA を既存のマークアップに取り入れる際に、扱いやすい項目についてピックアップしつつ、それぞれのサンプルソースを挙げながら紹介します。 この記事は、Web Accessibility Advent Calendar 2013、4日目の記事です。ベタな内容なのでもしかすると他の方とかぶるかもしれませんが、気にせずいきます。 とはいっても、WAI-ARIA の仕様をすべて詳細に取り上げるのは大変なので、まずは WAI-ARIA を既存のマークアップに取り入れる際に、扱いやすい項目についてピックアップしつつ、それぞれのサンプルソースを挙げながら、紹介してみたいと思います。まだ WAI-ARIA をマークアップに取り入れたことがない方が、初めて使うきっかけになれば幸いです。 WAI-ARIA の仕様は下記にあります
WAI-ARIA をマークアップに取り入れたシンプルなタブ
2015年はアクセシビリティに関わる案件をやったりしていたので、特に WCAG 2.0 やらの対応が必要とは言われてない案件でも意識するようになったりしました。 そんな中で、タブ実装が必要な案件が有ったので、WAI-ARIA をマークアップに取り入れたタブを実装してみました。 せっかくやってみたので、今回は機能自体はとてもシンプルだけど、WAI-ARIA をマークアップに取り入れたアクセシブルなタブを紹介するです。 「WAI-ARIA ってなにそれ？おいしいの？」みたいな方や「単純にシンプルなタブを使いたい！」って方でも使えると思います。 見た目は一切整えてないのでひどいもんですが、以下がサンプルになります。 JSは aria-hidden、aria-selected の値を変えるのに使っているだけなので、マークアップも自由度が高いですし、CSSで好きにデザインを当てる事ができます。 カッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
Simple Accessible Accordion In Vanilla JS - A11y-Accordion
Frend — Accordion
アクセシブルなタブを実装してみた | アクセシビリティ | Horic Design