87

概要

HTML5では、外部の名前空間に依存せずに HTML ドキュメントを使用してマークアップできるよう <svg>になり<math>ました (概要はこちら)。両方とも、今日のスクリーン リーダー ソフトウェアでは効果的に無視される独自のalt- 属性類似物 (以下を参照) を持っています。したがって、これらの要素は目の不自由なユーザーにはアクセスできません。

これらの新しい要素に標準の代替テキスト規則を実装する計画はありますか? 私はドキュメントを精査し、乾いてきました！

詳細

SVG に関して: SVG の代替テキストは、ルートtitleまたはdescタグのコンテンツと見なすことができます。

<svg>
  <title>An image title</title>
  <desc>This is the longer image description</desc>
  ...
</svg>

そのように読み取るスクリーンリーダーを1つ見つけましたが、これは標準ですか? SVG を挿入する以前の方法<object>には、スクリーン リーダーによるタグの扱いに一貫性がないため、アクセシビリティの問題もありました。

MathML について: MathML の代替テキストはalttext属性に格納する必要があります。

<math alttext="A squared plus B squared equals C squared">
  ...
</math>

スクリーン リーダーはこれを認識していないように見えるため、数学レンダリング ライブラリMathJaxaria-labelは実行時にテキストを属性に挿入します。

<span aria-label="[alttext contents]">...</span>

残念ながら、NVDA や JAWS などは、まだこれらのラベルを確実に読み取ることができません。( WAI-ARIAの詳細)

両方に関して:ほとんどサポートされていない ARIA 属性では成功しなかったため、属性を使用してみtitleました。これらは、これらの「外部」HTML 要素でも無視されるようです。

要約

簡単なハック以上に、これらの新しい HTML 要素に代替テキストを配置するための推奨される方法を探しています。おそらく、私が見落としている W3C 仕様はありますか? それとも、まだゲームの開始時期が早すぎますか?

4

6 に答える 6

102

掘り下げた後、いくつかの公式の推奨事項を見つけました。残念ながら、現時点ではほとんどが機能していません。Math と SVG がアクセシブルであると見なされるには、ブラウザーとスクリーン リーダーの両方に多くの実装が必要ですが、状況は改善し始めています。

免責事項: 以下の推奨事項は、過去数か月のコーディングで収集したものです。何かが間違っている場合は、お知らせください。ブラウザと AT ソフトウェアが進歩するにつれて、これを最新の状態に保つように努めます。

MathML

おすすめ

周囲のタグrole="math"と一緒に使用します ( docsを参照)。の追加により、スクリーン リーダーはこの要素に特に焦点を当てることができます。この要素は、特別なキー ショートカット ( など) を使用して読み上げることができます。aria-labeldivtabindex="0"aria-labelNVDA+Tab

<div role="math" tabindex="0" aria-label="[spoken equivalent]">
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    ...
  </math>
</div>

制限事項/考慮事項

  • での大ざっぱなスクリーン リーダーのサポートaria-label(およびそれほど重要ではありませんrole="math")。
    更新: aria-label hereおよびhereに関する関連する NVDA チケット。
  • HTML5 ではファーストクラスの要素であるため、 or タグで囲む必要はないdivようspanです。math
  • alttextMathMLタグの参照はほとんど見つかりませんでした。
    更新:これは、ここで説明されているDAISY固有の追加のようです。

参考文献

SVG

おすすめ

ルート SVG タグと一緒に、またはルート SVG タグで最上位のタグ<title>とタグを使用します。<desc>role="img"aria-label

<svg role="img" aria-label="[title + description]">
  <title>[title]</title>
  <desc>[long description]</desc>
  ...
</svg>

制限事項/考慮事項

  • 2011 年 2 月の時点で、IE 9 ベータ版はすべて <title>と<desc>タグを読み取りますが、これはおそらく望ましくありません。aria-labelただし、要素に も含まれている場合、NVDA、JAWS、および WindowEyes は を読み取りますrole="img"。
  • SVG ファイル (つまり、HTML にインラインではない) をロードする場合、ルートレベルの<title>タグがブラウザー ページのタイトルになり、スクリーン リーダーによって読み取られます。

参考文献

于 2011-01-21T07:38:55.427 に答える
3

一般に、HTML5 は、(a) 目の見えるユーザーに役立つ新しい情報が含まれていることが多いため、作成者が目の見えるユーザーから隠されているコンテンツを提供することを思いとどまらせようとします。(b) (通常、 ) 目の見える作者、および (c) 慎重に保守されていないため、すぐに古くなる可能性があります。

そのため、属性で情報を隠す代わりに<p>、svg または math セクションに隣接するタグのキャプションとして通常ページに配置するか、テキストを<figcaption>タグに入れ、それと svg/math セクションを<figure>エレメント。

目の見えるユーザーに情報を見せたくない場合は、少なくともスクリーン リーダーが HTML5 に追いつくまでは、キャプションを大きな負の「左」値で絶対に配置するのが標準的な手法だと思います。

于 2011-01-15T02:53:46.163 に答える
2

理論的には、svg 画像は、alt タグを使用したラスター画像よりもアクセスしやすいはずです。1 つには、テキストを svg 内のテキストとして保持できます。これは、単なる短い文ではなく、テキストの断片全体です。スクリーン リーダーがその余分な情報を無視するのは悲しいことです。ただし、html の場合と同様に、すべてのテキスト コンテンツが常に表示されるわけではありません。多くの svg 画像は静的な画像ですが、(オープン Web での実際の使用に基づいて) より動的な svg を使用する傾向が強まっているようです。

注意すべきもう 1 つのことは<title>、すべての svg 対応ブラウザー (少なくとも最新世代) で、要素がツールチップ (目の見えるユーザー向け) として表示され、他の svg 要素内にも配置できることです (タイトルはに適用されます)。直接の子である要素)。

于 2011-01-15T10:22:16.867 に答える
-2

これはテストしていませんが、コンテナ DIV に alt="whatever" を追加してみてください。はい、これは DIV の有効な属性ではありませんが、古いスクリーン リーダーが alt の表示場所を気にしていないことがわかります。

例えば：

<div aria-label="Whatever" alt="Whatever" role="math">
    <math>...</math>
</div>

明らかに、これはスクリーン リーダーが IMG 以外の要素の alt 属性を (誤って) 読み取るという仮定の下にあります。まだテストしていませんが、スクリーン リーダーが機能するのを待つよりはましです。

于 2011-01-28T18:53:49.130 に答える