翻訳された数式をアクセシブルで視覚的に明確な方法で表すにはどうすればよいですか？
古いシステムから新しいシステムへのWebサイトのコピーの移植に取り組んでいます。コンテンツの1つの項目で、それをどうするかについて悩みます。
英語で書かれた数式です。 ただし、画像として保存されます。 （注：これは単なる例であり、実際には有効な数式ではありません）。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
さて、これを純粋なテキストに翻訳することができましたが、次のようなものになるので、完全に視力のあるユーザー（つまり、大多数）にとってはそれほど役に立ちません。
Fee = 'Total account balance as of 12 Jan' * 'Interest rate %' * ('Days in the current month' / 'Full length of service in days')
これはアクセス可能ですが、目の見えるユーザー向けの現在のソリューションよりも悪いため、正確に使用できなくなりました。
このテキストの内訳を画像のaltテキストとして提供することもできますが、非常に長く、実際にaltテキストが意図されているものではないため、これもそれほど適切ではありません。
そう。この純粋なテキストの画像を、同時にアクセス可能である一方で、まだ明確で見やすいものに変換するにはどうすればよいですか？
あなたの質問は私に Math.Stackexchange を思い出させました
あちこちでさまざまなQ/Aを行うことができます。まさにあなたが探しているものが見つかります。
これに対する解決策は、両方の観点から、つまり設計者と開発者です。 math.stackexchange.com はMathJaxを使用しており、多くの利点があります。最後に、すべてのデザイン/外観とアクセシビリティを提供します（特にスクリーンリーダーの場合）
そして、あなたは一箇所で欲しいものをすべて手に入れます。
質問はデザイナーの視点からでしたが、これに対する実際の答えはさらに開発者の視点です。
更新：
また、簡単な answer はmath.stackexchangeの威力です-META。
次はあなたが望むものを与えると思います。
あなたはそれを試すことができますここ。コードの下に貼り付けてサイズを設定するだけです。
fee= Total \ account \ balance \ as \ of \ 12 \ Jan \ * \ Interest \ rate \ \% \ * \frac{\text{Days in current month}}{\text{Full length of service in days}}
以下のコンセプトに似た数式を表示することをお勧めします。各セクション（例：「料金」）は独自の<div>または<span>。演算子記号も独自のhtml要素内にあります。これにより、スタイル設定の柔軟性が大幅に向上し、ページ内で数式のテキストを選択/検索できるようになります。
高レベルの技術詳細
次の1つの式を表す正確な文字列がデータベースに保存されているとします。
Fee = 'Total account balance as of 12 Jan' * 'Interest rate %' * ('Days in the current month' / 'Full length of service in days')
開発チームは、文字列式を解析し、論理的に分解するユーティリティ（括弧はネストされたネストされたオブジェクトをグループ化して作成）を作成し、レンダリングのためにUIで使用できるJSONオブジェクトに変換できる必要があります。以下は私の意味の例です。ただし、正確な構造を少し調整する必要がある場合があります。
（コンセプトを証明するために、今のところ実際に開発をスキップし、テストのために数式の一部を手動で変換することができます。）
formula = [
{
text: 'Fee',
operator: '='
},
{
text: 'Total account balance as of 12 Jan',
operator: '*'
},
{
text: 'Interest rate %',
operator: '*'
},
{
text: '',
operator: '',
group:
[
{
text: 'Days in the current month',
operator: '/'
},
{
text: 'Full length of service in days',
operator: ''
}
]
}
]
使用するデータオブジェクト構造を取得したら、数式配列内の各オブジェクトを反復処理することにより、UIで動的にレンダリングできます（Angularはこれに適していますが、他のテンプレートオプションはたくさんあります。正確なツールはありません。重要）。
さらに、レンダリングプロセスの一部として、元の数式文字列をaltタグに含めて、使いやすさを維持できます。
更新：Ben Harrison と divy399 が回答を提供してくれた私はこの数学では自分よりも優れていると思います固有のコンテキスト。
---元の回答---
通常は非表示になっている追加のテキストや音声を使用します。
解決策1：スクリーンリーダーのみのクラスを実装する
ブートストラップ suggests"[スクリーンリーダー]のみのクラスで非表示にされた追加のテキスト"を使用します。このテキストはaltテキストではないので、仕様を破ることはありません。 Bootstrap corrobates："aria-label、aria-labelledby、またはtitle属性など、支援技術のラベルを提供する別の代替方法があります" =。
ソリューション2：オーディオ
理論的根拠：Captcha（それらに立つことができるかどうかにかかわらず）も同様に、アクセシビリティの問題があります"[a]ピュアテキストの画像を（...）同時に」。ウィキペディアの Captchaアクセシビリティ 段落を見ると、基本的には問題を説明しています。
ウィキペディアが言及しているように、 audio Captchas は人気のある回避策です。記事では、これは意図的に画像をスクランブルするために、これがキャプチャの一部の成功例にすぎないと述べています。そうしないので、特にBootstrapのアドバイスに従っている場合は、全体的な実装で使いやすさが向上するはずです。
等幅フォントを有利に使用しますか？
Total account Days in the current month
Fee = balance x Interest rate % x ------------------------------
as of 12 Jan Full length of service in days
または、「用語」を複数の行に分割したくない場合は、演算子を含む各部分を別々のテキストビットに入れ、blockを使用してそれらを整列させますか？
画像の場合は、altテキストを使用して数式をテキスト形式で説明する必要があります。数式を説明するためにさらにスペースが必要な場合は、longdesc属性を使用できます。これは、視力のあるユーザーには表示されません。ただし、画像を使用すると、ユーザーの問題が確実に発生します。
したがって、画像を数式に変換し、学習する必要があります MathML
MathMLはW3Cによって作成されたもので、htmlに追加する一連のタグと属性であり、3番目のリリースにあるため、非常に堅牢です。これは、方程式をアクセシブルなテクノロジーで機能させるためにW3Cによって明示的に作成されたもので、比較的簡単に学ぶことができます。
スクリーンリーダーが数学情報を正しく読み取るためには、その情報をMathMLで構成する必要があります。そうしないと、スクリーンリーダーやテキストリーダーが数式のグラフィックにアクセスできなくなります。
この website には、役立つチュートリアルもあります。
Webブラウザーとスクリーンリーダー（JAWSやNVDAなど）は、すべて here と同様にMathMLを読み取ることができます。
MathPlayerプラグインと一緒に使用すると、多くの一般的に使用されるスクリーンリーダーでMathMLコンテンツを利用できます。たとえば、スクリーンリーダーJAWS、Window-Eyes、SuperNova、BrowseAloudはすべてMathMLをサポートしています。
したがって、方程式をeveryoneで機能させるには、アクセシブルで視覚的な方法で、する必要がありますMathML（CSSを使用）を使用します。テキストの説明と一緒に画像を使用するのは、次のいずれかの標準的なソリューションだからです
- みんなのために働かない、または
- （方程式の複雑さに応じて）テキスト形式で説明することは不可能になります。
- ユーザーにとって非常に混乱します