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

Post on:2016年6月2日

実装にあたり

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

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

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

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

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

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

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

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

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