web制作・ユーザー補助対応 - ブログ - 名古屋のWeb制作会社アイデアソース

タグを絞り込む : #a-blogcms #a-blogcmsの小技 #jsライブラリ #Webアクセシビリティ #ユニバーサルデザイン

Web制作に役立つ js ライブラリの小粒な Tips をご紹介します。
今回はWebサイトのTOPページなどでよく利用するjsライブラリ「slick」で、「.slick-dots」で利用される<button>の「aria-hidden」が、画像の表示・非表示に連動してボタンも「aria-hidden="true"」or「aria-hidden="false"」と切り替わってしまう問題についての解決方法をお伝えします。

問題点

この問題点は、画像が表示されていない時にも「.slick-dots」が連動して「aria-hidden="true"」になってしまいます。この場合画像は表示されていなくても、「.slick-dots」の<button>は表示されているため本来は「aria-hidden="false"」が正解になります。
この記述が間違っていることで、音声ブラウザで利用された際にボタンについて間違った操作方法が伝わる可能性があります。

解決策

当初、海外など色々な情報を探しましたが、解決法がわからずでした。
そこで他のサイトはどうかと、最近作った別のサイトを確認したところ、slickを使っていても新しいバージョンではこの問題が解決していることに気付きました。

いつから大丈夫になったのか分かりませんが、今回利用していた古い「slick.js ver1.4.1」では「aria-hidden」問題がおきますが、最新の「slick.js ver1.8.0」（2024/4/19時点）では解決されていました。

新しいサイトを立ち上げる際は js などのライブラリも最新にしますが、過去に作った古いサイトの場合は、そのまま古いライブラリを使っている場合もあります。もし同じ症状に遭遇した場合は、ライブラリを新しくしてみると改善するかもしれません。

Webサイトで利用するjsライブラリなどは、セキュリティの問題もありますので、定期的に確認をするなど最新で運用されることをお勧めいたします。

・slick
https://kenwheeler.github.io/slick/

先日、公式サイト上にて合格発表があり、無事「色彩検定UC級」に合格しました。
サイト上では番号の確認だったので、万が一見間違えていたら・・・と思い、ブログに書くのを躊躇していました。

昨日、合格証書と資格証が届き、やっとエントリーを書くことができました！8月28日にこのブログで宣言をしてから4ヶ月、「合格」の報告ができてうれしいです。
UC級の合格者には、色彩検定協会から資格を付与されますので、私は晴れて「UCアドバイザー」となりました。

みなさま今後ともよろしくお願いいたします。

先日、色彩検定UC級を受験してきました。

このブログで受験宣言をしてから3ヶ月弱、近頃はブログも停滞していましたが、細々と勉強を続けておりました。
UC級は始まったばかりの試験なので、過去問題集が昨年の１回分しかなく、その内容を熟読しつつ、未出題の内容をひたすら読み込むという勉強法をしてました。
帰宅後の解答速報サイトによる、自己採点を行い、すこしホッとしている状況です。

今回の試験を受けて気が付いた、というか常々悩んでいた私の視力が、この試験のテーマと同じく、今後配慮していくべき年齢に達したのだなという印象です。
あのマークシートの薄いオレンジの数字が見辛くて、あと鉛筆でマークした箇所が光で反射すると、ちゃんと塗れているのか分からないんです。塗りに時間がかかりすぎて、最後の問題が終わる頃には、制限時間5分前。最初から通して見直しする時間はありません。

私は現在、遠視のメガネをかけているのですが、もう年齢的には遠視なのか老眼なのかという状況なので、今回の試験は色々とギリギリでした。
そこで、まさに今回の試験で勉強した、「高齢者の色の見え方」を思い出しました。

高齢者は色の弁別能力が低くなったり、色自体の見え方が若齢者と異なってきます。
網膜に届く光の量は、20歳を基準にすると50歳では約50%、60歳では約66%も減少するといわれています。
色の弁別能力は、20歳半ば頃が最も優れ、その後年齢が高くなるに従い、徐々に低下していきます。低下の度合いは個人差が大きいです。
高齢者は、視野内に明るい光があると、まぶしさ（グレア）をより強く感じるようになります。

などなど

以前、３・２・１級を勉強していた頃は、色覚特性の項目を試験対策として覚えてはいたけれど、正直実感はなく他人事のように捉えていた気がします。それに高齢者の見え方については、もっとボリュームが少なかったように記憶しています。
時間を経た今、自分にも色々な項目が当てはまるようになってきて当事者なんだと自覚しました。

今までアクセシビリティやバリアフリーを特殊な方への配慮として捉えていましたが、そうではなく、年齢・性別・障害・国籍など関係なく全ての人が同じように過ごすことができることを目指すものなのですね。だから受講級の名称がUC（色のユニバーサルデザイン）なんだと思いました。

次からは様々な色の見え方について書いてみたいと思います。

人の眼について

最終的に「色」を感じるのは、「人」です。
「色」は眼に到達した光を処理することで認識することができるのです。

受光する

