横向きでスマートフォンを使いたい!ウェブアクセシビリティの落とし穴‐第30回‐

イラスト:左下に「秘書」、右下に「師匠」、中央には右手を上げた「見習い君」

イラスト:笑顔の秘書秘書:見習い君が、スマートフォン向けのウェブサイトをアクセシビリティに配慮しながら作れるようになってきました。
とても良い傾向ですが、まだ見落としがありそうで少し心配です…。

ウェブアクセシビリティ職人「見習い君」と「師匠」がアクセシビリティな世界を目指す
このストーリーは、新人ウェブアクセシビリティ職人「見習い君」とベテラン職人「師匠」、解説を担当する「秘書」を通して特に障がい者をはじめ身体的な制約がある人たちがウェブ利用時にどのような障壁にぶつかり、どのような工夫をして克服しているかなど「ウェブアクセシビリティ」の実例をはじめ「ウェブアクセシビリティ」と共に重要な「社会的アクセシビリティ」についても紹介していきます。

スマートフォンの向きでも、アクセシビリティ配慮が必要!?

イラスト:笑顔で後ろで手を組む師匠

師匠:見習い君、スマートフォン用のウェブサイト作りを頑張っておるようじゃな。

イラスト:笑顔で答える見習い君

見習い君:ありがとうございます!前回のお話しで、スマートフォンでもアクセシビリティへの配慮が必要だと気づけたのは大きかったです!

師匠:うむ、気づくことは良いことじゃ。

見習い君:ところで、制作の途中ですが、念のために見てもらえますか?

イラスト:縦向きのスマートフォン画面。説明文、開発者のコメント、操作ボタンが綺麗に表示されている

師匠:どれどれ……ふむ。残念ながら、問題があるな。

イラスト:右の手のひらを差し出し意見を聞く見習い君

見習い君:えっ?ボタンのサイズやナビゲーションメニューの配置・動作とかもスマートフォン向けに気をつけて作ったはずなのに…。何が足りないのでしょう?

師匠:見習い君、普段スマートフォンは縦向きで使っておるじゃろう。スマートフォンを横向きにして、作ったサイトを読んでみるのじゃ。

見習い君:(スマートフォンを横向きにして確認中…)ああ?!レイアウトが崩れて文字同士が重なっちゃっている。あと、ボタンが画像の裏に隠れて操作ができなくなっている…!これってもしかして、横向きレイアウトに対応していないと、改行や折り返し処理が正しく設定されないからですか?

イラスト:横向きのスマートフォン画面。説明文の行が重なっていたり、操作ボタンは隠れて表示している
イラスト:人差し指を出して説明する師匠

師匠:そうじゃ。スマートフォンは縦向きでも横向きでも、問題なく読めて操作できるよう配慮が必要なのじゃ。

見習い君:そうなんですね!でも、縦向きで読めるなら十分な気もするのですが…どうして横向きにも配慮が必要なんですか?

師匠:では、腕や手が動かしづらい人、車いすや介護ベッドにスマートフォンを固定して使っている人になったつもりで考えてみるのじゃ。

イラスト:手をポンと叩く見習い君

見習い君:あっ、なるほど!横向きでしか端末を使えない人もいるんですね。そうなると、横向きで読めないサイトは困ってしまいます…。

師匠:うむ。ただし、向きを固定化して使う必要のあるアプリといった例外もあるのじゃ。例えばピアノアプリは鍵盤の幅が必要じゃから横向き固定になる。また、ゴーグルで向きが固定されるVRコンテンツも例外じゃな。

見習い君:なるほど!そうなんですね。よく分かりました。引き続き、スマートフォン向けサイトのアクセシビリティに気をつけながら頑張ります!

イラスト:笑顔で後ろで手を組む師匠

師匠:良い心構えじゃ!スマートフォン向けの基準の見直しも忘れずにな!

イラスト:案内する秘書

秘書:今回の見習い君と師匠のやり取りからも分かるように、スマートフォンは縦向きでも横向きでも使えることが大切です。アクセシビリティの観点からも、読みづらさや操作不可を避けるための配慮が欠かせません。もっと詳しく知りたい方は、こちらの参考情報をご覧ください。

特別協賛企業の製品・サービスのご紹介

  • NTT ExCパートナーの公式サイトへ
  • 特別協賛企業の製品・サービスのご紹介_日本電信電話
  • NTTファイナンス株式会社の公式サイトへ
  • NTTアドバンステクノロジ株式会社の公式サイトへ

お知らせ

編集部のおすすめ記事

  • ゆうゆうゆう便り(メルマガ読者募集中)
  • ゆうゆうゆうのfacebook
  • 広告バナー募集中
ページの先頭へ