2

表で強調表示されたテキストを 508 準拠にするにはどうすればよいですか? 現在、テキストを em タグで囲み、aria ラベルを追加して、背景が黄色であることを強調しています。この代替マークアップは、スクリーン リーダーによって読み取られていないため、準拠していないようです。

<table style="border: solid 1px black;">
    <p>Search results for the term "will"</p>
    <thead>
        <th>first name</th>
        <th>last name</th>
        <th>occupation</th>
    </thead>
    <tbody>
        <tr>
            <td>Joe</td>
            <td><em style="background-color: yellow; font-style: normal;" aria-label="highlighted search term">Will</em>iams-Harver</td>
            <td>sales clerk</td>
        </tr>
        <tr>
            <td><em style="background-color: yellow; font-style: normal;" aria-label="highlighted search term">Will</em></td>
            <td>Stevens</td>
            <td>truck driver</td>
        </tr>
    </tbody>
</table>
4

3 に答える 3

2

テーブルは現在のように 508 に準拠しています。セクション 508 の規則とは、Web ページと Web アプリケーションを考慮する場合、セクション 508 の § 1194.22 にある16 の規則のセットを意味します。たとえば、スクリーン リーダーが認識しないマークアップの使用を禁止する規則はありません。実際、彼らは を認識しているかもしれませんemが、適合性を考えるときは関係ありません。

規則 (c) は次のように述べています。の背景色を使用していますが、要素の使用において、いくつかの単語が何らかの形で強調されているという情報がemマークアップにあるため、それで問題ありません。一部のソフトウェアが実際にそのマークアップを認識し、その意味を伝えるかどうかは、その問題について何も述べていない法律に準拠するための基準にはなりません。em

に設定font-styleすると、 (斜体書体)normalの一般的な既定のレンダリングが上書きされます。emこれは、色設定が無効になっている場合 (たとえば、個人のニーズを満たすためにすべてを白地に黒くするユーザー スタイル シートを介して)、em要素が通常のテキストとして表示されることを意味します。これは、規則 (b) の精神に違反していると言えます。しかし、準拠において重要なのは文字であり、情報はマークアップにあります。

于 2013-11-05T21:41:24.663 に答える
1

アクセシビリティの問題のようです：

セクション 508 アクセシビリティ ガイドライン

ロービジョンの一部の人々は、スタイルをオフにすることがよくあります。を入力する<em>と、ブラウザには

要素は、その内容の強調強調を表します。参照

黄色のスタイルは彼の意図を達成しません。

試してみてください<mark>。

HTML タグは、別のコンテキストでの関連性のために、参照目的でテキストがマークまたは強調表示されていることを示すために使用されます。参照

この w3c 標準に従いたい場合は、508 準拠の誤検知の可能性に関する興味深い記事をお読みください。

于 2013-11-05T18:01:53.330 に答える
0

私が最近取り組んだプロジェクトでは、古いデータと新しく更新されたデータを視覚的に区別したいと考えていました。最終的に、行った編集を「強調」するために太字の赤いテキストを使用することになりました。色やスタイルだけで情報をユーザーに伝えることはできないため、編集された場合はフォーム コントロールの前に「隠し」テキストを追加しました (ラベルの可視性を使用してコード ビハインドで行われます)。CSS を使用して、このテキストを視覚ユーザー向けに画面外に「非表示」にしました。

ユーザーが CSS を無効にすると、赤い太字のテキストが表示されなくなりますが、非表示のテキストが表示されるようになりました。非表示のテキストもスクリーン リーダーによって読み上げられます。

例: 送信者が編集したフィールド名:

また、アイコンを使用してユーザーに変更を警告し、「送信者が編集した名前フィールド」などの有益な代替テキストを追加しました。

それが役立つことを願っています!

于 2013-11-21T16:07:34.413 に答える