ウェブコンテンツアクセシビリティガイドライン（WCAG）は何が難しいのか、あるいは難しさに立ち向かう方法 - 水底の血
LINEヤフーにおけるこれからのアクセシビリティというスライドで「WCAGはハードルが高い」という文言を見かけました。どうしてハードルが高い、言いかえるならば難しいとされるのか、その難しさはどこから来るのかをちょっと深掘りしてみようと思います。 WCAGという言葉について、改めて見ておきましょう。WCAGはもっぱら、Web Content Accessibility Guidelines（ウェブコンテンツアクセシビリティガイドライン）というW3Cの発行する技術文書を指すわけですけども、現時点でよく参照されるのがウェブアクセシビリティ基盤委員会（WAIC）が公開している日本語訳のWCAG 2.1でしょう。ちなみに本家のW3Cは、WAICが現時点で公開しているWCAG 2.1の改訂版を今年9月に公開し、さらにバージョンの進んだWCAG 2.2を先月に発行したばかりだったりします。 WCAG 2
はじめに サイオステクノロジーの伊藤と申します。今回から数回にわたりデジタルコンテンツのコントラストというテーマで、WCAG2のコントラスト基準とWCAG3で検討が進められている新しい基準APCAについて解説していきます。 対象読者としては、ウェブサイトやアプリケーションなどデジタルコンテンツの制作に携わるデザイナーやエンジニア、アクセシビリティに関心のある方を想定しています。 現在勧告されているWCAG2の達成基準では、テキストや視覚要素のコントラストが一定の基準を満たす必要があります。たとえば、レベルAAでは文字色と背景色のコントラスト比が4.5:1以上であることが要求されます。 図1 テキストとの視認性を確保するために、背景色とのコントラスト比を考える必要がある しかし、人間の目は明るい色と暗い色のコントラストを認識する際に、明るい色の相対輝度が高いほど視認性が高くなるという特性があ
デジタルコンテンツにおけるアクセシビリティ、特にコントラストの基準について解説する連載の第2回目です。前回の記事では、現在のWCAG2のコントラスト基準と課題について解説しました。今回はWCAG3で採用が検討されている新しいコントラスト基準、APCAについて解説します。 APCAとは WCAG 2.0でコントラストの基準が策定されて以降、ディスプレイやWebコンテンツ、CSSの機能、および視覚科学の進歩など様々な状況が変化しました。WCAGの基準についても、コントラストや視認性についてより知覚を正しくモデル化するガイドラインが求められるようになりました。 APCA（Advanced Perceptual Contrast Algorithm）はWCAG3にて現行のコントラストに代わる基準として開発・検討されている、新しいコントラスト基準です。前回紹介したようなWCAG2の基準の課題に応える
近年、日本国内でのアクセシビリティの取り組みは官民の組織区分にかかわらず活発なものとなっています。特に昨今ではデジタル庁がアクセシビリティの確保・維持・向上に取り組んでいる事例を耳にしてアクセシビリティにさらなる関心を寄せている人は多いのではないでしょうか。 そんなアクセシビリティへの理解を深める上で欠かせないのがウェブコンテンツのためのアクセシビリティガイドラインである「WCAG」です。WCAGはウェブエンジニアにとっては一般的に活用されるものになってきていますが、ボリュームの多さや内容の複雑さから、エンジニアと比べるとデザイナーに対しての普及は途上中という現状があります。 一方でアクセシビリティ対応はエンジニアだけの力で取り組むことは難しく、取り組みのためにはデザイナーの力が必須です。デザイナーがアクセシビリティに取り組むことによってユーザーをより理解できるようになる他、特に視覚表現に
あるいは必要十分条件について1。 Nu Html Checkerの場合 Nu Html Checkerは、HTMLをチェックするツールである。Nu Html Checkerで特定の（種類の）エラーを0にすることは、「構文解析」のWCAGの達成基準を満たすための必要十分条件となる。 達成基準 4.1.1 構文解析 (レベル A): マークアップ言語を用いて実装されているコンテンツにおいては、要素には完全な開始タグ及び終了タグがあり、要素は仕様に準じて入れ子になっていて、要素には重複した属性がなく、どの ID も一意的である。ただし、仕様で認められているものを除く。 筆者による上記引用のハイライト部分“どのIDも一意的であること”について見てみる。たとえば以下のHTML断片のように、1つのページに同じid属性値が2回出現することはHTMLのエラーであり、かつ、WCAGの達成基準の違反となる：
W3C Accessibility Guidelines (WCAG) 3.0の初期公開作業草案が発行されました | アクセシビリティBlog | ミツエーリンクス
2021年1月22日 W3C Accessibility Guidelines (WCAG) 3.0の初期公開作業草案が発行されました アクセシビリティ・エンジニア 中村（直） Web Content Accessibility Guidelines (WCAG) 2.0とそのマイナーバージョンの後続として開発されている、W3C Accessibility Guidelines (WCAG) 3.0がFirst Public Working Draft（初期公開作業草案）として発行されました。 元の言葉はWeb ContentからW3Cに変更されているものの、略称は同じWCAGになっているのは、WCAGという語がWebアクセシビリティを取り巻く世界ではよく知られている証左と捉えることもできそうです。 そんなWCAG 3.0ですが、Abstract（概要）には以下の1文が記載されています。
失敗例で学ぶアクセシビリティ（WCAG 2.1）
はじめに 突然アクセシビリティ筋を鍛えたくなったのが先月の話です． WCAG 2.1の日本語訳を全部読めばムキムキになれるのではと思い，先頭から読み進めて1ヶ月かかり読了しました． 中でも面白かったのは「失敗例」という項目です．ここには良くないWebページの実装例がたくさん書かれており，「あ〜初心者ならやりがちだよね〜」という例から「え…？職場のコードでやらかしてるんだが……？」みたいな例まであり，マジで死にたくなりました． 私の学習メモとして，またはアクセシビリティの入門資料として，あるいは過去の過ちへの禊みそぎとして，やらかしそうな失敗例を， WCAG 2.1のすべての達成基準に対して 思いつく限りまとめようと思います． レベル（A，AA，AAA）の低い順に記載しますので，下に行くほど発展的な内容になります． 失敗に気づいたら 「WCAG2.1 達成基準の番号 十分な達成方法」でググり
ウェブアクセシビリティを実践する際、基準となるのがWCAG（Web Content Accessibility Guidelines、ウェブコンテンツアクセシビリティガイドライン）です。しかし、WCAGの文章は難しい！ なので、簡単な言葉に読み替えながら理解しましょう！
A guide to designing accessible, WCAG-conformant focus indicators
A guide to designing accessible, WCAG-conformant focus indicators Published on 13 Aug, 2021 | Last updated on 27 Aug, 2023 | Takes approximately 24 min to read This post is a modified, text-only excerpt from my Practical Accessibility video course. I wanted to share this guide to designing accessible focus indicators because focus styles are a recurring discussion I have with designers I wor
【注意】 この文書は、W3C エディターズドラフト Understanding WCAG 2.1 の 2020 年 12 月 2 日版を、ウェブアクセシビリティ基盤委員会 (WAIC) が翻訳して公開しているものです。この文書の正式版は、W3C のサイトにある英語版です。正確な内容については、W3C が公開している原文 (英語) をご確認ください。この翻訳文書はあくまで参考情報であり、翻訳上の誤りが含まれていることがあります。翻訳上の誤りを見つけられた場合は、翻訳に関するお問い合わせ (Google フォーム)からご連絡ください。 この翻訳文書の利用条件については、WAICが提供する翻訳文書のライセンスをご覧ください。 【重要】 原文の Understanding WCAG 2.1 自体、ワーキンググループによって今後も継続的に修正されていくものと思われます。この文書の内容は古くなっている
「既存プロダクトのWebアクセシビリティ改善ことはじめ」は、既存プロダクトのアクセシビリティー改善の具体的な取り組みの進め方について、freee株式会社が発見を紹介するイベントです。伊原氏と中根氏は、「freeeアクセシビリティー・ガイドライン」と「アクセシビリティー・チェックリスト」について発表しました。全2回。後半は、中根氏が、ガイドラインとチェックリストについて話しました。前半はこちら 2020年4月に一般公開した「freeeアクセシビリティ・ガイドライン」 中根雅文氏：今日一番参考にしていただけるのではないかなと思うところは、この後のデモの部分だと思います。ということで、ここも短めにいこうと思います。 今ちょっと伊原さんから話してもらいましたが、実際にチェックを進めていく時とか、あるいはその改善に取り組んでいった時に、具体的に何をやればいいのかは「アクセシビリティこれまでずっとやっ
富本ディレクター／フロントエンドエンジニア（ビジネス・アーキテクツ）地元・愛知の印刷会社や広告会社にてWeb制作に携わる。2014年頃、フロントエンドエンジニアとしてBAに入社。現在、ディレクターとして開発・運用の進行管理やWebサイトのガイドライン作成やコンポーネントの設計・作成を担当しています。好きなキャラクターはリラックマ。イタリアとスイスに行きたい。 2021年5月に障害者差別解消法が改正され、2024年4月に施行されることを知っていますか？ 改正法施行後は、民間企業に対しても「合理的配慮の提供」が義務化されます。また、その合理的配慮を的確に行うための「環境の整備」が努力義務となっています。ウェブサイトにおいては、この環境の整備がアクセシビリティを確保することとされています。そのため多くの企業でもさまざまな取り組みがすすめられています。 本記事では、アクセシビリティ確保の指標となる
達成方法に関する重要な情報この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。 この文書は、単語を視覚的にフォーマットするために、単語の中でスペース、タブ文字、改行文字又はキャリッジリターンのような空白文字を用いると、それらを意味のある並びとして適切に提示するのが困難になるという失敗例について解説する。文字間を制御するために空白文字を挿入すると、単語の解釈を変えてしまうかもしれないし、それが一つの単語であるとプログラムで解釈でき
株式会社アジケでUIデザイナーをしているやまもとです。 唐突ですが皆さんオレンジ色についてどのようなイメージをお持ちですか？ オレンジは様々な企業のコーポレートカラーやアクセントカラーとしても使用されていますね オレンジをコーポレートカラーとしている会社私が担当しているPJにもオレンジ色のボタンパーツが使用されています。 担当しているPJで使用されているオレンジボタン（ダミー）現在アクセシビリティ強化に伴い、デザインシステムガイドラインアップデートを行っており、コントラスト比の見直しを行うことになりました。 見直しにあたり、このオレンジ色のコントラスト比に大いに悩まされることになります。 今回はアクセシビリティコントラスト比と戦った記録を書いていきたいと思います。 課題使いやすく取り入れやすいオレンジには、1点の大きな課題があります。 それは背景オレンジ、テキスト白のデザインにおいてコント
Colour Contrast Analyser (WCAG 2.1 対応) の UI の日本語化 | Accessible & Usable
公開日 : 2019年11月10日 カテゴリー : アクセシビリティ The Paciello Group が公開している配色コントラストチェックツール Colour Contrast Analyser (以下、CCA) の UI が、このほど日本語化されました。@motchie さんによる実装です。 UI が日本語表示された Colour Contrast Analyser (V1.2.0) WCAG 2.1 対応版の CCA がリリースされた直後から、日本語ローカライズの issue (インフォアクシアの植木さんによる) が立っていたので楽しみにしていましたが、私自身 UI 改善でコントリビュートさせていただいた CCA がこのように日本語化されて、とても嬉しいです。 ウェブアクセシビリティ委員会 (WAIC) が翻訳公開している WCAG 2.1 日本語版 の用語と一貫性がありますの
2019年09月26日 更新 PDF版 WCAG 2.1 (レベルA & AA) 早見表です。読み上げのチェックはまだしていません（近いうちにやります）。 PDF版 WCAG 2.1 (レベルA & AA) 早見表 (174KB) 印刷版では、おもて面が日本語、裏面がグレースケールの英語としています。PDF版ではおまけでカラーの英語版を一緒にしています。 権利等 どなたでもご利用いただけます。 改変いただいても構いませんが、改変なさった時には、「制作 時代工房」を取り去ってもらった方がよいでしょう。 再配布も自由です。弊社への許諾申請も不要です。 この作品（有限会社 時代工房）によるPDF版 JIS X 8341-3:2016, WCAG 2.0早見表／逆引き表は著作権法上の制約が知られている限り存在していません。 問い合わせ・間違いの指摘 有限会社時代工房までご連絡ください。 Amazo
こんにちは。はじめまして。note以外（Creators' Note）をご覧いただいたことのある方々には、ご無沙汰しております。デザイナーの守谷（@emim）です。 普段noteにはエンタメの感想しかアウトプットしていないので……おっと、わたしのアカウントは掘らないでくださいね😌 この投稿は、アクセシビリティ Advent Calendar 2022とChatwork Advent Calendar 2022の2つのアドベントカレンダーにクロスポストしている記事です。ぜひ別の記事も御覧ください。 今回は首題の件についてご紹介していきます。 Chatworkのデザイナーの役割Chatworkには、2分野のデザイナーがいます（noteでもデザイン関連マガジンが2つ存在しています）。 Chatwork BX（ブランドエクスペリエンス） Chatwork プロダクトデザイン 端的には、ウェブサイ
公開日 : 2023年10月6日 (2024年3月2日 更新) カテゴリー : アクセシビリティ W3C の WCAG (Web Content Accessibility Guidelines) の新バージョンである WCAG 2.2 が、2023年10月5日に正式な Recommendation (勧告) になりました。 Web Content Accessibility Guidelines (WCAG) 2.2 - W3C Recommendation 05 October 2023 またこれに併せて、W3C の WAI (Web Accessibility Initiative) より以下の関連文書が公開されています。 WCAG 2.2 Understanding Docs WCAG 2.2 Techniques これまでも当サイトでは WCAG 2.2 策定の道のりをウォッチし
Simulate Color BlindnessTest your colors against certain deficiencies.
We use essential cookies to make Venngage work. By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.
WCAG に準拠した色の組み合わせを簡単に作成できるWebアプリ・「Accessible color palette generator」
Accessible color palette generatorはWCAG（Web Content Accessibility Guidelines）に準拠した色の組み合わせを簡単に作成できるWebアプリです。 非デザイナーでもインフォグラフィックを作成出来るVenngageが提供しているサービスで、任意のカラーコードを入力すると、そのカラーと相性の良い色で且つアクセシビリティに配慮した色を提案してくれる、というもの。 配慮された色は、具体的にはコントラスト比4.5:1に基づくWCAG2.1のAAに準拠したものとなっています。提案されたパレットはプレーンテキストでDL可能です。無料、ユーザー登録不要で利用できます。 Accessible color palette generator
筆者の個人的な予測としては、WCAG 2.2の策定にはまだまだ時間がかかるのではと思っていましたが、2023年7月20日付けでWCAG 2.2の勧告案（Proposed Recommendation）が発行されました（W3Cのアナウンス）。 前回の勧告候補（前回の記事WCAG 2.2の勧告候補が更新（2023年5月版）もあわせて参照してください）からの変更点については、編集上の変更にとどまっています。不安定な機能（at risk）とされていたSC (Success Criteria) 2.4.13 Focus Appearanceと2.5.8 Target Size (Minimum)については残留する格好となりました。 現時点でのWhat's New in WCAG 2.2でも言及されているように、W3Cの文書プロセス上問題がなければ8月下旬にはW3C勧告（Recommendation）
WCAG 3.0 (W3C Working Draft 2023年7月24日版) | Accessible & Usable
公開日 : 2023年8月21日 カテゴリー : アクセシビリティ W3C にて策定作業が進んでいる WCAG 3.0 (W3C Accessibility Guidelines) の Working Draft が、2023年7月24日付で更新されました。先のドラフトが2021年12月7日付なので、1年7か月ぶりの更新になります。 ドラフト原文 : W3C Accessibility Guidelines (WCAG) 3.0 - W3C Working Draft 24 July 2023 前回ご紹介した2021年12月7日版から大きく構成などが変わっており、WCAG 3.0 はまだまだ探索的な段階であると言えます。ですのでこの記事では、以前のドラフトからの差分を追うことはせずに、今回のドラフトをもとに改めて WCAG 3.0 の大まかなアウトラインを捉え直すことを主眼に、まとめてみた
Understanding documents provide detailed explanations for Web Content Accessibility Guidelines (WCAG) guidelines and success criteria. They are informative, not part of the "normative" WCAG standard. For information, see About WCAG Understanding Documents. Date: Updated 20 June 2023. Developed by Accessibility Guidelines Working Group (AG WG) Participants (Co-Chairs: Alastair Campbell, Charles Ada
2018年6月5日付けでWCAG (Web Content Accessibility Guidelines) の最新バージョンである、「Web Content Accessibility Guidelines (WCAG) 2.1」がW3Cより正式に勧告されました。2008年12月に「WCAG 2.0」が勧告されて以来、約9年半ぶりにアップデートされたことになります。 今回の改定によって、2008年の「WCAG 2.0」勧告時に十分にカバーできず、対応が不十分とされていたスマートフォンやタブレット端末をはじめとした「モバイル対応」さらに「弱視（ロービジョン）」や「認知・学習障害」への対応強化を目的に、新たに「17」の達成基準が追加されています。 なお、各適合レベルごとの達成基準数の変動（WCAG 2.0 → WCAG 2.1）は下記の通りです。 適合レベル A： 25 → 30（+5）
W3Cからアナウンスされたように、WCAG 2.2が2023年10月5日付けで勧告（Recommendation）となりました。 WCAG 2.1の最初の勧告が2018年ですから、そこから5年が経って達成基準（Success Criterion）が追加されたことになります。 WCAG 2.1の勧告について「最初の」とわざわざ言っているのは、WCAG 2.1が先月に更新されたことによります（W3Cのアナウンス）。 WCAG 2.1の更新の内容はもっぱらエラッタの適用ですが（WCAG 2.1のChange Logも参照）、その中でも達成基準4.1.1について注記が追加されたのが目立った変更点と言えます。 この追記は、端的にはWCAG 2.2では達成基準 4.1.1が削除されているように、達成基準 4.1.1についての評価は別の達成基準で行うようにするという内容です。 さて、WCAG 2.2の話
色のこと、思い出してはわからんってなっているんだよなあ…。 なおAPCAの話はしない。いくつかGitHubのissueを参照してるけれども、@Myndexが書いていることは長ったらしいので基本的に無視している。 あと書き散らしているので、まとまっているようで実はまとまっていない。メモだから仕方ない。 2022-07-23に「 WCAG2までの議論（2022-07-23追記）」を追記した。 コントラスト比の定義（WCAG2による） WCAG 2.1達成基準1.4.3コントラスト比（最低限）では、コントラスト比4.5:1という数値が提示されている。コントラスト比の定義は、以下のとおり： ここで、は明るい方の相対輝度、は暗い方の相対輝度である。 相対輝度の定義は、最も暗い黒を0に、最も明るい白を1に正規化した色空間内の任意の点の相対的な明るさ。である。 ここでsRGB色空間においては、色の相対輝
公開日 : 2020年6月21日 カテゴリー : ユーザビリティ / アクセシビリティ / 情報設計 (IA) WCAG (Web Content Accessibility Guidelines : 原文 / 日本語訳) を読むと、たとえば以下のように「名前」という用語がところどころで出てきます。 達成基準 1.1.1 非テキストコンテンツ 利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている。 (中略) コントロール、入力 非テキストコンテンツが、コントロール又は利用者の入力を受け付けるものであるとき、その目的を説明する名前 (name) を提供している。 達成基準 2.5.3 名前 (name) のラベル ユーザインタフェース コンポーネントがテキスト又は文字画像を含むラベルを持つ場合、視覚的に提示されたテキストが名前 (name)
【注意】 この文書は、W3C エディターズドラフト Techniques for WCAG 2.1 の 2019 年 10 月 1 日版を、ウェブアクセシビリティ基盤委員会 (WAIC) が翻訳して公開しているものです。この文書の正式版は、W3C のサイトにある英語版です。正確な内容については、W3C が公開している原文 (英語) をご確認ください。この翻訳文書はあくまで参考情報であり、翻訳上の誤りが含まれていることがあります。翻訳上の誤りを見つけられた場合は、翻訳に関するお問い合わせ (Google フォーム)からご連絡ください。 この翻訳文書の利用条件については、WAICが提供する翻訳文書のライセンスをご覧ください。 【重要】 原文の Techniques for WCAG 2.1 自体、ワーキンググループによって今後も継続的に修正されていくものと思われます。この文書の内容は古くなって
公開日 : 2019年6月20日 (2020年4月16日 更新) カテゴリー : アクセシビリティ 私も作業協力者として参加しているウェブアクセシビリティ基盤委員会 (WAIC) の翻訳作業部会にて、W3C 勧告「WCAG (Web Content Accessibility Guidelines) 2.1」の日本語訳が行なわれ、このほど公開されました。 Web Content Accessibility Guidelines (WCAG) 2.1 日本語訳 旧バージョン (2.0) に含まれている達成基準はそのままに、新バージョン (2.1) では新たに17の達成基準が追加され、これまで十分にカバーできていなかったとされる領域 (ロービジョン、モバイル、認知/学習障害への配慮) が強化されています。 なお、新たに追加された達成基準 (の日本語訳) は、以下のとおりです。 1.3 適応可能
What’s New in WCAG 2.2
This page lists the new success criteria in WCAG 2.2, with: A brief introduction of what to do and why it’s important Quotes from personas to help you understand some aspects of the success criteria Links to Understanding documents that explain the success criteria in detail and provide more examples Introduction For an introduction to Web Content Accessibility Guidelines (WCAG) and more about ver
Web Accessibility Solution for ADA Compliance & WCAG - accessiBe
Is your website ADA & WCAG compliant? Find out in seconds!Get a free, professional web accessibility audit to learn where you stand Run audit now
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
第1回 デジタルコンテンツの視認性とWCAG2のコントラスト比の課題 | gihyo.jp
第2回 WCAG3のコントラスト基準APCAの考え方と実例 | gihyo.jp
デザイナーのためのWCAGの歩き方｜Goodpatch Blog グッドパッチブログ
WCAG2の「十分な達成方法」について - 水底の血
【ゆるふわWCAG】中学生でもわかるウェブアクセシビリティガイドライン
WCAG 2.1 解説書
『WCAG』から独自のガイドラインを作った理由 必要な視点は「誰のどんな不便につながるか」
アクセシビリティ確保の指標となる文書「WCAG」と企業の「アクセシビリティ方針」を紹介 | BAsixs（ベーシックス）
F32: 達成基準 1.3.2 の失敗例 － 単語内の間隔を制御するために、空白文字を使用している | WCAG 2.0 達成方法集
【WCAG2.1 アクセシビリティ対応】 コントラスト比の罠｜Kotoko Yamamoto
PDF版 WCAG 2.1 (レベルA & AA) 早見表 - 有限会社時代工房
デザイナーが難解なガイドライン（WCAG）を乗り越える方法（提案）｜emim
WCAG 2.2 Recommendation (勧告) | Accessible & Usable
ColorShark – WCAG 2.1 AA and AAA Color Contrast Tool
Accessible Color Palette Generator | WCAG Compliant
WCAG 2.2の勧告案が発行、8月にも勧告へ | アクセシビリティBlog | ミツエーリンクス
Understanding WCAG 2.1 | WAI | W3C
勧告された「WCAG 2.1」において「WCAG 2.0」から新たに追加された達成基準の解説
WCAG 2.2の勧告とWCAG 2.1の更新 | アクセシビリティBlog | ミツエーリンクス
（メモ）WCAG2のコントラスト比4.5:1とその周辺の話 - 水底の血
WCAG に出てくる「名前」とは？ | Accessible & Usable
WCAG 2.1 達成方法集
WCAG 2.1 の日本語訳を公開 | Accessible & Usable