Webページでよく使用されるコンポーネントをアクセシブルに実装するコードのまとめ -Frend

アコーディオンやタブ、ダイアログ、オフ キャンバス、ページ内リンクなど、Webページでよく使用されるコンポーネントをアクセシブルに実装するコードを紹介します。

サイトのキャプチャ

Frend

実装にあたり

Frendのコンポーネントは最小限で、他のスクリプトやCSSの依存はありません。Web標準をプライオリティとして構築されています。
WAI-ARIAに基づき、ARIA属性とイベントバインディングを利用し、ディテールを提供しています。すべてのコンポーネントはキーボードでの操作も可能です。

コンテンツあるいはインタラクションは、それを利用するためのベースラインを保証し、CSSやJavaScriptで拡張している箇所は必ずしもすべてのブラウザで同じように機能しません。しかし、それを利用することに問題はありません。

アクセシブルに実装されたコンポーネント

各ページでは実際のデモとコード、解説が掲載されています。

デモのキャプチャ

Accordion

アニメーションで開閉するアコーディオンです。このコンポーネントはタブに似ており、多数のコンテンツを省スペースで表示することができます。

デモのキャプチャ

Bypass links

バイパスリンクはページ内を迂回するためのリンクです。スクリーンリーダーやキーボードのユーザーに有用で、バイパスリンクはビューポートの最上部に現れた時、タブキーによってフォーカスがあたるまでバイパスリンクは隠されています。

デモのキャプチャ

Dialog Modal

ダイアログは重要なコンテンツをユーザーに届けることができるコンポーネントで、コンテンツの上に表示されます。開閉ボタンはキーボード操作に対応しており、オーバーレイはコンテンツが見えるように透明にしています。

デモのキャプチャ

Off Canvas

オフ キャンバスは小さいスクリーンサイズで特に有用で、ナビゲーションとして利用されます。開閉ボタンはタブとリターンのキーボード操作だけでなく、Escキーにも対応しています。

デモのキャプチャ

Tabs

上部のタブでコンテンツを切り換えることができます。タブキーでのフォーカスは目に見えるコンテンツだけにアクセスが可能で、タブの変更は矢印キーで行えます。

デモのキャプチャ

Tooltip

シンプルなツールチップは通常、ボタンとツールチップで構成されています。実装ではボタンとツールチップのアクセシビリティを改善しています。Escキーはどのツールチップが開いている時でも閉じることができます。

sponsors

top of page

©2018 coliss