web-dev-qa-db-ja.com

アクセシビリティ：SVGおよびMathMLに推奨される代替テキスト規則

概要

HTML5 現在許可されている<svg>および<math>外部ネームスペースに依存しないHTMLドキュメントによるマークアップ（まともな概要 here ）。両方とも独自のalt属性属性（下記参照）を備えており、今日のスクリーンリーダーソフトウェアでは事実上無視されます。したがって、これらの要素は盲目のユーザーにはアクセスできません。

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

詳細

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

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

私は one をスクリーンリーダーとして読んでいますが、この標準ですか？ 以前のメソッド SVGを挿入する際にも、<object>タグがスクリーンリーダーによって一貫して扱われないため、アクセシビリティの問題がありました。

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

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

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

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

残念ながら、NVDA、JAWS、およびその他は、これらのラベルをまだ確実に読み取っていません。 （詳細は WAI-ARIA ）

両方に関して：あまりサポートされていないARIA属性で成功していないため、title属性を使用してみました。これらは、これらの「外来」HTML要素では無視されるようです。

まとめ

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

html5svgaccessibilitymathmlalt-attribute
68
Courtney Christensen

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

免責事項：以下の推奨事項は、ここ数か月のコーディングで収集したものです。何かが間違っている場合は、お知らせください。ブラウザとATソフトウェアの進捗状況。

MathML

推奨事項

周囲のdivタグでrole="math"とともにaria-labelを使用します（ docs を参照）。 tabindex="0"を追加すると、スクリーンリーダーはこの要素に特に集中できます。この要素のaria-labelは、特別なキーショートカット（NVDA+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に関する関連するNVDAチケット here および here =。
  • divはHTML5では first-class element であるため、spanまたはmathタグでのラップは不要のようです。
  • MathML alttextタグを参照しているものはほとんど見つかりませんでした。
    更新：これは [〜＃〜] daisy [〜＃〜] -specific こちら と説明されています。

参考文献

[〜＃〜] svg [〜＃〜]

推奨事項

最上位の<title>および<desc>タグと、ルートSVGタグのrole="img"およびaria-labelを使用します。

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

制限事項/考慮事項

  • 2011年2月現在、IE 9ベータ読み取りall<title>および<desc>タグ、ただし、NVDA、JAWS、およびWindowEyesは、要素にaria-labelも含まれている場合、role="img"を読み取ります。
  • SVGファイル（つまり、HTMLでインラインではない）を読み込む場合、ルートレベルの<title>タグはブラウザページのタイトルになり、スクリーンリーダーによってが読み取られます。

参考文献

74
Courtney Christensen

一般に、HTML5は、（a​​）多くの場合、目が見えるユーザーに役立つ新しい情報が含まれているため、（b）フィードバックがほとんどないため、あまり書かれていないため、目が見えるユーザーから隠されたコンテンツを提供することを著者に思いとどまらせようとします）目が見える著者、および（c）慎重に維持されていないため、すぐに古くなる可能性があります。

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

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

3
Alohci

上記の提案と類似しているが同一ではないSVGに関しては、現在の最善のアプローチは、「altテキスト」を含む要素のID（altテキスト自体ではない）を参照してaria-labelledbyを使用することであると思われる。

<svg aria-labelledby="svg1title">
<title id="svg1title">A wide rectangle</title>
<rect width="70" height="10" fill="black" />
</svg>

Aria-labelledby = "svg1title svg1desc"を設定して、title要素とdesc要素の両方を使用することもできます。

ソース： http://www.sitepoint.com/tips-accessible-svg/

面倒なことに、これを行う場合は、IDがページ全体で一意であることを（何らかの形で）確認する必要があります（言い換えると、多くのSVGを使用する場合は、タイトルごとに異なるIDが必要です）。これは、SVG内の他のIDにも当てはまり、インラインSVGでは一般的に深刻な迷惑です。

（これに深刻な問題がある場合は、imgタグを使用してSVGの埋め込みを検討する必要があります。データURLを使用してSVGをbase64エンコードする場合、外部ファイルなしでこの「インライン」を実行できます。）

3
sam

理論的には、SVG画像はaltタグ付きのラスター画像よりもアクセスしやすいはずです。ひとつには、テキストは短い文ではなく、テキストの断片全体としてsvgのテキストとして保持できます。スクリーンリーダーがその余分な情報を無視するのは悲しいことです。ただし、htmlの場合と同じように、すべてのテキストコンテンツが常に表示されるわけではありません。多くのsvg画像は静的な画像ですが、成長している傾向（オープンWebでの実際の使用に基づく）は、たとえば編集または展開可能なグラフや図を表示するためにより動的なsvgを使用するようです。

もう1つ注意すべきことは、<title>要素は、すべてのsvg対応ブラウザAFAIK（少なくとも最新世代）でツールヒント（視力のあるユーザー向け）として表示され、他のsvg要素内にも配置できます（タイトルはそれが属する要素に適用されます）直接の子）。

2
Erik Dahlström

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

例えば：

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

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

0
ZiggyTheHamster