ウェブアクセシビリティ社内セミナー、その後
こんにちは。
エンジニアチームのSです。
コーディングを主にお仕事させていただいてますが、まだまだ知識が足らず勉強の日々です。。
先日社内でウェブアクセシビリティについてのセミナーがありました。(といってももう二か月前、、早い)
今までもエンジニアチームのミーティングなどで何度か取り上げられてきたウェブアクセシビリティですが
セミナーをしていただいたことによって、ぼんやりとこういうものだというイメージから
何かしら障害がある方に向けた取り組みなのだということがはっきりとわかり、とても充実したセミナーの内容でした。
現状ウェブアクセシビリティは義務づけされていないので、全ての案件が対象ではないのですが、
試しに下記のチェックツールで自分の担当したサイトを検証してみました。
https://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/michecker.html
適合レベルわけして修正箇所などを教えてくれる、とても便利なツールです。
使ってみると色々な指摘箇所があり、なるほどなと気づかせれることが多かったです。
例えばよく使う下記のようなページトップへ戻るボタン
CSSで描画しているので、何も内容がなく、「ページ内リンク “#” は、読み上げ可能なテキストを持たないため、音声アクセスできません」というコメントが、、
<div id=”pagetop” class=”pagetop”></div>
どうすればいいのかなと調べたところ、WAI-ARIAの手法で
<div id=”pagetop” class=”pagetop” aria-label=”ページ上部に戻る”></div>
なるほど、aria-label属性という便利なやり方があるんだ!と感心していたのですが、マイチェッカーではエラーが消えず、、
結局マイチェッカー推奨の、下記のように非表示のテキストを追加するやり方で解決しました。
<div id=”pagetop” class=”pagetop”><span class=”visually-hidden”>ページ上部に戻る</span></div>
WAI-ARIAについては今後も勉強していきたいと思います。