Skip to content

F1の翻訳 #1405

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
momdo wants to merge 1 commit into
base: main
Choose a base branch
from
Open

F1の翻訳 #1405

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 50 additions & 78 deletions techniques/failures/F1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<!DOCTYPE html><html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="UTF-8">
<title>F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by
positioning information with CSS | WAI | W3C</title>
<title>F1: 達成基準 1.3.2 の失敗例 － CSS で情報を配置することにより、コンテンツの意味を変えている | WAI | W3C</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3.org/WAI/assets/css/style.css">
Expand All @@ -10,20 +9,18 @@



<!-- 日本語訳されるまでの一時的なスクリプト -->
<script src="../untranslated-note.js"></script>
</head><body dir="ltr">

<a href="#main" class="button button--skip-link">Skip to content</a>
<div class="minimal-header-container default-grid">
<header class="minimal-header" id="site-header">
<div class="minimal-header-name">
<a href="https://w3c.github.io/wcag/techniques/">WCAG 2.2 Techniques</a>
<a href="https://waic.jp/translations/WCAG22/Techniques/">WCAG 2.2 テクニック</a>
</div>

<div class="minimal-header-subtitle">Examples of ways to meet WCAG; not required</div>

<a class="minimal-header-link" href="https://w3c.github.io/wcag/techniques/about">About WCAG Techniques</a>
<a class="minimal-header-link" href="https://waic.jp/translations/WCAG22/Techniques/about">WCAG テクニックについて</a>
<div class="minimal-header-logo">
<a href="http://w3.org/" aria-label="W3C">
<svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 91.968 44">
Expand Down Expand Up @@ -52,76 +49,55 @@

<div class="default-grid with-gap leftcol">
<aside class="box nav-hack sidebar standalone-resource__sidebar">
<header class="box-h">Page Contents</header>
<header class="box-h">このページの内容</header>
<div class="box-i">
<nav aria-label="page contents" class="navtoc">
<ul><li><a href="#technique">About this Technique</a></li>
<li><a href="#description">Description</a></li>
<li><a href="#examples">Examples</a></li>
<li><a href="#related">Related Techniques</a></li>
<li><a href="#tests">Tests</a></li>
<ul><li><a href="#technique">このテクニックについて</a></li>
<li><a href="#description">解説</a></li>
<li><a href="#examples">事例</a></li>
<li><a href="#related">関連テクニック</a></li>
<li><a href="#tests">検証</a></li>
</ul>
</nav>
</div>
</aside>

<main id="main" class="standalone-resource__main">
<!-- 日本語訳されるまでの一時的な注記 -->
<div class="untranslated-note"><p>このWCAG 2.2 テクニック集の日本語訳は作業中となっています。WCAG 2.1 達成方法集の日本語訳をご利用いただけます。<br>[ <a href="https://waic.jp/translations/WCAG21/Techniques/">WCAG 2.1 達成方法集</a> ]</p></div>
<h1><span>Technique F1:</span>Failure of Success Criterion 1.3.2 due to changing the meaning of content by
positioning information with CSS</h1>

<h1><span>テクニック F1:</span>達成基準 1.3.2 の失敗例 － CSS で情報を配置することにより、コンテンツの意味を変えている</h1>




<section id="technique" class="box">
<h2 class="box-h box-h-icon">About this Technique</h2>
<h2 class="box-h box-h-icon">このテクニックについて</h2>
<div class="box-i">



<p>
This technique relates to
このテクニックは

<a href="https://w3c.github.io/wcag/understanding/meaningful-sequence">1.3.2: Meaningful Sequence</a>
(<strong>Failure</strong>).</p>
<a href="https://waic.jp/translations/WCAG22/Understanding/meaningful-sequence">1.3.2: 意味のあるシーケンス</a>
(<strong>失敗</strong>) に関連する。</p>




<p>This failure applies to all technologies that support CSS.</p></div>
<p>この失敗例は、CSS をサポートする全ての技術に適用される。</p></div>
</section>


