frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

アクセシビリティの理解を深める②インタラクション設計

スポンサードリンク


スポンサードリンク


アクセシビリティの理解を深める連載②です。
デザイニングWebアクセシビリティを読んで学んだ要点を書いていきます。

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ


一回目はこちら↓
frontendmemo.hatenablog.com

第5章インタラクション設計

無限スクロールの注意点

無限スクロールをさせるWebサイトがあります。yahooのスマホTOPサイトにも使われてますね。
無限スクロール時の注意は下記があります。

  • フッターなどの無限スクロールより下のコンテンツにアクセスできない
  • サイドナビなどの要素が記述順が痕であればTABでフォーカス移動できない
  • スクリーンリーダーで読まれない

スクロールがしにくい原因とは

  • スクロールバーのデザインが変更されていてわかりづらい
  • アニメーションの演出等によってスクロール操作に干渉され、自由に操作できない

新規タブの注意点

  • 新規でタブを開いたことに気づかないユーザーがいる
  • タブが開きすぎた場合、閉じることが困難になる
解決策
  • 行き来する必要のあるリンクは、新規タブではなく導線を強化する
  • 外部サイトであることをテキストで伝える

自動遷移の注意点

  • 読んでいる途中でページが切り替わってしまう
  • ページURLを手入力で入れている間に遷移してしまう
  • 「戻る」などのブラウザ操作で戻れない場合がある
解決策
  • 中間ページをはさまずに直接移動する
  • 自動で遷移しないよう、ユーザーの操作に任せる
  • どうしても中間ページが必要な場合は、サーバー側でリダイレクトするかmeta refreshで0秒でリダイレクトさせる

ルーセル以外で複数のコンテンツを見せる方法とは

  • コンテンツ全てを並べて表示し、必要に応じて強弱をつける
  • 最重要な1枚だけを表示し、ボタンを押すとスペースが広がって残りが表示されるようにする
  • トップページでは最重要な1枚だけを表示し、残りは別のページに置いてリンクする
  • 1枚だけを表示し、アクセスするたびに内容をランダムに切り替える

ルーセルの注意点とは

  • 自動で動かすのではなく手動で動くようにする
  • 停止ボタンを設置する。大きさや目立つようにする

音の再生が問題になる理由とは

  • 驚く
  • スクリーンリーダとかぶる
  • プライバシーが守られない
  • 元々聞いていた音楽と混ざってしまう
対処法
  • 操作で再生する
  • ユーザーの了解を得てBGMを鳴らす
  • 音声のみコントロールできるようにする


デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