👂

デジタル庁のアクセシビリティ覗いてみた

o_ken

2023/06/21に公開

はじめに

先日、↓の記事がバズってましたね。

こちらの記事は、主に見た目の部分と使用技術についての記事でした。
今回は、実際に中身（主にアクセシビリティ）はどうなっているんだろうと気になったので調べてみました。

デジタル庁のウェブアクセシビリティ導入ガイドブック

以下のpdfはデジタル庁のウェブアクセシビリティ導入ガイドブックになります。

デジタル庁のウェブサイトや情報システムの掲げているミッションが記載されています。

デジタル庁のミッション
「誰一人取り残されない、人に優しいデジタル化を。」

つまり、全人類を対象としたwebサイトを作るということですね。

このガイドブックは基礎的なことや達成すべきことまで書かれているので、アクセシビリティを気にしてwebサイトを開発する際には、エンジニアだけではなくデザイナーさんもPMさんも含めて、まず初めに読むことをおすすめします！

ウェブアクセシビリティが確保できている状態

このウェブアクセシビリティ導入ガイドブックでは、以下の４項目を「ウェブアクセシビリティが確保できている」状態としています。

目が見えなくても情報が伝わる・操作できること
キーボードだけで操作できること
一部の色が区別できなくても情報が欠けないこと
音声コンテンツや動画コンテンツでは、音声が聞こえなくても何を話しているかわかること

そのため、今回は主にキーボード操作とmacbookのVoiceOverとHTML5 Outlinerを使用して確認してみました。

実際にどうなっているのか

実際にどのようなアクセシビリティを使用しているか（どのようなタグやWAI-ARIAを使用しているか）をいくつかピックアップしていきます。

.u-visually-hiddenのCSSは読み上げ用で、表示はしたくないが読み上げはしてほしいときに使用しているものになります。

.u-visually-hidden {
    border: 0!important;
    clip: rect(0,0,0,0)!important;
    height: 1px!important;
    margin: -1px!important;
    overflow: hidden!important;
    padding: 0!important;
    position: absolute!important;
    white-space: nowrap!important;
    width: 1px!important;
}

各ページ共通で左上に存在するデジタル庁ロゴなどで使用したりしています。

<a class="header__title" href="/">
  <img src="/assets/images/Digital_Agency_Logo_Black_JA.svg" alt="デジタル庁">
  <span class="u-visually-hidden">ホーム</span>
</a>

「ホーム」と定義することにより、「このデジタル庁ロゴがリンクでありホームに戻る」ということ認識させることができます。

aria-label

デジタル庁のサイトはaria-label属性を多く使用しています。
aria-label属性を使用することにより、どのような役割を持つかを明示的にし、読み上げも可能にしています。
右下に固定である「トップに戻る」なども、aタグにaria-label="トップに戻る"とすることにより、読み上げを可能にしています。

パンくずリスト

たとえば、パンくずリストの「>」（svgアイコン）はaria-label属性が「の中の」となっています。
矢印キーで進めていくと、「ホーム」「の中の」「新着・更新情報」などのように読み上げられます。

<ol class="breadcrumbs__list">
  <li class="breadcrumbs__item">
    <a class="link" href="/">
      ホーム
    </a>
    <svg class="breadcrumbs__separator" role="img" aria-label="の中の">
      <use href="/assets/images/icons/breadcrumbs_separator.svg#breadcrumbs_separator"></use>
    </svg>
  </li>
  <li class="breadcrumbs__item">新着・更新情報</li>
</ol>

グローバルメニュー

グローバルメニューやパンくずリストのnavタグにaria-label属性をつけています。
この役割としてはナビゲーショングループを区別するものとなっています。

nav 要素がページ上で複数回使用されている場合は、aria-label 又は aria-labelledby 属性を使用してナビゲーショングループを区別する。

また、グローバルメニューで現在のページのaria-label属性には、「ページ（リンク）名」だけではなく、「ホーム現在位置」のように「現在位置」を入れることによってどのページにいるかが分かるようにしています。

<a class="link--inMenu link--current" aria-label="ホーム 現在位置" href="/">
  ホーム
</a>

https://www.digital.go.jp/news や https://www.digital.go.jp/press/　などのカテゴリーやページネーションが存在するページは「新着・更新情報すべて現在位置 (1/135)」のように「ページ名」「カテゴリー」「現在位置」「ページ数」を入れることにより、どのページのどのカテゴリーの何ページ目なのかが動的に変わるようなっています。

<a class="link--inMenu link--current" aria-label="新着・更新情報 すべて 現在位置 (1/137)" href="/news/">
  新着・更新情報
</a>

svg

リンクアイコンの場合、aタグやbuttonタグにaria-label属性をつけることにより、リンクアイコンでも読み上げを可能にしています。
その際、svgタグ自体にはaria-hidden='true'をつけることによって読み上げ防止しています。

また、role属性にimgを付与し、aria-label属性とセットで使用することによって、imgタグとaltの関係を示しています。

