【アクセシビリティ】テキスト表記で気をつけること

はじめに

テキスト（Altやボタンのラベル、サイト内の文章など）をWebサービス・アプリで表示させるときに、アクセシビリティ観点で気をつけることを学びました

テキスト表記で気をつけること

特定の感覚に依存しない表現を意識する

例：色に依存したテキスト

• 「緑のアイコン」だと色弱のユーザーは他のアイコンと区別できない
• スクリーンリーダーのユーザーには色では伝わらない

• 形/色/場所/音など感覚的に依存しない
• アイコンにテキストラベルを与えるなど、いくつか情報を提示する
• 左右で場所を伝えない（上下はOK✅）
  • 左右だとレイアウトが変わった時に伝わらない
  • 上下は該当箇所の前後として捉えられるためOK

単語にスペースや改行を入れない

• スペースや改行を入れると正しくスクリーンリーダーで読み取れない可能性がある

• 余白を設けたい場合、スペースや改行ではなくletter-spacingやmarginを用いてCSSで調整する

色々試してみたメモ

• 英語は単語一文字ごとにスペースを入れると、文字単体として読まれる
• 日本語はスペースを間に挟んでいても、単語として認識してくれることが多い
  • ひらがなは一文字ずつ読まれても意味が通じる
  • 漢字の単語は文字間にスペースが入っていても、だいたい単語として読み上げてくれる
    • 単語として不自然なものは、一文字で読まれる
    • 例：「絵　文　字」は「えもじ」と読まれる
      • 「絵　文」は「え　ぶん」と読まれる
• 英語の読み上げ方は言語設定が日本語だから？

記号や省略表記、絵文字の使い方に注意する

以下のように、記号によって意味が伝わらないものがある
また、絵文字を使いすぎると文章が伝わりにくくなるため注意！
以下の説明で「」内は読み上げ時のテキストです。

記号の持つ意味が伝わるもの

• ¥「えん」
  • ¥5000「5000円」
• $「どる」
  • $5000「5000ドル」
• 〒「ゆうびんばんごう」
• @「あっとまーく」
• %「ぱーせんと」
• 〜「から」
  • 半角だと~「ちるだ」
  • 14:00〜15:00「じゅうよじからじゅうごじ」
  • 14:00-15:00「じゅうよじじゅうごじ」伝わる？

記号の持つ意味が伝わらない場合があるもの

• *「ほし」
  • 「*こちらの項目は必須です」と注意の意味で*が使われていても伝わらない
• ※「れふぁれんすまーく」単体だと「こめじるし」
  • *と同じく注意の意図が伝わりにくい
• /「すらっしゅ」
  • 1/2「いちすらっしゅに」
    • 「2分の1」分数の意図で使っても伝わらない場合がある
  • 2024/12/22「にせんにじゅうよんすらっしゅじゅうにすらっしゅにじゅうに」
    • 日付の意図で使っても、伝わらない場合がある
    • 2024-12-22や2024.12.22は伝わる
    • 2024年12月22日と明示するのがベター
• ()「みぎまるかっこ」
  • 22日（土）「にじゅうににちつち」
    • 曜日の表記に使いがちだけど、伝わりにくいかも
    • 22日土曜日が本来わかりやすいはず

• 記号を使うと、伝わりにくい可能性がある

• 記号を使う時にはスクリーンリーダーで読み上げて、意図が伝わるか確認する
• 正しく意味が伝わる読み上げになるように、aria-labelやその他の方法を検討する

aria-labelが使えないpタグで正しい読み上げになるように実装している記事

まとめ

テキスト表記は理解できる糸口をいくつか用意しておく必要があるとわかりました

他にも、テキストの可読性や簡潔な文章か意識できると、誰でもわかる文章に近づけるはず！

最後までお読みいただきありがとうございます

参考