Q&A
背景色の切り替えとウェブアクセシビリティはどのように関係しているのでしょうか。
ウェブアクセシビリティを考慮したwebサイトの作成をしています。
「白」「黒」「青」などのボタンをクリックすると
背景色を変更するようにしたいのですが、どういう実装が良いのでしょうか？
ボタンをクリックした際のjavascriptの作成と、
htmlタグへの背景色の変更だけで良いのでしょうか？
今のところはhtml全体の背景色と、
背景色が変わるとテキストボックスやドロップダウンリストなどの背景色も
変更されるようにしていきたいと考えています。
その他に考慮すべき点などがありましたらアドバイスをいただきたいと思っています。
よろしくお願いいたします。
追記
記載の情報が少なくてすみません。
webサイトを使用する方複数人に意見を伺ったところ、背景色が変わる方が見やすいとの意見をいただいたため背景色の変更ができるようにと考えました。
それを前提に背景色が変更できるような仕組みの作り方を教わりたかったための質問でした。
そして、追加の質問として、ウェブアクセシビリティを考える場合に実装した方が望ましい機能などを教えていただきたく、質問をさせていただきました。
質問を簡潔に記載すると、
1.ボタンをクリックしてhtmlやテキストボックスの背景色を変更する際の実装方法を知りたい。
2.ウェブアクセシビリティを考慮した際に実装すべき機能として何があるか知りたい。
でした。
追記
皆さま回答ありがとうございます。
2.ウェブアクセシビリティを考慮した際に実装すべき機能として何があるか知りたい。
につきましては色々な意見をいただきましたので
回答をもとに勉強をして自分で理解をしていきたいと思います。
1.ボタンをクリックしてhtmlやテキストボックスの背景色を変更する際の実装方法を知りたい。
の件でアドバイスをいただければと思います。
引き続きよろしくお願いいたします。
なるほど……
全盲の方が「白」や「黒」のボタンをクリックして背景色を切り替えたいというわけですね？
んなわけあるかい
弱視ならユーザースタイルシートのimpotantで各々が勝手に見やすい背景色に変更することも可能です。
そもそも弱視と一口に言っても赤が見えない、青が見えない人と千差万別です。
つまり「健常者のあなたが色味を決めても無意味だから弱視の人を数十人連れてこい」というレベルの話です。
したがって弱視の方に対しては下手に凝ったデザインではなくシンプルにコントラスト差で勝負するのが一般的でしょう。
今一度何のため、誰のためのアクセシビリティを確保したいのか考えてみてください。
きちんと対応したいのでしたら、質問サイトでおさまる内容ではないので、きちんとお金を払って専門家に入ってもらってやるべきものと思います。
回答4件
0
https://meglog.net/useful-tools/color-of-the-web-accessibility.html
ウェブアクセシビリティで背景色を考慮する必要がわかりません。
背景色を白や黒や青にして解決するのでしょうか。
そういう研究をしている方でしたら別ですが、他サイトでのウェブアクセシビリティについての情報を見る限り、背景色を変えるのは有効な手段ではないように思います。
リンクに下線を引いたり、重要箇所は太字にしたりが、アクセシビリティの向上につながるのではないでしょうか。
色弱の人のことを考慮して制作しているわけではなく、ただ単にテンプレート選べるおしゃれなサイトにしたい～というのであればCSSを複数つくればよいと思います。
投稿2019/01/16 00:41
総合スコア2341
回答ありがとうございます。
サイトを利用する方に伺ったところ、背景色が黒等になると見やすいとの意見をいただいたため、背景色を変更しようと考えました。
見やすいようシンプルなサイトにするようには心がけていきたいと思います。
0
ウェブアクセシビリティは Web の大きな課題なので有識者による研究と普及活動が行われています。
ウェブアクセシビリティ基盤委員会
まずは実装方針から検討すると良いです。
ウェブアクセシビリティ方針策定ガイドライン
投稿2019/01/16 01:42
退会済みユーザー
総合スコア0
0
WCAG 2.0
アクセシビリティの事はWCAGを参照して下さい。
https://waic.jp/docs/WCAG20/Overview.html
https://waic.jp/docs/UNDERSTANDING-WCAG20/conformance.html
1.4.1 色の使用 (WCAG 2.0)
https://waic.jp/docs/WCAG20/Overview.html#visual-audio-contrast
1.4.1 色の使用: 色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。 (レベル A)
注記: この達成基準は、特に色の知覚に関するものである。その他の知覚形態については、色やその他の視覚的提示のコーディングへのプログラムによるアクセスも含めて、ガイドライン 1.3で網羅されている。
https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html
達成基準 1.4.1 を理解する
1.4.3 コントラスト (最低限) (WCAG 2.0)
https://waic.jp/docs/WCAG20/Overview.html#visual-audio-contrast
1.4.3 コントラスト (最低限) : テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の場合は除く: (レベル AA)
https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
達成基準 1.4.3 を理解する
Re: taiyo-2017 さん
投稿2019/01/17 03:39
総合スコア18162
0
ベストアンサー
【方法1】
JSを使って、ボタンクリックでbodyに色指定のclassを追加
（ほかの色の指定があればもちろんそれは削除で）
たとえば背景黒のセットなら<body class="blackbody">になるように。
あとはcssで.blackbody内のデフォルトスタイルを上書きしていきます。
【方法2】
bodyタグの前に色パターンの数だけラジオボタンをdisplay:noneで仕込んでおきます。
色切替ボタンをlabelタグで作り、それぞれのラジオボタンとforで紐づけます。
あとはxxx:checked~bodyを使ってデフォルトスタイルを上書きしていきます。
（↑チェックが入っている状態のxxxの弟要素であるbodyという意味です）
仮に背景黒用のラジオボタンにradio_blackというIDをつけたとすると
css
1#radio_black:checked~body{ 2 background: #000; 3 color: #fff; 4} 5#radio_black:checked~body a{ 6 color: #00f; 7}
投稿2019/01/21 23:32
総合スコア82
あなたの回答
tips
プレビュー
