web-dev-qa-db-ja.com

ハイコントラストスタイルを示すための基準はありますか?

私はWebアプリに取り組んでおり、通常のスタイルシートと2番目の高コントラストスタイルシートの両方を開発しました。ユーザーがスタイルを切り替えることができるようになると、行き詰まってしまいます。

使用すべき標準のアイコン/テキストはありますか?

これまでのところ、次のようなリンクがあります(ハイコントラストは通常​​のビューでのみ表示され、通常のビューはハイコントラストでのみ表示されます)。

ハイコントラストに切り替えます

通常のビューに切り替えます

1
Mauro

使用すべき標準のアイコン/テキストはありますか?

アクセシビリティの観点からは、アイコンの合意された標準はありません。他の回答の提案はすべて良いものです。視力の弱いユーザーはsee使用しているアイコンではない可能性があることに注意してください。スクリーンリーダーが適切に通知するように、代替テキストがあることを確認してください。

通常のビュースタイルは WCAG 1.4.3コントラスト(最小) に従って十分なコントラストがありますか?私は答えが「はい」であり、あなたのハイコントラストビューが 1.4.6コントラストのAAAガイドラインに適合しようとしていることを願っています(拡張)

通常のビューのコントラストが低く、コントラストを高めたスタイルでWCAG 1.4.3を満たそうとしている場合は、メカニズムがハイコントラストへの切り替えに使用すると、それ自体が十分なコントラストになります。 (少しわかりにくいかもしれませんが、ページのコントラストが低く、コントラストを高くするボタンがある場合は、WCAG 1.4.3に従ってボタン自体に十分なコントラストがあることを確認してください。つまり、テキストの色ボタンの背景色と比較したボタンには、少なくともa 4.5:1のコントラスト比 が必要です。)

高(高)コントラストスイッチの例は、フッターの https://www.applause.com/ にあります。彼らはスイッチを使用していますが、あなたが提案したのと同じくらい簡単に2つのテーマ間のリンクを持つことができます。 (ただし、間違ったアフォーダンスを伝えるため、リテラルリンク(<a>)は使用しません。「リンク」は、別のページ(または現在のページの他の場所)に移動するために使用される要素であり、 「アクション」を実行します。ボタンは「アクション」用です。)

G174:ユーザーが十分なコントラストを使用するプレゼンテーションに切り替えることができる十分なコントラスト比を備えたコントロールを提供する 」も参照してください。しかし、その推奨事項の1つの警告は、ページの「代替バージョン」を1つの可能なソリューションとして使用することについて述べています。アクセシビリティコミュニティではこれを強くお勧めしません。あなたがしようとしているように、別のテーマに切り替えることは、より良い解決策です。

2
slugolicious

名詞プロジェクトは、2つのモードをうまく表現しているように見えるいくつかの円(半分明るい/半分暗い)を示しています: https://thenounproject.com/search/?q=contrast

ラベルとして「ハイコントラスト」のトグルを使用することもできます。

1
Stacy H