🗂

Webアクセシビリティの実践

2022/06/26に公開

CSS

最近、Webアクセシビリティに関して、勉強しました！
その中でもaxe DevToolsを使用して、Webアクセシビリティの対応をしたことを一部ご紹介させていただきます。

ドキュメントにはmainランドマークが1つ含まれていなければなりません

ページ内では、1つmainを使うことを推奨されています。
mainは、文書の主要なコンテンツを示すために使用します。

参考資料

修正方法

以下のようにmainを定義します

<main>
  <h1>TOP</h1>
  <div>こんにちは</div>
</main>

画像には代替テキストがなければなりません

概要

<img>要素には、代替テキスト、またはnoneまたはpresentationのロールを追加する必要があります。

alt属性

alt属性
画像表示の代替テキスト情報を設定できます。ユーザーだけでなく、検索エンジンも画像を認識する際に使用されています。

代替テキストを書くときは、画像の内容と目的を全盲(視力がないこと)のユーザーに伝えることを目的としているため、具体的かつ簡潔に説明する必要があります。

補足

presentationロールを指定することで、要素がもつセマンティクスロールを上書きして、特にセマンティクスを持たない要素として認識されるようになります。
ただ、そこまで使われることはないみたいです。（どんなときに使うか分かる方いましたら教えてください。）

参考資料

修正方法

<img src="logo192.png" alt="reactのロゴ"/>

コントラスト比の確保

文字色と背景色に十分なコントラストを確保する必要があります。

例えば、背景とテキストの色のコントラストの比が適正ではない場合、以下のように警告が出ます。

修正方法

// before
<div style={{ backgroundColor: "#E1DCDC", color: "#2864F0" }}>
   こんにちは
</div>

// after
<div style={{ backgroundColor: "#FFFFFF", color: "#2864F0" }}>
   こんにちは
</div>

こちらの比較表を元に修正していきます。
青枠が警告出た組み合わせで、赤枠が適正な組み合わせです。

以下のようにAAのレベルのみを選択すると、適切な組み合わせのみを提示してくれます。

参考資料

ブロックスキップを理解する

スクロールやtabキーでの移動が多くなってしまうときに、直接見たいコンテンツに移動できるようにする必要がある

●やること
見出しを設定する
asideタグでコンテンツに直接移動するリンクを設定する

見本

<main>
<h1>こんにちは</h1>
<nav role="navigation">
  <h2>メニュー</h2>
  <ul>
    <li>
      <a href="#content">コンテンツ一覧</a>
    </li>
    <li>
      <a href="#tag">タグ一覧</a>
    </li>
    <li>
      <a href="#footer">サイト情報</a>
    </li>
  </ul>
</nav>
<aside id="content" aria-label="コンテンツ一覧">
  <h2>コンテンツ一覧</h2>
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
</aside>
<aside id="tag" aria-label="タグ一覧">
  <h2>タグ一覧</h2>
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
</aside>
</main>
<footer id="footer" role="contentinfo">
  <h2>サイト情報</h2>
</footer>

asideタグ

<aside> 要素を使用すると、自動的にセクションが補足 (complementary) ロールを持つことを伝えます。可能であれば、それを代わりに使用することをお勧めします。

mdnでは、ARIAよりもHTMLのasideを利用することを推奨しています

aria-label

文書に複数の補足 (complementary) ランドマークロールや <aside> 要素がある場合は、各ランドマークに aria-label 属性を使用してラベルを付けるか、それらに適切な説明的なタイトルがある場合は、aria-labelledby 属性を使用してそれを指してください。

mdnでは、複数のランドマークロールを使用している場合、aria-labelかaria-labelledbyを追加するように言われているため、aria-labelを設定しました。
それぞれのランドマークの目的をすばやく理解して、判断できるようにする必要があるようです。

Landmarks

特定のランドマークへの移動できるか確認するときに以下の拡張機能を使用します。
option + N + shift キーで上記の赤枠に移動できるか確認する。

まとめ

ほんの一部ですが、webアクセシビリティの対応についてご紹介しました。
個人的にはチーム開発にも取り入れたいと思いました。
しかし、全員がこのwebアクセシビリティを意識して実装するのは、難しい問題でもあるなと感じました。

まずは、eslint-plugin-jsx-a11yを導入してみて、意識せずとも修正できる環境を作ったり、キャッチアップする勉強会等を開催したりして、webアクセシビリティの文化を広げていくのが大事かなと思いました！

また他の記事でも新しい発見、気づきがありましたら共有させていただきます。

ドキュメントにはmainランドマークが1つ含まれていなければなりません

参考資料

修正方法

画像には代替テキストがなければなりません

概要

alt属性

補足

参考資料

修正方法

コントラスト比の確保

修正方法

参考資料

ブロックスキップを理解する

見本

asideタグ

aria-label

Landmarks

まとめ

Discussion