お問い合わせ

WCAG 2.1「情報及び関係性」の検品について

品質管理スタッフ 小稗

アクセシビリティに関する検品は現在、WCAG 2.1の達成基準に沿って行っていますが、その中で今回は「1.3.1 情報及び関係性」という項目に注目して、検品工程での取り組みをご紹介したいと思います。

該当の1.3.1項目についてはWeb Content Accessibility Guidelines (WCAG) 2.1（ウェブアクセシビリティ基盤委員会による日本語訳）のページで確認できます。

達成基準には「何らかの形で提示されている情報、構造、及び関係性は、プログラムによる解釈が可能である、又はテキストで提供されている。」と記載されているのですが、少々抽象的な表現になっており、具体的な対応方法がイメージしにくい印象があります。

そこで社内ドキュメントでは業務上の判断基準となるよう、以下のように書き下して掲示しています。

  • HTML（文書構造）とCSS（見た目）を分けていること
  • 見出し、リスト、テーブルなどコンテンツ内の情報に適切なHTMLの要素を用いていること

「情報提供の方法によってコンテンツの情報や構造の受け取り方に差が生じないこと」を目指す項目と言い換えてよいと思います。

検品の方法

上記の妥当性を検品するにあたってはコンテンツの意味や文脈を追っていく必要があるため、機械的なチェックが難しく、検品部門のスタッフによる目視チェックを行っています。

HTMLの要素を視認するためには、ページのソースを開く（WindowsではCtrl+U）またはブラウザの開発者ツールを用いるという方法がありますが、ソース内の該当箇所を探すなど、認知や操作の面で都度の手間を要してしまいます。

普段の検品では、Web Developerというブラウザのアドオンを用いてCSS無効の状態を作り出す、併せてStylusというアドオンを利用し各要素をページ上に視覚的に表示するスタイルを当てて視認しやすい状態をつくり、目視チェックの精度とスピードを担保しています。

Web developer、Stylusともに、ChromeとFirefoxどちらでも使用可能です。

HTML要素とコンテンツの情報、意図にギャップがないか見比べる

例えば、見出しの役割を担っているテキストがあった場合、そのテキストには適切な要素（見出しにあたるのはh1～h6要素）が使われているか、というチェックをしていきます。h1～h6要素に関して言えば、ページ全体にかかるh1～h6要素が適切に用いられているか（原稿の文章構造に則した見出しレベルの使い分けができているか）を文章の大意をつかみながら確認しています。

仮に見出しの意味を持つテキストにp要素が用いられていた場合、h1～h6要素を用いることが妥当であることを実装したスタッフに問い合わせし、修正すべきか検討してもらっています。

見出しに限らず、箇条書きのリストマーカーなどもチェックの対象になり得ます。「■」や「・」といった記号文字を転用していることが珍しくないのですが、こうしたリストマーカーは視覚表現としてCSSで実装するのが望ましいといえます。

お客さまの事情も考慮した判断

柔軟な判断を要する場面もあります。マトリックス表を画像化してimg要素で実装していたとします。Excelでつくった表を画像として保存したものをイメージいただくとわかりやすいと思います。Webページへの実装にあたってはおそらく、ラベルと各セルの内容を代替テキストとして列挙することになります。

検品時にこうした実装を見つけた場合は、まずtable要素で表現することは難しいものか、作業したスタッフに確認することにしています。1.3.1の主旨からすると、画像よりtable要素を用いてマークアップすることが望ましいと考えるためです。

ところが、お客さまによっては紙のパンフレットに掲載した表をそのまま掲載したいというご要望をいただくケースがあります。アクセシビリティ視点とお客さまのご要望が少なからずバッティングする状況です。この場合は、アクセシビリティ上のデメリットをお客さまにご説明、ご理解をいただいた上でどちらかを選んでいただくことがベターと考えています。

検品部門ではこうした課題を見つけた場合、前工程の関係者に内容をフィードバックし、お客さまとの協議を促すようにしています。

2022年の記事一覧に戻る