2018年

2018年に公開、またはその年の出来事に言及している参考資料一覧。

参考資料

ユーザーテストは準備が8割！弁護士ドットコムで実施した「準備の様子」「シナリオ」の一部を公開

ユーザーテストの成功の 8 割は事前準備にかかっている。ユーザーテストの目的は、アクセシビリティ上の問題を発見し、サービスの改善を行うことと、支援技術の利用シーンを実際に見てもらうこと。リクルーティングやテスト会場、端末の用意、シナリオ作成、同意書と謝礼の用意など、ユーザーテストには準備が必要。ユーザー数や属性、募集方法も検討する必要がある。

aria-expandedのよくある間違い

WAI-ARIA の中でもよく使われている属性で、コンテンツが展開されているかどうかの状態を表す aria-expanded を使う際によく見られる間違いの事例が 2 つ紹介されている。

2018年、freeeのアクセシビリティを振り返る

freee 株式会社が 2018 年に実施したアクセシビリティ関連の活動のまとめ。全盲の障害当事者が入社したことを契機に、アクセシビリティの必要性とプロダクトとしての価値が見出され、同社のミッションに直接的に貢献できるという手応えがあったなどの話が紹介されている。

見落としがちなVoiceOver対応

iOS アプリで VoiceOver に対応した事例の紹介。標準の UILabel や UIButton で実装する場合は気にしなくて良いが、画像のみのボタンを使う場合は注意が必要だという。

「色覚に頼らない UI を考える」というテーマで行われた勉強会に触発され、色だけでなく下線や囲みなどのスタイルを使ったリンクの表現方法について考察している。アプリやウェブサービスの対応事例もあり。ウェブアクセシビリティとは障害者対応だけでなく、健常者にとっても使いやすい UI を実現することであるとし、勉強会では、グラフをモノクロで表現した際の解決策を考えるグループワークが行われ、色覚障害のある人でも理解できるグラフのデザインが 12 案提案された。

状態遷移時にアニメーションを伴うUIのアクセシビリティ周りの実装について

ディスクロージャーを例に、アニメーションを伴う状態遷移時の WAI-ARIA の扱い方がコード付きで解説されている。セマンティクス上、アニメーションは存在を意識させず、ユーザーアクションを起点とした状態遷移時には、アニメーションを無視して即座に WAI-ARIA のステートを更新すべきという。

弁護士ドットコムがアクセシビリティ向上に本気で取り組むワケ

弁護士ドットコムのアクセシビリティ向上の取り組み。アクセシビリティエンジニアの採用、障害のあるユーザーを補助する支援技術の必要性の説明、検索エンジン経由でも読みやすくするためのアクセシビリティ改善の必要性が紹介されている。

多様なユーザーニーズに応えるフロントエンドデザインパターン入力フォーム編

デザイニング Web アクセシビリティやコーディング Web アクセシビリティの内容も交えた、フォームの対応パターン。講演動画あり。

企業サイトのWebアクセシビリティの今とこれから

企業がデジタルマーケティング時代に Web アクセシビリティに取り組む意義や有用性について紹介されている。

一歩踏み込んだときにやりがち、ウェブアクセシビリティ向上の失敗例

アクセシビリティ向上を唱える人間が実装を間違えてしまう典型的なパターンが紹介されているスライド。

ブロックスキップを考える — Accessible & Usable

WCAG2.0 の達成基準になっているブロックスキップ（いわゆるスキップリンク）についての考察が書かれてる。スクリーンリーダーは見出しジャンプやランドマークロールの移動ができるが、非スクリーンリーダーユーザーでマウスのスクロール機能を使えないユーザーにとっては重要であるという。記事ではブロックスキップ設計に必要な項目がまとめられ、Facebook が取り入れているブロックスキップを引用して難しい点などを解説している。

スクリーンリーダーのテーブルまわりの対応状況を検証する（特に見出し関係） | kzakza

テーブル関連要素、特に caption 要素、th 要素、scope 属性、headers 属性に対する、主要ブラウザとスクリーンリーダーの対応状況がまとめられている。

グラフや図解の説明テキスト — Accessible & Usable

グラフや図解の alt 属性値は情報量が多くなり認知負荷が高くなる恐れがあること、構造化されたテキストを提供することが望ましいこと、セマンティックな説明をグラフや図解に隣接して配置し、必要に応じて折り畳んで展開できるようにすることが推奨されている。

