WAI-ARIAウェイウェイ会

2022/12/13にGMOペパボ株式会社で開催した社内勉強会「WAI-ARIAウェイウェイ会」の資料です。

# 資料のなかで紹介したURL
WAI-ARIA 1.2 日本語訳
https://momdo.github.io/wai-aria-1.2/
ARIA Authoring Practices Guide Patterns
https://www.w3.org/WAI/ARIA/apg/patterns/
HTML解体新書 仕様から紐解く本格入門 (2022)

https://www.borndigital.co.jp/book/25999.html
コーディングWebアクセシビリティ (2015)

https://www.borndigital.co.jp/book/5318.html
MDN「WAI-ARIAの基本 - ウェブ開発を学ぶ」

https://developer.mozilla.org/ja/docs/Learn/Accessibility/WAI-ARIA_basics
CodeGrid「WAI-ARIAを活用したフロントエンド実装 | 第1回 role属性、aria属 性の基礎知識」 (2016)

https://www.codegrid.net/articles/2016-wai-aria-1/
Inhouse Principles
https://design.pepabo.com/inhouse/about/
No ARIA is better than Bad ARIA
https://waic.jp/docs/2019/NOTE-wai-aria-practices-1.1-20190207/#no_aria_better_bad_aria

Transcript

1. WAI-ARIAウェイウェイ会 Dec 13, 2022
2. WAI-ARIA（ウェイ・アリア）とは、ウェブ アクセシビリティを推進する組織である Web Accessibility Initiative（WAI）が発行 する文書「Accessible Rich Internet Appli- cations」の略称で、 です。 HTMLやSVGなどマー クアップ言語の要素に対して、支援技術に 伝えるべき情報を追加する技術仕様 この資料におけるWAI-ARIAに関する説明やARIA属性の例は、以下の書籍を参考にしました。 太田良典, 中村直樹「HTML解体新書 仕様から紐解く本格入門」ボーンデジタル, 2022 この時間では、みんなでWAI-ARIAの基礎を 確認し、WAI-ARIA 1.2 の 参考日本語訳 を利 用しながらARIA属性の種類を眺めつつ、ペ パボのサービスをよりアクセシブルにする べく、ウェイウェイ情報交換したいです。 この時間の目的
3. WAI-ARIAの基礎知識
4. role属性の例 aria-*属性の例 < aria-required= > input "true" < role= > div "navigation"
5. WAI-ARIAが定義する属性（ARIA属性）の分類 & ロー# & ステー & プロパティ role= aria-disabled= aria-required= "navigation" "true" "true"
6. ロール 要素の役割を表現する この要素が何であるのか、何をするものかという情報を付 与する属性。role属性の値として指定します。 （以下の一覧からは、コンテンツ制作者が指定できない 「抽象ロール」を省略しています） alert alertdialog application article banner button cell checkbox columnheader combobox complementary contentinfo definition dialog directory document feed figure form grid gridcell group heading img link list listbox listitem log main marquee math menu menubar menuitem menuitemcheckbox menuitemradio navigation none note option presentation progressbar radio radiogroup region row rowgroup rowheader scrollbar search searchbox separator slider spinbutton status switch tab table tablist tabpanel term textbox timer toolbar tooltip tree treegrid treeitem role=" " ***
7. ステートとプロパティ 要素の現在の状態、性質や特性を表現する ステートは、現時点のその要素の状態を表す属性。プロパ ティは、たとえば入力が必須の項目であることや、追加の 説明を与えたり、他の要素との関連を示すなど、性質や特 性を表現する属性。aria-*属性として指定します。 aria-activedescendant aria-atomic aria-autocomplete aria-busy aria-checked aria-colcount aria-colindex aria-colspan aria-controls aria-current aria-describedby aria-details aria-disabled aria-dropeffect aria-errormessage aria-expanded aria-flowto aria-grabbed aria-haspopup aria-hidden aria-invalid aria-keyshortcuts aria-label aria-labelledby aria-level aria-live aria-modal aria-multiline aria-multiselectable aria-orientation aria-owns aria-placeholder aria-posinset aria-pressed aria-readonly aria-relevant aria-required aria-roledescription aria-rowcount aria-rowindex aria-rowspan aria-selected aria-setsize aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext aria- =" " *** ***
8. ARIA属性の利用シーン 支援技術へ情報を補足する < type= > </ > button button "button" 閉じる < type= aria-label= > </ > button button "button" "閉じる" × アイコンボタンなど、視覚的に意味を持ち、かつテキスト を持たない要素にはaria-label属性を使ってラベルをつけ ることができます。しかし、そもそも支援技術のユーザー に限らず伝えるべき情報ではないか検討も必要です。 画面には「×」と表示されるが、スクリーンリーダーでは「閉じる」と読み上げられる でもラベルは「閉じる」のほうが伝わるのであれば、そもそもすべてのユーザーへ伝えるべき
9. ARIA属性の利用シーン 支援技術に不要な情報を隠す .icon { width: ; height: ; color: } 1em 1em ... < class= aria-hidden= > </ > span span "icon" "true" □ 冗長な情報はaria-hidden属性を使って、支援技術のユー ザーがアクセスできないようにすることもできます。要素 を隠しても意味が伝わることが前提ですが、そもそもマー クアップで表現することなのか検討も必要です。 画面には「□」と表示されるが、スクリーンリーダーでは読み上げない でも装飾などのスタイリングについては、そもそもCSSで表現するべき
10. HTML要素の機能と ARIA属性の関係 < > </ > button button 送信 < href= role= > </ > a a "#" "button" 送信 HTML要素の多くはセマンティクスを持っていて、もとも と持つロールをネイティブロールと呼びます。role属性で 異なるロールを指定するとネイティブロールは上書きされ ますが、機能が上書きされるわけではありません。 スクリーンリーダーでは「ボタン」と読み上げられるが、フォームは送信されない button要素の挙動を期待する場合は、button要素としてマークアップする必要がある
11. Inhouse Principles https://design.pepabo.com/inhouse/about/ より資料用に一部改変 マテリアル・オネスティ 直訳すれば「素材に対して正直」という意味です。物事をデザインするに当たっ て、その素材の性質やあり様に逆らわず活かしてデザインする、という昔からあ る考え方です。これは今日のデジタル環境においては「環境に柔軟に適応する」 という風に読み替えることもできます。成果物のユーザーや受け手は様々な環境 （OSやブラウザやメディア）の中でそれに接することになります。このときプ ロダクトやコンテンツがあまりにも環境のルールやマナーから外れたものであれ は不自然に感じてしまったり、普段の操作ができずに使いにくいと感じてしまう 恐れがあります。なるべく環境に対して自然な形でデザインし、機能やコンテン ツの効用を最大化します。
12. ARIA属性を利用するときに気をつけたいこと q HTMLのネイティブな機能を利用すB q ネイティブな機能を使うならARIA属性は併用しなI q ネイティブなセマンティクスをむやみに変更しなI q 実際に支援技術を使って確認する
13. No ARIA is better than Bad ARIA https://waic.jp/docs/2019/NOTE-wai-aria-practices-1.1-20190207/#no_aria_better_bad_aria
14. ARIA属性の種類を知る
15. WAI-ARIA 1.2 日本語訳 https://momdo.github.io/wai-aria-1.2/ 参考情報として公開されているWAI-ARIAの日本語訳。 ARIA属性のロールの一覧は 5.4 ロールの定義 に、 ステートとプロパティの一覧は 6.7 ステートおよびプロパ ティの定義（すべてのaria-*属性） に掲載されている。
16. ARIA Authoring Practices Guide Patterns https://www.w3.org/WAI/ARIA/apg/patterns/ WAIが公開している、アクセシビリティセマンティクスを 適用する方法を実装例とともに紹介するウェブサイト。 「Patterns」ではデザインパターンごとに、「Index」で はARIA属性ごとに探すことができる。
17. もっと詳しく HTML解体新書 仕様から紐解く本格入門 (2022)
 コーディングWebアクセシビリティ (2015)
 WAI-ARIAに限らずマークアップのリファレンスとして手元にぜひ MDN「WAI-ARIAの基本 - ウェブ開発を学ぶ」
 オンラインで参照できて信頼できる貴重なリソース CodeGrid「WAI-ARIAを活用したフロントエンド実装 | 第1回 role属性、aria属 性の基礎知識」 (2016)
 NVDA（スクリーンリーダー）での読み上げの例が聴けます