メインコンテンツへスキップ
Niquelao スペイン語で学ぶウェブアクセシビリティとフロントエンド開発:WCAG標準、アクセシブルなウィジェット、Firefox拡張機能を実際のコードと共に解説。

当サイトの一部にはアフィリエイトリンクが含まれています。これらのリンク経由でご購入いただいた場合、追加費用なしで弊社に手数料が支払われることがありますが、推奨内容に影響はありません。詳細はアフィリエイト開示ページをご確認ください。 アフィリエイト開示.

Accesibilidad web: características clave comparadas

Web アクセシビリティは、ヨーロッパの EN 301 549 規格で要求される WCAG 2.2 の 13 のレベル A および AA 基準に従って明確化された 4 つの測定可能な特性 (知覚可能、操作可能、理解可能、堅牢) によって定義されます。これら 4 つの特性は評価基準として機能します。ウィジェット、ツール、フレームワークは、どれだけ満たしているか、またどのような堅牢性を備えているかに基づいて判断されます。

重要なポイント

  • WCAG の 4 つの特性 (認識可能、操作可能、理解可能、堅牢) は、スローガンではなく評価フレームワークです。それぞれが文書化された手法を使用して検証可能な基準をグループ化します。
  • レベル AA は、ほとんどのプロジェクトの実際的な目標です。レベル AA は、コントラスト、キーボード、フォーム ラベル、構造、エラー メッセージをカバーしており、欧州の法律を参照するしきい値です。
  • 実際の問題の一部以上を検出する自動ツールはありません。キーボードとスクリーン リーダーを使用した手動テストは依然として重要です。
  • 「アクセス可能な」ウィジェットまたはフレームワークを選択するには、マーケティングだけでなく、キーボードでの動作、フォーカス管理、および ARIA セマンティクスをチェックする必要があります。
  • コンプライアンスは、アーカイブされる 1 回限りの監査ではなく、製品ライフサイクルに関連付けられた継続的なプロセスです。

「Webアクセシビリティ特性」とは本当はどういう意味か

「特性」という用語は、切り分けて考えるべき2つの意味で使われています。1つ目は規範的な意味です。WCAGは成功基準を、知覚可能、操作可能、理解可能、堅牢という4つの原則(特性)に整理しており、英語の頭文字をとってPOURと呼ばれています。2つ目は実用的な意味です。開発者がコンポーネントに「優れたアクセシビリティ特性がある」と言う場合、通常は具体的な動作(キーボードナビゲーション、正しいARIAロール、十分なコントラスト、代替テキストなど)のセットを指しています。これら両方の視点が必要です。前者が評価の枠組みを与え、後者が実装可能な詳細を与えます。

2023年にW3Cによって公開されたWCAG 2.2では、これら4つの原則を維持しつつ、ターゲットサイズ(最小)(2.5.8)やヘルプの一貫性(3.2.6)などの基準が追加されました。レベルAは最小限の基準をまとめ、レベルAAはほとんどのサイトにとって最も重要な基準を追加し、レベルAAAは理想的な目標であり、完全に要求されることは稀です。スペインやラテンアメリカ向けのXHTML/CSSサイトにとって現実的な目標はレベルAAです。なぜなら、欧州整合規格EN 301 549、ひいては公共セクターのウェブサイトのアクセシビリティに関する指令(EU) 2016/2102が参照しているレベルだからです。

WCAGの4つの特性をひとつずつ解説

知覚可能

「知覚可能」特性は、ユーザーがどの感覚を使っているかに関わらず、情報を知覚できる形式で提示することを要求します。具体的には、非テキストコンテンツへの代替テキストの提供(1.1.1)、マルチメディアへの字幕と書き起こしの提供(1.2.x)、位置や色だけに依存しない意味的な構造(1.3.1)、標準テキストで4.5:1、大きなテキストで3:1の最小コントラスト(1.4.3)、および水平スクロールなしで200%まで拡大しても読み取り可能なコンテンツ(1.4.10)などが挙げられます。古いXHTMLサイトでよくある間違いは、レイアウト用テーブルや文字画像を使用することです。これらは読み上げ順序やスケーラビリティを損なうため、知覚可能性を壊します。

操作可能

「操作可能」特性は、すべてのインターフェースコンポーネントがキーボードおよび支援技術で動作することを保証します。重要な基準は、完全なキーボード操作可能性(2.1.1)、フォーカストラップの回避(2.1.2)、調整可能な時間制限(2.2.1)、動くコンテンツを停止させるメカニズム(2.2.2)、スキップリンクと記述的なページタイトルによるナビゲーション(2.4.1, 2.4.2)、論理的なフォーカス順序(2.4.3)、および十分なターゲットサイズ(2.5.8)です。多くのドロップダウンメニュー、モーダル、カルーセルがここで失敗します。フォーカスを奪ったまま戻さないか、キーボード同等機能のないマウスイベント(onmouseover)に依存しているためです。