ウェブ制作者のための「はじめてのiOS VoiceOver」チュートリアル（中級編：ローター）

中級編として、ローターの活用方法。見出しジャンプの例などが紹介されている。

ウェブサイト上でみられる文字拡縮や読み上げツールについての調査

霞が関の中央省庁を対象に、どんな形で機能が実装されているのかを調査した結果が紹介されている。

ウェブサイト上でみられる文字拡縮や読み上げツールについての調査(2)｜#a11y tips:PDF とウェブアクセシビリティ by moya ｜ note

インクルーシブなペルソナ拡張

ウェブコンテンツの設計プロセスにおいて、アクセシビリティを考慮に入れることを促進するためのツール。UCD／HCD の手法で UX デザインを行なう際、ターゲットユーザー層の定義が暗黙的に健常者になっていることが多く、デザイン成果物からアクセシビリティが欠落しがちだと言う。このツールを使えば、ペルソナに対してコンテキスト（障害を持っている、高齢である、モバイルで利用しているなど）を付加でき、プロジェクト内にアクセシビリティの意識付けを促せるそう。

このリンクの解説が『インクルーシブなペルソナ拡張 - Accessible & Usable』にてされている。

はじめての VoiceOver 対応

VoiceOver とは何か分かる、VoiceOver 対応でどういった知識が必要なのか分かる、VoiceOver 対応ではどんな作業をするのか分かる、VoiceOver 対応がなぜ必要なのか分かる。

これでわかる！Webアクセシビリティって？JIS X 8341-3って？

ウェブアクセシビリティ基盤委員会（通称：WAIC）の放つ入門編。Web アクセシビリティの概念から、JIS の概要までを紹介しています。

こうすれば書ける！ウェブアクセシビリティ方針と試験結果表示

JIS X 8341-3:2016 への対応を進めるにあたって必要なウェブアクセシビリティ方針の策定方法と試験結果の表示方法が紹介されている。

こうすればできる！ウェブアクセシビリティ実装のポイントと実装チェックリストの作り方

WCAG の達成基準に基づいた実装チェックリストの作成方法と、1 つの達成基準に対してどの達成方法を選ぶかのポイントなどが紹介されている。

「アクセシビリティ」のすすめ — ユーザーを第一に考える姿勢をより一歩深めて

ウェブ解析士向けに、ウェブアクセシビリティへの取り組みを啓発している。

freeeのアクセシビリティ、いまとこれから

freee のミッションとアクセシビリティの関連性・重要性について語り、会社の成熟度モデルに基づいたアクセシビリティの位置付けを解説している。アクセシビリティを取り入れることで、会社の成長を促すことができるという考え方を唱えている。

スライド

Webアクセシビリティ対策って、何からやればいいんですか？

株式会社インフォアクシアの植木真氏が、文字サイズ変更ボタン、読み上げ機能、色の反転機能を指して「それはいらない三種の神器ですね」と言う漫画。

Webアクセシビリティ対応で「音声読み上げ・文字拡大・色変更」は的外れ。本当に必要なのはSEO？

音声読み上げ、文字拡大、文字色変更は、アクセシビリティ対応としては過去の手法とされ、現在は適切なアクセシビリティ対応とは言えない。代わりに、SEO を意識した Web サイト作成がアクセシビリティの向上につながることが知られている。実際のユーザーの利用シーンを観察し、その状況に基づいてアクセシビリティ対応を検討することが重要である。まずは現状を確認し、その後で適切なアクセシビリティ対応の方法を考える必要がある。

Web Accessibility Laws & Policies - W3C

このリンクの解説が『ウェブアクセシビリティに関する法律/政策のデータベース (W3C) - Accessible & Usable』にてされている。

PDF版 WCAG 2.0 (JIS X 8341-3:2016、ISO/IEC 40500:2012) 早見表／逆引き表

有限会社時代工房（@jidaikobo + @sbtnbfm）ともんど氏（@momdo_）が作った WCAG 2.0 の早見表。「原則」「ガイドライン」「達成基準」を一覧できる。

裏面は状況（「キーボードで操作できる」「画像がある」など）からの達成基準の逆引き表。

読み上げの確認は NVDA で行ったとのこと。