タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
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はウェブエンジニアにとっては一般的に活用されるものになってきていますが、ボリュームの多さや内容の複雑さから、エンジニアと比べるとデザイナーに対しての普及は途上中という現状があります。 一方でアクセシビリティ対応はエンジニアだけの力で取り組むことは難しく、取り組みのためにはデザイナーの力が必須です。デザイナーがアクセシビリティに取り組むことによってユーザーをより理解できるようになる他、特に視覚表現に
はじめに プロダクト UI / UX 開発における品質向上において、様々な組織が検討を重ねていると思います。 デザインレビューをどのように実施するのか WCAG 2.2 に準拠したアクセシビリティ改善 上記の課題を解決すべく、アクセシビリティ改善をふまえたデザインレビュー自動化プロセスを検証してみました。 直面した課題 課題① : コンパクトになっていったデザインレビューの文化 これまでのデザインレビューは、まとまった機能を開発する際に、PdM とエンジニア、そしてデザイナーが同期的に Figma を確認をするプロセスをとっていました。 また、開発プロセスに AI ツールが組み込まれたことで、エンジニアが UI を作り、デザイナーがレビューするというケースも増えています。 上記の背景がある中で、加えて事業スピードが加速していることもあり、担当者間のみのデザインレビューを行うことが増えていま
はじめに WCAG 2.xのコントラスト比は、何を測っているのか WCAG 2.x におけるコントラスト比 コントラスト比の計算のしくみ WCAG 2.xの前提条件 なぜ「実感とズレる」ケースが増えてきたのか WCAG 2.xが想定していたUIの世界 現代UIで崩れ始めた前提 日本語UI 数値だけでは説明できない「読みにくさ」 APCAという新しいアプローチ APCAとは何か WCAG 2.xとの決定的な違い Lc（Lightness Contrast）という尺度 APCAが解決しようとしていること 補足: ダークモードとコントラストの考え方 WCAG 2.x と APCA は対立するものではない よくある誤解 現実的な使い分け APCA基準で実際にチェックするには？ ブラウザ拡張でのチェック デザイン段階でのチェック では今、どう考えればいい？ 終わり 参考 はじめに enechainプ
あるいは必要十分条件について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の達成基準の違反となる：
ウェブアクセシビリティを実践する際、基準となるのがWCAG（Web Content Accessibility Guidelines、ウェブコンテンツアクセシビリティガイドライン）です。しかし、WCAGの文章は難しい！ なので、簡単な言葉に読み替えながら理解しましょう！
目次 はじめに 失敗に気づいたら 予防線 凡例 目次 レベルA 1. 知覚可能（A） 1.1 テキストによる代替（A） 1.1.1 非テキストコンテンツ 1.2 時間依存メディア（A） 1.3 適応可能（A） 1.3.1 情報及び関係性 1.3.2 意味のある順序 1.3.3 感覚的な特徴 1.4 判別可能（A） 1.4.1 色の使用 1.4.2 音声の制御 2. 操作可能（A） 2.1 キーボード操作可能（A） 2.1.1 キーボード 2.1.2 キーボードトラップなし 2.1.4 文字キーのショートカット 2.2 十分な時間（A） 2.2.1 タイミング調整可能 2.2.2 一時停止、停止、非表示 2.3 発作と身体的反応（A） 2.3.1 3 回の閃光、又は閾値以下 2.4 ナビゲーション可能（A） 2.4.1 ブロックスキップ 2.4.2 ページタイトル 2.4.3 フォーカス順序
Imagine you visit a website and you want to browse it for some content. You want to buy something; or maybe book a flight somewhere. And as you move your cursor onto the page, it suddenly disappears. Your hand may be still on the mouse, and you’re moving the mouse across the screen and across the page; but you can’t see where it is. You may or may not be hovering over a link or a button or any oth
「既存プロダクトのWebアクセシビリティ改善ことはじめ」は、既存プロダクトのアクセシビリティー改善の具体的な取り組みの進め方について、freee株式会社が発見を紹介するイベントです。伊原氏と中根氏は、「freeeアクセシビリティー・ガイドライン」と「アクセシビリティー・チェックリスト」について発表しました。全2回。後半は、中根氏が、ガイドラインとチェックリストについて話しました。前半はこちら 2020年4月に一般公開した「freeeアクセシビリティ・ガイドライン」中根雅文氏：今日一番参考にしていただけるのではないかなと思うところは、この後のデモの部分だと思います。ということで、ここも短めにいこうと思います。 今ちょっと伊原さんから話してもらいましたが、実際にチェックを進めていく時とか、あるいはその改善に取り組んでいった時に、具体的に何をやればいいのかは「アクセシビリティこれまでずっとやって
富本セールス＆マーケティンググループ/ディレクター（ビジネス・アーキテクツ）地元・愛知の印刷会社や広告会社にてディレクター・フロントエンドエンジニアとしてWeb制作に携わる。2014年頃、フロントエンドエンジニアとしてBAに入社。現在、自社コーポレートサイトやオウンドメディアのマーケティングに携わっている。また、長期にわたりウェブアクセシビリティ基盤委員会（WAIC）のWG4への参加も。好きなキャラクターはリラックマ。 WCAGとは、アクセシビリティ対応の指標となるガイドライン WCAGの正式名称は「Web Content Accessibility Guidelines」です。アクセシビリティ確保の指標となる世界標準の英語で書かれたガイドラインです。 障がいの有無や母国語などに関係なく、様々な環境・状況の利用者にとって、より使いやすいWebコンテンツを提供するための指針となります。また、
※本ページは、アフィリエイト広告を利用しています。 Webのアクセシビリティについて一度しっかり学びたかった、アクセシブルな実装ってどうやるの、最新の動向（WCAG 3.0やAIによる影響など）を知りたい、そんな人たちにお勧めしたい解説書を紹介します。 本書は先週発売されたばかりの最新刊、書店にも並んでいると思うでの、ぜひ手に取って確認してみてください。 著者は加藤 善規氏、見たことがある名前だ！ と思った人は正解です。HTMLとCSSのリファレンス本の定番『Web制作必携 HTML&CSS全事典』（紹介記事）の著者で、本書ではHTMLとCSSのしっかりした知識を基盤にしたアクセシビリティについて詳しくていねいに解説されいます。 「いちばんやさしい」とあり、確かにやさしく教えてくれる感じですが、はっきり言って本書の中身は非常に濃いです。この「いちばんやさしい」シリーズは私の知る限り初心者を
株式会社アジケでUIデザイナーをしているやまもとです。 唐突ですが皆さんオレンジ色についてどのようなイメージをお持ちですか？ オレンジは様々な企業のコーポレートカラーやアクセントカラーとしても使用されていますね オレンジをコーポレートカラーとしている会社私が担当しているPJにもオレンジ色のボタンパーツが使用されています。 担当しているPJで使用されているオレンジボタン（ダミー）現在アクセシビリティ強化に伴い、デザインシステムガイドラインアップデートを行っており、コントラスト比の見直しを行うことになりました。 見直しにあたり、このオレンジ色のコントラスト比に大いに悩まされることになります。 今回はアクセシビリティコントラスト比と戦った記録を書いていきたいと思います。 課題使いやすく取り入れやすいオレンジには、1点の大きな課題があります。 それは背景オレンジ、テキスト白のデザインにおいてコント
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.
2023年7月20日 WCAG 2.2の勧告案が発行、8月にも勧告へ アクセシビリティ・エンジニア 中村（直） 筆者の個人的な予測としては、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でも
こんにちは。はじめまして。note以外（Creators' Note）をご覧いただいたことのある方々には、ご無沙汰しております。デザイナーの守谷（@emim）です。 普段noteにはエンタメの感想しかアウトプットしていないので……おっと、わたしのアカウントは掘らないでくださいね😌 この投稿は、アクセシビリティ Advent Calendar 2022とChatwork Advent Calendar 2022の2つのアドベントカレンダーにクロスポストしている記事です。ぜひ別の記事も御覧ください。 今回は首題の件についてご紹介していきます。 Chatworkのデザイナーの役割Chatworkには、2分野のデザイナーがいます（noteでもデザイン関連マガジンが2つ存在しています）。 Chatwork BX（ブランドエクスペリエンス） Chatwork プロダクトデザイン 端的には、ウェブサイ
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
公開日 : 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 策定の道のりをウォッチし
WCAG is evolving. Since 1999, the Web Content Accessibility Guidelines have defined accessibility in binary terms: either a success criterion is met or not. But real user experience is rarely that simple. WCAG 3.0 rethinks the model — prioritizing usability over compliance and shifting the focus toward the quality of access rather than the mere presence of features. Could this be the start of a ne
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 11 February 2026. Developed by Accessibility Guidelines Working Group (AG WG) Participants (Co-Chairs: Alastair Campbell, Rachael
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追記）」を追記した。 2024-05-29これは、2018年版のWCAG 2.1をもとにしていた。2023年版のWCAG 2.1では修正されている箇所がある（が、このメモは特に加筆等はせず、当時のママとしている） コントラスト比の定義（WCAG2による） WCAG 2.1達成基準1.4.3コントラスト比（最低限）では、コントラスト比4.5:1という数値が提示されている。コントラスト比の定義は、以下のとおり： ここで、は明るい方
Accessible color palette generatorはWCAG（Web Content Accessibility Guidelines）に準拠した色の組み合わせを簡単に作成できるWebアプリです。 非デザイナーでもインフォグラフィックを作成出来るVenngageが提供しているサービスで、任意のカラーコードを入力すると、そのカラーと相性の良い色で且つアクセシビリティに配慮した色を提案してくれる、というもの。 配慮された色は、具体的にはコントラスト比4.5:1に基づくWCAG2.1のAAに準拠したものとなっています。提案されたパレットはプレーンテキストでDL可能です。無料、ユーザー登録不要で利用できます。 Accessible color palette generator
【注意】 この文書は、W3C エディターズドラフト Techniques for WCAG 2.1 の 2019 年 10 月 1 日版を、ウェブアクセシビリティ基盤委員会 (WAIC) が翻訳して公開しているものです。この文書の正式版は、W3C のサイトにある英語版です。正確な内容については、W3C が公開している原文 (英語) をご確認ください。この翻訳文書はあくまで参考情報であり、翻訳上の誤りが含まれていることがあります。翻訳上の誤りを見つけられた場合は、翻訳に関するお問い合わせ (Google フォーム)からご連絡ください。 この翻訳文書の利用条件については、WAICが提供する翻訳文書のライセンスをご覧ください。 【重要】 原文の Techniques for WCAG 2.1 自体、ワーキンググループによって今後も継続的に修正されていくものと思われます。この文書の内容は古くなって
Free AI-powered WCAG color contrast checker. Test contrast ratios, meet AA and AAA compliance, and get AI suggestions for accessible color combinations. For designers and developers.
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
はじめに テキストの読みやすさを大きく左右する要素の1つに、テキストと背景のコントラストがあります。これまで私は、何かしらのツールを用いてコントラスト比を確認することはあれど、その具体的な計算方法については理解していませんでした。 そこで、今回はWeb Content Accessibility Guidelines (WCAG) 2.2を参考に、コントラスト比の計算方法について学んだので、ご紹介します。 ウェブアクセシビリティにおけるコントラストとは 一般的に「コントラスト」という言葉には「対比」や「対照」という意味があります。中でもウェブアクセシビリティという文脈において、コントラストという言葉は、テキストとその背景のコントラスト（対比）を指すことがあります。 Many different visual impairments can substantially impact cont
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く