Zenn
Closed38

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

アクセシビリティ
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 は <title> が代替テキストにあたるのでそちらに記載するのがベターです

<title>だと一部のスクリーンリーダーが対応していないのでaria-labelの方が好ましいという理解をしています。
参考にした記事：Text Links: Best Practices for Screen Readers

可能なら両方書くのが良いのかな

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

YouTubeのヘッダーアイコンの例

例えば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は不要。

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

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

前述の img 要素の alt 属性もそうですが，この辺をちゃんとしないと W3C のバリデータに怒られます。自ブログサイトではページごとにリンクを張り付けて時々チェックしたりします。

なるほど、W3Cのバリデータ良いですね

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

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

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

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

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

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

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

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

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

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

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

High Contrastを使った例

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

お、知らなかった…！

色覚障害の場合はコントラストよりも色の組み合わせが重要だったりします。模様をつけて区別するのもありだと思います。以下の記事が結構参考になりました。

一方，弱視の人の場合はコントラストが重要だったりします。私も軽い弱視傾向なので（年を取ったら傾向が強まりましたw）ダークテーマ画面でコントラスト強めにしてたりします。

なるほどー、すごい勉強になります。いらすとや、すごいな…！！

ダークモード

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

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

ボタンはbuttonで

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

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

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

参考：ARIA: button role

<div> でボタンをつくって押下（onClick）させる際、キーボード操作（エンターキー、スペースキー）の操作も考慮しないといけないので <button> だとそうした考慮が要らないので良いですね

仰る通りですね。

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

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

前から気になってるんですが、押下可能なリストメニューの場合もul使っていいんでしょうか？（知見じゃなくて質問ですいません。）

<li>要素の中に<a>や<button>を入れれば問題ないと思います。

<ul>
  <li><a href="~">Foo</a></li>
  <li><button>Bar</button></li>
</ul>

略語にはabbrタグを使う

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

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

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

abbrを使った例

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

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

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

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

端的、ボタン的に(デザインというか設計というかを)やってしまうと here症候群化してしまいますもんね。

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

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

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

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

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

意味が伝わりづらいアイコン

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

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

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

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

雑に過去やった限りでの自分のアクセシビリティ対応を書いてみる

  • ダイアログ表示中はキー操作による移動がダイアログの外にいかないようにすること
  • ダイアログUIでのaria-labelledbyなどの利用
  • タブ切り替えのようなUIでのキーバインディング
  • タブのUIでのaria-controlsやaria-labelledbyの利用
  • 何かの通知の際にAlert Roleを使用するなど

「Macで Voice Over 試してみる」たしかに！やるべきだ！

このスクラップは2020/12/07にクローズされました
ログインするとコメントできます