Webアクセシビリティの理解に必須とも言えるWCAG2.1の解説書が翻訳されました

原文は2019年3月6日に公開されていましたので、翻訳版もその日程にならっているようです。

WCAG 2.1 解説書（日本語訳）
https://waic.jp/docs/WCAG21/Understanding/
WCAG 2.1 解説書（原文）
https://w3c.github.io/wcag/understanding/

みなさんこんばんは。
宮城県仙台市にてWebのちからで様々な情報にアクセスしやすくし、様々なパフォーマンス改善をしちゃったりする時にはWebディレクター、時にはWebプランナー、時にはWebエンジニア、時にはWebデザイナー。
世界中の「Webアクセシビリティの実現を考えている方」の味方、ma-sanです。

Webアクセシビリティというと、かんたんに説明するとしたら「Webにアクセスできる度合い」や「Webのバリアフリー」ということでしょうか。
健常者、障害を持った方、に限らずあらゆる環境を含めてアクセスできるようにしよう、という考え方でもあります。

というわけで本日のお話です。

1．WCAG2.1

詳細は下記URLを参考にしてください。

Web Content Accessibility Guidelines (WCAG) 2.1（日本語訳）
https://waic.jp/docs/WCAG21/

Web上のコンテンツが、より多くの方に届けるための設計方法やチェックレベルなどを公開しています。
達成度合いがA、AA、AAAと分けられていて、それらに適合しているのかを測る目安にもなっています。
操作性、コンテンツの見せ方、フォントの大きさ、画像の見せ方、色の使い方など様々な項目が存在しています。

また、このWCAGは「品質」としても扱われ、対応しないことによって利用できない人も存在し、海外では訴訟問題が発生することもあります。

2．WCAG2.1 解説書

改めまして詳細は下記URLを参考にしてください。

WCAG 2.1 解説書（日本語訳）
https://waic.jp/docs/WCAG21/Understanding/

WCAG2.0の頃からですが、ガイドラインの説明が抽象的だったりしてわかりにくいと言われることもありますが、解説書が存在しています。
今回であればWCAG2.1の解説書が公開されたため、各項目に対してどのようにすればいいかわからない、ということであれば参考にしてみると良いと思います。

特に、デザイナーだとしたら気になるのは画像周りの取り扱いや色の使い方かと思いますので、下記に軽くまとめておきますが、可能であれば全体的に確認したほうがいいです。

達成基準 1.4.5: 文字画像を理解する
https://waic.jp/docs/WCAG21/Understanding/images-of-text.html
達成基準 1.4.11: 非テキストのコントラストを理解する
https://waic.jp/docs/WCAG21/Understanding/non-text-contrast.html

まとめ

WCAGはWeb業界で働く人にとっては確認すべき項目ですが、意外と認知されていないこともあります。
もしこの記事を読んだ方は「品質」や「多くの方にアクセスできるようにする」という考えを持ってみましょう。