画像スライドショーをアクセシブルにカスタマイズする (PhotoSwipe を例に)
ウェブサイトで画像のスライドショーを実現するには、現実的には JavaScript ライブラリーを付加的に使うことになります。PhotoSwipe というライブラリーをアクセシブルにカスタマイズしてみたので、ひとつの実験例としてご紹介します。
記事カテゴリー : アクセシビリティ
(全319件 : 20/32ページ)
タブ型 UI について考える
タブをクリック/タップすると、そのタブに紐づいた情報 (タブパネル) が切り替わり表示される UI があります。このタブ型 UI について、ユーザビリティおよびアクセシビリティの観点から配慮したいことを考えてみたいと思います。
アイコンフォントか？ SVG アイコンか？
アイコンフォントについては、アクセシビリティ上の問題 (スクリーンリーダーでアイコンの情報が適切に読み上げられなかったり、アイコンが適切に表示されなかったりするリスク) を指摘する声もあります。この記事では、代替手段として SVG アイコンを検討しつつ、アイコンフォントと SVG アイコンの使い分けについて考えてみたいと思います。
ページ内アンカーについて考える
ページ内の特定のセクション (ページ内アンカー) に遷移するリンクがあります。HTML の実装としては正しく、機能としても便利ですが、ユーザビリティの観点から考えるといくつか問題があり、その導入にあたっては、慎重に検討、判断したいところです。
チャンク (情報の塊) が視覚的な手掛かりだけで表現される場合のラベル付け
画面デザインの都合上、チャンク (情報の塊) を視覚的にしか表現できないとしても、そのチャンクに対しては自然言語によるラベルを (視覚的には非表示であってもスクリーンリーダーでは読み上げられる形で) 付けたいものです。
パターンライブラリー
ウェブサイトやアプリケーションの開発や運営においては、一貫性のある UI を採用し、維持することが、ユーザビリティ上重要になります。UI の一貫性を保つためには「パターンライブラリー」を用意し、プロジェクト関係者の間で共有しておくと便利です。
ボタンに対する追記がある場合のマークアップ
ウェブサイトでボタンを設置する際、そのボタンのラベルとは別に追記を配置することがあるでしょう。その際、セマンティックに (マシンリーダブルな形で) ボタンと追記を紐づけるとよいと思いますが、実際のユーザーエージェント側の挙動はどうでしょうか。
スクリーンリーダー利用に関するトレンド : 2015年7月実施の WebAIM 調査より
米国の非営利団体「WebAIM」による、スクリーンリーダーの利用に関する調査 (第6回) の結果が発表されました。全体的なトレンドは従来通りな印象ですが、そんな中、個人的にいくつか気になったことをピックアップします。
デザイニング Web アクセシビリティ
「デザイニング Web アクセシビリティ — アクセシブルな設計やコンテンツ制作のアプローチ」の見本誌をいただきました。感想を交えつつご紹介します。
画像スライドショーの標準 UI (あったらいいな)
ウェブサイトで複数の写真を一連で見せたいケースがあると思います。ユーザビリティ/アクセシビリティ上の問題がなく、かつユーザーが没入感を得やすい UI として、ユーザーエージェント側が全画面表示の画像スライドショーを標準で提供してくれたら...と考えてみました。