Webアクセシビリティ難しすぎる問題
はじめに 私はデザイナー兼フロントエンドエンジニアというような立ち位置で、勤務するfreee株式会社のアクセシビリティガイドラインの作成に関わったり、アクセシビリティまわりの仕組みの整備や社内エバンジェリストみたいなことをしています。 もともと私はWebアクセシビリティという分野が、重要なものである以上に技術や考え方として面白いと思ってやっているうちに気付いたら仕事で大きなウェイトを占めるようになってしまったタイプの人です。しかし、そうではない人たちにその重要さを説明したり、対応をお願いしたり、そのための資料を作ったりしているうちに、「やっぱWebアクセシビリティって難しいんだなぁ」と思うようになってきたので、それについて書いてみようと思います。 なお、背景を説明するうえで必要なので社名を出しましたが、あくまでこの文章は個人の見解であり、所属組織とは関係がありません。 誰のためにやるのかが
こんにちは。伊原 力也（@magi1125）と申します。業務アプリケーションのデザイナー、デザインチームのマネージャー、アクセシビリティ関連のコンサルタントなどをやっています。 ウェブアクセシビリティを普及啓発する活動を始めて10年が経ちました。おかげさまで興味を持ってくれる人はかなり増えたと感じています。しかし、人が増えると声は届きにくくなります。「アクセシビリティをどこから学び始めていいかわからない」という意見も目にするようになってきました。 また、私はこれまでにアクセシビリティに関する書籍を何冊か書いていますが、専門書ってちょっと高いので、興味があるぐらいの段階で本を買うのはちょっと……という気持ちもわかります。 ということで、これまで自分が発信したり関わったりしたコンテンツのうち、ウェブアクセシビリティの理解の助けになりそうものをベストアルバム的に一度まとめてみることにしました。
こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、Webアクセシビリティの初心者が基礎を学ぶときに助かった資料を紹介します。各資料に対する説明も掲載しているので、どうぞ最後までお楽しみください🌏 ※冒頭、Webアクセシビリティに関する前提知識の紹介が長くなっています。本編を読みたい方は「資料①｜ざっくり知ろう」からご覧ください。 ※今回は、デジタル庁等の引用元にならって「障害」の表記を使用します。 ※noteの内容に誤りがございましたら、お手数ですがコメントやSNS等でご指摘いただけると幸いです。 はじめにまずは、Webアクセシビリティに関する基礎知識の整理からスタートします。最近よく耳にする「合理的配慮」のことも振り返ります。 WebアクセシビリティとはWebアクセシビリティとは、文字通りWebサービスにおけるアクセシビリティのことです。 アクセシビリティは「アク
筆者は、より多くのWebサイトやWebサービスが、より高いアクセシビリティをもつものになることを強く願っています。 （2024/02/04追記）もう少しわかりやすく書き直したものを投稿しました Webアクセシビリティと合理的配慮 「2024年からWebアクセシビリティ対応が義務化される」というようなことが書かれたWeb上の記事が増えているようです。 しかし、2024年1月現在、日本で「Webアクセシビリティ」について法的な義務が発生している・または2024年内に発生するようになる法的な根拠はおそらくありません。法律の改正が施行され、「やったほうがいい」度合いは高まっていると解釈できますが、「Webアクセシビリティは義務です」とまでは明言できないはずです。 ところが、「アクセシビリティ 義務化」などでWebを検索すると、「2024年にアクセシビリティが義務化します」と説明していたり、あるいは
AppleはAndroidユーザーからのメッセージを「あえて」緑色にすることで不快感を与えるデザインを実践しているという指摘
iPhoneに標準搭載されているメッセージングアプリ「iMessage」においては、「iPhoneから送信されたメッセージ」と「それ以外の端末から送信されたメッセージ」は色分けされて表示されるようになっています。前者は青地に白、後者は緑地に白で文字が表示されますが、緑地に白というコントラストは非常に読みにくく、UXデザイナーのアレン・スー氏が「Appleは意図的に読みにくくしている」と非難しています。 One trick Apple uses to make you think green bubbles are “gross” | UX Collective https://uxdesign.cc/how-apple-makes-you-think-green-bubbles-gross-e03b52b12fed スー氏は「決して緑色が読みにくいわけではない」と前置きし、「緑地に白抜き」
アクセシビリティを考慮したHTMLコーディングガイド
これ何なの？ もともと私が社内メンバー向けに書いていたドキュメントで、 UIパーツ毎のアクセシビリティを考慮したHTMLコーディングTips集です。 社内のドキュメント置き場に眠っていたものですが、知見として社外にも共有出来る内容だなと思ったのと、アクセシビリティをこれからやっていこう！という方の参考になればと思い共有させて頂きます。 ※そもそもアクセシビリティって何なの？という方は、ウェブアクセシビリティ基盤委員会のサイトを見てみてください🔍 目次 おすすめVSCode拡張機能 🕹ボタン 📷 画像 🔍 ナビゲーション 💻 フォーム おすすめVSCode拡張機能 axe Accessibility Linter をインストールしておくとimgタグのalt忘れなど警告が表示されるので、アクセシブルでない書き方を未然に防げるので便利です！ 🕹ボタン buttun タグを使いましょう
全国1700以上の自治体のワクチン接種予約方法について調べてみたら課題が見えてきた | DevelopersIO
日本でも始まった新型コロナウイルスのワクチン接種。しかし、予約の実態を調べると、そのハードルの高さや自治体ごとに異なる予約方法など、ITやアクセシビリティの課題が見えてきました。 結論 1700の自治体が全て異なる。 職員の方の負担がとても大きい。 アクセシビリティを改善する必要性あり。 今IT業界ができることは何か改めて考える機会となった。 両親のワクチン接種予約がなかなか取れない ある日、高齢の両親に電話で「ワクチン接種どうするの？」と聞いたら、「接種券がすぐに来たから、かかりつけの医者に電話で予約する」とのことで、思ったよりも早くワクチン接種できそうで安心していました。しかし、約1ヶ月経過したある日、ワクチン接種はまだ出来ていなくて、予約すらもできていない。指定された予約開始日に電話してもずっと話し中で、なかなか繋がらない。予約専用のWebサイトもあると聞いていたけど、かかりつけの医
2022年5月27日 著 先週のことですが、政府広報オンラインが、いわゆるアクセシビリティオーバーレイを導入したことを広報していました。公的機関にありがちな横並び意識や、Webアクセシビリティに対する理解不足を背景として、他の省庁や地方自治体においても今後、同様のソリューションの導入が相次ぐことでしょう（誠に遺憾ながら）。 これまで何度か書き記してきた（そしておそらく今後も書き記すことになる）とおり、私はWebアクセシビリティの専門家として、またOverlay Fact Sheetに署名した一人として、オーバーレイソリューションに異議を唱えます。コンテンツがアクセシブルに実装されている前提において、その種のソリューションを導入する必要は、全くありません。 とりわけ政府広報オンラインのような、みんなの公共サイト運用ガイドラインに則り、JIS X 8341-3:2016に基づいてWebアクセシ
はじめに タイトルにもある通り、最近 Web アクセシビリティ (以下アクセシビリティ) の検証ツールを作っています。この記事では作るにあたったモチベーションや、現時点での機能、今後の展望についてまとめます。 モチベーション アクセシビリティを評価しようとすると Lighthouse にも付随する axe のようなツールを用いることが多いと思います。axe は WCAG 2.0 や WCAG 2.1 に則った数多くのルールを持ち、アクセシビリティに関する問題発見を支援してくれます。Lighthouse 以外では、axe をモジュールとして使えることはもちろん、Chrome の Extension などからも実行可能で、ユースケースに合わせた柔軟な利用ができます。 ただ、検証精度はどうかというと少し物足りなさを感じる部分があります。例えば以下のような例です。 <div role="butto
公開日 : 2023年9月22日 カテゴリー : アクセシビリティ 「Stark」というウェブアクセシビリティ検証ツールがあります。各種ブラウザ (Chrome、Firefox、Safari、Edge) の拡張機能として、あるいは各種デザインツール (Figma、Sketch、Adobe XD) のプラグインとして、色覚シミュレーションや色のコントラスト比のチェックができるツールとして以前から知られていましたが、現在は、それ以外にもアクセシビリティに関する様々なチェックができるようになっています。 この記事では、Stark で可能なウェブアクセシビリティ検証について、Chrome 拡張機能を例に、無料プランで使える機能をご紹介します。 Chrome 拡張機能で Stark を開いたところ。 機能一覧 (Contrast、Typography、Alt-Text、Touch Targets、F
新しく公開されるWebサイトに、動きのあるものが増えてきました。このような目を引くデザインは、視覚的な効果はありそうですが、困るユーザーもおられるようです。より良いデザインにする方法を考えます。 動きのあるWebサイトとは ここで取り上げる「動きのあるWebサイト」には、たとえば次のようなものがあります。 Webサイトのトップページなどで、ずっと動き続ける画像がある Webサイトの背景が動画になっていて、それを停止する手段がない。スクロールしないとコンテンツが表示されない Webサイトのトップページなどで、主要なコンテンツへのリンクが画像になっていて、見ていると画像が次々と入れ替わる(いわゆるカルーセル) 電光掲示板のように、文字がずっと流れ続ける 以下、それぞれの具体例をご説明します。具体例のサンプルページは動くWebデザインアイデア帳へリンクさせていただいています。 1. Webサイト
2024年4月1日に民間企業にも義務化される「合理的配慮」とアクセシビリティの関係を障害者差別解消法から解説します | DevelopersIO
この表の、事業者の合理的配慮の提供の部分で、現時点では「対応に努めること」とされていますが、2024年4月1日から事業者に対しても義務化されることが決まっています。 なお、東京都障害者差別解消条例では、都内で事業を行う民間事業者における「合理的配慮の提供」は、2018年から義務になっています。 また、注意が必要な点として、民間事業者において近い将来義務化されることが決まっているのは「合理的配慮の提供」であって「環境の整備」ではありません。障害者差別解消法における「環境の整備」は、引き続き努力義務のままです。「法改正でWebサイトのアクセシビリティが義務化！」という文言が見受けられますが、これは正確ではない表現となります。 B2Bの受託開発において合理的配慮の提供義務化が与える影響 ここで、企業の業務システムとして利用されるアプリケーションを受託開発する立場として、合理的配慮の義務化がどのよ
あなたが今！やるべきことがわかる「LIFULLアクセシビリティガイドライン」を公開しました - LIFULL Creators Blog
こんにちは、フロントエンドエンジニアの嶌田です。 アクセシビリティは今まで以上に大きな関心を寄せられるトピックになってきたように思います。個人で関心がある人、企業のなかで周りを巻き込み推進しようとしている人、すでに組織全体での取組みに変わりつつある企業など、状況は様々だと思います。弊社はというと、内側からの推進活動は広がりを見せつつも、まだ組織一丸となった取組みには至っていない、といったところです。 そんな状況の私たちですが、社外のアクセシビリティを推進する同志たちに、ほんの少しでも力を分け与えられたらと思い、このたび「LIFULLアクセシビリティガイドライン」を公開しました。取組み状況が様々ある中でどのように活かしていけるか、まずは一度ご覧いただければ幸いです！ lifull.github.io アクセシビリティとは？ アクセシビリティとは、高齢者や障害者を含むできるだけ多くの人々に対し
Webアクセシビリティを知りたいときは参考にしたいサイト
こちらの記事はWebアクセシビリティについて知りたい方やWebサイトの品質とはなにか、Webサイト上でバリアフリーを実現したいという方におすすめしたいWebサイトを紹介します。
アクセシビリティ Advent Calendar 2022、ありがとうございました！ この記事はアクセシビリティ Advent Calendar 2022の最終日の記事です。 「アクセシビリティ Advent Calendar」は、「アクセシビリティに関する内容であれば、ガチネタでもポエムでも構いません。ご自身のBlogで無くとも、TwitterやFacebookでつぶやいてリンクするのも大歓迎」というテーマで募集していて、9年もの歴史を持っています。 Webに限定したもの、限定しないものも含め、過去に沢山のカレンダーがあります。 アクセシビリティ Advent Calendar 2021 Webアクセシビリティ Advent Calendar 2020 アクセシビリティ Advent Calendar 2020 Webアクセシビリティ Advent Calendar 2019 アクセシビ
アクセシビリティ Advent Calendar 2021、ありがとうございました！ この記事はアクセシビリティ Advent Calendar 2021の最終日の記事です。 今までは、2013年開始！という歴史と伝統ある Webアクセシビリティ Advent Calendarと、2016年に開始され、休憩を挟んで以降は僕が作成させていただいているWebじゃないアクセシビリティ Advent Calendar 2018、Webも含むアクセシビリティ Advent Calendar 2019という、大きくは2本立ての時代がありました。 2021年の今年は、毎年「Webアクセシビリティ Advent Calendar」を作成されている木達さんから、「今年はWebアクセシビリティのカレンダーを作るつもりはないので、あとはよろしく！」とご指名をいただきました。 昨年の集まり具合を踏まえ、今年は A
[Study] Is Web Accessibility Key to Driving Organic Traffic?
en EnglishEspañolDeutschFrançaisItalianoPortuguês (Brasil)Русский中文日本語 [Study] Is Web Accessibility Key to Driving Organic Traffic?January 25, 2023Many marketers operate on the assumption that web accessibility increases SEO. In collaboration with AccessibilityChecker.org and BuiltWith, we set out to prove the claim by analyzing over 800 websites. The study suggests that digital accessibility is p
![[Study] Is Web Accessibility Key to Driving Organic Traffic?](https://cdn-ak-scissors.b.st-hatena.com/image/square/6d47007c8b30c02215f4163ad5a36433253b3fdf/height=288;version=1;width=512/https%3A%2F%2Fstorage.googleapis.com%2Fnewsroom-prod-static-storage%2Foriginal_images%2Fweb-accessibility-study.png%3FX-Goog-Algorithm%3DGOOG4-RSA-SHA256%26X-Goog-Credential%3Dstorage%2540newsroom-prod-tf.iam.gserviceaccount.com%252F20230507%252Fauto%252Fstorage%252Fgoog4_request%26X-Goog-Date%3D20230507T005804Z%26X-Goog-Expires%3D86400%26X-Goog-SignedHeaders%3Dhost%26X-Goog-Signature%3D2e089f10efdde90233ad46ee16b5bc0164f237789fcfb3e684df46ae1edc4348a8a5e1c9f58a46cada09f6ba0cdea2c9bfc601e857f2856380b2e4961be31cf0f37b3045bafb7106688fc8f440a9c96d43e24f3135707da1a0a860bd82a5f5c37d18b3244e52d2a9c32c38f0588f4ff3925a7ac8bdf9b6746cb33caab29bf722327c8c303851b2a062be36c901e336aef120ae9201bd576fa6dd3bc6e8de15fe2ab3641dc83ff9d065a754c07639809e823189997031c38bde5c381174120a2880147a9f37a51656cfba4c5a869845b18bce66d55a874acaf89302db256ccf7b4df080858da05eb7d5a31aff916389e32cf3c821641283eda95a835fcfae2bb5)
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブアクセシビリティを無料で学べる資料まとめ（10年分）｜magi1125
Webアクセシビリティことはじめ【おすすめ資料5選】｜akane
まだ日本ではWebアクセシビリティが義務化されません（2024年4月から6月の時点では）
公的機関のWebサイトにアクセシビリティオーバーレイは不要
Web アクセシビリティの検証ツール acot を作ってる - wadackel.me
ウェブアクセシビリティ検証ツール「Stark」 | Accessible & Usable
Webサイトの動き続ける画像や動画、カルーセルのデザインをよりよくする | DevelopersIO
アクセシビリティAdvent Calendar 2022のふりかえり | DevelopersIO
2021年のクラスメソッドでのアクセシビリティ活動のふりかえり | DevelopersIO