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
   

   View Slide

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属性の種類を眺めつつ、ペ
   パボのサービスをよりアクセシブルにする
   べく、ウェイウェイ情報交換したいです。
   この時間の目的
   

   View Slide

3. WAI-ARIAの基礎知識
   

   View Slide

4. role属性の例
   aria-*属性の例
   < aria-required= >
   input "true"
   < role= >
   div "navigation"
   

   View Slide

5. WAI-ARIAが定義する属性（ARIA属性）の分類
   & ロー#
   & ステー
   & プロパティ
   role=
   aria-disabled=
   aria-required=
   "navigation"
   
   "true"
   
   "true"
   

   View Slide

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=" "
   ***
   

   View Slide

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- =" "
   *** ***
   

   View Slide

8. ARIA属性の利用シーン
   
   支援技術へ情報を補足する
   < type= > >
   button button
   "button" 閉じる
   < type= aria-label= > >
   button button
   "button" "閉じる" ×
   アイコンボタンなど、視覚的に意味を持ち、かつテキスト
   を持たない要素にはaria-label属性を使ってラベルをつけ
   ることができます。しかし、そもそも支援技術のユーザー
   に限らず伝えるべき情報ではないか検討も必要です。
   画面には「×」と表示されるが、スクリーンリーダーでは「閉じる」と読み上げられる
   でもラベルは「閉じる」のほうが伝わるのであれば、そもそもすべてのユーザーへ伝えるべき
   

   View Slide

9. ARIA属性の利用シーン
   
   支援技術に不要な情報を隠す
   .icon { width: ; height: ; color: }
   1em 1em ...
   < class= aria-hidden= > >
   span span
   "icon" "true" □
   冗長な情報はaria-hidden属性を使って、支援技術のユー
   ザーがアクセスできないようにすることもできます。要素
   を隠しても意味が伝わることが前提ですが、そもそもマー
   クアップで表現することなのか検討も必要です。
   画面には「□」と表示されるが、スクリーンリーダーでは読み上げない
   でも装飾などのスタイリングについては、そもそもCSSで表現するべき
   

   View Slide

10. HTML要素の機能と
    
    ARIA属性の関係
    < > >
    button button
    送信
    < href= role= > >
    a a
    "#" "button" 送信
    HTML要素の多くはセマンティクスを持っていて、もとも
    と持つロールをネイティブロールと呼びます。role属性で
    異なるロールを指定するとネイティブロールは上書きされ
    ますが、機能が上書きされるわけではありません。
    スクリーンリーダーでは「ボタン」と読み上げられるが、フォームは送信されない
    button要素の挙動を期待する場合は、button要素としてマークアップする必要がある
    

    View Slide

11. Inhouse Principles https://design.pepabo.com/inhouse/about/ より資料用に一部改変
    マテリアル・オネスティ
    直訳すれば「素材に対して正直」という意味です。物事をデザインするに当たっ
    て、その素材の性質やあり様に逆らわず活かしてデザインする、という昔からあ
    る考え方です。これは今日のデジタル環境においては「環境に柔軟に適応する」
    という風に読み替えることもできます。成果物のユーザーや受け手は様々な環境
    （OSやブラウザやメディア）の中でそれに接することになります。このときプ
    ロダクトやコンテンツがあまりにも環境のルールやマナーから外れたものであれ
    は不自然に感じてしまったり、普段の操作ができずに使いにくいと感じてしまう
    恐れがあります。なるべく環境に対して自然な形でデザインし、機能やコンテン
    ツの効用を最大化します。
    

    View Slide

12. ARIA属性を利用するときに気をつけたいこと
    q HTMLのネイティブな機能を利用すB
    q ネイティブな機能を使うならARIA属性は併用しなI
    q ネイティブなセマンティクスをむやみに変更しなI
    q 実際に支援技術を使って確認する
    

    View Slide

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
    

    View Slide

14. ARIA属性の種類を知る
    

    View Slide

15. WAI-ARIA 1.2 日本語訳
    https://momdo.github.io/wai-aria-1.2/
    参考情報として公開されているWAI-ARIAの日本語訳。
    
    ARIA属性のロールの一覧は 5.4 ロールの定義 に、
    
    ステートとプロパティの一覧は 6.7 ステートおよびプロパ
    ティの定義（すべてのaria-*属性） に掲載されている。
    

    View Slide

16. ARIA Authoring Practices Guide
    
    Patterns
    https://www.w3.org/WAI/ARIA/apg/patterns/
    WAIが公開している、アクセシビリティセマンティクスを
    適用する方法を実装例とともに紹介するウェブサイト。
    「Patterns」ではデザインパターンごとに、「Index」で
    はARIA属性ごとに探すことができる。
    

    View Slide

17. もっと詳しく
    HTML解体新書 仕様から紐解く本格入門 (2022)

    コーディングWebアクセシビリティ (2015)

    WAI-ARIAに限らずマークアップのリファレンスとして手元にぜひ
    
    MDN「WAI-ARIAの基本 - ウェブ開発を学ぶ」

    オンラインで参照できて信頼できる貴重なリソース
    
    CodeGrid「WAI-ARIAを活用したフロントエンド実装 | 第1回 role属性、aria属
    性の基礎知識」 (2016)

    NVDA（スクリーンリーダー）での読み上げの例が聴けます
    

    View Slide