Webアクセシビリティの参考資料まとめ
2019年に公開、またはその年の出来事に言及している参考資料一覧。
freee 株式会社ではアクセシビリティに取り組む中で、実際にアクセシビリティを必要とするユーザーと出会い、商談をする機会も増えた。また、アクセシブルな製品がまだまだ少ない中、freee がアクセシビリティに取り組んでいることを広報し、問い合わせフォームに「アクセシビリティの問い合わせを受け付けている」ことを明言したことで、アクセシビリティを必要とするユーザーが存在することを認知できた。さらに、名刺に点字も入れることで、アクセシビリティに取り組んでいることを意思表示するツールとしても有効であった。
Chatwork 株式会社のアクセシビリティ方針と試験結果が掲載されている。
Vue.js でアクセシブルなタブ UI を実装するコード例。
弁護士ドットコムでは、全盲の方に続いて「弱視（ロービジョン）」の方をユーザーテストに招いた。ロービジョンの状態によって見え方は異なるため、画面を拡大したり、色を反転させたりすることで対処している人もいる。また、iPad のように本体を手に持って顔に近づけることができるデバイスの方が、PC よりも拡大縮小がしやすく、動画を見るのにも適しているという。
freee 株式会社の中根雅文氏を招いて行った弁護士ドットコムのユーザーテストでは、スクリーンリーダーを使った検索での問題点が明らかになった。また、カルーセルの理解や Web フォームの問題点も指摘された。テストで用意されたタスクを中根氏が実施する中で、同音異義語問題にも対処する必要があった。Google 検索結果には目には見えない見出しが設定されているため、スクリーンリーダーで見出しジャンプ機能を使用することで、検索結果の一覧に直接アクセスできることが分かった。
全盲の方を対象にした Web サイトのユーザーテストを実施し、その結果をプロダクトに生かすためには、結果のまとめや分析、解決策の検討、優先度の検討が必要である。ユーザーテストの結果をまとめるには、映像や音声の記録を確認する必要がある。まとめの中には、弁護士検索のページに到達する際の問題点が含まれていた。結果を分析し、原因、深刻度、解決策、解決の難易度などを考えることが重要である。
ユーザーテスト結果から、タブの問題がスクリーンリーダーでのアクセシビリティに影響を及ぼしていることが判明した。HTML は「タブ」インターフェイスをサポートしていないため、ウェブ上のタブは正しく扱えない。目標は、「スクリーンリーダーのユーザーにも情報が伝わるようにする」ことであり、適切な対応策を選択する必要がある。
株式会社 WinTicket が提供する『WinTicket』における、ウェブアクセシビリティポリシーと試験結果が掲載されている。不適合となった項目について詳細と対応策も掲載されている。
2019 年 7 月 30 日に開催された「Japan Accessibility Conference Vol.2」のセッションの 1 つ『全盲エンジニアが iOS/Android/WebUI エンジニアにダメ出しした結果』の動画。パネルディスカッション形式で、障害当事者で自社サービスのユーザーでもある中根雅文氏が、サービスを実装している社内のエンジニアに対して送った“建設的フィードバック”について各エンジニアが答えている。そのほか、開発の中でアクセシビリティーを意識するようになったのはいつ頃か、アクセシビリティーを意識した開発に必要な情報はどのように集めているか、アクセシビリティー改善に取り組んでみて直面して難しかったことや簡単だったことなどの質問にも答えている。
freee 株式会社の伊原力也氏と中根雅文氏が、アクセシビリティに取り組む意味ときっかけ、実践、今後のビジョンについてインタビュー形式で答えている記事。
パンくずナビゲーションに WAI-ARIA と構造化データを追加して、マシンリーダビリティとアクセシビリティを高めたコード例が掲載されている。
土屋一彦氏による、Adam Silver 著の同名書籍の翻訳書。ロバスト、プログレッシブエンハンスメント、アクセシビリティを軸に、ウェブの特性を最大限に活かした形であらゆるユーザーにとって利用可能なフォームの実装方法が解説されている。
WP ZoomUP #14 で伊原力也氏が発表した『「誰もが使える」デザインを生み出すために』の配信動画。アクセシビリティ対応で何をやるかは多く語られているが、いつやるかはあまり語られていないことを引き合いに、WCAG2.1 にある 78 個の達成基準のうち 56 項目についてはコーディングに入る前に対応が可能だと言う。サイトマップ、コンテンツ、ワイヤーフレーム、フォーム、ビジュアルデザイン、プロトタイピングのそれぞれのプロセスでアクセシビリティを向上させる勘所、達成基準に含まれるがデザインプロセスの中で失われやすい項目、コーディングプロセスに入ってからも気をつけなければならないことが紹介され、WCAG のガイドラインをさらに短く要約した文章も述べられている。
CEATEC JAPAN 2019 で開催されたアクセシビリティセミナー 2019 のレポート。Web アクセシビリティについての 2 つのセッションが行われ、第 1 セッションは障害者の Web の利用方法を知る内容が、第 2 セッションはなぜ企業が Web アクセシビリティに取り組む必要があるかが紹介されている。アンケートの結果も掲載され、セミナーへの参加者からは高い関心が寄せられたことが伺える。
React-axe を使ってメルカリのある画面で報告された問題がどういったものかとそれを解決する方法が紹介されている。eslint-plugin-jsx-a11y、jext-axe を使った例もあり。
freee 株式会社が提供する『人事労務 freee』にアクセシビリティ QA を取り入れた話。障害当事者の中根氏とマネージャーの伊原氏が担当となり、デザイン時と実装時の 2 回でチェックをしている話が紹介されている。
2019 年 11 月 2 日に開催された「リーダブルな昼下がり」のセッションの 1 つ、株式会社サイボウズの小林大輔氏による『「すべて」の人に Web コンテンツの価値を届ける品質』のスライド。「アクセシビリティ＝障害者のための特別対応」なのか？という問いかけに始まり、障害とは個人と社会とのミスマッチであること、大きなミスマッチを経験した人が障害を解決する鍵を握っていること、マシンリーダビリティとヒューマンリーダービリティの向上で解決できることが話され、「アクセシビリティ＝ Web 本来の力を活かしきること」とまとめられている。
AI 問診というプロダクトを設計するうえでのユーザーの多様性と、そこへの対応方法について、3 つのケースをもとに述べている。
どんなエンジニアになろうか決めかねていた自分が、ある日突然「私はウェブをやるために生まれてきた」と思うに至った、アクセシビリティの話。「アクセシビリティって何？」という人から、「大事なのはわかっているけどいつも後回しにしてしまう」という人まで、明日からアクセシブルな実装をせずにはいられない、ウェブの本質に迫る。
2019 年 7 月 30 日に開催された「Japan Accessibility Conference Vol.2」のセッションの 1 つ『シビックテックとアクセシビリティ』のスライド。シャムロック・レコード株式会社が開発している『UD トーク』でインクルーシブな社会を実現できるという話と Code for Nerima、シビックテックの話が語られている。
stylelint-a11y（おそらく v1.2.1 時点）の各ルールがどのような項目なのかがまとめられている。
ユニーバサルデザインの考え方を取り入れてウェブ制作に活かす例が紹介されている。色覚特性、コントラスト比、色情報を唯一の手がかりにしないこと、UD フォントの利用、1 行あたりの文字数、行間、文字揃えなど。あらゆる箇所に適用するのではなく、必要な箇所に、目的にあった方法を選択しましょうと語れている。
CSS で対応できるアクセシビリティ改善例が紹介されている。フォーカスリングを消さないこと、ヒットエリアを広げるテクニック、order プロパティでマークアップを変えずに要素の並び順を制御するテクニック、テキストフィールドで placeholder を使わずに placeholder のように表現できるラベルのテクニックが紹介されている。
株式会社 LAB がウェブサイトをリニューアルした際に JIS X 8341-3:2016 の適合試験を実施したもののうまくいかなかった話。チェックリスト作成の難しさ、AS を検証するために PC-Talker が必要だが高価なので入手しづらいこと、達成基準の用語が分かりにくいこと、試験結果をチームメンバーとどう共有するかなどの課題があったことが紹介されている。
ゲームソフト『Sekiro』にアクセシビリティを求める声が、ゲームの難易度を下げたイージーモードを求める声と混同されているとする話の翻訳記事。
しかし、翻訳した編集部によると、アクセシビリティと難易度が混同されているという前提はそれほど見られず、ほとんどはゲームが難しすぎることに対した素直な意味でのイージーモードを要求している議論が多く、それらの議論ではユーザビリティに近い意味でアクセシビリティという言葉を意図的に使っているのではないか、と推察しているという。
2019 年 7 月 30 日に開催された「Japan Accessibility Conference Vol.2」のセッションの 1 つ『Web アクセシビリティのスキルがビジネスへと繋がる時代』のスライド（PDF）。株式会社ミツエーリンクスの中村精親氏と株式会社コンセントの秋山豊志氏が、Web アクセシビリティを自社のビジネスに繋げた話がそれぞれ紹介されている。ミツエーリンクスでは JIS 規格準拠を目指すクライアントへの検証と試験のニーズを挙げ、コンセントは「Web アクセシビリティはデザインに含まれるもの」とし、クライアント企業の伴走者となって Web 戦略支援のニーズを挙げている。他、両社とも Web アクセシビリティをビジネスにつなげるためには専任チームを組織することから始めている話なども語られている。
株式会社サイバーエージェントが 2019 年に実施したアクセシビリティ関連の活動のまとめ。多数のプロダクトでアクセシビリティを改善した話や、エンジニアの評価制度にアクセシビリティに関する項目を新設したことなどが紹介されている。
2019 年 6 月 1 日に開催された「CSS Nite LP62『Web アクセシビリティの学校』特別授業」のセッションの 1 つ、株式会社ミツエーリンクスの木達一仁氏の『【クロージング・トーク】インクルーシブネスを超えて』のフォローアップ。Web コンテンツにとって必須の品質としてアクセシビリティを捉えて高める取り組みを業界として強化しなければならないこと、そうした取り組みは継続が大事で「できること」から少しずつ、プロセスとカルチャーの両面から実践していくことが強く伝えられている。
2019 年 6 月 1 日に開催された「CSS Nite LP62『Web アクセシビリティの学校』特別授業」のセッションの 1 つ、サイボウズ株式会社の小林大輔氏・樋田勇也氏の『サイボウズの組織的な取り組みとビジュアルデザイン』のフォローアップ。アクセシビリティをチームで取り組むことの重要性、チーム支援や議論が重要であることが強調されている。
2019 年 6 月 1 日に開催された「CSS Nite LP62『Web アクセシビリティの学校』特別授業」のセッションの 1 つ、澤田望氏の『代替テキスト決定ツリーの使い方』のフォローアップ。スライドと動画が公開されており、代替テキストには多様性があることの発表に対してさまざまな意見が寄せられたとのこと。岡山の勉強会「リーダブルな夜」の紹介も書かれている。
2019 年 6 月 1 日に開催された「CSS Nite LP62『Web アクセシビリティの学校』特別授業」のセッションの 1 つ、『辻ちゃん・ウエちゃんのアクセシブル GO GO!!「スクリーンリーダーで『Backlog』を使ってみる」の巻』のフォローアップ。スライドと動画が公開されており、スクリーン・リーダーを使って Backlog を操作する方法や、スクリーン・リーダー自体の操作方法についても紹介されている。
2019 年 6 月 1 日に開催された「CSS Nite LP62『Web アクセシビリティの学校』特別授業」のセッションの 1 つ、松森果林氏の『誰もが隣にいる人と一緒に楽しむために』のフォローアップ。このセッションのスライドと動画が公開されており、普段から聞こえない人や見えない人、車いす使用者などを想像する習慣をつけると世界が違って見えるようになること、聴覚障がい者向けの字幕の必要性など、聴こえない世界や聴こえにくい世界について考えるきっかけになってほしいと述べている。また、手話の本や、ダイアログ・イン・サイレンスというエンターテインメントを紹介し、参加を呼びかけた。
2019 年 6 月 1 日に開催された「CSS Nite LP62『Web アクセシビリティの学校』特別授業」のセッションの 1 つ、freee 株式会社の伊原力也氏の『あなたの価値を高めるアクセシビリティ』のフォローアップ。このセッションのスライドや動画が公開され、Web アクセシビリティに取り組む上での情報収集方法や Japan Accessibility Conference Vol.2 が紹介され、Web アクセシビリティは Web の仕組みに則り Web の力を活かすことであると述べられている。
2019 年 7 月 30 日に開催された「Japan Accessibility Conference Vol.2」のセッションの 1 つ『Ask Us Anything』の動画。全盲・弱視・ロービジョン・色弱・難聴・肢体不自由の障害当事者との質疑応答が収録され、「Web や ICT 技術によってできるようになった例を教えて」「企業や団体の最近のアクセシビリティ関連の取り組みでよかったものは？」「WCAG、JIS X 8341-3:2016 は当事者に認知されているか、障害者差別解消法の施行についてどう感じているか？」「多くの官公庁サイトで実装されている文字拡縮・色反転・読み上げ機能は使ってるか？」「障害当者と健常者のコミュニケーションで、どうであったら嬉しい・ありがたいなどあるか？」の 5 つの質問に答えている。
Chatwork 株式会社のプロダクトデザイン部では UI デザイナーのスキルマップにアクセシビリティスキルが含まれており、Web サイトやプロダクトで同社のアクセシビリティ方針を実践するべきと話している記事。アクセシビリティスキルは「アクセシビリティの必要性を理解して、具体的にやるべきことを提案・実現するためのスキル」と定義され、4 つのレベルに分かれている。
株式会社ピクセルグリッドのメンバーと freee 株式会社の伊原力也氏の座談会の後編。WCAG 達成基準の A の線引きの話、alt やコントラスト比で生まれる「虚空」問題、発注者自身にもアクセシビリティや WCAG の理解が必要なこと、ガイドラインより先にユーザーを見る話、そのためにユーザーテストを行なうなどの話がされている。
株式会社ピクセルグリッドのメンバーと freee 株式会社の伊原力也氏の座談会の中編。アクセシビリティ対応を訴求するためのターゲット論を軸に、プライバシーの観点からスクリーンリーダーなど AT（支援技術）の利用率が計測できず、アクセシビリティを必要としているユーザー数を使ったビジネスへの訴求が難しいこと、freee 株式会社では利用者の高齢化や社内事情を予想し、アクセシブルなツールを作れば労務コストが下がると試算していること、また自らがアクセシビリティ対応企業として前例となることでアクセシビリティへの意識を日本全体に広めたい狙いなどが話されている。
株式会社ピクセルグリッドのメンバーと freee 株式会社の伊原力也氏の座談会の前編。アクセシビリティに関心を持っているのはフロントエンドエンジニアが多いこと、受託制作会社のフロントエンドエンジニアがアクセシビリティに取り組むには業務構造的に難があること、WCAG のレベル A でも十分に壁が高いことなどが話されている。
2019 年のアクセシビリティ関連の動向をまとめた連載の 3 回目。多くの企業が活発にデザインシステムに取り組んだ印象で、特にデザインシステムにアクセシビリティを取り入れて組織浸透を目指したものが目立ったという話が掲載されている。
2019 年のアクセシビリティ関連の動向をまとめた連載の 2 回目。この年話題になった note の alt 問題を引き合いに、Authoring Tool Accessibility Guidelines（ATAG）についての話が掲載されている。
2019 年のアクセシビリティ関連の動向をまとめた連載の 1 回目。WCAG 2.1 が標準化されても JIS X 8341-3:2016 が更新される見込みは薄いこと、WCAG2.1 は WCAG2.0 から追加はあっても削除された達成基準のない上位規格なので、日本向けのプロダクトでも WCAG2.1 を満たすことを目標にして良いこと、WAI-ARIA の利用は広まってきたが、ライブリージョンを利用する場合は注意が必要であることが紹介されている。
WCAG2.0 の全基準がリストアップされ、選択していくことでチェックシートが作れるウェブアプリ。シートを作成後、適応の有無・実装の可不可・試験方法の選択が画面上で行え、IndexDB への保存や PDF 出力もできる。
web アクセシビリティ実装チェックリストを作ったにて解説されている。
株式会社サイバーエージェントのウェブアプリケーション『WinTicket』の開発に関するスライド。p69 からアクセシビリティについてのセクションで、開発速度を上げるためアクセシビリティ対応に Must と Usual を設定し、レビュー基準とした話が紹介されている。適切な要素選択を目指しつつも徹底はしない話、十字キーのフォーカス移動をやめ全てタブキーでできるようにした話が印象的。
アクセシビリティを損なうよくある HTML の問題点と、visually-hidden を使った読み上げ可能な非表示テキスト、クリック時にアウトラインを表示しない what-input.js の利用、aria-labelledby を使った触知可能なアイコンボタンの実装など、それを改善する方法が紹介されている。
HTML は「画面を実装するためのフレームワーク」と「デザインを検証するためのフレームワーク」の 2 つの見方が出来るのではないかという話が述べられている。前者は適切な要素選択によってネイティブの機能を提供できること、後者は HTML で見出しのアウトラインを思考することでデザインカンプをより理解できることを理由にしている。この 2 つの側面を意識してウェブサイトを構築すれば結果的にアクセシブルになると言う。
コントラストを確保するだけでなく、形や模様を工夫する方法が解説されている。
コントラスト比 4.5:1 を確保せよの話のほか、テキストのアンチエイリアス部分についての解説や「白／黒との相対輝度」についても解説されている珍しいスライド。
組織が成長したことで陥ったプロダクト品質の問題を、デザインシステムとガイドラインを用いてボトムアップしようという取り組みが紹介されている。
高齢者が忌避する設計がわかりやすくまとめられたスライド。高齢者に優しい設計は多くの人にとってもアクセシブルになるという。
ガラケーでも動作するウェブアプリを制作した話が紹介されている。スライドではライブラリやバンドラー、ServiceWorker などを駆使したそう。フォーカス可能な要素を絞ってアプリケーションのユーザービリティを向上させるアイデアはナルホドがある。
ウェブアプリケーションの品質を、サーバーサイドとフロントエンドの両面から解説している包括的なスライド。サイバーエージェントではウェブアプリ向けに専用のチェックリストを作って運用しているという。
コントラストチェッカー。複数の色の組み合わせをまとめて検証できる。
スマホのスクリーンリーダー（VoiceOver、TalkBack）の基本的な操作方法がまとめられた PDF ファイル。
デスクトップ PC のスクリーンリーダー（VoiceOver、NVDA）の基本的な操作方法がまとめられた PDF ファイル。
Android アプリのアクセシビリティについてのかんたんな紹介と Accessibility Testing Framework for Android の導入方法についてのスライド。
なぜ日本の電子書籍のアクセシビリティ対応が進まないのか？について、リーダーと DRM の観点から解き明かす記事。
様々な障害について、デザインする上で何をすべきか、何をしないべきかをまとめたポスターが PDF データで公開されている。もとはイギリス内務省が作成した DO/DON’T（べき/べからず）の啓発ポスターを日本語化したもの。
React でアクセシブルなタブ UI を実装するコード例。
Angular でアクセシブルなタブ UI を実装するコード例。