Webページでよく使用されるコンポーネントをアクセシブルに実装するコードのまとめ -Frend
Post on:2016年6月2日
アコーディオンやタブ、ダイアログ、オフ キャンバス、ページ内リンクなど、Webページでよく使用されるコンポーネントをアクセシブルに実装するコードを紹介します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060204-01.png)
実装にあたり
Frendのコンポーネントは最小限で、他のスクリプトやCSSの依存はありません。Web標準をプライオリティとして構築されています。
WAI-ARIAに基づき、ARIA属性とイベントバインディングを利用し、ディテールを提供しています。すべてのコンポーネントはキーボードでの操作も可能です。
コンテンツあるいはインタラクションは、それを利用するためのベースラインを保証し、CSSやJavaScriptで拡張している箇所は必ずしもすべてのブラウザで同じように機能しません。しかし、それを利用することに問題はありません。
アクセシブルに実装されたコンポーネント
各ページでは実際のデモとコード、解説が掲載されています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060204-02.png)
アニメーションで開閉するアコーディオンです。このコンポーネントはタブに似ており、多数のコンテンツを省スペースで表示することができます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060204-03.png)
バイパスリンクはページ内を迂回するためのリンクです。スクリーンリーダーやキーボードのユーザーに有用で、バイパスリンクはビューポートの最上部に現れた時、タブキーによってフォーカスがあたるまでバイパスリンクは隠されています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060204-04.png)
ダイアログは重要なコンテンツをユーザーに届けることができるコンポーネントで、コンテンツの上に表示されます。開閉ボタンはキーボード操作に対応しており、オーバーレイはコンテンツが見えるように透明にしています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060204-05.png)
オフ キャンバスは小さいスクリーンサイズで特に有用で、ナビゲーションとして利用されます。開閉ボタンはタブとリターンのキーボード操作だけでなく、Escキーにも対応しています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060204-06.png)
上部のタブでコンテンツを切り換えることができます。タブキーでのフォーカスは目に見えるコンテンツだけにアクセスが可能で、タブの変更は矢印キーで行えます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016060204-07.png)
シンプルなツールチップは通常、ボタンとツールチップで構成されています。実装ではボタンとツールチップのアクセシビリティを改善しています。Escキーはどのツールチップが開いている時でも閉じることができます。
sponsors