Webアプリケーションアクセシビリティ
Webアプリケーション
アクセシビリティ
目次
コード例
購入
コード例
本書掲載のコード例のうち、実際にブラウザ上で動作するものについて紹介します。ぜひ支援技術を使って、どのような動作になるのかを確認してみてください。
5.1 モーダルダイアログ
モーダルダイアログの例と問題点
See the Pen <a href="https://codepen.io/ymrl/pen/rNZLLyG"> アクセシビリティを考慮せず作られたモーダルダイアログ（Webアプリケーションアクセシビリティ5章）</a> by ymrl (<a href="https://codepen.io/ymrl">@ymrl</a>) on <a href="https://codepen.io">CodePen</a>.
モーダルダイアログの改善例
See the Pen <a href="https://codepen.io/ymrl/pen/zYJBBma"> アクセシビリティを考慮せず作られたモーダルダイアログ（Webアプリケーションアクセシビリティ5章）</a> by ymrl (<a href="https://codepen.io/ymrl">@ymrl</a>) on <a href="https://codepen.io">CodePen</a>.
最新のHTMLの仕様であるdialog要素への期待
See the Pen <a href="https://codepen.io/ymrl/pen/oNPLzzN"> アクセシビリティを改善したモーダルダイアログ（Webアプリケーションアクセシビリティ5章）</a> by ymrl (<a href="https://codepen.io/ymrl">@ymrl</a>) on <a href="https://codepen.io">CodePen</a>.
5.2 通知
控えめな通知をスクリーンリーダーにも伝える──ライブリージョン
See the Pen <a href="https://codepen.io/ymrl/pen/xxaOEdo"> Untitled</a> by ymrl (<a href="https://codepen.io/ymrl">@ymrl</a>) on <a href="https://codepen.io">CodePen</a>.
See the Pen <a href="https://codepen.io/ymrl/pen/eYLzdqq"> アクセシビリティを考慮せず作られたモーダルダイアログ（Webアプリケーションアクセシビリティ5章）</a> by ymrl (<a href="https://codepen.io/ymrl">@ymrl</a>) on <a href="https://codepen.io">CodePen</a>.
ページ外での通知──Notifications API
See the Pen <a href="https://codepen.io/ymrl/pen/RwYRorj"> Notifications APIによるページ外への通知（Webアプリケーションアクセシビリティ5章）</a> by ymrl (<a href="https://codepen.io/ymrl">@ymrl</a>) on <a href="https://codepen.io">CodePen</a>.
5.3 カルーセル
画像リストとボタンの配置の順序
See the Pen <a href="https://codepen.io/sukoyakarizumu/pen/JjabPyY"> カルーセルのインターフェース</a> by sukoyakarizumu (<a href="https://codepen.io/sukoyakarizumu">@sukoyakarizumu</a>) on <a href="https://codepen.io">CodePen</a>.
5.4 シンプルなツールチップ
シンプルなツールチップの例と問題点
See the Pen <a href="https://codepen.io/ymrl/pen/gOdwVXP"> Untitled</a> by ymrl (<a href="https://codepen.io/ymrl">@ymrl</a>) on <a href="https://codepen.io">CodePen</a>.
See the Pen <a href="https://codepen.io/ymrl/pen/abameVQ"> アクセシビリティを改善したモーダルダイアログ（Webアプリケーションアクセシビリティ5章）</a> by ymrl (<a href="https://codepen.io/ymrl">@ymrl</a>) on <a href="https://codepen.io">CodePen</a>.
画面拡大・キーボード操作での課題と改善──ツールチップの表示・非表示の制御
See the Pen <a href="https://codepen.io/ymrl/pen/eYLdqKj"> アクセシビリティを考慮せず作られたツールチップ（Webアプリケーションアクセシビリティ5章）</a> by ymrl (<a href="https://codepen.io/ymrl">@ymrl</a>) on <a href="https://codepen.io">CodePen</a>.
スマートフォン・スクリーンリーダーでの課題と改善──マウスオーバー依存からの脱却
See the Pen <a href="https://codepen.io/ymrl/pen/abameaM"> アイコンのクリックにより表示・非表示を切り替えるツールチップ（Webアプリケーションアクセシビリティ5章）</a> by ymrl (<a href="https://codepen.io/ymrl">@ymrl</a>) on <a href="https://codepen.io">CodePen</a>.
5.5 リッチなツールチップ
リッチなツールチップの例と問題点
See the Pen <a href="https://codepen.io/ymrl/pen/PodbYqj"> アイコンのクリックにより表示・非表示を切り替えるツールチップ（Webアプリケーションアクセシビリティ5章）</a> by ymrl (<a href="https://codepen.io/ymrl">@ymrl</a>) on <a href="https://codepen.io">CodePen</a>.
フォーカスの制御を実装する──キーボード操作、スクリーンリーダーへの対応
See the Pen <a href="https://codepen.io/ymrl/pen/gOdLYwR"> キーボードやスクリーンリーダーやタッチUIで含むツールチップ（Webアプリケーションアクセシビリティ5章）</a> by ymrl (<a href="https://codepen.io/ymrl">@ymrl</a>) on <a href="https://codepen.io">CodePen</a>.
5.7 ハンバーガーメニュー
ハンバーガーメニューの例と問題点
See the Pen <a href="https://codepen.io/sukoyakarizumu/pen/jOvMgGL"> アクセシビリティを考慮せず作られたハンバーガーメニューのコンポーネント</a> by sukoyakarizumu (<a href="https://codepen.io/sukoyakarizumu">@sukoyakarizumu</a>) on <a href="https://codepen.io">CodePen</a>.
ハンバーガーメニューの改善例
See the Pen <a href="https://codepen.io/sukoyakarizumu/pen/YzOGmbw"> ここまでの内容をすべて反映したハンバーガーメニューの実装</a> by sukoyakarizumu (<a href="https://codepen.io/sukoyakarizumu">@sukoyakarizumu</a>) on <a href="https://codepen.io">CodePen</a>.