Webサービスのアクセシビリティについて 考慮すべきポイントを挙げてく

WebサービスやWebサイトを開発するうえで最低限おさえておきたいアクセシビリティのポイントを雑多に挙げてく。ある程度のボリュームになったら記事にする予定。

自分はアクセシビリティについて、まだ見落としてるポイントや分かっていない部分が多くあると思うので、気軽に意見してください。

「こういうのもあるよ」みたいなコメント大歓迎です。

imgタグにはalt属性を指定する

スクリーンリーダーでWebページを読む人が「画像の部分が何を表しているのか」が分かるように、alt属性を指定する。例えば「Zenn」というロゴ画像を表示している場合には、次のように指定する。

<img src="/logo.png" alt="Zenn" />

ただし、装飾や見栄えのために表示する画像など、意味を持たない画像であればaltを空にする。

<img src="/flower.png" alt="" />

「SEOのためにも全画像にaltを指定するべき」という人もいるが、個人的に意味を持たない画像にはaltは指定しない派。

なおaltをまったく指定しないと、一部のスクリーンリーダーが画像のsrcをそのまま読み上げてしまうことがあるのでalt=""のように空にする。

altの考え方についてはウェブアクセシビリティ事例集がとても分かりやすい。

SVGに aria-label を指定する

<svg>では<img>のようにalt属性を指定することができない。代わりにaria-label属性でsvgの意味を説明する。

<!-- 色々と省略 -->
<svg ...  aria-label="Twitterのアイコン">...</svg>

スクリーンリーダーなどではaria-labelに指定したテキストを読み上げてくれる。

合わせて role="img" も

また、画像として使う場合はrole="img"を指定する。これによりスクリーンリーダーはSVGを1つの画像とみなしてくれる。

<!-- 色々と省略 -->
<svg ... role="img" aria-label="SVG画像の説明">...</svg>

以下、MDNのARIA: img ロールから引用

ページに埋め込み SVG 画像を使用している場合は、外側の<svg>要素で role="img" を設定し、ラベルを付けることをお勧めします。 これにより、スクリーンリーダーは全ての子ノードを読み出すのではなく、単一の実体とみなし、ラベルを使用して説明します。

SVGをボタンとして使う場合は<svg>を<button>で囲み、<button>に対してaria-labelを指定する。

例えばYouTubeのヘッダーにはアイコンが並んでいるが、アイコン周りのHTMLはざっくりと以下のような構造になっている。

<button aria-label="作成"><svg>...</svg></button>
<button aria-label="YouTube アプリ"><svg>...</svg></button>
<button aria-label="通知"><svg>...</svg></button>

<button>にaria-labelを指定した場合はSVGにはaria-labelは不要。

押下できる要素どうしの間隔をあける

ボタンやリンクなど、押下可能な要素どうしは、押し間違いしないようにある程度の間隔をあけるようにする。スマホ等のタッチデバイスだとタッチしようとした部分が微妙にずれてしまうことが多い。

どのページからもトップページへ戻ることができるように

また、ページ最下部に主要なページへのリンクを設置すると良い。

テキストを余計に点滅させたり動かしたりしない

これについてはアクセシビリティガイドライン（PDF）の説明がとても納得できる。

点滅したり、変化・移動したりする⽂字や画像は原則として使⽤しない。やむを得ず使⽤
する場合は、個数や⼤きさ、点滅・変化・移動の時間を最⼩限度に留めたうえ、以下のよ
うな配慮をする。

利⽤者がそれらを⼀時停⽌、停⽌または⾮表⽰にすることができるようにする。またはそ
れらの動きが⾃動的に停⽌する仕組みを取り⼊れる。

激しい点滅や急激な⾊の変化は利⽤者の健康を害する恐れがあるので、閃光は 1 秒間に
2 回以下とし、同じ系統の⾊調を⽤いる。

横スクロールが必要ないよう、表や画像の⼤きさについて留意する。やむを得ず使⽤する
場合は、個数や⼤きさを最⼩限度に留めたうえ、横スクロールが必要だとわかる仕様にす
る。

横スクロールときどき使うのでグサッとくる。

配色のコントラストに注意する

色盲の方が内容を把握できるように、コントラストに問題がないか確認する。High Contrast
というChrome拡張機能を使うと、Webページをグレースケールで表示できるのでチェックするのに便利。

配色チェックツールは他にもありそう。誰か知ってたら教えて

ダークモード

白に近い背景だとまぶしく感じてしまう人がいるため。すみません、Zennで出来てなくて。

ブーメラン刺さりまくってるけど、だからこそ整理しておく必要がある・・・・・・・！（吐血しながら）

ボタンはbuttonで

ボタンの役割をするものには<button>を使う。理由があって押下する役割をするものに<div>を使わなければならないときは、以下のようにrole="button"とtabindex="0"を指定する

<div tabindex="0" role="button">押せるなにか</div>

role="button"はスクリーンリーダーにボタンコントロールを付与するため、tabindex="0"はその要素に対してフォーカスできるようにするため。

参考：ARIA: button role

セマンティックなHTMLにする

ボタンに限らず、なるべく適切な役割を持つHTMLタグを使う。リストは<ul>、<ol>、<li>で、段落<p>で、日時は<time>で、などなど。

略語にはabbrタグを使う

<abbr>タグに囲まれた部分は略語であることを表す。title属性に略語の完全形や説明を書く。

<abbr title="学生割引">学割</abbr>もあります。

abbr内のテキスト上にマウスポインターを重ねるとtitle属性に指定されたテキストが表示されたりする。

アンカーテキストは具体的に

リンクの目的が判断できるように、アンカーテキスト（リンク内のテキスト）は、できるだけページの内容を表すものにする。

👎 BAD  <a href="...">開く</a>

👍 GOOD  <a href="...">アクセシビリティ・ガイドライン</a>

リンクはリンクらしい装飾にする

ブラウザ規定のリンクのスタイルが「青のテキスト + 下線」であり、これに近い装飾のだとリンクであることが伝わりやすい。

↑ 例えば 下線無し + 橙色 にするとリンクには見えなくなる。

意味が伝わりづらいアイコンを単体で使わない

スマホでもすっきり見せるために、アイコンだけのボタンを設置するWebサイトは多い。そのような場合、見る人が意味を理解できるように、押下したときに発生するイベントが推測しやすい具体的なアイコン / ユーザーが見慣れているアイコンを使うようにする。

↑ 例えばこのようなアイコンが並んでいても、ユーザーはそれが何を意味するのか推測しづらい。

行間を詰めすぎない && 広げすぎない

多くのユーザーが読み慣れているのはline-heightの値が1.5〜1.9の間だと思われる。

ネタ切れ。思いついたら書く。

以下の2つの記事がとても参考になる。前者はアクセシビリティの考え方の部分で、後者はWebでハマりがちなボタン周りのフォーカスについて。