はじめに
こんにちは、株式会社 Kiva の uchida です。業務では企業の Web アクセシビリティ対応を効率化支援する「ユニウェブ」の開発をしています。
このブログでは、日々の開発やウェブ利用の中で気づいたアクセシビリティ違反の例を紹介します。エンジニアとしてアクセシビリティに配慮することは、ユーザー体験の向上だけでなく、より多くの人に情報を届けることや SEO 対策のためにも重要なことです。
※なお、規格という観点では代替手段が備わっていれば問題ありません。
ウェブアクセシビリティとは？
ウェブアクセシビリティとは、障がいの有無や利用環境に関わらず、すべての人がウェブサイトを快適に利用できるようにする取り組みです。これには、視覚・聴覚的な補助機能やキーボード操作への対応などが含まれます。
ウェブアクセシビリティの基準としては、W3C が策定した「WCAG（Web Content Accessibility Guidelines）」が広く知られています。WCAG は、ウェブコンテンツのアクセシビリティを向上させるためのガイドラインであり、国際的に認知されています。日本では、WCAG を基にした「JIS X 8341-3:2016」が策定されており、これに準拠することが求められています。
よく見かけるアクセシビリティ違反
以下は、私がウェブサイトを利用する際に「改善が必要だな」と感じたアクセシビリティ違反の例です。特にポップオーバーやダイアログなどのコンポーネントで問題が目立つことが多いです。
01. キーボード操作できない
エンジニアはキーボード操作を頻繁に使用します。例えば、Chrome 拡張機能「Vimium」などのキー操作ライブラリを活用している方も多いでしょう。キーボード操作ができない場合、マウスを使わなければならず、非常にストレスを感じます。
ツールチップが開けない
ツールチップにフォーカスが当たらないか、中身が表示されないケースがあります。これではキーボードユーザーが情報を得ることが困難です。
GOOD：ツールチップにフォーカスが当たる
サイドバーのサブメニューが開けない
サイドバーのアイテムにフォーカスしたときに、サブメニューが開かない場合や表示されたとしてもフォーカスが当たらないことがあります。これではキーボードユーザーがサブメニューを操作できません。
BAD：マウスオーバーでしかサブメニューが表示されない
ダイアログ表示時にフォーカスが移動しない
モーダル・ダイアログをキー操作で開いた場合に、フォーカスが移動せず操作性が低下する問題も頻発しています。閉じるボタンなどダイアログ側の何らかのコンポーネントにフォーカスを移動させましょう。
GOOD：Cancelボタンに自動でフォーカスが移動している
02. フォーカスのコントラストが低い
フォームやボタン間でフォーカス移動した際、アウトラインが薄く視認性が低いことがあります。この問題は Reset CSS によるスタイル変更が原因の場合もよくあります。
BAD：薄いグレーのアウトラインで識別しづらい
関連する達成基準 2.4.7: フォーカスの可視化を理解する
03. レスポンシブ対応されてない
デベロッパーツールで画面幅を狭めた際、文字やレイアウトが崩れることがあります。レスポンシブデザインはすべてのデバイスで快適な表示を提供するため重要です。
BAD：文字が切れてしまっている
04. 停止できないカルーセル・スライダー
自動再生されるカルーセルやスライダーは情報取得中に画面遷移してしまい、不満につながりやすい点です。制御可能な設計を心掛けたいところです。
GOOD：カルーセルを簡単に停止できる
関連する達成基準 2.2.2: 一時停止、停止、非表示を理解する
おわりに
いかがでしたでしょうか？
こうした違和感への気づきは、日々のコーディング品質向上にもつながります。ウェブアクセシビリティについてさらに学びたい方は解説書などをご覧ください。また弊社では、ウェブサイトのアクセシビリティ対応を効率化する DX ツール「ユニウェブ」を開発・提供していますので、ご興味ある方はぜひチェックしてみてください！
株式会社Kivaのテックブログです。Kivaではモダンな技術を活用し「proteger」「uniweb」「AI多言語翻訳」「コブラウジング」など様々なサービスの開発を行っています。
Discussion