光は黒目「虹彩」の中心にある小さな穴「瞳孔」から、眼球の中に入り、ピントを調節する「水晶体」を通り、さらに「硝子体」を経て、眼の内側にある「網膜」という細胞に届きます。
「網膜」では、明るい所で働く「錐体」と、暗いところで働く「桿体」という２つの視細胞があり、光を受け取ります。
「錐体」には、長波長（主に赤）を感じるL錐体、中波長（主に緑）を感じるM錐体、短波長（主に青）を感じるS錐体の３種類があり、この３つからの情報が、色を感じる元となります。
ちなみに「桿体」は主に明暗（白黒）の情報を感じます。暗がりでもある程度見えるのは「桿体」が働くからです。

反対色へ分類する

３つの錐体からの情報は信号となって「網膜」から脳の視覚情報を処理する部分を通って後頭部に届き「色」と認識されます。
脳に届く途中で、３つの錐体からの情報（LMS情報）が、赤と緑ならどっち、青と黄ならどっちかを２対の反対色と、明るさ（白と黒）の３種類のユニットで分類され信号として脳へ送られるのです。

反対色の原理は、4原色の考え方で、向かい合う色は同時に存在しないということで分類するようです。
例えば緑には黄色と青の要素はあるけど、赤の要素はない。（赤みの緑は存在しない）ということでこの考え方があるようです。

ちなみに、この反対色というのは、いわゆる補色とは少し違い、補色は色相環上で反対側に位置する色なので、黄色の補色は青紫です。

色の分析と統合をする

３種類のユニットから送られる信号を受けて、脳は「光」がどの色あい（色相）で、どのくらい明るく（明度）、どのくらいあざやかなのか（彩度）、そしてどの系統（ブルー系、ピンク系など）の色なのかの分類を行います。

ここまでが「人」が「色」を見る（認識）機能についてです。この概念がわかれば、色覚特性のことを理解しやすくなると思います。

光と可視光線

「色」を考える上で「光」はとても重要です。
「光」は基本的には電磁波の一種で、波のように振動して進む性質があり、波長（波の山と山の間の長さ）で分類されます。

人間の目に見える波長は380から780nm（ナノメートル）で「可視光線」と言われています。可視光線は波長の短い方から、紫、青、水色、緑、黄、橙、赤と7色あり、これが虹の色です。
7色は、青紫から青を「短波長」、緑から黄色を「中波長」、橙から赤を「長波長」と分類します。

この波長の前後は人間の目には見えなくなり、波長が短いと紫外線やガンマ線・X線、波長が長いと赤外線やマイクロ波・電波（AM・FMラジオ、テレビ）や電気になります。

人間の目に見える「可視光線」には「自然光」と言われる太陽の光と、「人口光源」と言われる電球や蛍光灯の光などがあります。
それぞれの「光」には色味や明るさ、強さがあります。光の色味が「色」に影響します。

光と色温度

色味は「色温度」といいます。K（ケルビン）という単位で表します。
ちなみに「光」の明るさは「照度」で表し単位はルクス（lux）、光の強さはカンデラ（cd）、光の総量（光束）をルーメン（lm）というようです。
蛍光灯を買う際に「2100lm」と記載されています。電球のワットは消費電力量であり光の単位ではありません。

「色温度」という言葉はあまり聞きなれないかもしれませんが、光の色味ということで例えば、蛍光灯の黄色味がかかった電球色や、青みがかった昼光色、中間の白色といった言葉で表現されています。
また、カメラの設定を少し触ると「ホワイトバランス（WB）」という名称で、色味を調整する機能があります。この数値が色温度（K）です。
設定を変えることで、設定した環境下の光の状態と同じになり、黄色味がかかったり青みがかった写真になります。

晴天の空が青く、夕焼け空が赤いのも波長や色温度と関係があります。
晴天の空は太陽の光が大気中を通る際に、短い波長の光（青色）がぶつかり（散乱）することで青く見えます。青色は波長（波と波の間）が短い分、大気中の水蒸気などの粒子にぶつかる確率が高くなり、また波長の短い光の方が散乱する性質が高くなるので、青色が空全体に広がります。他の色の光は粒子にぶつからずに太陽の光として目に届きます。

また夕焼け空の場合は、太陽が傾くことで太陽の光が目に届くまでの距離が日中に比べ長くなり、短い波長の光（青色）は散乱しきって届かず、あまり散乱せずに残った長い波長の光（赤色）の光が目に届きます。朝焼けや、地平線近くの月が赤くなるストロベリームーンも同じ原理です。

次は「光」を受ける「人」のことについて書いてみたいと思います。

タグ検索：web制作 , ユーザー補助対応

選択されているタグ : #web制作 , #ユーザー補助対応

slickのslick-dotsで「aria-hidden」問題を解決する

問題点

解決策

Webアクセシビリティを考える　色彩検定UC級　無事合格しました！

Webアクセシビリティを考える　色彩検定UC級を受験してきました

Webアクセシビリティを考える　人が色を見るしくみについて