Webアクセシビリティのガイドラインを読んで、サイト制作の基本の振り返りを

こんにちは。現在、Webアクセシビリティラボというラボにて活動をしている清水と申します。
ラボ活動の一環で、WAIC(ウェブアクセシビリティ基盤委員会 Web Accessibility Infrastructure Committee)のガイドラインを読むワークショップを開催しました。今回の記事ではそちらの内容を読んで得た、ガイドラインについての理解などを共有させていただきます。

今回のワークショップの目的は、「チーム内で共通認識を持つこと」です。チームのメインのメンバーが抜けた場合も、「Webアクセシビリティとは何か」や「Webアクセシビリティに対してできること」の認識を合わせられるようにインプットしておきたいという狙いがありました。また、今までラボでこのような文書をあまり読んでこなかった経緯もあり、今回ガイドラインを確認するワークショップを行うことになりました。
今回読むことになった文章は、WAICのWebアクセシビリティガイドライン2.0(https://waic.jp/docs/WCAG20/Overview.html)です。このガイドラインは、すでに2.1が発表されているなど、少し最新性に欠ける部分もあるかもしれませんが、現在JIS規格となっているのは2.0のガイドラインであるため、今回はこちらを読むこととしました。

今回の記事では、①全体的な建付けの説明、②各章の内容について説明する、③文章を読んだ所感や意識の変化、という構成で進めていきます。
まだまだ活動開始から日が浅く、人も少ないラボですので、ラボでの知識を共有してもあまり深い解説などは書くことができませんが、この文章の理解の一助としていただければ幸いです。

①全体的な建付け

この文章の建付けとしては、まず、知覚可能、操作可能、理解可能、及び堅牢の4つの原則があります。その原則の下に、ガイドラインというものが存在している構造です。ガイドラインの下には、A、AA、AAAの3段階に分けられた基準があります。Aが最も低い基準で、AAAが最も高い基準です。
ガイドラインは、これをすべてクリアするように目指すものではなく、自分で達成を目指す目標を決めるものです。
以下の各章の内容説明では、それぞれのガイドラインの項目に何が書いてあるかまでを説明します。

②各章の内容について

1知覚可能

簡単にまとめると、「多くの人が知覚=認識できる」ようにしようという内容です。
「ガイドライン 1.1 テキストによる代替」と「ガイドライン 1.2 時間依存メディア」の2つで、テキスト以外のコンテンツ(画像、動画、音声など)には代替コンテンツを準備することがガイドラインとして設定されています。
「ガイドライン 1.3 適応可能」では、プログラムで解釈可能であることが記載されています。
「ガイドライン 1.4 判別可能」は、色だけに依存しない、音声の自動再生は止めることができるなど、人によって解釈が異なるものに関するガイドラインとなっています。

2操作可能

ここでは、ユーザーの操作についてサポートする内容が広範に含まれています。「操作」といっても、単にユーザーインターフェースによる操作だけではなく、操作を行う環境に関するガイドラインも含まれています。
「ガイドライン 2.1 キーボード操作可能」では、名前通りすべてのコンテンツをキーボードで操作できるようにするというのがこの項目の内容です。なお、キーボードで操作できないもの(絵など)は例外とされています。(参考:https://waic.jp/docs/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html
「ガイドライン 2.2 十分な時間」もそのまま、操作するのに十分な時間を確保するということを示しています。具体的には、操作の制限時間を解除するなど、ユーザーによりそのコンテンツも制御できるようにすることが書かれています。なお、ロード画面などは操作可能にする場所の例外とされています。
「ガイドライン 2.3 発作の防止」は、光の点滅などを避けるという内容です。
「ガイドライン 2.4 ナビゲーション可能」については、簡単にいえば流し読みが可能になるようにするというものです。タイトルがある、コンテンツをスキップできる、リンクの目的が分かりやすいなどがここに含まれています。

3理解可能

簡単にまとめると、「使い方が分かること」に関する内容がここに含まれています。
「ガイドライン 3.1 読みやすさ」は、コンテンツを読みやすくするためのガイドラインで す。
「ガイドライン 3.2 予測可能」については、必要以上に分かりにくい構成にせず、文脈やナビゲーションなどを分かりやすい形にすることを求めています。
「ガイドライン 3.3 入力支援」は、フォームなどの入力ミスをしない仕組み、もしくはその検知をするシステムの必要について記載があります。
ここで頻発する「特定するメカニズム」とは、専門的な言葉や表現などについて、一般の人でも分かるようにしておくということです。

4堅牢

この部分には、ガイドラインが一つしかなく、そこにはタグを閉じるなど、構文をきちんとしておくことが記載されています。この部分は、多くのブラウザやOSに対応させることが目的となっています。

③ 文章を読んだ所感や意識の変化

業務内容の違いなどもあるため、実際の業務のアウトプットまでこのガイドラインは活かすことはできていませんが、意識が変わったと思う部分はあります。
このガイドラインには、かなり基礎の内容が多いと思うと同時に、日ごろその基礎が疎かになっているのではないかと感じました。
日々の更新に追われるうちに、内容を精査できず、今回のガイドラインに満たないアクセシビリティではない内容を通していることがあります。
例えば、1.3.1および1.3.2には、構文・構造が解釈できるように記載するということが書かれていますが、現在使用しているCMSでは、それらの構文を確認することが難しく、プログラム的に解釈しにくいコードになっている場合が見受けられます。このような部分には、ワークショップの実施後から危機感を感じるようになりました。
他の参加したメンバーからも、「どちらかといえば、新たな知見を得るというよりも、基礎が抜けないようにすることを意識しなければいけないと感じた。」という意見がありました。

内容としては以上です。
つたない説明ではありますが、ご参考にしていただければ幸いです。
今回の説明では、基本的な事項を述べておりますので、より詳しく知りたいという方は、上のリンクなどからアクセスし、読んでみていただけると幸いです。

この記事を書いた人

清水琢海

清水琢海

2022年新卒入社。ディレクター職です。「鎌倉殿の13人」から、大河ドラマが日曜日の楽しみになりました。

おすすめ記事

タグ

2020新卒バトンAdobe IllustratorBIツールBOTCCDLab.CSSCSV事例DockerDXECExcelExcel関数GitGoogleAnalyticsGoogleスプレッドシートGoogleデータポータルLT会MembersDinerOJTPhotoshopPythonRubySDGsSEOSimilarWebSlackSNSSocial Art JapanプロジェクトSQLUIUXUXリサーチVSCodeWebディレクションWebディレクターWebマーケティングWeb解析Well-beingWordPressアクセシビリティアナリティクスウェビナーウェビナー運用エシカルエシカルファッションエンジニアオウンドメディアオンラインイベントお悩み相談室キャリアクライアントワークコーディングコミュニケーションコンテンツマーケティングコンペサービスサイト構造サステイナブルサンプルスウェーデンスキルアップセミナーソーシャルアーティストソーシャルクリエイターチームビルディングツールデータディレクションディレクターデザイナーデザインデンマークトンマナナレッジブームの裏側フレームワークプログラミングプログラミング教育フロントエンドマーケティングマネジメントスキルミーティングメタバースメンバーズメディカルマーケティングカンパニーメンバーズルーツカンパニーユーザーテストライティングラボ活動リモートワークショップワークスタイル事例事例紹介仕事術仙台仙台オフィス分析効率化勉強会動画北欧医療業界品質管理地方金融企業基本情報技術者試験広告運用提案数学新卒研修新規構築機械学習気候変動海洋プラスチック問題生産性向上産学連携研修社会課題社会課題調査競技プログラミング脱炭素自動化ツール色彩検定製薬業界試験対策資格開発環境障がい者雇用食の問題