デジタル庁の新しいウェブサイトが Tailwind CSS を使うときのお手本によさそう
- 投稿した日
- 更新した日
- 書いたひと
- Hiratake
「誰一人取り残されない、人にやさしいデジタル社会の実現」 を目指す デジタル庁のウェブサイト に、新たなウェブサイトの試行版へのリンクが追加されていました。
ページを開いてみると、Tailwind CSS が使用されているようでした。
最近採用するウェブサイトやサービスが増えている Tailwind CSS を使うときに、どのようにウェブアクセシビリティを確保するのか。デジタル庁のウェブサイトは、 この課題に対しての 1 つの答えとなるのではないか と思ってます。
デジタル庁の新たなウェブサイトの試行版は、トップページのリンクや右のサイドメニューにあるリンクから移動できます（以下は現行の デジタル庁ウェブサイトのトップページ の画像です）。
見た目は大変シンプルなつくりで、小さな文字が読みづらいユーザに配慮してか全体的に文字のサイズも大きめな印象。ウェブサイトを開こうとしてから実際に画面に描画されるまでにかかる時間も非常に短く、動作も軽やかです。
レスポンシブ対応もされていて、スマートフォンで閲覧しても表示が崩れることもなく大変見やすいものとなっていました。
Google が提供しているウェブサイトの診断ツール「Lighthouse」でチェックしてみても、 当然のように「ユーザー補助」の項目は 100 点満点 となっています。
Tailwind CSS を使うとき（使わないときもそうですが）、 ウェブアクセシビリティの対応で悩むことがわりとあります 。
- SNS とかメニューの開閉ボタンとかのアイコンに、何らかの方法でラベルをつけないといけないと思うけど、
aria-labelやtitleでつけたほうがいいのかな？それとも Screen Readers 用のクラスで対応したほうがいいのかな？ - パソコンで見るとき、キーボードの「TAB キー」とかを使って操作できるようにするにはどういうクラスを使えばいいだろう？
focus:とかoutlineはどういう要素に設定すべきなのかな？
色々インターネット上で調べてみても、 記事によって紹介されている手法は様々です 。MDN のアクセシビリティについてのページ は詳しく書いてありますが、 詳しすぎて知りたい内容を把握するのに時間がかかります （本当はちゃんと理解すべきだとは思いますが）。
対応方法は色々あって、 答えは 1 つだけではない とは思います。それ故に、 より良い方法はどれなんだとか、記事で書かれている対応方法が本当に適切なのかとか、そういうことの判断が難しい と感じていました。
私のようなウェブアクセシビリティ初心者にとって、 デジタル庁のウェブサイトのような「専門家が徹底的に考えて作った具体的な例」 はものすごくありがたいです。一般的なウェブサイトによくあるような要素はデジタル庁のウェブサイトにもあるので、ブラウザの開発者ツールなどを使って該当箇所のコードを見て学ぶことができます。
ウェブアクセシビリティやデザインなどについては、 note に記事を投稿するといった取り組みもされているようです。まだ全然読めていないですが、こちらも非常に勉強になりそうなので一通り読んでおきたいなと思っています。
また、SNS でも話題になっていましたが、行政機関が デザインデータを Figma で配布している という話を聞いたときには、すごく驚きました。こちらもとても参考になる資料なので、合わせて確認したいと思っています。
記事の冒頭にも書いたとおり、デジタル庁は 「誰一人取り残されない、人にやさしいデジタル社会の実現」 を目指すという方針を掲げています。
1 億人以上が暮らす日本の行政機関のウェブサイトですから当然のことかもしれませんが、スマートフォンを使い始めた高齢の方も増えているという以下のような調査結果もある中でこのような方針を掲げるというのはすごいことだと思います。
スマートフォンの扱い方が不十分なひとも含む全てのひとを対象とするデジタル庁のウェブサイトと、私の個人ウェブサイトである「Hiratake Web」やその他の一般的なウェブサイトでは、 ターゲットとなるユーザの範囲が違いすぎる というのはあります。
ですが、 少しでも多くのひとが見やすい・使いやすいと感じるウェブサイトとなるようにしていくべき ということは間違いないですし、そうしたウェブアクセシビリティに関する知識は必ず役立つ場面があると思います。
デジタル庁の「ウェブアクセシビリティ」のページにある方針のように、私もウェブアクセシビリティの確保・維持・向上に継続的に取り組んでいきたいと思います。