はじめに

「アクセシビリティって聞いたことはあるけど…」と思っている方には、ぜひ読んでほしいです！
来年度からさらに重要になる「Webアクセシビリティ」について記事を書きました。

Webアクセシビリティに興味を持ったきっかけ

内定者アルバイト先の勉強会で「Webアクセシビリティ」を扱っている
これまでほとんど意識してこなかった

「ただ好きなものを作り、意識をしてもパフォーマンスくらい…」というような私にとってWebアクセシビリティに関する知見はハッとさせられることが多かったです。
記事を書くにあたり、自分なりにWebアクセシビリティについて調べてみました。

「努力義務」から「義務」へ

平成25年6月、「障害者差別解消法」が制定され、平成28年4月1日から施行されました。

全ての国民が、障害の有無によって分け隔てられることなく、相互に人格と個性を尊重し合いながら共生する社会の実現に向け、障害を理由とする差別の解消を推進することを目的

そして、令和３年５月、同法は改正され、改正法は、令和６年４月１日の来年から施行されます。
改正の点としては、行政機関等は義務、事業者は努力義務だった「合理的配慮の提供」が事業者も義務化されるという点です。
つまり、事業者が提供するWebページも「合理的配慮の提供」の対象となり、障害を持つ方も、そうでない人も誰でもWebサービスを利用できる状態にすること（＝ Webアクセシビリティ）が求められるということです。

来年から義務化になることを初めて知ったので今知れてよかったです…！

具体的にどういうことがWebアクセシビリティなのか

来年からWebアクセシビリティを意識するとしても、具体的に何をすれば良いのかすぐにはイメージができません。
ですが、英国内務省 (UK Home Office) がとてもわかりやすいWebアクセシビリティのポスターを提供されています。
githubで公開されているポスター
 githubで公開されているポスター日本語版（← @onouchidebeさんによって日本語化されたものです）

アクセシビリティを担保するためにデザインとして「すること」と「しないこと」がまとめられています。
とてもわかりやすく実践的で、この内容を意識するだけでも改善できることは多そうです。

開発時にできる配慮

正しいHTMLタグの使用
読み上げ機能で正常に動作しないことを防ぐ
リンクテキストは遷移先の内容をわかりやすく書く
ピンチアウトによる画面の拡大を禁止しない
<meta>要素のviewportの指定でuser-scalable=noやmaximum-scale=1.0など指定すると、拡大をしたいユーザーが拡大できないということが起きる
user-scalable
maximum-scale
読みやすいコントラストを意識

開発したサイトをLighthouseで検証

などなど、あらゆる配慮ができそうです。
「より良いものにするには・・・」と思った時は、アクセシビリティを意識すると新しい視点から物事を捉えられそうです！

最後に

技術記事になっているかどうか怪しいですが、来年度から義務化になるこのタイミングでこの話題に出会えたことは意味があったと思っています。
この記事がWebアクセシビリティについて少しでも考えるきっかけになりますと幸いです☺️
ここまで読んでいただきありがとうございました！