このページ(だけ)は、コラムではなく、アクセシビリティ適合テストの、(一応)レベルAA一部準拠相当
に達するようにいろいろ工夫してみたカスタマイズ実践・解説編になっています。
(なお、あくまでも「非営利個人Webサイト」の作者目線ですので、行政・ビジネスのWebサイトに携わっている方は、その旨考慮の上で評価お願いします)
サイトを極力ダサくせず適合テストに通るようにする工夫あれこれ
(4月19日現在、リストは9項目まであります；随時更新)
-
Colorable (数値記入で、コントラスト比を細部まで判定できるサイト)を使用して、最低限のコントラスト比4.50若しくは3.00をサイトのどこの箇所でも確保
通常の大きさ以下の文字は4.50以上で合格、大きな文字・アイコン・記号・フォーカス枠線などは3.00以上で合格になります。
なお、当初私も間違えて対策に多大な時間ロスしてしまいましたが、
見出しとして使われているものを除くロゴ文字・フォーカスを除く枠線・リンク下線にはコントラスト比規定は(少なくとも2025年4月現在は)ありません。
(フォーカスを除く枠線・リンク下線に関しては枠線種類の規定も無いので、私のサイトでは、見た目薄く見えるようにしたい時に点線を活用しています)※visited・hover・active(テキストの場合)に関しては、「visitedはコントラスト比4.50、hover・activeは適用無し」「visited・hover・activeいずれもコントラスト比3.00」の両説があるようです。
私は一応前者を採用していますが、後者が正しいのなら修正しないと・・・ -
コントラスト比を確保しつつ「ドギツさを和らげる」「安っぽく見えないようにする」ための裏技？的方法
1.の続きになりますが、「コントラスト比のためと言われても、どうしてもこの色この濃さ(薄さ)でないと駄目、妥協無理」の時には以下を試してみましょう。
-
通常モードの時：
文字の一部に、文字色より薄めの色の0.5ピクセルのテキストシャドウをかける
(全部囲んでしまうと、背景が薄い時はダサく見えるしテキストシャドウとのコントラスト比扱いになってしまうかもなので、必ず一部にだけテキストシャドウをかける) - ダークモードの時：
背景#333333ぐらいの時に濃い目のビビッドな色を使いたい、という時は、該当文字を#121212ぐらいの0.5ピクセルのテキストシャドウで縁取りしてみると、いい感じで表示されるかも
(コントラスト比は#121212に対して4.50以上を確保)
例)：
-
通常モードの時：
-
時には、配色(色相・彩度・明度)の工夫実施は早々に断念して「色以外の形で見分けが付くような方法」主体に切り替えも有り
一部の色の区別が困難な方のために配慮するのは当然必要です。
が、「そのために配色で妥協必須」とは、実はどこにも書いてありません。(あくまで推奨)私のサイトの場合は代わりに、
「判別が必要な箇所については、グレースケール画面で見ても確実に区別がつくように、リンク下線と見間違えないであろう種類の下線を選んで引いて対応」
しています。
(判別が必ずしも必要ないサイト・ページ・箇所、例えば、Windows11 Screen Customize Tipsの場合、テーマカラーにグリーンを採用してはいますが殆どモノトーンに近い配色で、仮にグリーンに見えなくても差し障りはないので、特に対策していません)
例)：
-
「リンクに下線なんてもっての外」というポリシーを持ってないなら、文章中のテキストリンクにはデフォルトで下線を引いた方が無難・便利
(その場合、認知の障害を抱えている方が、リンク操作で変化がないと「あれ？ここもう見たっけ？まだだっけ？」になる事があるそうなので、link・visitedに(適宜それぞれ色の濃さまたは種類の違う)下線を引き、hover時は下線を消すようにする)
「最終的にはレイアウトと相談して」になるのですが、リンクに下線を引く引かないで「コントラスト比の縛り」が全然違ってきます。
(下線以外にも、リンクに「目印」をつける方法として太字・斜体・枠線などいろいろ方法はありますが、実用的には下線一択になるでしょう。
いずれにしても、リンクに色以外の「目印」を加えた場合、コントラスト比はリンク文字色と背景色だけの対応で済みます。
が、リンクの判別法が色のみの場合、それに加えて、隣接する文字とのコントラスト比も3.00以上、という条件も付けられます。
そうなると、色の選択バリエーション幅が激狭になってしまいます)ただ、ディスレクシア(テキストの読み書きが困難)を抱えている方は、リンク下線があるとテキストが読み難くなる事があるそうです。
その対策として、- 下線は文字から適度に離す(モダンブラウザーであればCSSで可能(Safariが可能かは不明))
- 下線の色は文字色より薄め(背景色が濃い場合は濃いめ)にする(Safariは「-webkit-」が必須)
- 下線の太さは1ピクセルに指定(指定無しだとChromeでは2ピクセル；Safariは指定が効かない)
-
文章中の文字サイズはrem指定にする、ベースの文字サイズは指定せず「ブラウザー任せ」にする、ベースの行間は文字サイズに反比例で設定(最小値1.5)
「私個人が見やすい」(裸眼だと重度障害者レベルでネット実質不可の近視、矯正だとメガネコンタクト作成時測定1.0か1.2ぐらい；尚、OS・ブラウザー設定は「標準」でフォントはメイリオ)でレイアウトすると、
ベースの文字サイズは14ピクセルか15ピクセルで行間1.7ぐらいがベスト、16ピクセルだと行間1.55～1.65以下、(18ピクセル以上だとむしろ何となく見づらいけどもし18ピクセル以上で見ろと言われたら行間は1.5一択)
になりますが、14ピクセル指定だと多分かなりの数の方がブラウザー設定変更の羽目になりそうなので、妥協して「ベース文字サイズは指定せずブラウザー任せ」にしてあります。
(初めてWebサイト開設した前世紀からずっと「ベース文字サイズはブラウザー任せ」にしてました)※「アクセシビリティ対応」解説サイトはこぞって「ベースの文字サイズは大きめに」と書いてありますが、ダサいのみならず、却って見づらい人も少数だとは思いますが確実にいますし(視力は悪くないけど視野が極端に狭い方とか)、手足に障害を抱えている方(「手の障害のため普段足でネットしている人が足を怪我」の場合もあるから、足も関係有り)にとってはスクロールする回数が増えるのは苦痛だと思うので、個人的には反対です。
(もし、どこのサイト見ても一律にそうなったら、それはそれでユーザー側があらかじめデフォルトブラウザーサイズ変更固定しておけば済みますが、一部のサイトのみ対応の現状だといちいち切り替えの手間がかかり面倒(特に、手足に障害を抱えているユーザーにとっては深刻))・・・と、いろいろ書きましたが、今時のメジャーブラウザーは設定変えなければ
「デフォルトフォントサイズ16ピクセル、フォントがブラウザーでメイリオ指定されていれば自動的に行間1.5」
になっているので、「あえて一切変更しない」という選択肢も無しとは言えないかもしれません。 -
「aria-label」を活用
「場所によっては、テキストをそこに表示するとレイアウトが損なわれたりコントラスト比4.50必須で辛い、アイコンや記号なら3.00だけど使えない時もあるし」
(特に漢字ひらがなカタカナは目につきやすく、各ページのファーストビューや、文章の端や文章から離れた場所にあるテキストリンクとレイアウトの調和は結構難しかったりします)・・・そんな時でも、スクリーンリーダーにのみ指定したテキストを読み上げてくれるのが、
「aria-label="任意のテキスト"」
いくら書いてもレイアウトには全く影響しないので、面倒がらずに活用しましょう。(<div>や<span>に(そのまま単独で)aria-labelを記載するのはルール違反で、実際スクリーンリーダーが読み上げない事も多いそうなので、<div>や<span>を使う時は必ずrole属性(注：例えば、絵文字・アイコンなど"形式的には画像ファイルではないけど見た目は画像のもの"には「role="img"」、(その他状況に応じて諸々)、どうしてもどれを選ぶべきか決めかねる場合は(やむなく)「role="region"」)も併記して下さい。
・・・但し、「role="img"」以外はイレギュラーな方法が多いので、もし<div><span>以外で使えそうなタグがあったらそちらを優先で使用するか、不可視テキスト(ブラウザー非表示でスクリーンリーダーのみ読み上げるテキスト；方法は「bootstrap」「TailwindCSS」などで検索して下さい)の活用も考慮しましょう)
例)：
←Backそのままだと「左やじるしバック」か「バック」と読み上げられると思いますが、例えばaria-labelで「スタートメニュー ブラウザーのタイル色 アンド アイコンを変更する方法 ページへ」と指定すれば、指定した方が優先で読み上げられます。
(因みに、上の例は、Windows10 Screen Customize Tips 中の 当ページ下部で実際にリンクとして使用しているものとレイアウト以外は同一) -
h2以下の見出しは、状況によっては不可視テキストで記述
前項「aria-label」とも関連しますが、h1は最悪「文章中の単語としてさりげなく」でも表示させるべきですが(仮にh1の見出しテキストが不可視でも、不可視にするためのCSSが正しく書けていればseoには影響しないらしいですが・・・)、h2以下は状況によっては不可視テキストでスクリーンリーダーのみ対応も十分ありだと思います。
(特にページ全体の文章量が少ないと、「こんな短いページに、見出し Top以外に必要？？見出しより、先に中身の方もっと充実させて」になってしまう場合すらあったりしますが、スクリーンリーダーユーザーにとっては見出しが読み上げられる事が重要なので)
なお、不可視テキストの記述方法は、「bootstrap」「TailwindCSS」などで検索して下さい(書き方は何通りかありますが、どれを選んでもokのはずです)
-
グローバルナビゲーションは「details」「summary」で作成
これでナビを作ると、簡単な作りで良ければCSS初心者でもアクセシブルなものを楽に作れるし、いいかな？と・・・
(スキップリンクの必要がなくなるからレイアウト的に優しいし、デフォルトではメニューの中身が閉じているからスクリーンリーダー読み上げにも優しいしで一石二鳥)ただ、「心臓に悪くない自然な開閉」をさせるには最低限のJSが必要なのと、マウスhoverで開閉できていたものがクリックで開閉に変わるので、「改悪」とPCユーザーは感じるかもしれません。
-
どんなに些細なCSSにもstyle属性(<div style="任意のテキスト"><span style="任意のテキスト">など」)は一切使わず、全てclassかIDで指定する
これがどう当ページのテーマと関係あるのかは、非常に長くなるので後日に詳しく書きたいと思いますが、実施しないとアクセシビリティ対応が非常に困難になります。
(これが主な理由で、当サイトと Windows Screen Customize Tipsを除くサイトは、アクセシビリティ対応ほぼ断念になりました)
を実施するといいでしょう。
※「hタグを指定すると字が大きくて太字でダサいから、指定しないか見えなくする」という人もいますが、CSS 一行書くだけで、細字にも小さい字にもできます。
その際大事なのが、
「細字にしたい場合は、必ず、font-weight: 400;で指定」
(但し例外として、ベースフォントを300に指定した時は、状況に応じてfont-weight: 300;も考慮)
(まだまだありますが、後日随時追加予定です)