チャコウェブラジオ

APGを基にチェックボックスの実装を解説。 チェックボックスは 2 状態（true/false）型と 3 状態（true/false/mixed）型の2種類あり、それぞれの具体的な説明と実装方法を紹介します。 参照： Checkbox Pattern | APG | WAI | W3C https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ 「チャコウェブラジオ」は株式会社Cyber Catsが運営するチャコウェブのスタッフが、ウェブアクセシビリティを実践したい制作者やウェブ担当者に...

「WAI-ARIAの実践ガイドAPG」に基づいて、ボタン実装の基礎を解説する後編。 button要素には自動的にbuttonロールが付与されますが、div要素などを使う場合はbuttonロールを設定する必要があります。 アイコンがボタンになっている場合、スクリーンリーダーは読み取れません。 このようなボタンを読み取れるようにするARIA属性があります。 参照： Button Pattern | APG | WAI | W3C 「チャコウェブラジオ」は株式会社Cyber Catsが...

「WAI-ARIAの実践ガイドAPG」に基づいて、ボタン実装の基礎を解説する前編。 通常ボタン・トグルボタン・メニューボタンの3種類と、それぞれに必要なaria属性を紹介。 ボタンとリンクの機能の違いを明確にして使用すること、キーボード操作の基本について、フォーカス移動の操作性について解説します。 参照： Button Pattern | APG | WAI | W3C 「チャコウェブラジオ」は株式会社Cyber Catsが運営するチャコウェブのスタッフが、...

APG（ARIA Authoring Practices Guide）は、WAI-ARIAを使ったアクセシブルなコンポーネント作成のためのガイドです。 今回はAPGについての概要を解説します。 ガイドラインサイトがリニューアルされ、コード例やデモが豊富に掲載されています。 英語サイトですが、とても使いやすくなっているのでウェブアクセシビリティを実装する際にはおすすめです。 参考： ARIA Authoring Practices Guide | APG | WAI | W3C 「チャコウェブラ...

WAI-ARIAとARIAは同じ？それとも別物？ ARIA in HTMLとは？ 関連文書がいろいろあるWAI-ARIAについての全体像を解説。 どれを参照すればいいの？と悩む場合に聞いてみてください。 参照： ARIA の達成方法 「チャコウェブラジオ」は株式会社Cyber Catsが運営するチャコウェブのスタッフが、ウェブアクセシビリティを実践したい制作者やウェブ担当者に向けて、ゆっくりじっくり解説していくポッドキャストです。 ご感想やチャコウェ...

WAI-ARIAのステート（状態）とプロパティ（特性）について解説します。 ステートは要素の現在の状態、プロパティは特性を示し、ロールと組み合わせることで支援技術に正確に伝わります。 まずはセマンティックHTMLを優先することが前提となります。 参照： ARIA5: ユーザインターフェース コンポーネントの状態 (state) を明示するために、WAI-ARIA ステート及びプロパティ属性を使用する | WCAG 2.0 達成方法集 「チャコウェブラ...

WAI-ARIA（ウェイアリア）のロールについて解説します。 WAI-ARIAのロールは6種類に分類されます（ランドマーク、文書構造、ウィジェット、ウィンドウ、ライブリージョン、抽象ロール）。 基本はセマンティックHTMLを優先しますが、HTML要素で補えない部分を補完し、アクセシビリティを向上させるのがWAI-ARIAです。 古いサイトやライブラリ使用時など、直接HTML要素を変更できない場合はロール付与で対応するなどがあります。 「...

WAI-ARIA（ウェイアリア）は、W3Cが定めたウェブアクセシビリティ向上のための仕様です。 複雑化したウェブサイトでHTMLだけでは不十分な場合に使用することで、支援技術に情報を伝えることができます。 ・役割を定義する「ロール」、状態を定義する「ステート」、特性を定義する「プロパティ」の3つの要素で構成 ・ボタンやメニューの動作、フォームのエラーメッセージなどを支援技術に伝えられる ・JavaScriptによる動的更新情報...

