要約
ネイティブMathMLマークアップのレンダリングのサポートは増えていますが、サポートシナリオによっては、依然として回避策が必要な場合があります。
テクニック
-
MathMLのマークアップを使用して数式を表現します。[[WCAG-1.3.1]]
-
プレーンテキストの数式には
math
ロールを使用します。[[WCAG-1.3.1]]
例
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mfrac>
<msqrt>
<mtext>a</mtext>
</msqrt>
<mi>b</mi>
</mfrac>
</math>
In the Pythagorean equation,
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<msup>
<mi>a</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>=</mo>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</mrow>
</math>,
the sum of the square of …
If <span role="math">2 + x = 9</span>, what is the value of <var>x</var>?
デモ:
2+x=9の場合、xの値は何ですか?
画像が唯一の出力である場合でも、出版者がMathMLマークアップのソースを持っている場合は、それを画像と一緒に(おそらく非表示の)div
に保存できます。出版者は、公開するコンテンツで使用する形式を選択できます(つまり、サポートの少ない代替形式を除外します)。また、スクリプトを使用してどちらをレンダリングするかを決定することで、両方の形式を公開することもできます(IE11などの古いユーザーエージェントを考慮する必要がある場合は、hidden
属性にCSSフォールバックも必要になる可能性があることに注意してください)。
<div class="mathml-eq">
<img src="squarerootab.jpg" alt="Square root of the result of a divided by b"/>
<div hidden="hidden">
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mfrac>
<msqrt>
<mtext>a</mtext>
</msqrt>
<mi>b</mi>
</mfrac>
</math>
</div>
</div>
あるいは、処理やレンダリングへの影響を回避するためにMathMLマークアップをHTMLコメント(<!-- -->
)内に隠すこともできます。ただし、後で再処理するときに問題が発生する可能性があります。
<img src="squarerootab.jpg" alt="Square root of the result of a divided by b"/>
<!-- <math xmlns="http://www.w3.org/1998/Math/MathML">
<mfrac>
<msqrt>
<mtext>a</mtext>
</msqrt>
<mi>b</mi>
</mfrac>
</math> -->
よくある質問
- MathMLタグにプレフィックスを付ける必要はありますか?
-
いいえ、MathMLタグにプレフィックスを使用することはお勧めしません(例:
m:math
)。支援技術とユーザーエージェントのすべての組み合わせが XMLを認識するわけではないため、MathMLマークアップをサポートしていても、プレフィックス付きマークアップはサポートされない可能性があります。
HTMLとXHTML構文間の互換性をするためにも、「プレフィックスなし」のタグの使用が推奨されます(XMLプレフィックスはHTMLではサポートされていません)。
- MathMLマークアップでARIA
math
ロールを使用する必要はありますか? -
いいえ、MathMLマークアップでは
math
ロールを使用しないことを強くお勧めします。多くの場合、このロールを使用すると、ユーザーがMathMLマークアップにアクセスできなくなります。math
ロールはテキストの数式に制限する必要があります(例3を参照)。 - どのように説明文を入れればよいですか?
-
現在、サポートが不十分なため、説明文については推奨される方法がありません。
alttext
属性は説明用ではなく、MathMLがサポートされていない場合にMathMLの代わりに使用することを目的としています。この代替に対するリーディングシステムのサポートは不十分です。MathML 4では、方程式の発音を改善するために
intent
属性が導入されていますが、まだドラフト段階です。aria-label
属性とaria-details
属性を使用して説明文を提供することは可能ですが、まだテストが必要です。実証済みのテクニックが出てきた時点で、このガイドは改訂される予定です。
解説
HTMLでのネイティブMathMLサポートの利点は、マークアップに基づいて音声を提供できることですが、そのような音声を提供できるユーザーエージェントはまだ普及していません。ただし、MathMLは、それをサポートするユーザーエージェントにとっては、依然として最もアクセシブルなオプションを提供します。
MathMLレンダリングのサポートがブラウザで広く普及したため、アクセシブルな数式を提供するための最良の選択肢は MathMLマークアップを使用することです。
数学コンテンツにはMathMLが推奨されますが、単純なインラインテキスト方程式はタグ付けされないことがよくあります(例:"x+y=z")。このような方程式は単純に見えますが、支援技術では多くの場合にすべての記号を読み上げないため、ユーザーが理解するのは困難です。このようなタイプの方程式にMathMLを使用しない場合には、math
のロールを持つ要素内にラップする必要があります(例3を参照)。このロールを使用すると、支援技術は発音モードを切り替えることができます。
注記
EPUBでのMathMLのサポートは、リーディングシステムの古さに大きく依存します。ブラウザーコアを積極的に更新するリーディングシステムは現在MathMLを処理できますが、出版者はしばらくの間、古いリーディングシステムでのコンテンツのレンダリングを考慮する必要があります。
それほど堅牢ではないものの、古いリーディングシステムで動作する可能性が高い解決策は、十分に説明的な代替テキスト付きの数式の画像と、より複雑な数式についての拡張説明を提供することです(例4を参照)。
EPUBでのサポートに関する最新情報については、『EPUBでMathMLを作成するためのベストプラクティス』ガイドを参照してください。