当エンジニアブログで実施したアクセシビリティ改善の方法についての解説
デザインエンジニアの安田（@_yuheiy）です。 先日、「アクセシビリティ学習の手引きとしての入門講座」という記事を公開しました。これに伴って、当エンジニアブログ自体のアクセシビリティの問題が気にかかったので、併せてその改善も行いました。 この記事では、そのなかで遭遇したよくある失敗例と具体的な対処方法についてご紹介します。アクセシビリティの問題の多くは似たようなパターンを有しているため、主要なケースについて知っていただくだけでも、多くの割合の問題を未然に防ぐことができるはずです。 5月12日に記述内容を一部変更しました。 文字やアイコンのコントラスト比 改善前は、文字色やアイコンの色が薄すぎて見えづらい箇所がいくつかありました。はっきりとした黒色ではなく、淡い灰色になっているような要素のことです。これらは、ロービジョンのユーザーや、ディスプレイの色が見えづらい状況にあるユーザーにとって
リンクの下線の視覚的ノイズを軽減する
“Designing dyslexia-friendly navigational components”によれば、text-decoration: underlineによるデフォルトの下線はアクセシブルではないと言う。理由としては大きく二つ。 下線がディセンダーと重なることで文字の判読性や可読性が損なわれる コンテンツの邪魔になって読み手の気を散らす これは特にディスレクシアなど、認知機能に困難があるユーザーへの影響が大きい。 加えて、デフォルトの下線は美観としても好ましくないという評価を受けることが多い。視覚的に煩雑な印象を与えるからという、上記と類似する理由によるものだろう。 件の記事では、そうした問題を踏まえた改善案が紹介されている。これを参考に、このサイトでは次のような実装を採用した。 html { /* 下線と文字の距離を離す */ text-underline-offset:
絵文字のアクセシビリティについて少し調べてみた : could
Peach🍑を紹介する記事で、絵文字が世界的な共通言語になりつつあると紹介しました。日本でも Twitter が紅白歌合戦用の特別ハッシュタグ＋絵文字を実装するなど、絵文字がコミュニケーションにおいて重要な位置付けになりつつあります。 しかし、アクセシビリティはどうなのでしょう。 目では絵として表示されていますが、中身はコードです。実際、どのように読み上げられるのでしょうか？そもそも読み上げられているのでしょうか？ サポートが広がる絵文字読み上げ 年々音声読み上げの精度は上がってきており、絵文字サポートもそれに合わせて増えてきているようです。例えば Google Voice は、2014 年に絵文字読み上げをサポートしましたし、NDVA でも有志の方が絵文字読み上げのための辞書を無料で配布しています（英語のみ）。 iOS の VoiceOver は、特別なアプリをインストールしなくてもす
ウェブアクセシビリティ導入ガイドブック｜デジタル庁
デジタル庁では「誰一人取り残されない、人に優しいデジタル化」を実現するため、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。この度、ウェブアクセシビリティに初めて取り組む行政官の方や事業者向けに、ウェブアクセシビリティの考え方、取り組み方のポイントを解説する、ゼロから学ぶ初心者向けのガイドブックを公開します。 優しいサービスのつくり手になる一助として、ぜひご活用ください。 公開の背景ウェブアクセシビリティの向上に取り組むには、非常に専門的な複数の規格とガイドラインをそれぞれ確認する必要があります。そのため、適切なやり方がわからないままに、現在は間違っている対応の踏襲、不要・過剰な対応、不適切な対応をしてしまうことがあります。ウェブサイトだけではなく、申請・手続等のデジタルサービスの重要性が増す中で、最新の技術動向を踏まえた、初心者が学習できる行政機関向けの研修資料が不足していま
UIの色を変えただけで大量のクレームを頂戴してしまった話｜のなと
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
izm on Twitter: "ソフトウェアエンジニャを一応数年やってますが以下の三点は学べました 人類はマニュアルを読まない 人類は動画を見ない 人類はUIの文字を読まない"
ソフトウェアエンジニャを一応数年やってますが以下の三点は学べました 人類はマニュアルを読まない 人類は動画を見ない 人類はUIの文字を読まない
ローソンPB新パッケージの「わかりにくすぎる」という問題 ユニバーサルデザインの専門家に訊く - wezzy｜ウェジー
ローソンは2020年春、プライベートブランド商品のロゴ・パッケージを刷新した。これまでの「ローソンセレクト」を「L basic(エル ベーシック)」「L marche(エル マルシェ)」の2つのブランドに一新したという。手掛けたのは国内外で幅広いクリエイティブを行うデザインオフィスnendoだ。 確かにデザインは美しい。しかし店頭に並んだ商品を見ると、統一感はあるが何の商品だかわかりづらい。Twitterでも「前のデザインの方がわかりやすかった」という消費者の声が目立つ。 筆者の和久井は、ライターと並行して合同会社ブラインドライターズという、視覚障害者を中心とした会社を運営している。スタッフには、中心視野が欠けていて焦点が合わない人、全体的にぼやけて見える人、トイレットペーパーの芯から物を覗いているように見える視野の狭い人など、さまざまな視覚の状態の人がいる。彼らにも見てもらったが、「非常
文字や背景にピュアブラックを使ってはいけない理由
UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 デザインにピュアブラックを使うと可読性が低くなると知っていましたか？ 統計によると、「アメリカの成人の58％」がコンピュータ作業で眼精疲労を経験したことがあるそうです。デザイナーは使用する黒の色に注意を払うことで、目が疲れる可能性をある程度減らすことができます。 ピュアブラックの文字や背景 ピュアブラックの文字や背景と白の組み合わせは、ユーザーが文章を長時間読むとき目に不快感を与えることがあり、眼精疲労を招いてしまいます。 白は100％の明度であり、黒は0％の明度です。このように明度のコントラストが強いと光量に不均衡が生じ、ユーザーが明るさに順応しようとするために目が酷使されることになるのです。 この現象を実証するために、暗い部屋で明るい電灯を
アクセシビリティガイドライン > 60. 感受性発作(光源性てんかん)を起こしうるような… ： 三井住友銀行
解説 画面を点滅させると、感受性発作(光源性てんかん)のある利用者は、発作を引き起こす可能性があるため、こうしたコンテンツを提供しないようにします。 点滅を含むコンテンツが例え画面の一部であっても、弱視等の ユーザーが画面を拡大している可能性があるため注意が必要です。 こうしたコンテンツを提供する場合には、そのページに遷移する前に通知し、ユーザーが回避できるようにします。この項目は、利用者の安全や生命に関わる可能性があるため特に重要です。 実例 画面の全部や一部を問わず、早い周期（1秒間に2回以上の速度）で画面を点滅させるコンテンツを提供しないようにします。こうしたコンテンツには、BLINK要素（一部のブラウザの独自仕様で規格外）でマーク付けされたテキストやアニメーションGIF、FlashやJavaアプレットで提供される動画があります。 早い周期で画面を点滅させるコンテンツを提供する場合に
落合啓士オフィシャルブログ Powered by Ameba
落合啓士オフィシャルブログ Powered by Ameba元ブラインドサッカー日本代表でキャプテンも務めた落合啓士の新たなチャレンジや日常をお届けしているブログ。 どうも。おっちーです🎵 2024年もいろいろとありましたが一年応援ありがとうございました🙏 一年のしめくくりは愛媛へ✈️ プロバスケっとチーム 愛媛オレンジバイキングスの依頼で ブラインドサッカー＆目隠しバスケ体験会を実施してきました⚽️⛹️ ぼく自身バスケをするのはもう久しぶりすぎて依頼もらった時はできるかなと思ってましたが 実際やってみたらあんがいできてうれしかったです🙌 こどもたちもバスケを見にきてるだけのこともあり 上手にできてました👏 シュートも決まって大盛り上がり⤴️ 二日間開催した中でうれしかったのは 全盲の小学生が参加してくれたこと。 そして一緒のグループのこどもたちが自然とガイドすることを意識して楽し
チャンス
Being patient vs. being loudというAccessibility Winsの中の人の記事を読んだ。アクセシビリティーに欠けるウェブサイトにおいてその改善を求めるフィードバックが来ないのは、そういうウェブサイトは障害のある人にチャンスすら与えることが出来ないからであるからだろうと言う。そのため大前提としてアクセシビリティーに問題のないウェブサイトを作るべきだと読んだ。 人が自分の世界が恵まれていることに気付くことはまずない。逆に自分の世界が何か間違っていたり何か足りないことに気付くこともまた難しい。インターネットの普及によりそういったことに気づき知ることが出来る機会が増えた現在でもあまり状況に変化はない。知識自体を得ることができただけでは不十分だということだ。人間の想像力には限界があることが本質的な問題だろう。 まずは機能や振る舞いではなく、チャンスを平等に与えられる
高齢者が「郵便局再配達依頼」が出来ないと泣いていたので検証してみた : Birth of Blues
郵便局へ行こう! ご本人曰く、ヤマト運輸や佐川急便の再配達依頼は出来るが、郵便局だけ出来ないので毎回バスを乗り継ぎ窓口へ引き取りに行っている。不便との談。 再配達依頼に立ち会いましたが結論として無理。以下詳細。 初っ端より（ヤマトや佐川の送り状と比べ）どこに電話していいか分からない由。 要は真ん中の「０８００〜」なんですが、これは「伝票番号であり、電話番号とは思わなかった」とのこと。 お年寄りの固定観念としてこういう電話番号は普通、０１２０とか０３から始まるそうです。 不在票の一番目立つ場所に太字で「０８０〜」と書けば誰でもフリーダイヤルだと思うにきまっている。と思っているのはこれを作った郵便局担当者の常識。我々の非常識。 確かに「電話番号」「フリーダイヤル」なんてどこにも書いていない。書いているのは「長い数字（無料）」、（無料）とは何に対し無料と指しているのか主語も記号も親子関係もなく意
Webアクセシビリティのチェックツール｜エー イレブン ワイ ［WebA11y.jp］
Web Accessibility Toolbar 2012J ブラウザのInternet Explorerで利用できるツールバー（無償）。対応OSは、Windows Vista以降、対応ブラウザはIE8以上。 IEのツールバー「Web Accessibility Toolbar 2012J」の詳細 カラー・コントラスト・アナライザー 2013J WCAG 2.0やJIS X 8341-3:2010の達成基準で定められたコントラスト比など、色に関するチェックツール（無償）。 色のチェックツール「カラー・コントラスト・アナライザー 2013J」の詳細 ツールがあれば全ページを自動的に検証できるのか？ 「エー イレブン ワイ（WebA11y.jp）」では、無償のチェックツールを配布しています。Webコンテンツのアクセシビリティをチェックするツールには様々なものがありますが、全てのチェックを完全
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アクセシビリティ設定｜Nintendo Switch 2｜任天堂
https://twitter.com/moraqualitas/status/1758360919799972062
https://twitter.com/PentaPROgram/status/1735822560162611444
DJ TECHNORCH (DJテクノウチ) ⛩ 九十九音夢 (ツクモネム) on Twitter: "新しい一万円札のデザインの発表をNHKで見た時、赤緑色弱・緑内障・白内障・加齢(80が近づいてきた)で既に本や新聞等が一切読めなくなっていた実家の父が 「あぁ、この見た目なら区別しやすいなぁ。」 と言っていたので、誰が考えてるのか知らないがよく考えてあるんだなぁと思いました。"
視覚障害を持つユーザーも『1-2-Switch』を楽しむ。Nintendo Switchはアクセシビリティの新たな扉を開くか - AUTOMATON
http://2ndidea.com/accessibility/pros-cons-of-user-scalable-no/