今回は番外編としてWCAG 2.0 解説シリーズを振り返りながらパーソナリティ2人の雑談回です。 ・WCAG 2.0 解説シリーズを振り返って ・WCAG 2.0を学ぶことで気づいた、日常生活とアクセシビリティ ・ウェブアクセシビリティを実務で活かすためにどうすればよいか？ ・アクセシビリティを楽しく学ぶには？ 番組内で話題に出た書籍： 『「良かったこと探し」から始めるアクセシブル社会: 障害のある人の日常からヒントを探る』公益財...

本エピソードではWCAG 2.0における4つ目の原則「堅牢」のガイドライン4.1「互換性」を解説します。 堅牢は、コンテンツは、スクリーンリーダーなどの支援技術も含め、いろいろなブラウザやソフトで正しく読み取れるように作られる必要があり、どんな環境でも内容が崩れずにきちんと伝わる設計を求める原則のことです。 達成基準4.1.1は、マークアップを正しく使用し、コンテンツを正確に解釈できるように求めています。 達成基準4....

ガイドライン3.3「入力支援」後編として、達成基準3.3.3「エラー修正の提案」と3.3.4「エラー回避（法的、金融、データ）」を解説します。 達成基準3.3.3では、フォームの入力エラーを検出し、修正方法を提示することを求めています。 前編で解説した達成基準3.3.1では、エラー箇所をテキストで通知することを求めていますが、さらにエラー箇所をどう修正するのか提示することを求める達成基準です。 達成基準 3.3.4では、法的・金...

WCAG 2.0「理解可能」原則のガイドライン3.3「入力支援」について、前後編に分けて解説。 今回は前編です。 ガイドライン3.3「入力支援」は、入力時のミスを減らし、エラーを特定・修正しやすくするためのもの。 達成基準3.3.1ではエラー箇所のテキストによる提示について、3.3.2ではラベルや説明の適切な提供を求めることを基準としています。 これらを達成すると使いやすさが向上します。 ガイドライン 3.3: 入力支援を理解する...

2回にわたって解説するWCAG 2.0にあるガイドライン3.2「予測可能」についての後編です。 達成基準 3.2.3「一貫したナビゲーション」、達成基準 3.2.4「一貫した識別性」は、同一サイト内でのコンテンツ配置やボタンラベルを統一し、利用者が混乱なく操作できる状態を目指すことが求められています。 達成基準 3.2.3: 一貫したナビゲーションを理解する https://waic.jp/translations/WCAG21/Understanding/consistent-navigation.h...

2回にわたって解説するWCAG 2.0にあるガイドライン3.2「予測可能」についての前編です。 画面のレイアウトや操作が一貫し、予測しやすいウェブを実現することが目的です。 達成基準3.2.1ではフォーカス時、3.2.2では入力時に不要なコンテキスト変化を避け、必要時は事前告知が推奨されます。 達成基準 3.2.1: フォーカス時を理解する https://waic.jp/translations/WCAG21/Understanding/on-focus.html 達成基準 3.2.2: 入力時を理...

WCAG 2.0の4つの原則、3つ目「理解可能」を解説。 「読みやすさ」は、テキストの理解を助ける情報提供が重要としています。 言語を特定して支援技術が正確に読み上げられるよう、全体と部分の言語を指定します。 達成基準 3.1.1: ページの言語を理解する https://waic.jp/translations/WCAG21/Understanding/language-of-page.html 達成基準 3.1.2: 一部分の言語を理解する https://waic.jp/translations/WCAG21/Understanding/lan...

WCAG 2.0の「ガイドライン2.4 ナビゲーション可能」の最後の2つの達成基準について解説。 達成基準2.4.6は、見出しやラベルが内容を明確に示すことを要求します。 達成基準2.4.6「見出し及びラベル」: 見出しやラベルは、内容を明確に示す必要がある。ただし、必ず付ける必要はなく、付ける場合はわかりやすくする。 達成基準2.4.7「フォーカスの可視化」: キーボード操作でフォーカスが当たっている箇所を視覚的に示す必要がある...

今回はWCAG 2.0のガイドライン2.4「ナビゲーション可能」の達成基準2.4.4「リンクの目的（コンテキスト内）」と2.4.5「複数の手段」を解説します。 達成基準2.4.4「リンクの目的（コンテキスト内）」 2.4.4では、リンクテキストからリンク先を予測できるようにすること、特に「詳しく見る」といった曖昧な表現を避け、具体的な表現を用いることを推奨しています。 これはスクリーンリーダー利用者への配慮も含まれます。 2.4.5「複...

