デザイナーが抑えるべきアクセシビリティのポイント

はじめまして。
福岡、大分を拠点にWEB制作などをしていますQTmediadデザインチームともうします。

私達は普段、官公庁サイトや、観光サイトの制作を軸に、
企業様サイトや印刷物など、多岐にわたってデザインを制作しております。

日々の業務に追われ、自分たちの情報発信まで手が回らない状況だったのですが、アウトプットこそ成長につながる...！と一念発起してnoteを開設しました。

仕事上で得た知識や気付き、tipsなどを弊社デザイナーが更新していく予定であります。。

初回は言い出しっぺの鎌田が担当いたします！

弊社は官公庁様のサイト制作が多いので、
平成25年の障害を理由とする差別の解消の推進に関する法律の施行以降、
公的機関のサイトでは、WCAG 2.0 の達成基準レベル「AA」を満たす、
アクセシビリティAA準拠のサイトのお仕事を頂くことがとても多い、というか必須になってきつつあります。

そこで自分がアクセシビリティ対応をしてみて感じたことは奥が深い..！
ということです。

ネット上でも確実な答えがなかったり、なかなか正解に辿り着けません！

とにかくvalidatorとMIチェッカーをかける、
音声読み上げをして確認する、しかしWAI-ARIAなどのチェッカーで判定はされないけど、アクセシビリティ上必要なタグがあるので、これをこぼさないように対応することがなかなか難しいです。

そこで自分がコーディングする上でついつい見落としがちになると思ったポイントを以下にまとめてみました。

アクセシビリティで1番重要なのは「セマンティックなHTML構造である（
コンテンツの意味に合ったタグを使ってマークアップされているということ）」ということを前提にお読みください。

1.意味のあるアイコン、画像はとにかく<img>で置く

普段コーディングをしていると、ついついアイコンは疑似要素や背景画像で置きがちですが、意味のあるアイコン（電話番号マーク、閉じるの×など・・）を疑似要素や背景画像でおくと全く読み上げてくれないので、
意味のあるアイコンは必ず<img>で置いてaltを記述しましょう！

読み上げてみると分かるのですが、電話番号の読み上げが唐突に始まると、かなり不親切です。
fontawesomeを<i>で置いて意味を記述した場合は<i>の後に<spanclass="sr-only">意味</span>を入れると読み上げてくれます。

アイコン+テキストのアイコンに無理やりtitleタグやaria-labelで読み上げようとすると今度はテキスト部分を読んでくれないので要注意です！

2.同一セクション内での見出しの順番に気を付ける

内容に合わせたh2、h3などの見出しをきちんとつけましょうということです。
内容に合わせてレベルが下がっていくので、深い構造だとhが足りなくなってしまします。（hはh6までしかない）
なので、サイトのロゴにh1を使うとhが足りなくなってしまうこともあるので、ページのタイトルにh1を使うのがおすすめです！
ちゃんと順番通り記述されているかは、chromeの拡張機能「disable-HTML」でCSSをオフにすると楽に確認ができますよ。

3.全ての操作をキーボードで操作できるように。

メガメニューがきちんと開くかなど、全てにキーボードで遷移できるようにしましょう。

4.focusのスタイルをCSSで指定しない。

focusのスタイルを指定するとアクセシビリティ配慮してます感が出ますが、
ブラウザの提供するfocusの色の方が背景が何色でも見える2色になっていたりと工夫されているので、（chromeの場合）
自らで色やスタイルを指定するのはやめましょう！
reset.cssで:focus { outline: 0; }になっていないかも確認しましょう。

5.多言語を使っている箇所にはそれぞれにlang属性を指定しよう

たとえば多言語切り替えのボタンにenglishとある場合には<span lang="en">を指定しましょう。

6.インタラクティブな（JSなどで変化を起こす）要素にはWAI-ARIAを使ってマシンリーダブルにしよう。

セマンティックなHTMLだけでは、インタラクティブな要素のアクセシビリティ対応ができない場合があります。
この時に使うのがWAI-ARIAです。
このWAI-ARIAは音声や視覚といった、人が見たり聞いたりするものに関係するわけではない機能が多く存在します。
なぜなのか・・
それはアクセシビリティには「人が理解できること」以外に「ブラウザが理解できること（マシンリーダブル）」という2つの対象があるからなのです！
WAI-ARIAがなぜ必要かというと、ブラウザにHTMLがどういう状態なのか、どういう機能があるかを教えてあげる必要があるんですね！（奥が深い！）

基本的にそのインタラクティブな要素には
●aria-labelやaria-labelledbyで名前をつけましょう
●その要素がどういう役割なのか（role=tab、role=buttonなど）を記述しましょう
●展開/折り畳みがある場合、その要素がどういう状態なのか（aria-expanded= "true"など）を記述しましょう
（JavaScript記述する必要あり）
などの対応をしましょう。

上記加え、画像のaltの記述の仕方（違う画像で同じaltを使わない）
文字のコントラスト比など基本的な対応をしていきます。

これらをクリアしてアクセシビリティAA準拠のサイトが完成します！

ただ単にアクセシビリティAA準拠というだけでなく、
すべての方に使いやすく、親切なサイトを作っていきたいものですね。


QTmediaではアクセシビリティ対応の実績多数です。