文章を意味ごとに区切る

スクリーンリーダーが読み上げを適切な位置で区切ってくれるように、文章を意味ごとに区切ります。

不適切な例:

This is a first<br>
sentence.

適切な例:

<p>This is a first sentence.</p>

複雑な表現を使わない

認知障害を抱える人のために、専門用語やスラングなどの複雑な表現をできるだけ使わないようにします。

IT業界には、ときどき自分のブログでカッコつけてTL;DRという用語を使う人がいますが、ああいう表現はしないようにしましょう、ということです。

HTMLの入れ子構造を複雑にすると、スクリーンリーダーが間違った読み上げをする可能性が高くなります。tableタグなどの入れ子が深くなりやすい要素は、できるだけ使うのを避けましょう。

例えば、ボタンを表したい場合はaタグやdivタグではなく、buttonタグやinputタグで実装しましょう。どうしてもbuttonタグを使いたくない場合は、WAI-ARIAロールのbuttonロールを使いましょう。

aタグなどのラベルのみがスクリーンリーダーに読み上げられる場合があります。そのため、ラベルと関連付けられたものをラベルのみで説明できるようにします。

不適切な例:

<p>
  Please see<a href="information.html">here</a> to check today's menu.
</p>

適切な例:

<p>
  <a href="information.html">Please check today's menu</a>.
</p>

また、textarea要素などのフォーム要素の説明には、labelタグを使うことで、Webブラウザがそれらを1つのまとまりとして認識してくれます。

画像や動画を説明するためのテキストである代替テキストを使い、視覚障害者や聴覚障害者がWebアプリの内容をより理解できるようにします。

alt属性は画像を説明するためのものです。スクリーンリーダーで読み上げられるため、簡潔で分かりやすい説明をすることを心がけましょう。

不適切な例:

<img href="images/grilled-fish.jpg">
<p>It's tasty!</p>

適切な例:

<img href="images/grilled-fish.jpg" alt="Grilled salmon on the while plate.">
<p>It's tasty!</p>