サイトアイコン IT & ライフハックブログ|学びと実践のためのアイデア集

JIS X 8341-3:2016の「互換性」とは?実装と確認のポイントを解説

Programmer hands Working at home with computer. Man writing a code. Men programmer hands on the keyboard. Hand coding and showing code graphic on screen. Web Design Business Concep

JIS X 8341-3:2016の「互換性」は、ウェブコンテンツの構造、名称、状態などの情報を、ブラウザや支援技術が解釈できるようにするための考え方です。
見た目が整っていても、見出しやボタンの意味がコードから読み取れなければ、利用環境によっては操作や理解が難しくなります。
この記事では、原文で挙げられている要点を、実装と確認の流れに沿って整理します。

「互換性」が目指すこと

ここでいう「互換性」は、どの環境でもまったく同じ表示や操作感を保証するという意味ではありません。
ブラウザや支援技術がコンテンツの意味を受け取りやすくし、利用環境の違いによる支障を減らすことを目指します。

ユーザーエージェント
ウェブコンテンツを表示したり、利用者に伝えたりするソフトウェアです。ブラウザや音声ブラウザなどが該当します。
支援技術
利用者の閲覧や操作を補うための技術です。画面上の情報を音声で伝えるスクリーンリーダーや、表示を拡大するソフトウェアなどが挙げられます。
アクセシビリティAPI
画面にある要素の役割、名称、状態などを支援技術へ伝えるための仕組みです。
ARIA
Accessible Rich Internet Applicationsの略で、視覚的な情報や操作部品の状態を支援技術に伝えるために使うHTMLの属性です。

実装で確認したい三つの柱

HTMLで文書の構造を表す

見出しには見出し要素、箇条書きにはリスト要素を使い、見た目だけでなくコードでも構造を示します。
例えば、文字を大きく太くしただけの行は、見た目では見出しに見えても、支援技術が見出しとして認識できるとは限りません。
内容に合ったHTMLを使うことで、利用者は見出し単位で移動したり、情報のまとまりを把握したりしやすくなります。

操作部品の意味と状態を伝える

ボタンや入力欄などの操作部品では、何をする要素なのか、どのような状態なのかが支援技術にも伝わるようにします。
視覚的な変化だけに頼ると、その変化を確認できない利用者には情報が届きません。
HTMLだけで意味を十分に表せない場合はARIAを用い、名称、役割、状態の伝わり方を補います。

解釈を妨げるコードの誤りを減らす

マークアップの崩れや属性の誤りがあると、ブラウザと支援技術が要素を意図どおりに解釈できない場合があります。
バリデーションツールでHTMLやCSSのエラーを調べ、検出された問題がコンテンツの構造や操作に影響していないかを確認します。
ただし、ツールでエラーが出ないことだけでは、実際の使いやすさまでは判断できません。

互換性を高める実装上の配慮

原文で挙げられていた次の二点は、利用できる環境を狭めないための実装上の配慮として整理できます。

すべての機能に同じフォールバックが必要になるわけではありません。
利用者が完了すべき操作と、失われては困る情報を先に洗い出し、その範囲に応じて代替手段を設計します。

確認はツールと実機を組み合わせる

互換性の確認は、コードの検査だけで終わらせず、実際の利用に近い方法まで段階的に進めます。

  1. 構造を確認する:見出し、リスト、ボタン、入力欄が内容に合ったHTMLで表されているかを見ます。
  2. コードの誤りを調べる:バリデーションツールでエラーを検出し、構造や操作への影響を確認します。
  3. 支援技術への伝わり方を確認する:スクリーンリーダーなどを使い、要素の名称、役割、状態が理解できるかを確かめます。
  4. 異なる環境で試す:複数のブラウザや必要な支援技術で、主要な閲覧と操作が行えるかを確認します。
  5. 重要な機能の代替手段を確認する:一部の機能が使えない状況でも、情報の取得や移動が行えるかを見直します。

自動検査と手動確認には、それぞれ異なる役割があります。
ウェブアクセシビリティチェックの基本も確認し、検出と実際の操作確認を組み合わせて進めると、見落としを減らしやすくなります。

対応時のチェックリスト

互換性は実装と確認の両方で整える

JIS X 8341-3:2016の「互換性」に対応するには、標準に沿ったマークアップ、支援技術へ意味を伝える実装、コードの検査を組み合わせます。
そのうえで、スクリーンリーダーなどを使って主要な情報と操作が伝わるかを確かめることが、実際の支障を見つける手がかりになります。
「コードに誤りがない」と「利用者が問題なく使える」は同じではないため、ツールの結果と実際の操作確認を分けて評価します。


ウェブアクセシビリティ対応を進めたい方へ

当社では、UUU ウェブアクセシビリティウィジェットツールを提供しています。
機能や導入方法については、サービスページで詳細をご確認ください。

モバイルバージョンを終了