納得できる

「理解可能」特性は、コンテンツとインターフェースの操作が理解しやすいものであることを扱います。これには、lang属性によるページ言語の宣言(3.1.1)、フォームのラベルと入力支援(3.3.2)、エラーの特定と説明(3.3.1, 3.3.3)、ページ間での一貫したナビゲーション(3.2.3)、そしてWCAG 2.2ではヘルプの一貫性(3.2.6)が含まれます。フォームでフィールドを赤く表示しても、何が間違っていたのかを説明しない場合、障害のない人には視覚的に明確であっても、この特性に違反することになります。

関連: — 48 時間で IA が WCAG に最高の瞬間をもたらす.

堅牢

「堅牢」特性は、現在および将来のユーザーエージェントを含む幅広い環境でコンテンツが動作することを要求します。中心となる基準は、正しい構文解析(4.1.1、WCAG 2.2では廃止されましたがXHTMLでは重要)と、インターフェースコンポーネントの名前、役割、値の提供(4.1.2)です。実際には、有効なHTMLを書き、可能な限りネイティブ要素を使用し、代替手段がない場合にのみARIAを使用することを意味します。これは「ネイティブのHTML要素で実現できる場合はARIAを使わない」というARIAの第一原則に従うことです。

比較表: さまざまな機能を評価できるウィジェットの比較

特性ウィジェットの互換性警告サイン
知覚できる代替テキスト、コントラストの有無、色に依存しない画像を検証し、構造とコントラストを無視
操作可能キーボードナビゲーション、フォーカス管理、トラップなしマウスが必要、またはEscapeキーで閉じない
理解できるエチケット、エラー報告、慣用句説明テキストのないエラー表示
堅牢HTML の有効性、ロール ARIA の修正、さまざまな機能buttonの代わりにonclick付きのdivを使用している

決定基準を選択するための基準を作成します。あなたは、最初のフィルターを使用して「知覚可能な」コラムを作成し、証明書を取得しません。

ツールと特性の関係

評価の自動化 - DevTools や WAVE o Lighthouse を使用して、知覚可能な特徴的な問題と堅牢な問題を検出します。代替テキスト、不適切なコントラスト、ARIA 不正な形式、見出しの階層。一部の内容については問題ありません: 代替テキストの説明を読む必要はありません。送信されたエラーを確認する必要はありません。 WebAIM のドキュメントは、人間の再評価の自動評価と一致しています。

一見の価値があります: — 簡単な操作で計画を立てるためのウィジェットを無料で利用できます.

手動テストでは、ツールでは認識できない部分がカバーされます。最小限の手順には、Tab および Shift+Tab のみを使用してページ全体を移動すること、フォーカスが常に表示されていることを確認すること、スクリーン リーダー (NVDA または VoiceOver) でテストすること、200% にズームして重複するものがないことを確認すること、CSS を無効にしてコンテンツの順序が適切であることを確認することが含まれます。この最後のステップでは、どのツールでも指摘できない、理解できる特性の問題が明らかになります。

プロジェクトタイプ別の選び方

スペインの公共セクターのサイトは、法的に要求されているため、レベルAAを目指し、適合性を文書化する必要があります。個人ブログであれば、現実的な障壁の多くを解消する「知覚可能」と「操作可能」を優先してもよいでしょう。インタラクティブなコンポーネントが多い複雑なWebアプリでは、「堅牢」と「操作可能」に投資する必要があります。カスタムウィジェットが不具合の主な原因となるためです。決定すべきは「いくつの特性を満たすか」ではなく、「どの特性がユーザーにとって、また法的義務にとって不可欠か」ということです。

フレームワークとコンポーネント ライブラリの場合、実際の評価には、コンポーネントを採用する前にキーボードを使用してテストすることが含まれます。矢印に反応しないカスタムの「選択」、フォーカスを正しくトラップしないモーダル、またはホバー時にのみ表示されるツールヒントは、ライブラリが操作性よりも外観を優先していることを示しています。 W3C ARIA オーサリング プラクティス ガイドのドキュメントでは、各ウィジェットの予想されるパターンが説明されており、比較のためのベースラインが提供されています。

解釈時のエラーが頻繁に発生します

最初の間違いは、4つの特性を単なる二値的なチェックリストとして扱うことです。適合性は累積的かつ文脈的です。40の基準を満たしていても、1つの基準の不備でユーザーが完全にブロックされることがあります。2つ目の間違いは、スクリプトでサイトを修正すると謳う「オーバーレイ」やアクセシビリティウィジェットを信頼することです。これらの製品は根本的なHTMLを修正せず、コミュニティや障害者団体から批判されています。3つ目の間違いは、一度きりの監査で済ませることです。コンテンツは変わり、コンポーネントは更新され、適合性は低下します。アクセシビリティは、各リリースでテストを行う開発サイクルに組み込まれた継続的なプロセスです。