<section id="description"><h2>Description</h2>
<p>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.
<section id="description"><h2>解説</h2>
<p>これは、コンテンツの視覚的なレイアウトを変更するのに構造的なマークアップではなく CSS が用いられていて、かつ、レイアウトの変更によってコンテンツの意味が変わってしまっているという失敗例について述べている。CSS の position プロパティを用いると、利用者のビューポート上のどんな位置にでもコンテンツを表示させることができる。その場合、個々のアイテムが画面上に表示される順序は、ソース文書内に登場する順序とは異なる可能性がある。しかし、支援技術は、コンテンツを正しい順序でレンダリングするために、ソースコードでの順序又はプログラムによる解釈がされる順序を用いている。そのため、CSS によってコンテンツの順序を指定する際には、それによってプログラムによる解釈がされる音声読み上げ順序とは異なる意味になってしまうのであれば、CSS を用いてコンテンツの視覚的な位置を指定しないようにすることが重要である。
</p>
</section><section id="examples"><h2>Examples</h2>
<section class="example" id="example-1"><h3>Example 1</h3>
</section><section id="examples"><h2>事例</h2>
<section class="example" id="example-1"><h3>事例 1</h3>

<p>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. </p>
<p>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). </p>
<p>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." </p>
<p>Here is the HTML content:</p>
<p>次の例では、段組みのレイアウトを作成するために CSS が不適切に用いられている。また、テキストは、ブラウザの画面ではマークアップの順序とは異なる順序で視覚的に表示される。</p>
<p>この例では、配置される各オブジェクトに対してクラスが定義されている。スタイルシートが適用されると、テキストは二つの段組みで表示される。まず、「menu1」クラスの要素 (Products) と「menu2」の要素 (Locations) は、カラムの見出しとして表示される。そして、「Telephones」「Computers」「Portable MP3 Players」は、Products の下に表示され、「Idaho」と「Wisconsin」は、Locations の下に表示される (Idaho と Wisconsin の順序は、ソースコードの順序とは異なっている)。</p>
<p>適切な構造要素が使われていないため、スタイルシートが適用されない状況では、全てのテキストがソースの順序に則って 1 列に提示され、「Products Locations Telephones Computers Portable MP3 Players Wisconsin Idaho」となってしまう。</p>
<p>HTML のコンテンツは次のとおり:</p>

<pre xml:space="preserve"><code class="language-html">&lt;div class="box"&gt;
&lt;span class="menu1"&gt;Products&lt;/span&gt;
Expand All @@ -133,7 +109,7 @@ <h2 class="box-h box-h-icon">About this Technique</h2>
&lt;span class="item4"&gt;Idaho&lt;/span&gt;
&lt;/div&gt;</code></pre>

<p>Here are the styles for the above content:</p>
<p>上記コンテンツに対するスタイルは次のとおり:</p>

<pre xml:space="preserve"><code class="language-css">.menu1 {
position: absolute;
Expand Down Expand Up @@ -190,39 +166,33 @@ <h2 class="box-h box-h-icon">About this Technique</h2>
left: 5em
}</code></pre>

<p>A better solution for this content would be to use more meaningful
elements, such as a table or a definition list.</p>
<p>このコンテンツの場合は、テーブル又は定義リストのように、意味のある要素を用いたほうがよいだろう。</p>
<ul>
<li class="working-example">
<a href="../../working-examples/failure-css-positioning/">Example
of CSS positioning failure</a>
<a href="https://www.w3.org/WAI/WCAG22/working-examples/failure-css-positioning/">CSS による配置の失敗例</a>
</li>
<li class="working-example">
<a href="../../working-examples/failure-css-positioning/styles-removed">Example of CSS positioning failure with styles
removed</a>
<a href="https://www.w3.org/WAI/WCAG22/working-examples/failure-css-positioning/styles-removed">CSS による配置の失敗例: スタイルを外したバージョン</a>
</li>
</ul>

</section>
</section>

