アクセシビリティに配慮してコーディングしたデモサイト

• HTML/CSS
• アクセシビリティ

概要

アローサル・テクノロジー株式会社様のご協力のもと提供頂いた練習用デザインカンプを、デザインや仕様を変更しない範囲でアクセシビリティに配慮してコーディングしました。

キーボードのみで全ての操作が可能です。マウスを操作できないユーザーでもキーボードが利用できれば全てのコンテンツを利用して頂くことが出来ます。

ブラウザズーム200%、フォントサイズ設定極大でも表示崩れしません。

スクリーンリーダー使用時でも大きな支障なく利用できます(Mac:VoiceOver、Win:NVDAで検証)。

Swiperを利用したカルーセルセクションでは、ナビゲーションボタンもしくはページネーションにフォーカスが移った段階で自動再生が停止し、各ボタン上でエンターキー(もしくはスペースキー)を押下することで、切り替わったスライドの内容が読み上げられる仕様にしています。しかしながらガイドラインに則れば、自動再生はしない、もしくは再生停止ボタンを設置するべきである上、この仕様ではスクリーンリーダーへスライドの枚数が正しく伝わらない為、aria-labelで補足しておりますがベストプラクティスとは言えません。ナビゲーションボタン、ページネーションの存在をスクリーンリーダーに伝えず、カルーセルをシンプルにリストとしてコーディングする方法も可能ですが、この場合ナビゲーションを活用できないことに留意したいところです。

料金表はテーブルで表現しており、各セル上ではthの内容も読み上げられ、どの内容を示しているか分かりやすくなっております。

フォームセクションでは、送信ボタンを押下した際にバリデーションが実行される仕様にしております(フォーカスが外れた段階で実行する仕様で実装も可能です)。 エラーが発生すると、エラーが発生している項目のうち最上段の項目にフォーカスが移動し、項目のラベルとエラーメッセージの内容が読み上げられます。項目を移動し、その項目でもエラーが発生している場合は移動した際にもエラーメッセージが読み上げられます。

使用プラグインなど

modernizer.js, swiper.js

Basic認証