WCAG2.0ガイドライン2.4ナビゲーション可能の解説 2回目。 達成基準2.4.2「ページタイトル」について ・ページの主題を示し、文脈なしでも内容がわかる、かつ簡潔なタイトルが必要（レベルA） ・「主題を明確に」「前後の文脈がなくても意味が伝わる」「簡潔に」の3点が重要 達成基準2.4.3「フォーカス順序」について ・ボタン・リンクなどのフォーカス可能要素は、画面表示や意味に沿った順序で移動できる必要がある（レベルA）...

今回から4回でWCAG2.0ガイドライン2.4ナビゲーション可能の解説に入ります。 ガイドライン2.4ナビゲーション可能は、4つの原則「操作可能」の一部で、ユーザーが迷わず目的のコンテンツへアクセスし、現在位置を把握できるようにすることが目的。 ナビゲーションには「現在地の把握」と「別の場所へ移動する」2つの役割があります。 達成基準2.4.1「ブロックスキップ」は、スクリーンリーダーやキーボード利用者が重複ブロックを飛...

WCAG 2.0「ガイドライン2.3 発作の防止」に基づき、閃光や点滅が引き起こす光過敏性発作を防ぐ方法を解説。 WCAGにおける「閃光」「点滅」とはどのようなものか、なぜ閃光を避けるべきなのかについても解説しています。 発作を防ぐ達成基準として、1秒間に3回を超える閃光の制限や、一般閃光閾値・赤色閃光閾値の重要性を紹介。 参考： 発作の防止 - : - ガイドライン 2.3 を理解する https://waic.jp/translations/UNDERSTANDING-...

WCAG 2.0「ガイドライン2.2 十分な時間」についてと、このガイドラインに関する達成基準を詳しく解説します。制限時間の調整や延長、例外規定を理解し、すべてのユーザーが十分な時間を確保して利用できるウェブサイトを目指します。また、スライドショーやアニメーション、自動更新情報のアクセシビリティ向上方法も紹介します。 ウェブ制作者にとって重要なポイントを簡潔にまとめた内容です。 参考： ガイドライン 2.2: 十分な...

ウェブアクセシビリティにおける重要な4つの原則2つ目、WCAG 2.0のガイドライン2.1「キーボード操作可能」とその達成基準2.1.1「キーボード」、2.1.2「キーボードトラップなし」を解説します。 キーボード操作を可能にすることで、他の操作方法にも対応でき、ユーザーの使いやすさが向上します。特定のタイミングを要するキー操作を避け、キーボードトラップを防ぐことで、誰もが快適にウェブコンテンツを利用できます。 「達成基...

「ガイドライン1.4 判別可能」とその達成基準について3回にわたって解説する3回目、最終回。 達成基準 1.4.4 テキストのサイズ変更ではキャプションおよび文字画像を除き、テキストはコンテンツや機能を損なうことなく、支援技術なしで200％までサイズ変更をできるようにすることを求めています。 ウェブサイトに「大・中・小」といった切り替えボタンで表示の拡大縮小を付ける方法もありますが、最近はブラウザで拡大縮小の昨日が...

「ガイドライン1.4 判別可能」とその達成基準について3回にわたって解説する2回目。 達成基準1.4.2「音声の制御」では、ウェブページ上の音声が自動再生され、3秒以上続く場合、その音声を一時停止・停止するメカニズム、またはシステム全体の音量に影響を与えず音量調整できる環境の提供が必要としています。 スクリーンリーダーユーザーは、自動再生される音声があると操作が困難になる可能性があるためで、この配慮は注意力が散...

今回から3回にわたりWCAG 2.0のガイドライン1.4 判別可能とその達成基準について解説します。 ガイドライン1.4はコンテンツを利用者にとって見やすく、聞きやすくすることを目的としており、前景と背景を区別することを求めています。 「前景と背景を区別すること」とは「もっとも重要なもの」と「付随するものや補助的なもの」を区別するようなことです。 ガイドライン1.4は支援技術がなくても幅広いユーザーがコンテンツを利用で...