デジタル庁サイトのアクセシビリティはすごい
はじめに
デジタル庁のサイト、見たことありますか？
ここでは「webアクセシビリティ導入ブック」が公開されています。
PDFで58ページとかなりしっかりした内容で、もちろん無料で読むことができます。
本記事ではデジタル庁サイトのアクセシビリティを実例として見ていこうと思います。
ちなみにLightHouseで確認したアクセシビリティの結果は100点です。お見事👏
デジタル庁サイトのアクセシビリティ
1.わかりやすいテキストでの表示
これはサイトのヘッダー部分です。
虫眼鏡アイコンの横には「検索」、ハンバーガーメニューアイコンの横には「メニュー」の文字が表示されています。
この記事を読んでいるようなデジタルリテラシーの高い方にとってはこれらのアイコンは馴染み深いかもしれませんが、
アイコンの意味が一目でわからない=使いにくい と感じる方もいます。
これは検索画面です。
パンくずリストには「現在位置」、絞り込み機能には「検索対象」「表示件数」など、テキストでの説明が必ずされています。
ここまで丁寧な表記がされているサイトはなかなかないのではないでしょうか。
2.拡大しても崩れないデザイン
これは画面表示を200%にした際の表示です。
全く崩れていません。美しい・・！
視力の弱い人にとって拡大しても崩れないデザインは必須ですが、デジタル庁サイトでは綺麗なレイアウトが保たれています。
3.画像のalt属性
画像のalt属性、適当につけていませんか？
少しわかりにくいですが、こちらの画像のalt属性には以下が設定されています。
テーブルを挟んで左側に平大臣、右側にマッツ公共事業近代化担当大臣が座って会談している写真。テーブルの中央には、日本とベルギーの旗が写っている。
このようにどの画像にも1~3文の丁寧なテキストが付与されています。
alt属性にはスクリーンリーダーで読み上げた際に、画像と同じ役割を果たすテキストを付与することが望ましいです。
余談ですが、スクリーンリーダーでは「display: none;」「visibility: hidden;」の要素を読み上げてくれません。
代わりにvisually-hiddenクラスを適応することで、表示からは隠れるがスクリーンリーダーでは読み上げてくれる要素を作成できます。
4.キーボードのみで全ての操作が可能
実際に操作してみるとわかりますが、enterでの画面操作やタブキーでの要素の移動が完璧に行えます。
普段マウス操作がほとんどの人にとっては見落としがちですが、開発者ツールを使用したり実際にキーボードで操作するなどし、体験することが重要です。
特にtabindex属性でタブキーの操作に順序崩れが発生しないことや、モーダルやダイアログ表示の際のキーボード操作には要注意です。
5.背景と文字のコントラスト比が保たれている
どのテキストも基本の背景とのコントラストが保たれた比率になっています。
これは視覚障害の人や色覚特性がある人（特定の色を見分けるのが難しい人）にとって重要なアクセシビリティの一つです。
ガイドブックによると、日本人男性の20人に1人は色覚特性があると言われているそうです。
最後に
この記事を書いたのは、マイナポータルを使用した際に「行政のアプリでこんなに使いやすいUIがあるんだ」と驚いたのがきっかけです。
個人的に、このデジタル庁サイトもシンプルながらこだわりの見えるUIがかなり好みです。
調べてみるとデジタル庁ではデザインシステムも公開されていました。
なんとFigmaまで・・！
デザインの「理由」が細かく言語化されています。すごいです。
デジタル庁、ありがとう！！
Discussion
細かいですが
display: hidden;という指定は正しくないので、display: none;とvisibility: hidden;を混同されているのではと思います（どちらもスクリーンリーダーで読み上げなくなるという意味では同じですが）仰る通り、混同しておりました…！ご指摘ありがとうございます。
修正させていただきました🙌🏻