伝わるWebサイトをつくる! ユニバーサルデザインの基本と具体的な改善方法
■ [テキストの活用法(3)] リンクのテキストライティング ユーザーはWebサイト上で、リンクをたどりながら目的の情報を探す。リンクのテキストやボタンが「こちら」「詳しくはこちら」では、どこに行くのか、行き先がわかりにくい。そこで、行き先のページタイトルや「よくある質問」「お申し込みはこちら」など行き先が予測できる情報をテキストに含めることが大切だ。これはボタンやフォームにも同じことがいえる。 ■ [テキストの活用法(4)] 見出しの活用 長い文章なのに「見出し」がないと、伝えたい情報が伝わりにくい。欲しい情報が書かれているのかも予測できないため、読む気にもならない可能性がある。そこで、情報のまとまりごとに区切って、各ブロックに見出しをつけることで、書いてあることをスピーディに伝えることが大切になる。
┌────────── 見出しレベルで階層をつくり、文章の構造を表すことが大切です。装飾目的で見出し要素を使うと情報を混乱させるのでやめてください。正しく要素を使うと、次図のようにリーダーモードなどで見た目が変わっても、見出しが見出しとして機能します(間嶋氏) └──────────
なお、こうした見出しの付け方や代替テキストの付け方はデジタル庁が公開している「ウェブアクセシビリティ導入ガイドブック」の中で解説されている。
UIのよくある失敗と改善例
最後は、UIの使いやすさの解説とともに、よくある失敗例と改善例が紹介された。そもそも「使いやすさ」には、さまざまな要素が複雑に関係している。たとえば「ボタンを押す」という操作1つとっても、「知覚:ボタンの存在を知覚する」「理解:ボタンだと認識する」「操作:実際にボタンを押す」「反応:反応が起きたらまた知覚する」と分解できる。このプロセスのどこかに問題があれば、使いにくいものになる。 使いにくさを解消するには、「知覚・理解・操作・反応」を通して「できること=予測」と「起きること=結果」を一致させることだ。そうすることで、直感的で使いやすい有線UIへと改善することができる。では、具体的にどうすれば、UIの失敗をリカバリできるのだろうか。 ■ [よくある失敗(1)] マウス操作を前提としたUI たとえば、スマートフォンやタブレットなどのタッチデバイスからのアクセスが増えている今、ユーザーはパソコンのマウスを使っているとは限らないため、マウスオーバーしてリンクがわかる仕様は使わないようにしたい。