<section id="related"><h2>Related Techniques</h2><ul>
<section id="related"><h2>関連テクニック</h2><ul>
<li><a href="../css/C6">C6: Positioning content based on structural markup</a></li>
</ul></section>
<section id="tests"><h2>Tests</h2>
<section class="procedure" id="procedure"><h3>Procedure</h3>
<p>For content which uses CSS for positioning: </p>
<section id="tests"><h2>検証</h2>
<section class="procedure" id="procedure"><h3>手順</h3>
<p>CSS を用いて配置されているコンテンツに対して:</p>
<ol>
<li>Remove the style information from the document or turn off use of
style sheets in the user agent.</li>
<li>Check that the reading order of the content is correct and the
meaning of the content is preserved.</li>
<li>文書からスタイル情報を取り除く、又はユーザエージェントでスタイルシートの使用を無効にする。</li>
<li>コンテンツの音声読み上げ順序が正しく、コンテンツの意味が変わっていないことをチェックする。</li>
</ol>
</section>
<section class="results" id="expected-results"><h3>Expected Results</h3>
<section class="results" id="expected-results"><h3>期待される結果</h3>
<ul>
<li>If check #2 is false, then this failure condition applies and the
content fails this Success Criterion.</li>
<li>チェック 2 が偽である場合、この失敗条件は適用され、コンテンツは達成基準に失敗する。</li>
</ul>
</section>
</section>
Expand All @@ -242,14 +212,13 @@ <h2 class="box-h box-h-icon">About this Technique</h2>
<svg focusable="false" aria-hidden="true" class="icon-comments" viewBox="0 0 28 28">
<path d="M22 12c0 4.422-4.922 8-11 8-0.953 0-1.875-0.094-2.75-0.25-1.297 0.922-2.766 1.594-4.344 2-0.422 0.109-0.875 0.187-1.344 0.25h-0.047c-0.234 0-0.453-0.187-0.5-0.453v0c-0.063-0.297 0.141-0.484 0.313-0.688 0.609-0.688 1.297-1.297 1.828-2.594-2.531-1.469-4.156-3.734-4.156-6.266 0-4.422 4.922-8 11-8s11 3.578 11 8zM28 16c0 2.547-1.625 4.797-4.156 6.266 0.531 1.297 1.219 1.906 1.828 2.594 0.172 0.203 0.375 0.391 0.313 0.688v0c-0.063 0.281-0.297 0.484-0.547 0.453-0.469-0.063-0.922-0.141-1.344-0.25-1.578-0.406-3.047-1.078-4.344-2-0.875 0.156-1.797 0.25-2.75 0.25-2.828 0-5.422-0.781-7.375-2.063 0.453 0.031 0.922 0.063 1.375 0.063 3.359 0 6.531-0.969 8.953-2.719 2.609-1.906 4.047-4.484 4.047-7.281 0-0.812-0.125-1.609-0.359-2.375 2.641 1.453 4.359 3.766 4.359 6.375z"></path>
</svg>
<h2>Help improve this page</h2>
<h2>このページを改善する</h2>
</header>
<div class="box-i">
<p>Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list <a href="mailto:public-agwg-comments@w3.org?subject=%5BUnderstanding%20and%20Techniques%20Feedback%5D">public-agwg-comments@w3.org</a> or via GitHub</p>
<p>あなたのアイデア、提案、又はコメントを、Google フォーム 又は GitHub で共有してください。</p>
<div class="button-group">
<a href="mailto:public-agwg-comments@w3.org?subject=%5BUnderstanding%20and%20Techniques%20Feedback%5D" class="button"><span>E-mail</span></a>
<a href="https://github.com/w3c/wcag/issues/" class="button"><span>Fork &amp; Edit on GitHub</span></a>
<a href="https://github.com/w3c/wcag/issues/new" class="button"><span>New GitHub Issue</span></a>
<a class="button" href="https://docs.google.com/forms/d/e/1FAIpQLSdIpvogLx8kGIMewhQ6MzhG2pOCQZ50iIBViGg8pUrRJuslKg/viewform?entry.685195438=https%3A%2F%2Fwaic.jp%2Ftranslations%2FWCAG22%2FUnderstanding%2Ffocus-not-obscured-minimum" id="file-issue">翻訳に関するお問い合わせ (Google フォーム)</a>
<a href="https://github.com/waic/wcag22/" class="button"><span>GitHub</span></a>
</div>
</div>
</aside>
Expand All @@ -271,12 +240,15 @@ <h2>Help improve this page</h2>
<a href="https://www.w3.org/WAI/about/projects/wai-guide/">WAI-Guide</a> project,
co-funded by the European Commission.
</p>
<p>この文書は、2025 年 5 月 21 日付けの <a href="https://w3c.github.io/wcag/techniques/">Techniques for WCAG 2.2</a> を、<a href="https://waic.jp/">ウェブアクセシビリティ基盤委員会 (WAIC)</a> の翻訳ワーキンググループが翻訳して公開しているものです。この文書の正式版は、W3C のサイトにある英語版です。正確な内容については、W3C が公開している原文 (英語) をご確認ください。この翻訳文書は作業進行中です。また、あくまで参考情報であり、翻訳上の誤りが含まれていることがあります。
</p>
<p>この翻訳文書の利用条件については、<a href="https://waic.jp/license-for-translated-documents/">WAICが提供する翻訳文書のライセンス</a>をご覧ください。</p>
</div>
</footer>

