d3 を使用して作成した単純なドーナツ チャートがあります。私のコードは非常にシンプルで、<text>要素を使用して追加したドーナツ チャート内にテキストがあります。この例のように似ていますが、はるかに単純です。
var style = {
'font-size': fontSize,
'text-anchor': 'middle'
};
svg.append("text")
.attr("dy", dy)
.style(style)
.attr("class", "dataText")
.text("100%");
}
すべて正常に動作しますが、Windows のハイ コントラスト モード (alt + 左シフト + 印刷画面) でテストすると、このテキストは表示されません。テキストを黄色に変更すると、ハイ コントラストで表示されます。ただし、通常のユーザーの場合、これを黒にする必要があります。
これまでに試したこと: 1)ここで提案されている @media クエリを使用してハイ コントラスト モードを検出し、ハイ コントラスト モードの間のみ塗りつぶしの色を黄色に変更しようとしましたが、FF にはこれに関するバグがあるようです。2）このリンクから、色/境界線を透明に設定することを提案しました。まだ運がありません。
以前にこの問題に遭遇した人はいますか? これをアクセス可能にするために何をしましたか? NVD3 (D3 を使用) のサンプル ページをハイ コントラストで開こうとしましたが、テキスト要素にも問題があるようです。
通常モードの円グラフ:
ハイ コントラスト モードの円グラフ (テキストは表示されません):
