Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WAI-ARIAウェイウェイ会

shikakun
December 13, 2022

 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

shikakun

December 13, 2022
Tweet

More Decks by shikakun

Other Decks in Design

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