デザインエンジニアの安田（@_yuheiy）です。 先日、「アクセシビリティ学習の手引きとしての入門講座」という記事を公開しました。これに伴って、当エンジニアブログ自体のアクセシビリティの問題が気にかかったので、併せてその改善も行いました。 この記事では、そのなかで遭遇したよくある失敗例と具体的な対処方法についてご紹介します。アクセシビリティの問題の多くは似たようなパターンを有しているため、主要なケースについて知っていただくだけでも、多くの割合の問題を未然に防ぐことができるはずです。 5月12日に記述内容を一部変更しました。 文字やアイコンのコントラスト比 改善前は、文字色やアイコンの色が薄すぎて見えづらい箇所がいくつかありました。はっきりとした黒色ではなく、淡い灰色になっているような要素のことです。これらは、ロービジョンのユーザーや、ディスプレイの色が見えづらい状況にあるユーザーにとって

Nintendo Switch 2 はアクセシビリティの設定で、 文字の大きさやボタンの割り当ての変更など、 さまざまなカスタマイズをすることができ、 ゲームを遊ぶ方をサポートします。

“Designing dyslexia-friendly navigational components”によれば、text-decoration: underlineによるデフォルトの下線はアクセシブルではないと言う。理由としては大きく二つ。 下線がディセンダーと重なることで文字の判読性や可読性が損なわれる コンテンツの邪魔になって読み手の気を散らす これは特にディスレクシアなど、認知機能に困難があるユーザーへの影響が大きい。 加えて、デフォルトの下線は美観としても好ましくないという評価を受けることが多い。視覚的に煩雑な印象を与えるからという、上記と類似する理由によるものだろう。 件の記事では、そうした問題を踏まえた改善案が紹介されている。これを参考に、このサイトでは次のような実装を採用した。 html { /* 下線と文字の距離を離す */ text-underline-offset:

Peach🍑を紹介する記事で、絵文字が世界的な共通言語になりつつあると紹介しました。日本でも Twitter が紅白歌合戦用の特別ハッシュタグ＋絵文字を実装するなど、絵文字がコミュニケーションにおいて重要な位置付けになりつつあります。 しかし、アクセシビリティはどうなのでしょう。 目では絵として表示されていますが、中身はコードです。実際、どのように読み上げられるのでしょうか？そもそも読み上げられているのでしょうか？ サポートが広がる絵文字読み上げ 年々音声読み上げの精度は上がってきており、絵文字サポートもそれに合わせて増えてきているようです。例えば Google Voice は、2014 年に絵文字読み上げをサポートしましたし、NDVA でも有志の方が絵文字読み上げのための辞書を無料で配布しています（英語のみ）。 iOS の VoiceOver は、特別なアプリをインストールしなくてもす

デジタル庁では「誰一人取り残されない、人に優しいデジタル化」を実現するため、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。この度、ウェブアクセシビリティに初めて取り組む行政官の方や事業者向けに、ウェブアクセシビリティの考え方、取り組み方のポイントを解説する、ゼロから学ぶ初心者向けのガイドブックを公開します。 優しいサービスのつくり手になる一助として、ぜひご活用ください。 公開の背景ウェブアクセシビリティの向上に取り組むには、非常に専門的な複数の規格とガイドラインをそれぞれ確認する必要があります。そのため、適切なやり方がわからないままに、現在は間違っている対応の踏襲、不要・過剰な対応、不適切な対応をしてしまうことがあります。ウェブサイトだけではなく、申請・手続等のデジタルサービスの重要性が増す中で、最新の技術動向を踏まえた、初心者が学習できる行政機関向けの研修資料が不足していま

Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の１要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑＆黄」から「緑塗り＆緑枠線」に変更しました。「え、それだけ？」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが

STUDIO KENT（ファミコンギターkent）ギター講師 @studiokent1 あまり人に言ってないですが僕は重度の色弱です ザナドゥをやっていてすごく困るのが赤い文字が全く読めないこと スクショ内の赤文字は1文字も読めません（笑） 同じ人いるかな😅 ちなみによくある数字のテスト貼っておきますが 一番下の2と4以外何が書いてるか一切わかりません pic.twitter.com/du0mh2Edks 2024-02-18 17:38:26

新しい一万円札のデザインの発表をNHKで見た時、赤緑色弱・緑内障・白内障・加齢(80が近づいてきた)で既に本や新聞等が一切読めなくなっていた実家の父が 「あぁ、この見た目なら区別しやすいなぁ。」 と言っていたので、誰が考えてるのか知らないがよく考えてあるんだなぁと思いました。

ソフトウェアエンジニャを一応数年やってますが以下の三点は学べました 人類はマニュアルを読まない 人類は動画を見ない 人類はUIの文字を読まない

ローソンは2020年春、プライベートブランド商品のロゴ・パッケージを刷新した。これまでの「ローソンセレクト」を「L basic(エル ベーシック)」「L marche(エル マルシェ)」の2つのブランドに一新したという。手掛けたのは国内外で幅広いクリエイティブを行うデザインオフィスnendoだ。 確かにデザインは美しい。しかし店頭に並んだ商品を見ると、統一感はあるが何の商品だかわかりづらい。Twitterでも「前のデザインの方がわかりやすかった」という消費者の声が目立つ。 筆者の和久井は、ライターと並行して合同会社ブラインドライターズという、視覚障害者を中心とした会社を運営している。スタッフには、中心視野が欠けていて焦点が合わない人、全体的にぼやけて見える人、トイレットペーパーの芯から物を覗いているように見える視野の狭い人など、さまざまな視覚の状態の人がいる。彼らにも見てもらったが、「非常

デザインにピュアブラックを使うと可読性が低くなると知っていましたか？ 統計によると、「アメリカの成人の58％」がコンピュータ作業で眼精疲労を経験したことがあるそうです。デザイナーは使用する黒の色に注意を払うことで、目が疲れる可能性をある程度減らすことができます。 ピュアブラックの文字や背景 ピュアブラックの文字や背景と白の組み合わせは、ユーザーが文章を長時間読むとき目に不快感を与えることがあり、眼精疲労を招いてしまいます。 白は100％の明度であり、黒は0％の明度です。このように明度のコントラストが強いと光量に不均衡が生じ、ユーザーが明るさに順応しようとするために目が酷使されることになるのです。 この現象を実証するために、暗い部屋で明るい電灯を点けたときを想像してみてください。このような劇的な光量の変化は、私たちの目に悪影響を与えます。しかし、暗い部屋でほのかな明かりを点ければ、目の網膜が

Being patient vs. being loudというAccessibility Winsの中の人の記事を読んだ。アクセシビリティーに欠けるウェブサイトにおいてその改善を求めるフィードバックが来ないのは、そういうウェブサイトは障害のある人にチャンスすら与えることが出来ないからであるからだろうと言う。そのため大前提としてアクセシビリティーに問題のないウェブサイトを作るべきだと読んだ。 人が自分の世界が恵まれていることに気付くことはまずない。逆に自分の世界が何か間違っていたり何か足りないことに気付くこともまた難しい。インターネットの普及によりそういったことに気づき知ることが出来る機会が増えた現在でもあまり状況に変化はない。知識自体を得ることができただけでは不十分だということだ。人間の想像力には限界があることが本質的な問題だろう。 まずは機能や振る舞いではなく、チャンスを平等に与えられる

郵便局へ行こう! ご本人曰く、ヤマト運輸や佐川急便の再配達依頼は出来るが、郵便局だけ出来ないので毎回バスを乗り継ぎ窓口へ引き取りに行っている。不便との談。 再配達依頼に立ち会いましたが結論として無理。以下詳細。 初っ端より（ヤマトや佐川の送り状と比べ）どこに電話していいか分からない由。 要は真ん中の「０８００〜」なんですが、これは「伝票番号であり、電話番号とは思わなかった」とのこと。 お年寄りの固定観念としてこういう電話番号は普通、０１２０とか０３から始まるそうです。 不在票の一番目立つ場所に太字で「０８０〜」と書けば誰でもフリーダイヤルだと思うにきまっている。と思っているのはこれを作った郵便局担当者の常識。我々の非常識。 確かに「電話番号」「フリーダイヤル」なんてどこにも書いていない。書いているのは「長い数字（無料）」、（無料）とは何に対し無料と指しているのか主語も記号も親子関係もなく意