例）検索アイコン

<a class="navigationBody__button--link" href="/search/" aria-label="検索画面に移動">
  <span class="navigationBody__icon">
    <svg aria-hidden="true" class="icon icon--24px" role="img">
      <use href="/assets/images/icons/search_24px.svg#search_24px"></use>
    </svg>
  </span>
</a>

ページネーション

ページネーションの矢印のaria-label属性には、それぞれ「最初のページ」「前のページ」「次のページ」「最後のページ」などが付与されています。
また、現在のページには、aria-current="page"が付与されているので、「現在のページ」と読み上げられます。

最初のページ

<a class="pager__button" aria-label="最初のページ" href="/press/">

aria-current="page"

<span aria-current="page">4</span>

ハンバーガーメニュー

ハンバーガーメニューには、aria-label属性だけではなく、aria-haspopup属性を付与しています。
これにより、「メニューポップアップ」と読み上げられます。

<button class="navigationBody__button" type="button" aria-label="メニュー項目を開く" aria-haspopup="true">

カテゴリー選択

https://www.digital.go.jp/news や https://www.digital.go.jp/press/　などのページにあるカテゴリー選択はselectタグではなくinputタグ（role="combobox"）でできています。
展開後のプルダウンは見ることができない（頑張れば見れるかも）ですが、role="option"を使用して構築されてるかと思います。
role="combobox"は、機能的にはselectタグと同じですが、このセレクトボックスがコンボボックスであること、その中にoptionsを用いることで選択中かそうでないか、リスト何項目あるかなどを読み上げることができます。
また、tabindex属性をつけることにより、キーボードでの操作を可能にしています。

<input
  id="react-select-selectbox-input"
  tabindex="0"
  inputmode="none"
  aria-autocomplete="list"
  aria-expanded="false"
  aria-haspopup="true"
  aria-label="カテゴリ選択"
  role="combobox"
  aria-readonly="true"
  class="css-1hac4vs-dummyInput"
  value=""
/>

aria-live

DOM上でカテゴリー選択のDOMの上に、普段は表示されていないですが、aria-live属性を使用したspanタグが存在しています。
aria-live属性は指定した要素に変更があった際に支援技術ユーザーに通知することを可能にします。
フォームのエラーなどを適切なタイミングで読み上げることができたり、SPAなどの動的なコンテンツの変更があった際に読み上げることができたりします。
また、こちらはaria-atomic属性やaria-relevant属性と一緒に使われることが多いです。

おわり

デジタル庁のサイトを一通り眺めて、単純に、h1やh2、h3など、その他タグの使い方が適切だと思いました。
ページタイトルとh1が揃っていたり、altがきちんと文章で説明されていたり、上記のように、aria-label属性がきちんと設定されていたり、それぞれの要素の役割が明確になっています。

また、名前にはrubyタグを使用して、ふりがなをrtタグにすることによって読み上げを回避していたりします。（正しいふりがなは読み上げられていなさそう。）

<ruby class="profile__ruby">
  河野 太郎
  <rt class="profile__rt">こうの たろう</rt>
</ruby>

デジタル庁サイトの河野太郎のプロフィール

基本的には普通にコーディングしていれば、ある程度アクセシビリティを達成することができたサイトが出来上がっているか思います。（体感7、8割くらい）
ここでいう普通にとはセマンティックなコーディングのことで、何でもかんでもdivタグで実装するとかそういうことではありません。
HTMLだけで補うことができない残りの2,3割くらいをWAI-ARIAで意味づけしていく形になるかと思います。

また、デジタル庁のサイトでも現時点で認識している課題があるそうで、それについて↓のページに書いてあるので是非見てみてください。

また、実装する際のコスト（テストなど）についてもウェブアクセシビリティ導入ガイドブックの中に以下のような記載があります。

正式な試験には時間がかかる

ウェブアクセシビリティの試験は、数百個のチェックリストを 1つ 1つ確認するというと
ても手間のかかる作業です。そして、それを対象ページ数とデバイス数だけ繰り返す必要が
あります。そのため、100ページ程度のサイトで正式な試験を行うと 1ヶ月弱（改修対応まで
含めると 2ヶ月から 3ヶ月）はかかります。試験を外部試験機関に委託した場合、その費用は 50
万円程度から 100万円程度まで、システムの規模に応じて必要となります。

100ページのサイトは割と大きめなサイトになるかと思いますが、実際に見積もりをする際はこのことは少し頭に入れておいても良いかもしれません。

まずは、今回私が行ったように、実際にキーボードで操作し、VoiceOverを起動するところから始めてみると良いかと思います。
また、ウェブアクセシビリティ導入ガイドブックにチェックツールが記載されているので実際に使用してみるのも良いかと思います。

chot Inc. tech blogPublication

ちょっと株式会社（chot-inc.com）のエンジニアブログです。フロントエンドエンジニア募集中！カジュアル面接申し込みはこちらから chot-inc.com/recruit/iuj62owig