WCAG 2.2の達成基準3.2.4「一貫した識別性」を、デザインとコーディングの両面から解説する記事である。同じ機能のボタンやアイコンには、どのページでも同じ名前と見た目を使うことを求める基準である。
シェアックリップ
シェアされたアックリップです。
そのほかの #WCAG ピックアップ
(引用)アクセシビリティを、デザインの基本に。 本書は、年齢や障害の有無、利用環境にかかわらず、あらゆるユーザーが必要な情報や体験を得られるよう、「アクセシビリティ」をデザインの初期段階から組み込むための考え方と実践を学べるハンドブックです。 日本でもデジタル庁がウェブアクセシビリティの導入を推進し、「誰一人取り残されない、人に優しいデジタル化」が目指されています。アクセシビリティは、一部の人のための特別…
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
イスラエルの障害者平等権規則と規格 IS 5568 AA(WCAG 2.1 AA 準拠)への適合を、ブラウザ上で動く JavaScript により自動的に確かめる方法を解説する記事。代替テキスト・見出し構造・コントラスト・言語と文字方向の確認項目を示す。
スマートフォンなどで押し間違えやすいボタンの大きさを扱った記事である。操作対象は 24×24 CSS px 以上にし、主要な操作では 44×44 CSS px を目安にすると説明する。アイコンの大きさは変えず、押せる範囲に余白を足す方法を示す。
会員登録フォームで自動入力が効くかを1分で確かめる方法を解説する記事。入力欄に autocomplete の値を付けて入力目的を伝える意味を、WCAG 達成基準1.3.5(入力目的の特定)の解説をもとに示す。
AIがアクセシビリティをレビューできる範囲は、ソースコードだけを読むか、実行中のブラウザーやaxe-coreの結果まで受け取れるかによって変わると整理する。WCAG適合と自動テストの合格は同じではないことも説明する。
そのほかの #デザインシステム ピックアップ
AIだけではウェブサイトを完全にアクセシブルにできないと述べ、スキル・ガードレール・設計システム・人の検証と組み合わせることでAIが支援の力になると論じる記事。
Every contrast failure on our site is the same Tailwind feature, and measuring it needs a canvas
クイズアプリのコントラスト監査で全ての失敗が一つの Tailwind 機能に由来することを発見。oklab・oklch 色空間に対応した Canvas ベースの測定方法を紹介し、正確な色値取得の重要性を解説。
カラーユニバーサルデザイン(CUD)と色覚多様性についての大学セミナー報告。色だけに依存しない設計(形、質感、記号で補う)、多様な見え方を理解することで新しい表現可能性が広がることについて、学生とのやり取りを通じて述べられている。
アクセシブルなUIコンポーネントライブラリをオープンソース化した発表。8つのコンポーネントについて、WCAG要件をテーマ別に文書化し、Gherkin形式のテストシナリオと自動テスト実装を含む。
Vaadin Button の Web Component 開発の 9 年以上の歴史をとおして、アクセシビリティに対応するための技術的課題と解決方法を描く。Shadow DOM 設計、フォーカス管理、tooltip の accessible 化など、進化の過程を追う。
デザインシステムがキーボード操作とフォーカス移動を一貫して管理するメカニズムを解説。フォーカストラップ・ARIA・イベントハンドリングの実装と、アプリ側のオーバーライドが破壊する事例を紹介。
そのほかの #認知アクセシビリティ ピックアップ
かんかくかびんってなあに?
身体に触れるモノの感触への過敏を扱うシリーズ図書。衣類や靴など、固さや素材感が苦手になる子どもの視点で説明する。
多様な学習スタイルや認知特性に対応する学びのユニバーサルデザイン(UDL)の理論と実践手法。発達障害を含む全ての子どもが自分に合った方法で学べる教育環境の実現を目指す研修会。
(引用)アクセシビリティを、デザインの基本に。 本書は、年齢や障害の有無、利用環境にかかわらず、あらゆるユーザーが必要な情報や体験を得られるよう、「アクセシビリティ」をデザインの初期段階から組み込むための考え方と実践を学べるハンドブックです。 日本でもデジタル庁がウェブアクセシビリティの導入を推進し、「誰一人取り残されない、人に優しいデジタル化」が目指されています。アクセシビリティは、一部の人のための特別…
会員登録フォームで自動入力が効くかを1分で確かめる方法を解説する記事。入力欄に autocomplete の値を付けて入力目的を伝える意味を、WCAG 達成基準1.3.5(入力目的の特定)の解説をもとに示す。
字幕や画面読み上げへの対応など、学習ニーズの異なる学生がデジタル教材を使えるようにするための方法を紹介する記事。見出しで構造を示す、複数の方法で情報に触れられるようにする、一度に負荷をかけない、学生や教員の声を聞いて改善する、の4点を挙げる。
会員登録フォームの入力欄に autocomplete 属性を付けて、入力の目的を伝える方法を解説する記事。名前・メールアドレス・郵便番号などをブラウザが自動入力できるようにし、WCAG 1.3.5 と認知の困りごとのある人の入力の負担に結びつける。