全てのウェブコンテンツ技術
これは、次の達成基準に関連する実装方法である：
この実装方法の目的は、支援技術に提示されたコンテンツの順序によって、利用者がコンテンツを理解できるようにすることである。いくつかの実装方法では、例えコンテンツのもともとの順序がわかりにくいとしても、コンテンツを視覚的に意味のある順序で表現することができる。【訳注：原文の意味が不明確なため、WCAGワーキンググループに確認中です。】
例えば、HTMLに表記方向が異なる言語を混在させる際、双方向アルゴリズム(文字に応じて適切な書字方向に表示するアルゴリズム)によって、句読点が間違った場所に置かれてしまう恐れがある。正しい順序で並べられているコンテンツは、コンテンツの流れにおける正しい順序で句読点を保持したまま、双方向アルゴリズムを上書きするためにマークアップを用いている。つまり、デフォルトのレンダリングで句読点が正しく配置されるように、コンテンツの流れの中で句読点を別の場所に移動させたりしていない。【訳注：原文の意味が不明確なため、WCAGワーキンググループに確認中です。】
視覚的に表示したとき、スペース又はタブのような空白文字列は、コンテンツの一部としては見えない。しかし、見た目を整えるためにコンテンツに挿入すると、それによってコンテンツの意味がわかりにくくなることがある。
また、レイアウトテーブルを用いてHTML文書のコンテンツのブロックの配置を制御することによって、見た目には関連する情報を並べて表示することができるが、コンテンツの流れとしては分断されてしまうこともある。スクリーンリーダーでは、レイアウトテーブルを行から行へと読み上げるので、イラストのキャプションがイラストに続く行に配置された場合、キャプションとそのイラストの画像とを関連付けられないことがある。
美術館の展示に関するウェブページに、リンクのリストを含んだナビゲーションバーがある。また、そのページには、展示品のうちのある一つの絵の画像、表題、及び詳しい説明がある。ナビゲーションバーのリンクは意味のある順序となっていて、表題、画像、及び説明のテキストもまた意味のある順序となっている。これらの要素をページに配置するのには、CSSが用いられている。
コード例:
Markup:
<h1>美術館のページ</h1>
<ul id="nav">
<li><a href="#">リンク 1</a></li>
...
<li><a href="#">リンク 10</a></li>
</ul>
<div id="description">
<h2>モナリザ</h2>
<p>
<img src="img.png" alt="モナリザ">
</p>
<p>...絵の詳しい説明...</p>
</div>
CSS:
ul#nav
{
float: left;
width: 9em;
list-style-type: none;
margin: 0;
padding: 0.5em;
color: #fff;
background-color: #063;
}
ul#nav a
{
display: block;
width: 100%;
text-decoration: none;
color: #fff;
background-color: #063;
}
div#description
{
margin-left: 11em;
}
この実装方法に利用可能な参考リソースはない。
（例 レイアウトスタイルを削除する、又はリニアライズするツールを用いるなど、）ウェブコンテンツ技術の標準的アプローチを使用し、コンテンツをリニアライズ（線形化）する。
リニアライズした順序で並べたコンテンツが、リニアライズする前のコンテンツと同じ意味を示している。
2.を満たしている。
注意： この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記：
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。