いますぐできるWEBアクセシビリティ向上

WEBアクセシビリティとは
（コーダーが）具体的にできること
まとめ
参考サイト

WEBアクセシビリティとは

「WEBアクセシビリティ」という言葉を聞いたことはありますか？
誰でも、どんな状況でも使えるWEBサイトを目指そう、という考え方のことです。
目の見えない人、マウスが使えない人、高齢者なども使えるように…というとわかりやすいのですが、特定の方々に対して配慮をするというよりは、もっと広く浅くユーザーを増やす試みです。

例えば
・レスポンシブデザイン→スマホでも見れる！
・サイトの表示速度を早める→劣悪なインターネット環境でも見れる！
などももちろんWEBアクセシビリティの向上に繋がります。
なのでサイトの品質を高める指標の一つとして捉えてもらっても大丈夫です。
SEO対策と共通する部分も多くあります。

W3Cがガイドラインを出しています。
WCAG (Web Content Accessibility Guidelines)（日本語訳はこちら）
ガイドラインだけ見ているとやたら難しそうですが（実際難しいのもありますが）、いますぐできることもたくさんあるのでご紹介できたらと思います。

（コーダーが）具体的にできること

WCAGでは「すべての機能をキーボードから利用できるようにすること」を推奨しています。
通常ブラウザではtabキーを押すことで選択→エンターキーでクリックと同じ動作ができるので、これを妨げないようにすればいいのですが、いくつか落とし穴があります。

inputのdisplay:none;をやめる

//これはだめ！
.input[type="checkbox"] {
    display:none;
}

チェックボックスやラジオボタンの装飾をするため、inputにdisplay:none;を当てるケースをよく見かけます。
私自身も今までずっと使ってきたテクニックなのですが……これではtabキーで選択できなくなってしまいます。

代わりに以下のCSS(通称visually-hidden)を使ってinputを消しましょう。
これは要素を見えなくするが、操作はできる(スクリーンリーダーでの読み上げも可能)ように先人により編み出されたCSSです。
汎用性が高いので、スニペットに入れたりmixin化しておいたりすると良いと思います。Bootstrapでも採用されています！

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

あとはfocus時のスタイルも消さずに設定しておきましょう。

outline:none;をやめる

//これはだめ！
a {
    outline:none;
}

web制作ではサイトにreset.cssを読み込むことが多いと思うのですが、もし「outline:none;」が含まれている場合は気を付けてください。
これがクリック可能な要素（aなど）に効いていると、tabキーで選択できても見た目ではわからないです。

クリックできる箇所はaタグやbuttonタグに！

（こういうやつです）

開閉できるFAQやタブメニューなど、クリックできる要素をついついdivタグやliタグで作ってしまっていることがあります（個人的にJSがらみのところは意識が及ばないことが多いです）。
これではtabキーで選択できないので注意しましょう。サイト制作時に一通りキーボードだけで触ってみると良いと思います。

まとめ

今回記事にまとめる中で、WEBアクセシビリティについての考え方は何もWEBに限ったことでなく、広く共有されるべき考え方だと感じました。
「今の時代配慮しないといけないから…」という言い方はあまりに上から目線だという気づきもありました。
今まで排除されていた人々を取り込むことで、結果皆が得をするという視点は大切だと思います。

それでは、良いコーダーライフを！