<footer class="site-footer grid-4q" aria-label="Site">
<div class="q1-start q3-end about">
<div>
<!--div>
<p><a class="largelink" href="https://www.w3.org/WAI/" dir="auto" translate="no" lang="en">W3C Web Accessibility Initiative (WAI)</a></p>
<p>Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.</p>
</div>
Expand All @@ -287,12 +259,12 @@ <h2>Help improve this page</h2>
<li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlistsv"><svg focusable="false" aria-hidden="true" class="icon-youtube " viewBox="0 0 32 32"><path d="M31.327 8.273c-0.386-1.353-1.431-2.398-2.756-2.777l-0.028-0.007c-2.493-0.668-12.528-0.668-12.528-0.668s-10.009-0.013-12.528 0.668c-1.353 0.386-2.398 1.431-2.777 2.756l-0.007 0.028c-0.443 2.281-0.696 4.903-0.696 7.585 0 0.054 0 0.109 0 0.163l-0-0.008c-0 0.037-0 0.082-0 0.126 0 2.682 0.253 5.304 0.737 7.845l-0.041-0.26c0.386 1.353 1.431 2.398 2.756 2.777l0.028 0.007c2.491 0.669 12.528 0.669 12.528 0.669s10.008 0 12.528-0.669c1.353-0.386 2.398-1.431 2.777-2.756l0.007-0.028c0.425-2.233 0.668-4.803 0.668-7.429 0-0.099-0-0.198-0.001-0.297l0 0.015c0.001-0.092 0.001-0.201 0.001-0.31 0-2.626-0.243-5.196-0.708-7.687l0.040 0.258zM12.812 20.801v-9.591l8.352 4.803z"></path></svg> YouTube</a></li>
<li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li>
</ul>
</div>
</div-->
<div dir="auto" translate="no" lang="en">
<p>Copyright © 2025 World Wide Web Consortium (<a href="https://www.w3.org/">W3C</a><sup>®</sup>). See <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p>
</div>
</div>
<div dir="auto" translate="no" class="q4-start q4-end" lang="en">
<!--div dir="auto" translate="no" class="q4-start q4-end" lang="en">
<ul style="margin-bottom:0">
<li><a href="/WAI/about/contacting/">Contact WAI</a></li>
<li><a href="/WAI/sitemap/">Site Map</a></li>
Expand All @@ -301,7 +273,7 @@ <h2>Help improve this page</h2>
<li><a href="/WAI/translations/"> Translations</a></li>
<li><a href="/WAI/roles/">Resources for Roles</a></li>
</ul>
</div>
</div-->
</footer>

<link rel="stylesheet" href="../a11y-light.css">
Expand All @@ -315,7 +287,7 @@ <h2>Help improve this page</h2>
</script>
<script src="https://www.w3.org/WAI/assets/scripts/main.js"></script>

<script>
<!--script>
var _paq = _paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(["setDoNotTrack", true]);
Expand All @@ -331,7 +303,7 @@ <h2>Help improve this page</h2>
</script>
<noscript>
<p><img src="//www.w3.org/analytics/piwik/piwik.php?idsite=328&amp;rec=1" style="border:0;" alt="" /></p>
</noscript>
</noscript-->


</body></html>