diff --git a/src/content/ja/2025/accessibility.md b/src/content/ja/2025/accessibility.md new file mode 100644 index 00000000000..4914c2896eb --- /dev/null +++ b/src/content/ja/2025/accessibility.md @@ -0,0 +1,1190 @@ +--- +#See https://github.com/HTTPArchive/almanac.httparchive.org/wiki/Authors'-Guide#metadata-to-add-at-the-top-of-your-chapters +title: アクセシビリティ +description: 2025年版Web AlmanacのアクセシビリティチャプターはWeb Almanacのアクセシビリティの章で、読みやすさ、ナビゲーション、フォーム、メディア、ARIA、アクセシビリティアプリを網羅しています。 +hero_alt: 青い人型アクセシビリティアイコンを前面に持つロボットがウェブページをスキャンし、Web Almanacのキャラクターがラベルを確認しているヒーロー画像。 +authors: [tricinel, mgifford] +reviewers: [hidde, atierney, scottdavis99] +analysts: [mgifford, tunetheweb] +editors: [tricinel] +translators: [ksakae1216] +tricinel_bio: Bogdanは、進行中の作業を妨げることなくアクセシブルなウェブサイトを構築する支援をするアクセシビリティコンサルタントです。教育・ヘルスケア分野での10年以上の経験を持ち、インクルーシブデザインとウェブアクセシビリティの深い専門知識を有しています。2024年3月から「誰もが入れる場所を作る」という信念のもと、アクセシビリティに関する日刊ニュースレターを執筆しています。 +mgifford_bio: Mike GiffordはCivicActionsのオープンスタンダード&プラクティスリードです。オープンガバメント、デジタルアクセシビリティ、サステナビリティに関するソートリーダーでもあります。DrupalコアアクセシビリティメンテナーおよびW3C招聘エキスパートを務めており、オーサリングツールアクセシビリティの専門家として認められ、W3Cのドラフト版ウェブサステナビリティガイドライン(WSG)1.0にも貢献しています。 +results: https://docs.google.com/spreadsheets/d/13sY_wmYODArxo-hH5cSuRAbvtLdGI3x5Xc9qUyqP8as/ +featured_quote: ウェブはすべての人のために機能すべきです。この原則が私たちの意思決定を導かない限り、アクセシビリティのギャップは解消されません。 +featured_stat_1: 85 +featured_stat_label_1: Lighthouseアクセシビリティスコアの中央値。 +featured_stat_2: 67% +featured_stat_label_2: デフォルトのフォーカスアウトラインを削除しているサイト。 +featured_stat_3: 2% +featured_stat_label_3: アクセシビリティオーバーレイを使用しているサイト。 +doi: 10.5281/zenodo.18246524 +--- + +## はじめに + +ウェブは急速に変化しています。2025年、主流のテクノロジーがインクルーシブな機能にますます依存するようになる中、ウェブアクセシビリティはかつてないほど重要です。例えば、音声アシスタントはスクリーンリーダー技術を使用しています。動画キャプションや触覚フィードバックなど、もともとアクセシビリティのために設計された機能は今では一般的になっています。 + +ユニバーサルデザインの原則は現代のウェブ開発において根本的に重要です。私たちは多様なニーズに対応し、すべてのユーザーの体験を改善するソリューションをますます作り出しています。Tim Berners-Lee卿が有名な言葉を残しているように、「ウェブの力はその普遍性にある。障害の有無にかかわらず誰もがアクセスできることは必須の側面だ。」 + +最近の世界的な出来事と変化する法的要件が、デジタルインクルージョンを注目の的にしています。MicrosoftのInclusive Design Guidelinesは、アクセシビリティが永続的な障害を持つ人々だけでなく、より多くの人々を助けることを示しています。このガイドラインは一時的・状況的な制限についても具体的に言及しています。例えば、片手でデバイスを使う能力は、怪我をした人、幼い子どもを持つ親、荷物を持っている人にも役立ちます。 + +2025年、ウェブアクセシビリティ法には実質的な効力があります。欧州連合(EU)の[欧州アクセシビリティ法(EAA)](https://en.wikipedia.org/wiki/European_Accessibility_Act)は大きな前進です。ウェブコンテンツアクセシビリティガイドライン(WCAG)を参照する[EN 301 549](https://en.wikipedia.org/wiki/EN_301_549)標準への準拠について、多数のウェブサイトとアプリに対して2025年6月を期限として設定しました。 + +米国も規制を更新しました。州・地方政府のサイトは、米国障害者法タイトルIIで義務付けられた通り、WCAG 2.1を満たす必要があります。2024年のデータは、これらの期限がウェブサイトのアクセシビリティに与える具体的な影響を測定するための重要なベースラインを提供しています。 + +分析にはDequeのaxeコアエンジンによるGoogle Lighthouseを使用しています。2025年の結果を2024年のデータと比較し、主要なトレンドを特定します。WCAG 2.2のより広い採用に伴い、新しい達成基準の普及と `duplicate-id` などの廃止ルールからの継続的な変化を検討します。 + +私たちのアプローチはWebAim Millionと似ていますが、クロールするサイトと使用する分析ツールが異なります。HTTP Archiveは毎月Lighthouseやその他のツールを使用して、ホームページとセカンダリページにわたって1,700万サイトをクロールしています。WebAimはWAVEで上位100万ホームページを調査しています。 + +LighthouseにもaXeコアを使った自動テストは、WCAG達成基準のサブセットを部分的にしか確認できません。GOV.UKのAlphagovは一般的な自動監査ツールの比較を提供していますが、すべてのツールがアクセシビリティエラーの50%未満しか検出していません。多くの基準には自動テストがなく、すべてのアクセシビリティ問題がWCAGの基準に対応しているわけでもありません。 + +グッドハートの法則を覚えておいてください。指標がターゲットになると、信頼できる指標ではなくなります。完璧なスコアは完全なアクセシビリティを保証しません。Lighthouseのアクセシビリティスコアは最終目標ではなく、評価の出発点として扱うべきです。それでも、これらのスコアを追跡することはウェブの全体的な進歩の貴重なスナップショットを提供します。 + +私たちのレポートはHTMLのみに焦点を当てており、PDFやその他のオフィスドキュメントは含みません。 + +2024年と比較して、Lighthouseアクセシビリティスコアの中央値は1%改善し、2025年には85%を超えました。2019年の最初のWeb Almanac以来、着実で段階的な進歩が見られています。Google Lighthouseはaxeコアの問題に異なる重みを割り当てていますので、組織によって修正の優先順位が異なる場合があります。 + +{{ figure_markup( + image="lighthouse-audit-improvements-yoy.png", + caption="Lighthouseの監査改善状況(前年比)。", + description="6年間のGoogle Lighthouseアクセシビリティスコアの中央値の平均上昇を示す棒グラフ。値は年々ゆっくりと増加しており、2019年は83%、2020年は80%、2021年は82%、2022年は83%、2024年は84%、2025年は85%。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQFD-7C6Jv6q1JyviDsKosRlVwaok7g7nRCQ9NGMw5MaAAohL7EcDejVwgp13Z_T2S_57Zi0YaVb7st/pubchart?oid=1116937150&format=interactive", + sheets_gid="1543303999", + sql_file="lighthouse_a11y_score.sql" + ) +}} + +今年、以下のaxeコアテストで最大の進歩が見られました: + +- ARIAの入力フィールドにはアクセシブルな名前が必要:2024年比 +3% +- ARIAの `meter` ノードにはアクセシブルな名前が必要:2024年比 +15% +- ARIAの `progressbar` ノードにはアクセシブルな名前が必要:2024年比 +5% +- ARIAの `tooltip` ノードにはアクセシブルな名前が必要:2024年比 +13% +- 20時間未満の遅延リフレッシュを避ける:2024年比 +1% +- `` 要素には代替テキストが必要:2024年比 +1% +- `` 要素にはアクセシブルな名前が必要:2024年比 +5% + +{{ figure_markup( + image="most-improved-lighthouse-accessibility-tests-axe.png", + caption="最も改善されたLighthouseアクセシビリティテスト(axe)。", + description="4年間で7つの特定のLighthouseチェックの改善を示す系列チャート。`aria-input-field-name` については、2021年12%、2022年14%、2024年21%、2025年24%。`aria-meter-name` については、2021年0%、2022年100%、2024年35%、2025年50%。`aria-progressbar-name` については、2021年1%、2022年3%、2024年14%、2025年19%。`aria-tooltip-name` については、2021年29%、2022年75%、2024年74%、2025年87%。`meta-refresh` については、2021年と2022年は2%、2024年7%、2025年8%。`object-alt` については、2021年1%、2022年20%、2024年10%、2025年11%。`select-name` については、2024年37%、2025年42%。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQFD-7C6Jv6q1JyviDsKosRlVwaok7g7nRCQ9NGMw5MaAAohL7EcDejVwgp13Z_T2S_57Zi0YaVb7st/pubchart?oid=2072636024&format=interactive", + sheets_gid="1312474493", + sql_file="lighthouse_a11y_audits.sql" + ) +}} + +今年、Web Almanacに[人工知能(AI)](#人工知能aiの影響)に関する新しいセクションを追加しました。AIはウェブサイトの構築・コードの記述・コンテンツの生成・パフォーマンスの最適化・インターフェースとのインタラクション方法を変えています。画像の説明やキャプションの生成から、チームが問題を見つけ修正するのを助けるアシスタントまで、アクセシビリティ作業においても役割が増しています。 + +同時に、AIはリスクと未解決の問題をもたらします。ウェブサイトがAIによって作成されたり、AIの支援を受けたりした場合を確認する信頼できる方法はまだありません。言語モデルはアクセシビリティ問題を含むコードやコンテンツで訓練されています。自動化された説明やパターンはコンテキスト・ユーザーの意図・ニュアンスを見逃しやすいです。データ使用・環境への影響・内在するバイアスに関する広範な懸念は、ウェブ上のAIから誰が恩恵を受け、誰が傷つけられ排除されるかに直接影響します。 + +新しいAIチャプターはこれらの緊張を探求しています:AIがすでにチームをどのように助けているか、どこで不足しているか、どのような標準・保護措置・実践が必要か。分析全体を通じて一つの原則が貫かれています:AIは人間の専門知識とインクルーシブデザインを置き換えるのではなく、支援すべきです。 + +このチャプター全体を通じて、自分のサイトのアクセシビリティを改善するための実践的なリンクと具体的なソリューションを見つけることができます。 + +## 読みやすさ + +ユーザーはウェブコンテンツを簡単に読んで理解できる必要があります。これは読みやすいフォントの選択にとどまりません。明確な言語の使用・ページの論理的な整理・予測可能なデザインパターンへの準拠も含まれます。 + +このレポートは測定可能な技術的指標に焦点を当てていますが、平易な言語での執筆などの定性的要素も同様に重要です。WCAG 3.0は明確な言語の要件を組み込む方法を検討していますが、まだ開発段階にあります。 + +平易な言語と同様に、数値もアクセシビリティ上の課題をもたらします。一部のユーザーは数値の解釈に苦労しており、自動テストでは障壁として確実に検出できません。これに対処するには、ウェブ上で数値情報を明確に提示するための実践的なアドバイスを提供するAccessible Numbersなどのリソースを参照してください。 + +英語のコンテンツには読みやすさの指標があります。[Flesch-Kincaid](https://en.wikipedia.org/wiki/Flesch%E2%80%93Kincaid_readability_tests)の可読性スコアはその一例です。しかしウェブはグローバルです。多くの言語と多様な視聴者にまたがっています。すべてのケースや言語をカバーする標準化された自動テストは存在しません。 + +### カラーコントラスト + +前景色と背景色の差異が、ユーザーがウェブコンテンツを認識できるかどうかを決定します。不十分なカラーコントラストは、特に低視力のユーザーや色覚異常を持つユーザーにとって、依然として一般的な障壁です。 + +カラーコントラストは、高齢ユーザー・老眼鏡を忘れた人などの一時的な障害を持つ人・明るい日光や困難な環境でコンテンツを読む人にとっても特に重要です。 + +WCAGはAA適合性を達成するために、通常テキストに対して少なくとも4.5:1、大きなテキストに対して3:1のコントラスト比を要求しています。AAA適合性は通常テキストに対して7:1を要求します。[WCAGのコントラスト比](https://developer.mozilla.org/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable/Color_contrast)は重要なベースラインですが、これらのガイドラインはすべての形態の色覚異常や個人の知覚の違いに対応しているわけではありません。 + +Accessible Perceptual Contrast Algorithm(APCA)を含む他のドキュメントは、より知覚的に正確なコントラストの測定を提供することを目的としています。 + +オープンソースツール(新しくリリースされたContrast Reportなど)は、カラーコントラストの問題を見つけて修正することをこれまで以上に簡単にしています。必要な比率を満たさない色に対して修正案も提示します。追加のガイダンスとして、Dennis Deaconのカラーコントラストテストに関する記事などの専門家リソースを参照できます。 + +{{ figure_markup( + image="sites-with-sufficient-color-contrast.png", + caption="十分なカラーコントラストを持つサイト。", + description="6年間にわたるデスクトップとモバイルの十分なカラーコントラストを持つウェブサイトの割合を示す系列棒グラフ。2019年は22%が十分なカラーコントラストを持っていた。2020年は21%に低下し、2021年に22%に回復。2022年はデスクトップとモバイルともに23%で、2024年にデスクトップが28%、モバイルが29%に急上昇。2025年はデスクトップとモバイルともに30%。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQFD-7C6Jv6q1JyviDsKosRlVwaok7g7nRCQ9NGMw5MaAAohL7EcDejVwgp13Z_T2S_57Zi0YaVb7st/pubchart?oid=1491798527&format=interactive", + sheets_gid="15996962", + sql_file="color_contrast.sql" + ) +}} + +今年、テキストコントラストの合格率は2024年比でおよそ1%改善しました。しかし、現時点でモバイルサイトの31%のみが最低限のカラーコントラスト要件を満たしています。モバイル体験は明瞭な視認性に大きく依存しているため、このギャップはスマートフォンでウェブにアクセスするユーザーにとって深刻な問題です。 + +ブラウザとオペレーティングシステムはライト・ダーク・ハイコントラストモードのサポートを強化しています。ユーザーはより多くのコントロールを持つようになっています。しかし、ほとんどのサイトはまだこれらの設定に対応していません。 + +### ズームとスケーリング + +ユーザーはニーズに合わせてコンテンツをリサイズできる必要があります。ズームを無効にするとユーザーコントロールが失われ、WCAGのリサイズ要件に直接違反します。これは単なる小さな不便にとどまりません。低視力のユーザーや読書に画面拡大機能を使用している人にとって、サイトが完全に使用不能になる可能性があります。 + +2025年でも、この制限的なパターンはまだ見られます。多くの場合、開発者がモバイルデバイスでピクセルパーフェクトなレイアウトを望むためです。残念ながら、それはユーザビリティとアクセシビリティを犠牲にしています。 + +{{ figure_markup( + image="pages-with-zooming-and-scaling-disabled.png", + caption="ズームとスケーリングが無効になっているページ。", + description="デスクトップとモバイルのズーム無効化データを示す棒グラフ。デスクトップサイトの15%・モバイルサイトの13%がスケーリングを無効化。デスクトップの19%・モバイルの17%が最大スケールを1に設定。デスクトップの21%・モバイルの19%がいずれかを使用。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQFD-7C6Jv6q1JyviDsKosRlVwaok7g7nRCQ9NGMw5MaAAohL7EcDejVwgp13Z_T2S_57Zi0YaVb7st/pubchart?oid=327558014&format=interactive", + sheets_gid="684000055", + sql_file="viewport_zoom_scale.sql" + ) +}} + +ズームやスケーリングを無効にするサイトの数は減少し続けています。2025年には、`user-scalable=no` の使用または制限的な最大スケールの設定によってスケーリングを制限しているサイトは、モバイルで19%・デスクトップで21%のみです。これは2024年比で1〜2%の改善であり、ゆっくりではありますが着実な進歩を示しています。 + +{{ figure_markup( + image="font-unit-usage.png", + caption="フォントサイズ単位の使用状況。", + description="フォントサイズの単位を示す棒グラフ。`px` はデスクトップの67%で使用され、`em` は16%、`rem` は9%、パーセンテージは4%、`` は2%、`pt` は1%のウェブサイトで使用されている。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQFD-7C6Jv6q1JyviDsKosRlVwaok7g7nRCQ9NGMw5MaAAohL7EcDejVwgp13Z_T2S_57Zi0YaVb7st/pubchart?oid=611369037&format=interactive", + sheets_gid="1493373752", + sql_file="units_properties.sql" + ) +}} + +フォントサイズの単位は、テキストがユーザー設定にどのように反応できるかに直接影響します。`em` や `rem` などの相対単位を使うと、ブラウザの設定に合わせてテキストが予測可能にスケーリングされます。2025年には、モバイルサイトでの `em` の使用が2%増加し、読みやすさのためにフォントサイズを調整するユーザーの体験が改善しました。それ以外のフォントサイズ単位の使用状況は昨年とほぼ同じです。 + +サイトがズームを制限しているかどうかを確認するには、ソースコードで `` タグを調べてください。リサイズを制限する `maximum-scale`・`minimum-scale`・`user-scalable=no`・`user-scalable=0` などの値の使用を避けてください。代わりに、ユーザーがコンテンツサイズを自由に調整できるようにしましょう。WCAGはコンテンツや機能の損失なしにテキストが200%までリサイズできることを要求しています。 + +### 言語の識別 + +`lang` 属性でページの主要言語を宣言することは必須です。スクリーンリーダーが正しい発音規則を選択でき、ブラウザがより正確な自動翻訳を提供できるようになります。主要言語を超えて、メイン言語と異なるセクションの言語を指定することも同様に重要です。これにより、スクリーンリーダーが外国語の単語やフレーズに対して発音を適切に切り替えられるようになります。 + +straightforward Level A WCAG requirementであるにもかかわらず、言語宣言は多くのサイトが不十分な領域のままです。2025年には、約86%のサイトが有効な `lang` 属性を含んでおり、2024年からほぼ変わっていません。これは継続的な採用を示す一方、改善の余地があることも浮き彫りにしています。 + +`lang` 属性の正しい適用は、ページの主要言語を指定するために `` タグに含めることから始まります。ページには複数の言語が含まれることがよくあります。必要に応じて個々の要素やセクションに `lang` 属性を使用してください。W3Cの言語の部分指定に関するドキュメントにこのトピックの詳細なガイダンスがあります。 + +言語宣言の欠如や誤りは翻訳エラーを引き起こす可能性があります。 + +例えば、Chromeの自動翻訳は宣言された言語がない場合にページコンテンツを誤解釈し、混乱した不正確な翻訳につながる可能性があります。適切な言語タグ付けは、右から左に書く言語のスタイリングや他の言語固有の動作もサポートします。 + +## ユーザー設定 + +モダンCSSには、ウェブサイトがユーザーのオペレーティングシステムまたはブラウザ設定に適応できる[ユーザー設定メディアクエリ](https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme)が含まれています。ユーザーはより快適でパーソナライズされた体験を得られます。ウェブサイトはモーション・コントラスト・カラースキームの設定に対応できます。 + +{{ figure_markup( + image="user-preference-media-query.png", + caption="ユーザー設定メディアクエリ。", + description="デスクトップとモバイルでさまざまなユーザー設定メディア機能を使用するページの割合を比較した棒グラフ。最も広く使われている機能は `prefers-reduced-motion` で、デスクトップ(49.99%)とモバイル(50.55%)のページの約半数に出現。`-ms-high-contrast` と `forced-colors` もデスクトップでそれぞれ約21%と16%、モバイルで20%と19%と顕著な使用率を示す。`prefers-color-scheme`(両プラットフォームで約13%)や `prefers-contrast`(約1%)などの他の機能はあまり使われておらず、レガシーまたは実験的な機能はほぼ出現しない。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQFD-7C6Jv6q1JyviDsKosRlVwaok7g7nRCQ9NGMw5MaAAohL7EcDejVwgp13Z_T2S_57Zi0YaVb7st/pubchart?oid=1063383428&format=interactive", + sheets_gid="1601070335", + sql_file="media_query_features.sql", + width=600, + height=551 + ) +}} + +最も馴染み深いクエリである `prefers-reduced-motion` と `prefers-color-scheme` はブラウザで広くサポートされ続けています。2025年には、これらのクエリのウェブサイトによる採用はほとんど変化がありません。しかし、低視力ユーザーのハイコントラストモードをサポートする `forced-colors` の使用は5%増加して19%になりました。一方、時代遅れの `-ms-high-contrast` メディアクエリの使用は3%減少して20%になりました。これはモダンCSSスタンダードへの段階的な移行を反映しています。 + +これらの設定を継続的に取り入れることで、個人のニーズとシステム設定を尊重し、アクセシビリティとユーザー満足度が向上します。 + +CSSメディアクエリによるパーソナライズのより広い実装は、これらの段階的な改善にもかかわらず大きな成長は見られていません。さらなる採用を促進することで、前庭障害の敏感さに対するモーション低減や視覚的な快適さのためのディスプレイカラーやコントラストの調整など、ウェブサイトがユーザーの設定を尊重できるようになります。 + +## ナビゲーション + +ユーザーはさまざまな方法でウェブサイトをナビゲートします。マウスでスクロールする人もいれば、キーボード・スイッチコントロールデバイス・スクリーンリーダーで見出しをナビゲートする人もいます。効果的なナビゲーションシステムは、入力デバイスに関わらずすべてのユーザーに機能しなければなりません。 + +ワイドスクリーンテレビやSiri・Amazon Alexaのような音声インターフェースは独自のナビゲーション課題を生み出します。サイトに適切なセマンティック構造を構築することで、スクリーンリーダーユーザーのナビゲーションが向上します。また、他の多くの種類のテクノロジーのユーザーにも役立ちます。 + +### フォーカス表示 + +フォーカス表示は、ウェブコンテンツを移動するためにキーボードナビゲーションと支援デバイスに主に依存するユーザーにとって必須です。現在フォーカスされている要素を強調表示する視覚的な手がかりを提供し、ユーザーがページ上のどこにいるかを理解できるようにします。 + +Google Lighthouseなどの自動テストツールは多くの基本要件を特定し、フォーカスインジケーターに関する明らかな問題を検出できます。しかし、キーボードトラップ・フォーカス順序・フォーカスが新しいコンテンツに論理的に移動するかどうかなどの複雑なインタラクションには限界があります。自動監査に合格することは、サイトのキーボードアクセシビリティやキーボードユーザーの良好なユーザー体験を保証しません。 + +包括的な手動テストは欠かせません。 + +オープンソースのAccessibility Insights for the Web拡張機能などのツールは、DequeのaxeコアとガイドとなるASTを組み合わせて、ガイド付きの手動テストを提供しています。「Tab Stops」の可視化機能は、テスターがキーボードユーザーが辿るパスを確認し、フォーカススタイルの欠如や予期しないフォーカストラップなどの潜在的な問題を効果的に特定するのに役立ちます。 + +運動能力に制限のある代替ナビゲーションデバイスのユーザーは、フォーカスの視認性と順序に関して固有のニーズを持っています。支援技術のインターフェースをカスタマイズすることで、能力に合わせたコントロールを最大化できます。 + +フォーカステストのベストプラクティスには以下が含まれます: + +- キーボードユーザーが行き詰まるフォーカストラップがないこと +- すべてのインタラクティブコントロールがキーボードでフォーカス可能であること +- タブ順序が論理的で直感的であること +- フォーカスが新しくまたは動的にロードされたコンテンツに適切に向けられること + +A11y Collectiveのフォーカスインジケーターに関するレポートは、可視フォーカスアウトラインスタイルの実装とテストのための実践的な洞察を提供しています。 + +#### フォーカススタイル + +WCAGはすべてのインタラクティブコンテンツに明確に見えるフォーカスインジケーターが必要であることを定めています。この視覚的な手がかりにより、キーボードユーザーはページを移動しながら現在フォーカスされている要素を識別できます。 + +目立つフォーカスインジケーターがないと、キーボードユーザーや支援技術に依存するユーザーは迷子になりやすくなります。ハイコントラストアウトラインなどの堅牢なフォーカススタイルは、アクセシブルなデザインの基本です。GOV.UKのような多くの機関では、一貫性と明確性を確保するためにフォーカスインジケーターの標準を確立しています。 + +デザインアノテーションはCraig AbbottがTetraLogicalブログで明確に示したように、キーボードインタラクションを指定する必要があります。この投稿の直後、GitHubは同じ問題に対処するためにアクセシビリティAnnotation Toolkitをリリースしました。 + +{{ figure_markup( + image="pages-overriding-browser-focus-styles.png", + caption="ブラウザのフォーカススタイルを上書きしているページ。", + description="デスクトップとモバイルで3つのフォーカス関連CSSパターンを使用するページの割合を比較した棒グラフ。基本の `:focus` セレクターはデスクトップとモバイルの両方でページの約90%に存在。`:focus { outline: 0; }` でフォーカスアウトラインを削除しているのは両方でページの約3分の2(67%)。よりアクセシブルな `:focus-visible` セレクターの使用はより低く、ページの約4分の1(デスクトップ25%・モバイル24%)。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQFD-7C6Jv6q1JyviDsKosRlVwaok7g7nRCQ9NGMw5MaAAohL7EcDejVwgp13Z_T2S_57Zi0YaVb7st/pubchart?oid=1774339890&format=interactive", + sheets_gid="1499298533", + sql_file="focus_outline_0.sql" + ) +}} + +2025年には、67%のサイトがデフォルトのフォーカスアウトラインを明示的に削除しており、2024年から14%増加しました。この懸念すべきトレンドは、効果的なスタイルに置き換えられない場合、アクセシビリティを損なう可能性があります。一方、`:focus-visible` 疑似クラスの採用は増加しています。これは、開発者が必要な時にのみ表示されるコンテキスト対応のフォーカスインジケーターを作り始めていることを意味します。 + +#### `tabindex` + +`tabindex` 属性は、要素のキーボードフォーカス順序への参加を制御します。開発者はフォーカス可能な要素を含める・除外する・並び替えることができます。正しく使用することは論理的なナビゲーションとアクセシビリティをサポートし、WCAGの要件でもあります。特に正の値での誤用は、自然なタブ順序を乱し、ユーザーを混乱させる可能性があります。 + +{{ figure_markup( + image="tabindex-usage.png", + caption="`tabindex` の使用状況。", + description="デスクトップとモバイルで異なる `tabindex` 値を使用するページの割合を示す棒グラフ。ページの過半数が `0` を使用(デスクトップ52.1%、モバイル50.1%)。`-1` などの負の `tabindex` 値も同様の割合(デスクトップ52.0%、モバイル50.3%)。一方、正の `tabindex` 値はごく少数のページにのみ出現(デスクトップ3.7%、モバイル3.4%)。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQFD-7C6Jv6q1JyviDsKosRlVwaok7g7nRCQ9NGMw5MaAAohL7EcDejVwgp13Z_T2S_57Zi0YaVb7st/pubchart?oid=140565248&format=interactive", + sheets_gid="1566430802", + sql_file="tabindex_usage_and_values.sql" + ) +}} + +2025年には `tabindex` の使用がわずかに増加しました。50%超のサイトが使用しており、2024年より約3〜4%高くなっています。正の `tabindex` の使用は安定して低い水準を保っており、正の tabindex 値を避けるべきという認識が続いていることを反映しています。 + +### ランドマーク + +ランドマークは ``・``・``・`