Web accessibility

REL:

https://www.slideshare.net/nozomisawada969/waiaria-72900338

ウェイ・アリア　ｰ>　要素と属性を追加する仕様

アクセシブルではないマークアップに対して、WAI-ARIAの何を足せばアクセシブルになる？

🚩 なぜ仕様を追加する必要があるか？

–> HTMLはもともと文章をマークアップするための言語

  • js/cssなどで複雑になったWebアプリの構造
  • 「何が・いつ・どう」変化したかという情報
    –> HTMLの要素や属性だけでは表現しきれない

—>　WAI-ARIAの定義を付加（role属性、aria-xxx属性、tabindex属性）　構造・変化をUA（User Agent）に伝えられるようになる

🚩 WAI-ARIAのイメージ

1
2
3
4
5
6
7
<div>動画プレーヤー</div>

--> role属性の追加
<div role="dialog">動画プレーヤー</div>

--> UAが解釈するイメージ
<dialog>動画プレーヤー</dialog>

🚩 WAI-ARIAを使うと何がかわるのか

  • UAが正しく解釈し、正しく振る舞うようになる
  • スクリーンリーダー利用者に正しく伝わる
  • CSS/JSを使った開発がラクになる

🚩 role属性

  • 要素の意味や役割を定義するための属性
  • 既存の要素の役割も上書きして変更できる

—>　HTMLに元々ある要素は役割を変えずそのまま使うが原則！

🚩 WAI-ARIAで定義されている仕様

  • role属性
  • aria-xxx属性
  • tabindex属性

🚩 aria-xxx属性

  • オブジェクトの状態(state)や性質/特性(property)を示す属性
  • ロールとの組み合わせで、ユーザーに「何が・いつ・どう」変化したかを通知できる

🚩 グローバル・ステート＆プロパティ属性

  • すべてのHTML要素に使用可
  • すべてのロールに使用可
    (aria-describedby, aria-hidden, aria-label, aria-labelledby など)

🚩 関係属性

  • 要素と要素の関係を明確に示すために使用される属性
  • 文章構造からだけでは解釈しにくい関係性を定期
    (例：マークアップ順ではない読み上げ順)
    (aria-details, aria-labelledby, aria-rowcount など)
    注意点
  • aria-labelledby属性は複数指定可能
  • ラベルを画面に表示できる場合: aria-labelledby
    ラベルを画面に表示できない場合: aria-label
  • 短いラベルの場合: aria-labelledby
    文章で説明する場合: aria-describedby

🚩 ウィジェット属性

  • aria-hidden属性の使用は、見えているコンテンツを支援技術（スクリーンリーダーなど）から隠すことで、支援技術者とそうでない利用者の体験価値が同等になる場合に限る（訳:気軽に隠すなよ）

🚩 tabindex属性

  • インタラクティブなオブジェクトはすべてフォーカス可能にしなければいけない
  • 要素にフォーカスを与える属性としてtabindex属性を使用(tabindex自体はHTMLの仕様)

  • HTML5ではすべての要素にtabindexの指定が可能

  • tabindex=’正の整数’ ：tabキーの移動順

  • tabindex=’0’ :フォーカス可能(順序はマークアップ順)
  • tabindex=’-1’ ：フォーカス不可

🚩 まとめ

大切なのはセマンティクス
-> 要素の意味
-> 適切な要素が使えない時にWAI-ARIA

🚩 Example without aria-label

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<p>
  This is a test paragraph.
  <a href="example.html">Read moe <span class="screen-reader-text">this test paragraph</span></a>
</p>

<style>
.screen-reader-text {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    margin: -1px;
    clip: rect(0,0,0,0);
}
</style>

🚩 Example with aria-label

1
2
3
4
<p>
  This is a test paragraph.
  <a href="example.html" aria-label="read more this test paragraph">Read moe</a>
</p>

アクセシビリティとは、特にWebサイト上における、情報やサービスへのアクセスのしやすさのことである。 アクセシビリティは、高齢者や障害者なども含めたあらゆる人が、どのような環境（うるさい場所や、暗い場所、逆に明るい場所など）においても柔軟にWebサイトを利用できるように構築することを考慮する場合に使われる。

  1. ページの内容がわかるページタイトルを記述する
  2. 見出しやリストなどの文章構造をマークアップする
  3. リンクテキストはリンク先がわかる文言にする
  4. 情報を伝えている画像に代替テキストを提供する
  5. 情報を伝える色の使い方に注意する
  6. ユーザーがコンテンツを拡大表示できるようにする
  7. キーボードだけでも操作できるようにする
  8. フォームコントロールのラベルや説明をマークアップする
  9. エラーメッセージではエラー箇所と修正方法を明示する
  10. 動画にキャプション（字幕）を提供する

<figure>タグは、図表であることを示す際に使用します。 ここで言う図表とは、文書の本文（メインフロー）から参照されるようなイラスト・図・写真・ソースコードなどのことです。

図表は本文から参照される内容ですが、本文に影響を与えることなく、ページの端・専用ページ・別表にして切り離すことができます。

必要ならば、図表にキャプションや注釈を付けても良いでしょう。 図表にキャプションを付ける場合には、<figcaption>タグを使用します。

🚩 Indicate the current item

Indicate the current itemreplace anchor with span or use the aria-current="page" attribute to indicate the current page in the menu

🚩 Example

Ref:

https://www.youtube.com/watch?v=z8xUCzToff8

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
"First name, edit text"
<label>
  First name:
  <input type="text">
</label>


"Main Menu, button"
<button id="hamburger"
  aria-label="Main Menu">
</button>


"Men's Outerwear, Shop Now, button"
<h2 id="lbl">Men's Outerwear</h2>
<button
  id="btn"
  aria-labelledby="lbl btn">
  Shop Now
</button>