diff --git a/techniques/failures/F1.html b/techniques/failures/F1.html index 32fac0285..a1492047e 100644 --- a/techniques/failures/F1.html +++ b/techniques/failures/F1.html @@ -1,7 +1,6 @@ -
このWCAG 2.2 テクニック集の日本語訳は作業中となっています。WCAG 2.1 達成方法集の日本語訳をご利用いただけます。[ WCAG 2.1 達成方法集 ]
- This technique relates to + このテクニックは -1.3.2: Meaningful Sequence -(Failure).
This failure applies to all technologies that support CSS.
この失敗例は、CSS をサポートする全ての技術に適用される。
This describes the failure condition that results when CSS, rather than - structural markup, is used to modify the visual layout of the content, and - the modified layout changes the meaning of the content. Using the - positioning properties of CSS, content may be displayed at any position on - the user's viewport. The order in which items appear on a screen may be - different than the order they are found in the source document. Assistive - technologies rely on the source code or other programmatically determined - order to render the content in the correct sequence. Thus, it is important - not to rely on CSS to visually position content in a specific sequence if this sequence results in a meaning that is different from the programmatically determined reading order. +解説 + これは、コンテンツの視覚的なレイアウトを変更するのに構造的なマークアップではなく CSS が用いられていて、かつ、レイアウトの変更によってコンテンツの意味が変わってしまっているという失敗例について述べている。CSS の position プロパティを用いると、利用者のビューポート上のどんな位置にでもコンテンツを表示させることができる。その場合、個々のアイテムが画面上に表示される順序は、ソース文書内に登場する順序とは異なる可能性がある。しかし、支援技術は、コンテンツを正しい順序でレンダリングするために、ソースコードでの順序又はプログラムによる解釈がされる順序を用いている。そのため、CSS によってコンテンツの順序を指定する際には、それによってプログラムによる解釈がされる音声読み上げ順序とは異なる意味になってしまうのであれば、CSS を用いてコンテンツの視覚的な位置を指定しないようにすることが重要である。 - Examples - Example 1 + 事例 + 事例 1 - The following example demonstrates how CSS has been improperly used - to create a set of columns. In addition, the text appears visually - in the browser in a different order than in the markup. - In this example a class is defined for each object that is being - positioned. When style sheets are applied, the text appears in two - columns. Elements of class "menu1" (Products) and "menu2" - (Locations) appear as column headings. "Telephones, Computers, and - Portable MP3 Players" are listed under Products and "Idaho" and - "Wisconsin" are listed under Locations (note the different order for - Idaho and Wisconsin in the source code order). - Since appropriate structural elements have not been used, when style - sheets are not applied, all of the text appears in one line in the - source order, "Products Locations Telephones Computers Portable MP3 - Players Wisconsin Idaho." - Here is the HTML content: + 次の例では、段組みのレイアウトを作成するために CSS が不適切に用いられている。また、テキストは、ブラウザの画面ではマークアップの順序とは異なる順序で視覚的に表示される。 + この例では、配置される各オブジェクトに対してクラスが定義されている。スタイルシートが適用されると、テキストは二つの段組みで表示される。まず、「menu1」クラスの要素 (Products) と「menu2」の要素 (Locations) は、カラムの見出しとして表示される。そして、「Telephones」「Computers」「Portable MP3 Players」は、Products の下に表示され、「Idaho」と「Wisconsin」は、Locations の下に表示される (Idaho と Wisconsin の順序は、ソースコードの順序とは異なっている)。 + 適切な構造要素が使われていないため、スタイルシートが適用されない状況では、全てのテキストがソースの順序に則って 1 列に提示され、「Products Locations Telephones Computers Portable MP3 Players Wisconsin Idaho」となってしまう。 + HTML のコンテンツは次のとおり: <div class="box"> <span class="menu1">Products</span> @@ -133,7 +109,7 @@ About this Technique <span class="item4">Idaho</span> </div> - Here are the styles for the above content: + 上記コンテンツに対するスタイルは次のとおり: .menu1 { position: absolute; @@ -190,39 +166,33 @@ About this Technique left: 5em } - A better solution for this content would be to use more meaningful - elements, such as a table or a definition list. + このコンテンツの場合は、テーブル又は定義リストのように、意味のある要素を用いたほうがよいだろう。 - Example - of CSS positioning failure + CSS による配置の失敗例 - Example of CSS positioning failure with styles - removed + CSS による配置の失敗例: スタイルを外したバージョン -Related Techniques +関連テクニック C6: Positioning content based on structural markup -Tests - Procedure - For content which uses CSS for positioning: +検証 + 手順 + CSS を用いて配置されているコンテンツに対して: - Remove the style information from the document or turn off use of - style sheets in the user agent. - Check that the reading order of the content is correct and the - meaning of the content is preserved. + 文書からスタイル情報を取り除く、又はユーザエージェントでスタイルシートの使用を無効にする。 + コンテンツの音声読み上げ順序が正しく、コンテンツの意味が変わっていないことをチェックする。 - Expected Results + 期待される結果 - If check #2 is false, then this failure condition applies and the - content fails this Success Criterion. + チェック 2 が偽である場合、この失敗条件は適用され、コンテンツは達成基準に失敗する。 @@ -242,14 +212,13 @@ About this Technique - Help improve this page + このページを改善する - Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list public-agwg-comments@w3.org or via GitHub + あなたのアイデア、提案、又はコメントを、Google フォーム 又は GitHub で共有してください。 - E-mail - Fork & Edit on GitHub - New GitHub Issue + 翻訳に関するお問い合わせ (Google フォーム) + GitHub @@ -271,12 +240,15 @@ Help improve this page WAI-Guide project, co-funded by the European Commission.
これは、コンテンツの視覚的なレイアウトを変更するのに構造的なマークアップではなく CSS が用いられていて、かつ、レイアウトの変更によってコンテンツの意味が変わってしまっているという失敗例について述べている。CSS の position プロパティを用いると、利用者のビューポート上のどんな位置にでもコンテンツを表示させることができる。その場合、個々のアイテムが画面上に表示される順序は、ソース文書内に登場する順序とは異なる可能性がある。しかし、支援技術は、コンテンツを正しい順序でレンダリングするために、ソースコードでの順序又はプログラムによる解釈がされる順序を用いている。そのため、CSS によってコンテンツの順序を指定する際には、それによってプログラムによる解釈がされる音声読み上げ順序とは異なる意味になってしまうのであれば、CSS を用いてコンテンツの視覚的な位置を指定しないようにすることが重要である。
The following example demonstrates how CSS has been improperly used - to create a set of columns. In addition, the text appears visually - in the browser in a different order than in the markup.
In this example a class is defined for each object that is being - positioned. When style sheets are applied, the text appears in two - columns. Elements of class "menu1" (Products) and "menu2" - (Locations) appear as column headings. "Telephones, Computers, and - Portable MP3 Players" are listed under Products and "Idaho" and - "Wisconsin" are listed under Locations (note the different order for - Idaho and Wisconsin in the source code order).
Since appropriate structural elements have not been used, when style - sheets are not applied, all of the text appears in one line in the - source order, "Products Locations Telephones Computers Portable MP3 - Players Wisconsin Idaho."
Here is the HTML content:
次の例では、段組みのレイアウトを作成するために CSS が不適切に用いられている。また、テキストは、ブラウザの画面ではマークアップの順序とは異なる順序で視覚的に表示される。
この例では、配置される各オブジェクトに対してクラスが定義されている。スタイルシートが適用されると、テキストは二つの段組みで表示される。まず、「menu1」クラスの要素 (Products) と「menu2」の要素 (Locations) は、カラムの見出しとして表示される。そして、「Telephones」「Computers」「Portable MP3 Players」は、Products の下に表示され、「Idaho」と「Wisconsin」は、Locations の下に表示される (Idaho と Wisconsin の順序は、ソースコードの順序とは異なっている)。
適切な構造要素が使われていないため、スタイルシートが適用されない状況では、全てのテキストがソースの順序に則って 1 列に提示され、「Products Locations Telephones Computers Portable MP3 Players Wisconsin Idaho」となってしまう。
HTML のコンテンツは次のとおり:
<div class="box"> <span class="menu1">Products</span> @@ -133,7 +109,7 @@ About this Technique <span class="item4">Idaho</span> </div>
Here are the styles for the above content:
上記コンテンツに対するスタイルは次のとおり:
.menu1 { position: absolute; @@ -190,39 +166,33 @@ About this Technique left: 5em }
A better solution for this content would be to use more meaningful - elements, such as a table or a definition list.
このコンテンツの場合は、テーブル又は定義リストのように、意味のある要素を用いたほうがよいだろう。
For content which uses CSS for positioning:
CSS を用いて配置されているコンテンツに対して:
Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list public-agwg-comments@w3.org or via GitHub
あなたのアイデア、提案、又はコメントを、Google フォーム 又は GitHub で共有してください。
この文書は、2025 年 5 月 21 日付けの Techniques for WCAG 2.2 を、ウェブアクセシビリティ基盤委員会 (WAIC) の翻訳ワーキンググループが翻訳して公開しているものです。この文書の正式版は、W3C のサイトにある英語版です。正確な内容については、W3C が公開している原文 (英語) をご確認ください。この翻訳文書は作業進行中です。また、あくまで参考情報であり、翻訳上の誤りが含まれていることがあります。 +
この翻訳文書の利用条件については、WAICが提供する翻訳文書のライセンスをご覧ください。