よくある質問

¿クアレスは WCAG の Web サイトにアクセスできるようにするための機能を持っていますか?

WCAG は、その基準を、POUR として知られる、知覚可能、操作可能、理解可能、堅牢という 4 つの原則にまとめています。各原則は、検証可能な成功基準をレベル A、AA、AAA にグループ化します。この構造は WCAG 2.2 でも維持されており、サイトまたはコンポーネントを評価するための基礎となります。

¿WCAG は、この場所に準拠していますか?

Para laMayoría de sitios, el nivel AA es ​​el objetivo práctico y el que Referencia la lawislación europea a través del estándar EN 301 549. El nivel A cubre lo minimo y el AAA es ​​difícil de alcanzar en su totalidad。 UE の公開セクターごとに、AA が適用可能です。

関連: — La certificación que acredita tu experiencia en accesibilidad.

¿アクセスできる機能は何ですか?

いいえ。問題を自動的に検出し、対照的なテキストを表示し、代替テキストと ARIA マル形式を検出し、代替テキストを適切に評価するかどうかを判断します。パンタラの改訂マニュアルは、現実に準拠するための計り知れないものです。

¿どのような違いがありますか? アクセスできるかどうか?

アクセシビリティにより、障害を持つ人々がコンテンツを認識、操作、理解、使用できるようになります。ユーザビリティは、あらゆるユーザーにとってエクスペリエンスが効率的で満足できるものであることを保証することを目指しています。通常、アクセス可能なサイトはより使いやすくなりますが、使用可能なサイトが必ずしもアクセスできるとは限りません。

¿自動でアクセスできるウィジェットやオーバーレイはありませんか?

HTML の構造やセマンティカに関する問題については正誤表はありません。 La comunidad deaccesibilidad y diversos los han cuestionado porque pueden dar una falsa sensación de conformidad についての情報を提供します。コンポーネントやコンポーネントを修正する必要はありませんが、スクリプトのスーパーポナーは必要ありません。

一見の価値があります: — Accesibilidad gestionada: 人間性の見直しと自動化の組み合わせ.

¿XHTML/CSS は存在しますか?

重要な影響を与える: HTML の有効性と意味、画像の代替テキスト、十分なコントラスト、公式の形式の完全性を確認します。自動監査と操作マニュアルの補完を行います。適切なプロセスに関する基準と反復に関する文書。

よくある質問

WCAG で Web サイトにアクセスできるようになりましたか?

WCAG は、その基準を、POUR として知られる、知覚可能、操作可能、理解可能、堅牢という 4 つの原則にまとめています。各原則は、検証可能な成功基準をレベル A、AA、AAA にグループ化します。この構造は WCAG 2.2 でも維持されており、サイトまたはコンポーネントを評価するための基礎となります。

Qué nivel de conformidad WCAG deberíacumplir mi sitio?

Para laMayoría de sitios, el nivel AA es ​​el objetivo práctico y el que Referencia la lawislación europea a través del estándar EN 301 549. El nivel A cubre lo minimo y el AAA es ​​difícil de alcanzar en su totalidad。 UE の公開セクターごとに、AA が適用可能です。

¿アクセスできる機能は何ですか?

いいえ。問題を自動的に検出し、対照的なテキストを表示し、代替テキストと ARIA マル形式を検出し、代替テキストを適切に評価するかどうかを判断します。パンタラの改訂マニュアルは、現実に準拠するための計り知れないものです。

¿どのような違いがありますか? アクセスと使用の違いは何ですか?

アクセシビリティにより、障害を持つ人々がコンテンツを認識、操作、理解、使用できるようになります。ユーザビリティは、あらゆるユーザーにとってエクスペリエンスが効率的で満足できるものであることを保証することを目指しています。通常、アクセス可能なサイトはより使いやすくなりますが、使用可能なサイトが必ずしもアクセスできるとは限りません。

自動的にアクセスできるウィジェットやオーバーレイはありませんか?

HTML の構造やセマンティカに関する問題については正誤表はありません。 La comunidad deaccesibilidad y diversos los han cuestionado porque pueden dar una falsa sensación de conformidad についての情報を提供します。コンポーネントやコンポーネントを修正する必要はありませんが、スクリプトのスーパーポナーは必要ありません。

XHTML/CSS は存在しますか?

重要な影響を与える: HTML の有効性と意味、画像の代替テキスト、十分なコントラスト、公式の形式の完全性を確認します。自動監査と操作マニュアルの補完を行います。適切なプロセスに関する基準と反復に関する文書。


アクセシビリダード ゲスティオナーダ デ プリンシピオ ア フィン

Accesibilidad gestionada: 人間性の見直しと自動化の組み合わせ