accrefs

Webアクセシビリティの参考資料まとめ

カラーモード

すべての参考資料

WPDS - Audio and Video

ワシントンポストのデザインシステムで規定されている音声と動画についてのルール。自動再生しないこと、一時停止や非表示ボタンを実装すること、字幕を必ずつけること、prefer-reduce-motion に対応することなどが説明されている。

WPDS - Alt text

ワシントンポストのデザインシステムで規定されている alt テキストのルール。img 要素や svg 要素での実装例だけでなく、どんな時に alt= が良いのか、キャプションと alt の違い、画像の種類別の alt の書き方、リンク、絵文字、句読点、ハッシュタグなど、細かに説明されている。

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

freee 株式会社ではアクセシビリティに取り組む中で、実際にアクセシビリティを必要とするユーザーと出会い、商談をする機会も増えた。また、アクセシブルな製品がまだまだ少ない中、freee がアクセシビリティに取り組んでいることを広報し、問い合わせフォームに「アクセシビリティの問い合わせを受け付けている」ことを明言したことで、アクセシビリティを必要とするユーザーが存在することを認知できた。さらに、名刺に点字も入れることで、アクセシビリティに取り組んでいることを意思表示するツールとしても有効であった。

LIFULL Accessibility Guidelines

LIFULL アクセシビリティガイドラインは、株式会社 LIFULL の全てのプロダクトやサービスを利用しやすくするために策定され、アクセシビリティを考慮することで、より幅広いユーザーに使いやすくなる。ガイドラインは工程に応じて分けられ、優先度も明確にされており、初学者でも理解できるように具体的な例を示している。

Accessibility Support

様々なスクリーンリーダーにおける、4 つの ARIA 属性に関するサポート状況が報告されている。ARIA 属性とスクリーンリーダーの組み合わせによっては、サポートされていないものや一部のサポートしかされていないものもある。ただし、サポートが完全なものも多く、主要なスクリーンリーダーに対応していることが確認されている。しかしながら、一部の組み合わせにおいては、情報が古い可能性もあるため、注意が必要である。

「この機能のアクセシビリティどうしよう」と思ったら

Web アプリケーションにドラッグ＆ドロップを使う機能を作る際、アクセシビリティに気をつけることが大切である。アクセシビリティを考慮せずにドラッグ＆ドロップを使うと、視覚障害者や身体障害者などが利用できなくなる可能性がある。WCAG 2.1 では、すべての機能がキーボードで操作可能であることが求められている。スクリーンリーダー利用者や身体障害者にとって、キーボードで操作できるようにすることが重要である。

Webに限らないアクセシビリティあれこれ

アクセシビリティに関する動きは活発で、IT 業界以外でも様々な分野で進展が見られる。医療現場のアプリ開発や美術館の取り組み、民事裁判の IT 化など、アクセシビリティに対する関心が高まっている。ただ、アプリのアクセシビリティについてのガイドラインや法整備がまだ足りていないとの指摘もある。米国 ADA 法と日本法の現状についても整理されている。

障害者に関する法律関連

障害者に関する日本の法律と関連資料を掲載している。障害者基本法は平成 23 年に改正され、改正前と改正後の条文を掲載している。改正法の成立には衆議院・参議院において附帯決議が付された。内閣府のサイトには概要や新旧対照表も掲載されている。要約文：日本の障害者に関する法律や資料を掲載しており、平成 23 年に障害者基本法が改正された。内閣府サイトには改正前後の条文や概要が掲載されている。

Subtitle Guidelines

BBC Academy が字幕制作のオンラインガイドを作成。字幕は聴覚障害者向けに提供されるが、視聴者の 35％がオンラインコンテンツで利用している。BBC は通常、EBU-TT part1 with STL を放送用、EBU-TT-D をオンラインコンテンツに採用。字幕制作に携わる者向けに、最善の手順を説明する Subtitles Guidelines が提供されている。技術的な指示に従うには、XML と CSS の作業知識が必要。

アクセシビリティ改善中！ LIFULL HOME'S スマートフォンサイト

株式会社 LIFULL のフロントエンドエンジニアが、スマートフォンサイトのアクセシビリティ向上に取り組んだ結果を紹介。ボタンの正しい実装や、追加コンテンツのフォーカス管理などに取り組んだことが挙げられる。ボタンの実装に関しては、WAI-ARIA を用いて役割を上書きした上で、キーボード操作を可能にする工夫をしている。また、追加コンテンツのフォーカス管理にも取り組んでおり、フォーカスが失われないよう改善を行った。カルーセルの自動再生をやめて表示順をランダムにした話は参考になる。

アクセシビリティ推進組織立ち上げ後半年間の動き - LIFULL Creators Blog

株式会社 LIFULL のすべてのプロダクトがアクセシブルになることを目指し、アクセシビリティ推進グループが立ち上がった。具体的には、「プロダクトに対する直接的な品質改善活動」と「新しい負債の発生を低減させるための文化醸成」の 2 本軸で活動し、指標化により成果を測る。プロダクト品質の改善度合いを測るため、Lighthouse に加え、マニュアルテストをスコアリングに加えることが決められた。

ep.122『実体験から見えてくるもの UIT アクセシビリティインタビュー・レポート』 | UIT INSIDE - LINE UIT の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

今までは当事者不在のまま、おそらくこうじゃないかという手探り状態ですすめていたが、実際ところどうなのか、というのを知りたかった。その状況を変えるため、社内のヘルスキーパーチームにインタビューを行ったという活動を紹介している。

Relicのアクセシブル一歩目｜saimari｜note

Relic 社の斉藤氏は、アクセシビリティ活動を進めており、コーポレートサイトの改善に取り組んでいる。改善したことはグローバルナビゲーションのデザイン変更、フォーカス・インジケーターの復活、HTML の修正、現在位置の表示に線・太字を追加したことである。今後はキーボードでのアクセスやフォーカス順序の改善も進めており、デザイナー・エンジニアが対話しながら改善点をまとめている。また、弊社では UI デザイナーやデザインエンジニアなどの職種を積極的に採用しているため、興味のある方は連絡するよう呼びかけている。

LIFULLのウェブアクセシビリティ仕掛人にインタビュー！ サイトの変革と運用の裏側｜LIFULL HOME'S ACTION FOR ALL｜note

株式会社 LIFULL はウェブアクセシビリティに取り組む有志社員からなる「ウェブアクセシビリティ推進ワーキンググループ」を設けており、WG では同社が目指すアクセシビリティについて議論し、サービスのレビューを行って改善提案をしている。また、FRIENDLY DOOR のトップページからアクセシビリティに関連した改修に着手し、キーボードだけで操作できるようにするなどの変更を行った。

夏だ！3社のアクセシビリティー取り組み事例から考える傾向と対策

freee アクセシビリティー・ガイドラインやチェックリストを活用しているという社外の方を迎え、具体的に使ってみてどうだったのか、どこが使いづらいのかの感想を共有。freee 株式会社からはガイドラインとチェックリストの作成・運用をやっている 3 人が登場して、疑問に答えたりディスカッションをしている。

春だ！既存プロダクトのWebアクセシビリティ改善ことはじめ

既存プロダクトのアクセシビリティー改善の具体的な取り組みの進め方について、freee 株式会社が発見を紹介するイベント。前半では既存プロダクトのアクセシビリティー改善のサイクルについて解説。後半は同社のガイドラインとチェックリストについて解説している。

プロジェクト発足から1年。noteのアクセシビリティ向上を振り返る

note は 2021 年からアクセシビリティの向上に力を入れ、勉強会や仕組み作り、外部での登壇、ユーザーインタビューなど、様々な取り組みを行ってきた。アクセシビリティチームの取り組みにより、社内にアクセシビリティの認識が広まり、対応度優先表の作成や、20%ルールの導入により素早く改修が可能になった。また、開発メンバー以外の PR チームやディレクターも巻き込み、アクセシビリティの向上に取り組んでいる。7 周年を迎えた note は、アクセシビリティの向上にも力を入れ、カイゼンチームの立ち上げや外部の専門家との協力などで取り組んでいる。

2021年、freeeのアクセシビリティを振り返る｜magi｜note

freee 株式会社では、自社製のアクセシビリティガイドラインに基づいたプロダクト開発を進め、そのチェックリストを公開した。特に、iOS および Android のモバイルアプリをチェックできるようアップデートした。既存プロダクト改善に力を入れることが決まり、その取り組みを共有し、リソースを公開してフィードバックを得ることで、アクセシビリティの向上を目指している。

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

freee 株式会社では、アクセシビリティチームがモバイルアプリ周りのリソース整備とプロダクト改善に注力し、モバイルアプリのアクセシビリティに特化したガイドラインとチェックリストを作成した。また、新入社員向けのアクセシビリティ研修だけでなく、デザイナーやエンジニア、ビジネス職の既存社員にも研修を実施している。これらの取り組みにより、アクセシビリティへの理解が高まり、プロダクトに反映されている。

アクセシビリティの効果測定

アクセシビリティだけに絞り込んだ効果測定は難しくとも、アクセシビリティに取り組みはじめてからの会社の変化、周囲の反応の変化を測定することは可能である。社内から社外へ、開発からユーザーへ、広報から市場へと、「⁠ 内から外へ」の変化をトラッキングしていくことで、全体的な状況を掴むための手法を解説している。

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

freee 株式会社では、2019 年以前にもアクセシビリティに取り組んでいたが、2020 年前半は停滞していた。しかし、デザインシステムチームの取り組みや新規プロダクトでのアクセシビリティ担保が進んでおり、両者には共通の「発動条件」があったことがわかった。それは、小規模で意思統一しやすく、アクセシビリティの知見を持つ 1〜2 人が存在し、デザインシステムを前提として開発していること、高品質を目指す合意があり、品質観点のチケットを出すサイクルがあることなどであった。

画面仕様を変えなくてもできるアクセシビリティ改善

Ameba ブログのトップページを刷新したところ、アクセシビリティ改善の効果が出た。技術的な制約の中、エンジニア 1 人で実現するため A 基準を満たすレベルのアクセシビリティガイドラインを制定し、画面仕様の変更はなくしている。最低限の知識で実践し、ガイドラインを決めてから実装に入ることで改善方針が明確になった。ドキュメント化しているため今後も継続的に改善できる。

#15 【字幕あり】「ユーザーと一緒に進めるアクセシビリティ　〜1年でアクセシビリティを組織に浸透させたnoteの取り組み〜」仙田 真郷（note株式会社）

note が短期間で機能的にも組織的にもアクセシビリティが進んだ要因は、多くのユーザーインタビューを実施したことにある。note でなぜアクセシビリティに注力するに至ったか、どのようにユーザーリサーチを実施し、それを社内に広め、活用したのかについて解説している。

スライド

Webアクセシビリティ改善はできるのか？ ロービジョン（弱視）のユーザーテストを振り返る | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い

弁護士ドットコムは、ロービジョンの方を呼んでユーザーテストを行い、検証結果に基づき改善を進めている。ロービジョンの方がサイトを利用する上で感じた問題点として、見えづらさが挙げられた。そのため、コントラストを判定するツールを使用することが重要である。また、重要でない情報は色だけでなく、文字のサイズやコントラストを下げることでも表現できるが、ロービジョンの方には意図が伝わりにくいため注意が必要である。

ロービジョン「弱視」の人は、Webサイトをどのように使うのか？ ユーザー調査結果を公開 | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い

弁護士ドットコムでは、全盲の方に続いて「弱視（ロービジョン）」の方をユーザーテストに招いた。ロービジョンの状態によって見え方は異なるため、画面を拡大したり、色を反転させたりすることで対処している人もいる。また、iPad のように本体を手に持って顔に近づけることができるデバイスの方が、PC よりも拡大縮小がしやすく、動画を見るのにも適しているという。

ユーザーは音声だけでWebサイトをどう使うのか？ 弁護士ドットコム、アクセシビリティユーザー調査の結果を公開

freee 株式会社の中根雅文氏を招いて行った弁護士ドットコムのユーザーテストでは、スクリーンリーダーを使った検索での問題点が明らかになった。また、カルーセルの理解や Web フォームの問題点も指摘された。テストで用意されたタスクを中根氏が実施する中で、同音異義語問題にも対処する必要があった。Google 検索結果には目には見えない見出しが設定されているため、スクリーンリーダーで見出しジャンプ機能を使用することで、検索結果の一覧に直接アクセスできることが分かった。

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

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

アクセシビリティ向上にむけnoteが実施しているユーザーインタビュー

note は、ウェブアクセシビリティの向上に力を注ぎ、あらゆるクリエイターが note での創作を楽しめるようにプロジェクトチームを発足。2022 年 3〜5 月には、10 名以上の障害当事者にユーザーインタビューを実施し、カイゼンを進めた。これにより、キーボード操作やショートカットキーなど、操作方法の選択肢を増やすことがアクセシブルなプロダクトにつながることが学ばれた。さらに、機能のカイゼンや社内整備、イベント登壇など、アクセシビリティ強化施策を実施している。クリエイターの意見・要望を受け、引き続き創作活動がしやすい環境づくりを進めていく。

「つくった人、天才ですやん」 - リサーチと開発のサイクルによるエディタの大幅なアクセシビリティ向上

2021 年に公開された note の新エディタにおいて、キーボード操作のみでの文字の太字化やスクリーンリーダーによる適切な読み上げが可能になるなど、アクセシビリティが大幅に向上した。この改修により、マウス操作が難しいユーザーや片手しか使えないユーザー、スクリーンリーダーを使用しているユーザーにも利便性が向上した。note では、ユーザーリサーチを通じてアクセシビリティの向上に取り組み、ユーザーの声を取り入れることが重要であると考えている。

書籍『Webアプリケーションアクセシビリティ』

Web アプリケーションは私たちの生活に必要な存在であり、アクセシビリティの向上が重要である。しかし、アクセシビリティには課題があり、有志だけで改善することに限界がある。本書は、Web アプリケーションのアクセシビリティを高める方法を提供する。アクセシビリティの基礎からフォーム、UI デザイン、複雑な UI パターンの改善まで解説し、組織全体でアクセシビリティを考慮した開発プロセスを作り上げる必要がある。

自治体サイトWebアクセシビリティ調査

ユニバーサルワークスが自治体の Web アクセシビリティの推進を目的に実施する調査「みんなの公共サイト運用ガイドライン」の 20 回目が発表された。昨年に引き続き「ガイドラインへの対応」がテーマで、自治体公式サイトに公開情報と実態に不一致があること、ウェブアクセシビリティ確保の取り組みに停滞があることが明らかになった。レーダーチャート一覧も公開されている。

Code for Japan Summit 2020「東京都新型コロナ対策サイトのアクセシビリティ改善を語る」

行動指針である「No one left behind：国籍や年齢、障害の有無にかかわらず、誰もが快適に利用できるサイトを目指す」はどのように実施されたのか。アクセシビリティ関連の Issues / Pull requests 108 件に対してどんなアプローチを試みたのか。3 月のサイト公開時から約 2 ヶ月間で実施された数々のアクセシビリティ改善の歩みを、当時対応にあたっていたメンバーが紹介。

スライド

ユーザーテスト終了後、Webサイトのアクセシビリティ改善はどう進める？ 優先度付けの手順を公開

全盲の方を対象にした Web サイトのユーザーテストを実施し、その結果をプロダクトに生かすためには、結果のまとめや分析、解決策の検討、優先度の検討が必要である。ユーザーテストの結果をまとめるには、映像や音声の記録を確認する必要がある。まとめの中には、弁護士検索のページに到達する際の問題点が含まれていた。結果を分析し、原因、深刻度、解決策、解決の難易度などを考えることが重要である。

noteの虚空ボタンを顕現させる社内勉強会を開催しました

freee 株式会社では、アクセシビリティチームが、プロダクト全体のアクセシビリティを向上させるために、勉強会やプロジェクトを実施している。特に、「虚空」と呼ばれる、スクリーンリーダーやキーボード操作では存在がないように振る舞うボタンに注目し、解決に向けたプロセスを導入した。勉強会には約 30 人が参加し、実施後 2 週間で 100 件近くのボタンが虚空から顕現された。同社では、全社でアクセシビリティに取り組むための動機づけ、実行能力、きっかけの提供を行い、アクセシビリティ向上に取り組んでいる。

ユビーAI受診相談でほんとうに起きていた怖い話〜アクセシビリティ編〜のお話｜3284｜note

Ubie 社内のアクセシビリティ勉強会について紹介。プロダクトに起きた課題から解決策を考え、再発防止に取り組んだ。勉強会後にはアクセシビリティに対する理解が深まり、問題を解決するための施策がいくつか挙げられた。Ubie にとってアクセシビリティはビジョン・ミッション達成に必要不可欠な要素であり、今後も取り組んでいく予定。アクセシビリティ推進に興味がある人は DM か採用サイトへ。

board（SaaS）のアクセシビリティー改善の取り組みの現在地（2022年10月）

board 社は、アクセシビリティー改善のため、専門家の支援を受けながら取り組んでいる。主要 5 画面をチェックし、160 件程度の課題をリストアップし、対応している。エンジニア 1 人が 5 ヶ月間担当し、毎週少しずつ改善している。また、共通の UI になっている部分は、全画面に展開していくことで、改善を進めている。

noteのアクセシビリティ向上プロジェクトが始動

企業にとってアクセシビリティを向上させることは難しいと考えられがちだが、note も同様の課題を抱えていた。しかし、アクセシビリティに詳しい伊原力也氏のアドバイスや全盲のクリエイターによるユーザインタビューを通じて、アクセシビリティは全ユーザーの使いやすさを向上させることに繋がるものであり、必要不可欠なものであることが理解された。note はその視点をもとに、アクセシビリティ向上の施策を行い、多くの反響を得た。アクセシビリティは、特定のクリエイターに限定されるものではなく、全方位に使いやすいことを探求することが重要であるとの認識が浸透した。

STUDIOのアクセシビリティ委員会発足から１年を振り返る｜akiho｜note

STUDIO 社は少人数でアクセシビリティ向上に取り組み、プロのコンサルタントを迎えて社内勉強会を開催。アクセシビリティ委員会が設置され、現在 4 人が参加している。60000 件のサイトに影響を与えるプロダクト改善や、難易度の高い機能改善に取り組んでおり、また STUDIO 社自身が制作したサイトのアクセシビリティの向上にも取り組んでいる。ヘルプ記事やテンプレートの改善にも力を入れており、社内でアクセシビリティ委員会がどのように関わっているかを取り上げる記事も公開される予定。

Ubieでアクセシビリティ推進しています

Ubie Discovery のデザイナー三橋氏は、アクセシビリティ推進にコミットしている。Ubie のミッションに合致しているため、またデザイナーが増えたこともあり、アクセシビリティに取り組むことができると感じた。具体的には、プロにサポートを受けながらアクセシビリティチェックを行い、優先度の高いものから実装していく。また、レビューを通じて勘所を伝授しながら取り組んでいる。アクセシビリティ推進は始まったばかりだが、ミッションを実現するために必要不可欠な取り組みであり、今後も継続的に行っていきたいと考えている。

ウェブアクセシビリティ導入ガイドブック

デジタル庁は、誰も取り残さないウェブアクセシビリティを実現するため、初心者向けのガイドブックを公開した。現在は、適切なやり方がわからないままに対応を誤ることがあるため、デジタルサービスの重要性が増す中で、初心者向けの研修資料が不足しているという。ガイドブックは、豊富な図解を盛り込み、広報やサービス開発等を担当する人でもわかりやすいように、専門用語を排除している。ウェブアクセシビリティに全く触れたことがない方々を対象にしており、PDF 版が公開されている。

デザイナーとしてのアクセシビリティとの向き合い方

デザイナーは、アクセシビリティを特別なものとして解釈してしまう人が多いことに気づく。しかし、アクセシビリティは普遍的であり、すべてのものに最初から存在している。デザイナーはユーザビリティの観点から、どのユーザーがどんなときにどう使うかを想定し、アクセシビリティの観点を持つことで安定して毎回アクセシビリティが高いものを作れるようになる。アクセシビリティの観点を持つことは、次に作ったものもまた使えるという状態を実現するために重要である。

デザインシステムにアクセシビリティを組み込む方法 | アドビUX道場 #UXDojo

Web サイトやアプリのアクセシビリティは、多様なユーザーにとって重要であり、デザインシステムに組み込むことが求められている。デザインシステムには、アクセシビリティとインクルージョンが最初から組み込まれた状態をつくり出す機会があり、Slack や Fable のような企業が取り組んでいる。アクセシビリティは、ユーザビリティと互換性の両面で考慮され、コンポーネントのレベルで組み込まれることが重要である。

フォーカスアピアランスの達成基準についての考察

WCAG 2.2 の草案には、「2.4.11 Focus Appearance (Minimum)」と「2.4.12 Focus Appearance (Enhanced)」のフォーカスインジケータに関する 2 つの達成基準が追加された。2.4.11 では、フォーカスインジケータの面積、コントラスト、隣接するコントラストの条件が設けられた。面積については、アウトラインやボーダーを拡張した最小限の面積が規定され、形状が複雑な場合はバウンディングボックスを周囲として計算することができる。

Web アクセシビリティに配慮し、なおかつ式として例外のないものにしたい色設計

デザインシステムにおける色設計を、色計算が可能なプログラミング言語でひとつの式にまとめたいというニーズがある。しかし、A11y 対応でルールが増えるため、シンプルにするための試行錯誤が必要だ。基準色を 10 段階くらいに増やし、その中で文字と背景に適切なものをピックアップしていくのが良いだろう。基準色は印象設計用途の色ではなく、文字色、背景色の作成に必要な定義となる。A11y の制約がある中で、Feedback Color に対してどのようにプロダクトのパーソナリティを表現するかが問題となる。

A11y Annotations (by Accessible & Usable)

Figma で作成するウェブサイトやアプリのワイヤーフレームに、アクセシビリティに関する注釈をつけることで、アクセシブルなプロダクト開発を進めることができる。そこで、Figma Community にて、アクセシビリティに関するアノテーションを付けるためのキット「A11y Annotations」を公開した。フレーム内にある各カテゴリーのアノテーションをコピー＆ペーストして使用することができる。Figma には他にも多くのアクセシビリティに関するアノテーションキットが存在するので、自身のプロジェクトに合わせて選択することができる。

サイトやアプリのUIデザインをする時に知っておくと良いアクセシビリティのこと

デザインにおけるアクセシビリティに関する Tips をまとめました。 読みやすい文字サイズやフォント、行間、文字数の調整が必要です。 アイコンを使う際は、ラベルをつけて一般的なアイコンを使用しましょう。 また、ボタンやリンクのテキストやアイコンは一貫性を持たせ、タップエリアを確保することが大切です。

高知こどもの図書館サイトとアクセシビリティ

2022 年 5 月 5 日、高知こどもの図書館のウェブサイトがリニューアル公開された。プロジェクトの初期段階からアクセシビリティを担保することが共有され、WCAG 2.1 レベル A と一部 AA に加え、継続的に取り組む項目を掲載することでアクセシブルな情報発信の場が育まれるよう努めた。デザインは、タブレットファーストでタップ操作で使いやすい表現を取り入れ、配色にはコントラスト比 4.5：1 以上が確保できるカラーパレットを作成し、対象学年を表すラベルには色覚によらず区別できる 3 色を選んだ。

minneのブランドを反映したカラーパレットができるまで｜sziaoreo｜note

GMO ペパボの「minne」デザイナーが、サービスのブランドからカラーパレットの制作過程について紹介。課題として、UI の色数が過多で煩雑な印象を与え、各所の配色が A11y 基準を下回っていたことが挙げられた。そこで、プライマリカラーをブラック、アクセントカラーをオレンジに設定し、配色のバランスを調整している。また、minne のミッションやコンテンツ制作の観点からも配色を決定している。

気象情報の画面が見やすくなるまで～“ユニバーサルデザインへの道”にゴールはない！｜NHK広報局｜note

2021 年 9 月に NHK の気象情報画面がリニューアルされ、色覚障害の方や加齢による見え方の変化がある方などの多様性に配慮した“色のユニバーサルデザイン”に基づく配色が採用された。しかし、個人差が大きい見え方に対応するため、デザイナーたちは試行錯誤を続けている。今後は、ユニバーサルデザインの勉強をし、配色が見分けやすいかどうかを常にテストすることが大切だと話している。

弁護士ドットコム、アクセシビリティ対応でブランドカラーを変更

弁護士ドットコムでは、弱視のユーザーテストを実施し、ブランドカラーの見直しを選択した。「reBORN」という名前が付けられたプロジェクトは、より多くの人にサービスを気軽に利用してもらうことを目的としている。デザイン中心で方針を決め、アクセシビリティ基準も盛り込んだ。プロジェクトは課題整理から始まり、最終的には「グランドデザイン」として決定し、ガイドラインを作成する。

アクセシブルなWebサイトを作ってみた：その4 STUDIO PARTNERSとアニメーション編｜いっちゃの雑記｜note

STUDIO PARTNERS 公式サイトをリニューアルオープンする際に、アクセシビリティの観点を取り入れたアニメーション設定の事例が解説されている。適切なアニメーションの設定はユーザリビティの向上につながるが、過剰な動きはユーザリビティを損なう。アクセシビリティを考慮することも重要だ。例えば、マウスカーソルホバー時に要素の色を薄くするアニメーションはカラーコントラスト比を確保できず認識できない影響をもたらす可能性がある。この Web サイトではリンク要素には可能な限りホバーアニメーションを設定している。また、操作に対する納得感を高めることができる。

iOSネイティブアプリのフッターメニューの振る舞いとアクセシビリティ

調査対象となったアプリのフッターメニューに関して、WAI-ARIA Authoring Practices 1.2 に則った振る舞いについて調査が行われた。iOS 標準アプリの多くはタブのロールを持ち、ランドマークに所属せず、フォーカスは移動しないという結果が多いことがわかった。これに対して、Google は自由なアプローチをとっていることがわかった。最終的に、ユーザーに行動の自由を与え、ローター機能を使って移動することができるタブの方が健全な実装だと考えられた。

アクセシブルFlutter: Semantics入門

Flutter の Semantics は、アクセシビリティに対応した概念であり、スクリーンリーダー対応に特化している。Flutter の内部実装でも、Semantics 機能に重点が置かれ、UI の描画と同じくらい重要視されている。Flutter では、スクリーンリーダー対応を強く推奨し、Semantics を含むアクセシビリティ対応に注力している。Semantics は、標準ウィジェットを使用することで簡単に実現できるため、積極的に活用することが望まれている。

React Native アクセシビリティ対応をわかるための記事: フォーカス編

React Native のアクセシビリティ対応を紹介する。コンポーネントにフォーカスを与え、支援技術が操作できるようにするためには、accessible プロパティが必要だ。また、accessible={true}が指定されたコンポーネントは、子要素をグループ化して一括で読み上げることができる。ただし、iOS ではグループ化された子要素にフォーカスできなくなるケースがあるため、注意が必要だ。

React Native アクセシビリティ対応をわかるための記事: 入門編

React Native のアクセシビリティ対応について解説している。iOS 14 と Android 11 での実機動作を確認し、Expo Snack を使用している。アクセシビリティについて、モバイルアプリでの実装方法や、iOS や Android のアクセシビリティガイドラインを参考にすることをオススメしている。また、スクリーンリーダーの使い方や React Native のアクセシビリティ関連の Props、AccessibilityInfo API についても説明している。React Native の組み込みコンポーネントは WAI-ARIA と異なる振る舞いをすることがあるため、注意が必要だ。

秋だ！モバイルアプリもアクセシビリティーやっていこう！ --freeeのモバイルチェッックリストの紹介--

freee 株式会社におけるこれまでのモバイルアプリのアクセシビリティー改善の経緯、モバイルアプリ向けチェックリストの概要に触れた上で、モバイルアプリでよくあるアクセシビリティーの問題とその解決策について紹介している。

A beginner’s guide to manual accessibility testing

自動化されたテストと手動のアクセシビリティテストは、アクセシビリティの問題を見つけるために共に使用される。自動化されたテストではすべての問題を見つけることはできないため、手動テストが必要である。手動のアクセシビリティテストでは、アシスト技術、キーボード、ズーム機能を使用して、実際の障害者ユーザーのようにウェブサイトやソフトウェアをテストする。この記事では、手動テストの重要性、手動テストの準備、キーボードテスト、スクリーンリーダーテスト、ズームテスト、手動テストをプロセスに組み込む方法について学ぶことができる。

axe-core の Rules がテストされるまでをざっくり書く

この記事は、アクセシビリティテストツールである Axe と、そのコアとなる OSS である axe-core について説明している。本文では、axe-core の基本設計や、ルール・チェック・リザルトについて詳しく解説している。また、ルールやチェックは JSON 形式で書かれ、スペックに基づいてテスト対象の要素を絞り込み、関数によって評価が行われる。リザルトは、ルールやチェックの評価結果や重大度などを含むオブジェクトとして返される。

Adobe MAX「Adobe Colorで始めるUIのカラーユニバーサルデザイン」

色の感じ方は人それぞれであり、UI デザインにおいてこの問題に対処することは一般的な課題である。Adobe Color のアクセシビリティツールは、多くのタイプの人が知覚できる色の組み合わせを提供し、その助けとなる。カラーユニバーサルデザインのプロが、Adobe Color でこのツールを試し、その効果を評価し、自分の UI デザインでこのツールをどのように活用できるかを紹介する。

アクセシビリティツリーを読んでアクセシブルな実装に役立てよう

アクセシビリティツリーについて説明している。アクセシビリティツリーは、DOM ツリーに基づいて生成され、支援技術に提供される情報であり、role、name、description、state などの情報を持つ。これらの情報を確認することで、アクセシビリティ対応に役立つ。また、アクセシビリティツリーを読み取ることで、アクセシビリティ上の欠陥に気づける。Chrome では、検証モードの Accessibility のタブ Enable full-page accessibility tree にチェックを入れることで、アクセシビリティツリーを確認できる。

コーディング後や納品時に確認する62のチェックリスト - BUILD

Web デザイン制作の際に、品質基準を定め、品質を維持するためのチェックリストを紹介している。チェックリストには、コンテンツの校正、表記ゆれや誤字脱字、リンク切れやダミーテキストのチェック、コーディングのデザイン通りのチェック、検索サイト用の情報の記述など、納品前に確認すべき 62 項目が含まれている。チェックリストを使用して表示確認を行い、クライアントに提出することで安心感を与えることができる。

AAA11Y

当サイトは、ウェブアクセシビリティに配慮し、私たちが素敵だと思った Web デザインを紹介するギャラリーサイトである。公共機関などと同様に Web デザインにもユニバーサルデザインがあたりまえの社会が少しでも早く訪れることを支援するために私たちは当サイトを運営している。

いまどきの親切設計 【UI】

The Last of Us Part I における多彩なアクセシビリティ設定について、『星のカービィ』『大乱闘スマッシュブラザーズ』などのディレクターである桜井政博氏が解説している。

『The Last of Us Part II』アクセシビリティ機能の詳細を紹介

2020 年 8 月 14 日に実施されたアップデートにより、『The Last of Us Part II』にはアクセシビリティ機能が 60 以上追加され、視覚、聴覚、運動の 3 つのアクセシビリティプリセットが用意された。それに加え、ユーザーは自分のカスタム操作設定を作成できるようになった。これらの機能を活用し、多くの人々が最高のゲーム体験をすることができるようになっている。

freeeが挑戦するインクルーシブデザイン UXリサーチとアクセシビリティの交点とは？

クラウド会計・人事労務ソフトの freee 株式会社の UX デザイナーが登壇し、「インクルーシブデザイン」の枠組みにおけるアクセシビリティ向上の具体的な取り組みについて話した。視覚障がい当事者を抱える同社でのアクセシビリティ向上に向けた取り組みについても話された。

アクセシビリティの琴線に触れるいくつかのアプローチ

デザイナーやエンジニアがアクセシビリティに共感し、取り組むためのパターンとして、「人権」「福祉」「法の遵守」「技術的な正しさ」「好奇心」「ニーズ」「当事者」「リアルユーザーの声」「使命感」など、「人には人のアクセシビリティ」があると考えられている。それぞれのパターンによって、アクセシビリティに対する動機や考え方が異なる。

ぼくとわたしのアクセシビリティ原稿を公開します

フリーランスのテクニカルディレクターであり UI の構築や UX 領域を得意とするエンジニアである道家氏による発表。発表者がアクセシビリティに取り組み始めた経緯や自身の考えを語る。また、全盲のエンジニアの発表を聴き、障害とアクセシビリティについて考えるようになったことも紹介されている。

Webアクセシビリティ難しすぎる問題

Web アクセシビリティは重要なものであり、誤解も多いと感じる。視覚障害者だけでなく、多様な障害を持つユーザーを対象とする Web アクセシビリティは、WCAG (Web Content Accessibility Guidelines) や企業のガイドラインで定義されているが、理解するのは難しいと思う。デザインからテクノロジーまで幅広い知識が必要であり、デザイナーとエンジニアの両方がアクセシビリティに詳しいことは難しいと思っている。

Webエンジニアとしていま知っておきたいWebアクセシビリティ

この文章は、Front-End Study #3「『当たり前』をつくりだす Web アクセシビリティ」で基調講演をするための整理である。Web アクセシビリティは「アクセス可能性」または「利用のしやすさ」を目的としているが、「ユーザビリティ」との違いも含めて解説している。「Web アクセシビリティ」は「誰でも」「どんな状況でも」を目指しているのに対して、「障害者や高齢者のための」という誤解がある。Web 開発においてはターゲットを意識することも大切だが、「誰でも」「どんな状況でも」を目指すことも重要だ。

Webアクセシビリティの必要性を伝える材料になりそうな情報をまとめてみた

この記事ではアクセシビリティを社内で実装する際に周りの人を説得するための材料をまとめている。本記事はヒューマンケースとビジネスケースという考え方を基に、アクセシビリティの利点を示す情報を紹介している。アクセシビリティはハンディキャップを抱えた人のためだけのものではなく、全ての人のためのものであることにも触れている。ヒューマンケースには W3C による実際の Web 利用談が参考になる。

Learn Accessibility

このコースは、障害者が有意義かつ等価な方法でウェブサイトやアプリと対話することができるように設計・開発する「デジタルアクセシビリティ」について学べるものだ。デジタルアクセシビリティの概念や意義、アクセシビリティの計測方法、ARIA や HTML の利用法などを学べる。また、画像、色・コントラスト、タイポグラフィ、動画・音声、フォームなども扱われる。自動テストや手動テスト、アシスタントテクノロジーのテストも学べる。

デザイン周辺勉強会「Disabilityとデザイン」

ノーマライゼーション、デザインフォーオール、バリアフリー、ユニバーサルデザイン、アクセシブルデザイン、インクルーシブデザイン、情報アクセシビリティなどの立ち位置の違いについて考察。また、それらは UX デザインや、HCD（人間中心設計）のプロセス、情報設計、UI デザインあたりとどういう関係性にあるのかを検討している資料。

全てのメンバーにアクセシビリティー研修を実施しはじめました + 研修資料を公開します

freee 株式会社では、アクセシビリティー・ガイドラインの策定と、誰でも使えるアクセシブルな製品開発に取り組んでいる。最近では、10 月から新入社員向けのアクセシビリティー研修を拡大し、内容を整理した。この研修は、「アクセシビリティー研修 for All freeers」、「アクセシビリティー研修 Basic」、「アクセシビリティー研修 Advanced」の 3 つの部分から構成されており、新入社員には「アクセシビリティー研修 for All freeers」が必修となっている。この研修を通じて、新入社員たちはアクセシビリティーに関する理解を深め、仕事においてアクセシビリティーを考慮することを期待されている。

WAI-ARIAを学ぶときに整理しておきたいこと

このテキストでは、ARIA 属性を使用する前に知っておくべき重要な事項について詳しく説明している。まず、HTML 要素に対応する暗黙のロールを理解し、プロパティやステートを設定する前に適切なロールを把握することが重要である。また、role 属性を使用する際には、上書きできないロールが存在すること、既に要素に対応する適切なロールがある場合はそれを使用すべきであること、暗黙のロールを明示的に宣言する必要はないこと、そして抽象ロールにも注意を払う必要があることを知っておく必要がある。これらの指針を頭に入れながら、ARIA 属性を適切に使用することが重要である。

WAI-ARIA中級編 ロールの決まり方

WAI-ARIA では、要素には暗黙的なロールが与えられており、role 属性を使用することでこれを上書きすることができる。ただし、上書きできないロールも存在する。要素の種類、属性、構造によって暗黙的なロールが決まるため、これらを考慮して暗黙的なロールを理解する必要がある。また、role 属性を使用して明示的なロールを指定することもできるが、仕様にないロールや抽象ロールは無視される。

【アクセシビリティ】WAI-ARIAを完全に理解した。

WAI-ARIA（Web Accessibility Initiative Accessible Rich Internet Applications）は、W3C が策定したアクセシビリティ向上のための仕様であり、HTML では表現できない意味を属性で補完することができる。これにより、スクリーンリーダーなどの支援技術を利用して、障害を持つ人々に対しても適切な情報を提供することが可能となる。WAI-ARIA では、role 属性や aria 属性が定義されており、これらを適切に活用することでアクセシビリティを向上させることができる。ただし、WAI-ARIA は必要な場面でのみ使用することが推奨されており、HTML 要素の意味を変えないように注意する必要がある。また、フォーカス可能な要素には role=presentation や aria-hidden=true を使用しないようにすることも重要である。

タブ型UIのアクセシビリティを向上させてみよう！｜bonji810｜note

今回は「タブ型 UI」に関する記事で、Web サイトや Web アプリ開発者向けにタブ型 UI のデザインと実装方法について解説している。タブ型 UI はアクセシビリティを考慮することで、ユーザーに情報を効率的に伝えることができる。記事では、タブボタンとタブパネルのアクセシビリティを向上させるための方法について詳しく説明している。

アコーディオンUIのアクセシビリティを改善してみよう！｜bonji810｜note

今回は「アコーディオン UI」に関する内容を取り上げる。アクセシビリティを向上させることで、キーボード操作によるアコーディオンパネルの開閉やスクリーンリーダーの使用が容易になる。記事では、マークアップの方法やアクセシビリティの向上策について説明している。公開されている URL を参照し、キーボードやスクリーンリーダーを使って操作してみると良い。

カルーセルUIのアクセシビリティを向上させてみよう！｜bonji810｜note

カルーセル UI をアクセシブルにすることで、ユーザーの利便性が向上する。スクリーンリーダーを使用する場合でも、アクセシブルなカルーセル UI の実装が重要である。本記事では、マークアップの方法やスライドの操作、スライドコントロールボタンやスライドコントロールタブなどに関するアクセシブルな実装方法について説明する。

table要素内にth要素が必要な理由

スクリーンリーダーを使用して Web ページから情報を取得する際には、テーブルからの情報取得に工夫が必要である。テーブルの th 要素を設定すると、スクリーンリーダーはデータセル（td 要素）の内容を読み上げるだけでなく、対応する見出しセルの内容も読み上げる。たとえば、カレンダーでは、th 要素を設定することで曜日と日付を関連付けて確認できる。また、列方向への移動も可能であるが、スクリーンリーダーやブラウザの組み合わせによっては利用できない場合がある。th 要素はスクリーンリーダーユーザーが情報を正確かつ迅速に取得できるようにするために重要である。

<dialog>内でautofocus属性がほぼ必須になる話

HTML Standard の dialog 要素に関連する変更があり、Scott O'Hara 氏の提案の一部がマージされた。追加された autofocus 属性は、ユーザーがすぐに対話することが予想されるダイアログの子孫要素または dialog 要素自体に使用することが推奨される。ただし、まだ各ブラウザで実装されていない箇所もあり、改善が必要な部分も存在する。また、dialog 要素の概要も変更された。

アクセシブルじゃないクリックイベントを発見する

このスクリプトはアクセシビリティのチェックとデバッグに使用される。スクリプトを実行することで、アクセスできないクリックイベントを持つ要素を特定することができる。視覚的には、要素に赤い枠線が強制的に表示され、I_AM_NOT_ACCESSIBLE というクラスも追加される。このスクリプトは DevTools のコンソールから実行されることを前提としているが、同様のテストを自動化する場合は acot を使用することをおすすめする。

react-modal のアクセシビリティまわりの実装を読む

React-modal のアクセシビリティに関する内容を調査した。アクセシビリティには、app element、Keyboard Navigation、ARIA attributes の 3 つの機能がある。app element は、スクリーンリーダーを使用するユーザーのための機能であり、モーダルが開いている間、ページコンテンツを非表示にする役割を果たす。Keyboard Navigation は、モーダルが開いている時にキーボード操作をモーダル内に制限する機能である。このアクセシビリティには注意点もあるが、推奨される使い方に従えば問題なく利用できる。

アクセシブルなアコーディオンの実装について考える

この記事では、アコーディオン UI の実装について考察している。アコーディオンは、垂直方向に積み重ねられた見出しとコンテンツから構成される UI であり、ページのスクロール量を減らすために使用される。記事では、HTML タグの修正、キーボード操作、WAI-ARIA の実装などについて考察している。アクセシブルなアコーディオンの実装を行う際には、ARIA Authoring Practices Guide (APG)を参考にすることが推奨されている。

アクセシブルなモーダルダイアログの実装について考える

モーダルダイアログの実装について、WAI-ARIA 1.2 と ARIA Authoring Practices Guide (APG)を参考に考察した。モーダルダイアログは、アクティブなダイアログウィンドウの外にある不活性なコンテンツを視認性を低くする。ユーザーは不活性なコンテンツを操作できず、Tab キーや Shift + Tab キーでもダイアログの外にフォーカスを移動させない。また、Escape キーでダイアログを閉じ、ダイアログを閉じた時には通常呼び出した要素にフォーカスを戻す。モーダルダイアログ要素には role=dialog と aria-modal=true を付与する。また、ダイアログのタイトルを参照するために aria-labelledby 属性や、主な目的やメッセージを説明する要素を参照するために aria-describedby 属性も使用できる。

SPA(Next.js)のスクリーンリーダーによる画面遷移で工夫したこと

Single Page Application (SPA) の画面遷移に関する問題を紹介している。問題としては、Route Announcer が次ページのタイトルを読み上げることでページ遷移したことをユーザーに知らせるが、ユビー AI 受診相談ではページごとにユニークなタイトルを設定するのが難しいという問題がある。また、Route Announcer にはスクリーンリーダーのカーソル位置を修正する機能がないという問題もある。解決策としては、Next.js の Route Announcer を無効にして、独自実装した見出しにフォーカスを当てる機能を採用することで問題を解決した。

React で h1-h6 を正しく使い分ける

React などのコンポーネントベースのライブラリを使用する際に、HTML の見出し要素 h1-h6 が正しくマークアップされていないことによって生じるアクセシビリティや SEO 上の問題を説明している。見出し要素はウェブページの構造を示し、スクリーンリーダーや検索エンジンによって理解される。また、見出し要素は階層構造に対応しており、一定の順番で使用する必要がある。本記事では、見出し要素の不適切な使用によって生じる問題と解決策を紹介している。

今からでも遅くない！誰も教えてくれなかった React とアクセシビリティーの世界

Front-End Study #3 で発表されたライブコーディングの内容を記事にしたものである。記事では、React と Next.js を用いてアクセシビリティについての普遍的な事実を紹介している。記事には、基本事項、セマンティック、スタイリング、アクセシブルな名前の設定、ランドマークと見出し、隠し要素などが含まれている。読者は、アクセシビリティに関する普遍的な事実を学ぶことができる。

アクセシビリティ第一歩、labelが超重要な話。~ placeholderじゃダメなの？~

アクセシビリティにおいて、label 要素は重要な指標の一つであり、適合レベル A に達していないと支援技術を使ってもサービスを利用できないことを意味する。label 要素によって選択が容易になり、音声読み上げが可能になる。一方で、label 要素がない場合、スクリーンリーダーの使用者は入力欄の項目名を知ることができず、エラーの解決方法も分からなくなってしまう。代わりに placeholder を使っても、ユーザーの短期記憶に負荷をかけたり、入力内容を確認できないというデメリットがある。

React Testing Libraryでテスト駆動アクセシビリティ改善

React Testing Library には、アクセシビリティをテストする機能はないが、公式ドキュメントを読んで API の利用方法を理解し、アクセシビリティの高い状態にすることが正しいアプローチである。React Testing Library には、いくつかのクエリメソッドが用意されており、DOM 要素を取得するために使用できる。高い優先順位のクエリでは、タグの種類や aria-role を利用して DOM を検索することができるため、アクセシビリティに配慮したテストを記述することができるようになる。

「１文字ずつ表示」させただけで終わるのはエアコンつけたまま実家に帰るのと同じ【アクセシビリティ】

1 文字ずつ表示する演出はよく要求されるが、アクセシビリティを考慮したコードが重要である。大量生成された span に aria-hidden=true を指定し、スクリーンリーダーユーザーに配慮する必要がある。また、隠れている部分を clip-path で実現する方法が紹介されている。

読書アシストの実装方法について考えてみる

読書アシストの「4. 冒頭文字を階段状に字下げする表示方式」の実装方法について説明している。CSS シェイプ（shape-outside プロパティ）を使用して、図形にテキストを回り込ませる方法を解説している。最大字下げ、最初の字下げ行数、続きの字下げ行数を CSS カスタムプロパティとして設定し、多角形を作るために polygon()を使用している。行の高さもカスタムプロパティに設定し、汎用化にも考慮している。

label で input[type='file'] を装飾するな

ファイル選択の装飾において、よく見られる誤った label 要素の使い方に対して、正しい方法を紹介している。input 要素を非表示にし、button 要素を使用してクリック時に input の click イベントを発火させる方法が、アクセシビリティに優れている。この方法は Twitter や react-dropzone などでも採用されている。button 要素が適切でない場合は、role 属性と tabindex 属性を使ったアクセシビリティに配慮した div 要素を使用することも考慮すべきである。

実装しながら理解するモーダルのアクセシビリティ with React

アクセシビリティ要件を満たすモーダルの実装方法を説明している。実装する要素には、WAI-ARIA 属性の付与、フォーカスの自動移動、フォーカスのトラップ、Esc キーでのモーダル閉じる機能、モーダル外クリックでの閉じる機能が含まれている。また、モーダルが開いている間は、モーダル以外の要素に aria-hidden 属性が付与され、スクロールも無効化される。これらの機能を実装することで、アクセシビリティの高いモーダルを作成することができる。

Xtend UI　A11y規格、アクセシビリティにも配慮されているフロントエンドライブラリ

フロントエンドライブラリ Xtend UI は、シンプルでカスタマイズ性が高く、A11y 規格にも準拠した UI 設計をサポートしている。内部では Tailwind.css、vanilla.js、Gsap を使用し、基本的なコンポーネントや機能を提供している。カスタマイズは tailwind.config.js の設定変更やユーティリティークラスの追加によって行える。ただし、TailwindCSS や Gsap の知識が必要となる。リリース後も頻繁に更新されており、今後も注目されるライブラリとなっている。

テキストのサイズ変更やリフロー、400％拡大にまつわる話

axe-core の活用やコーディングについて取り組みが紹介されている。JIS X 8341-3:2016 の適合レベル AA 準拠の Web サイトコーディングを担当し、達成基準 1.4.4 のテキストサイズ変更に関して疑問が生じた。この問題はアクセシビリティよりもユーザビリティに関連しており、リフローによるコンテンツの改善が達成基準 1.4.10 と関連していることが分かった。結果として、400%拡大時でも横スクロールなしで閲覧できることが確認された。

拡大に強くなる！アクセシビリティ実装の紹介

アクセシビリティ改善に向けた拡大表示に関する CSS テクニックを紹介している。初心者でも理解しやすく、WCAG 達成基準とブラウザ拡大機能について説明し、実装ポイントとして rem の使用を推奨している。rem はブラウザの文字サイズ設定を基準とした相対単位であり、拡大機能に対応することができる。さらに、Media Query においても相対値で指定することで、拡大表示に適切に対応できるが、Safari ではバグが確認されている。

WAI-ARIA勉強会

WAI-ARIA 一点集中の勉強会。基礎から、ブラウザやスクリーンリーダーなどの支援技術のサポート状況、実際の UI の実装、テストへの応用、そして W3C や WHATWG の仕様策定はどうのようになっているのかまで解説。

高まるウェブアクセシビリティの需要〜フロントエンド最前線〜

Web アクセシビリティの専門家である桝田草一氏と平尾ゆうてん氏によるパネルディスカッション。「ウェブアクセシビリティを知ってはいるが、まだ本格的に始められていない、フロントエンドの知見を増やしたい」という人向けに、明日から活用できる学びを提供する。

なぜ「タブ」はスクリーンリーダーで読めない？ タブをアクセシブルにする | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い

ユーザーテスト結果から、タブの問題がスクリーンリーダーでのアクセシビリティに影響を及ぼしていることが判明した。HTML は「タブ」インターフェイスをサポートしていないため、ウェブ上のタブは正しく扱えない。目標は、「スクリーンリーダーのユーザーにも情報が伝わるようにする」ことであり、適切な対応策を選択する必要がある。

なぜテーブルを使うのか？STUDIOのCMSテーブルで学ぶ｜akiho｜note

STUDIO CMS テーブルの使い方とその理由を紹介している。ボックスレイアウトと CMS テーブルの違いは、スクリーンリーダー利用時の体験が異なる。CMS テーブルでは 2 次元の操作が可能で、見出しセルとデータセルが組み合わせられる。CMS テーブル利用時のポイントは、見出しセルを使うことと、テーブルの直前に見出し要素を配置することだ。これにより、スクリーンリーダー利用者にとって理解しやすい情報が提供される。

アクセシブルなWebサイトを作ってみた：その2。STUDIO PARTNERSとフォーム編｜いっちゃの雑記｜note

アクセシブルな Web サイト作成におけるフォームの改良について紹介している。STUDIO PARTNERS 公式サイトのフォーム制作過程で、使いやすさやスクリーンリーダー対応などの工夫が取り入れられ、アクセシビリティの向上が図られた。記事では、必須項目の視覚化、縦の流れの明確化、プレースホルダーの使用を避けるなどのポイントが解説されている。

アクセシブルなWebサイトを作ってみた：その1 STUDIO PARTNERSとマシンリーダビリティ編｜いっちゃの雑記｜note

STUDIO PARTNERS 公式サイトのリニューアルオープンに伴い、マシンリーダビリティとアクセシビリティに焦点を当てたデザイン手法を紹介している。記事では、ボックス構造、見出し、フォーム、alt 属性、アニメーションなどの実装方法を解説しており、Web サイト制作者がすぐに応用できる内容が含まれている。アクセシビリティを重視し、多くの人が快適に利用できる Web サイトを目指すことが重要だ。

AccessiブルGoGo!

様々な Web コンテンツをスクリーンリーダーがどのように読み上げるのかを動画で紹介。いろいろな HTML コードのサンプルを使って、実際にどのように読み上げられるのかを分かりやすい解説とともに提供している。

スクリーンリーダーはどうやってライブリージョンを読み上げるのか

NVDA 日本語チームのにしもつ氏の WAI-ARIA の紹介記事。WAI-ARIA は HTML 要素に対して支援技術に伝える情報を追加しセマンティクスを強化するもので、特に「ライブリージョン」ロールは、対象要素の内容が更新されたことをスクリーンリーダーに能動的に読み上げるために役立つという。他、アクセシビリティ・サポーテッド情報と UI オートメーションについても触れている。

alt属性をよくわかっていなかった私が代替テキストを書けるようになった話

alt 属性は HTML の img 要素に付随して、代替テキストを提供する。代替テキストを適切に設定することで、画像が読み込めない場合やスクリーンリーダーで利用される場合にアクセシビリティを向上できる。代替テキストを書く際には、画像がなくても文意が同等であり、読み上げ時に内容が通じるように心がけることが大切だ。

altは入ってれば良い訳じゃない！？alt勉強会を開催

note のデザイナー沢登氏がアクセシビリティ勉強会を開催し、画像の alt 属性について共有している。今回の勉強会では、エンジニア・デザイナー向けに alt 属性の正しい使い方を学び、適切な alt を選ぶ方法や注意点を共有した。社員への意識の浸透が求められ、アクセシビリティ向上を目指していく。

コンテンツ作成時のアクセシビリティのチェックポイント〜だれでも読みやすい記事への道

記事の音声読み上げ機能が理解できないことにショックを受け、note ではアクセシビリティ研修を企画している。研修では、画像の alt テキスト設定、リンクの工夫、タイトル・見出し・映像・PDF の配慮が重要だ。アクセシビリティは障害者や高齢者だけでなく、すべての人のためのものである。

STUDIOを使って、アクセシブルなWebサイトを作ってみた：その3。STUDIO PARTNERSとaltテキスト編｜いっちゃの雑記｜note

STUDIO を使ったアクセシブルな Web サイト制作において、alt テキストの設定が重要であることを説明している。alt テキストは、画像を視覚的に見ることができない人や環境に対応するための「代替テキスト」として、スクリーンリーダーなどの支援技術を利用するユーザーにとって必要不可欠なものであるとされている。

全盲エンジニアがiOS/Android/WebUIエンジニアにダメ出しした結果

2019 年 7 月 30 日に開催された「Japan Accessibility Conference Vol.2」のセッションの 1 つ『全盲エンジニアが iOS/Android/WebUI エンジニアにダメ出しした結果』の動画。パネルディスカッション形式で、障害当事者で自社サービスのユーザーでもある中根雅文氏が、サービスを実装している社内のエンジニアに対して送った“建設的フィードバック”について各エンジニアが答えている。そのほか、開発の中でアクセシビリティーを意識するようになったのはいつ頃か、アクセシビリティーを意識した開発に必要な情報はどのように集めているか、アクセシビリティー改善に取り組んでみて直面して難しかったことや簡単だったことなどの質問にも答えている。

「誰もが使える」デザインを生み出すために

WP ZoomUP #14 で伊原力也氏が発表した『「誰もが使える」デザインを生み出すために』の配信動画。アクセシビリティ対応で何をやるかは多く語られているが、いつやるかはあまり語られていないことを引き合いに、WCAG2.1 にある 78 個の達成基準のうち 56 項目についてはコーディングに入る前に対応が可能だと言う。サイトマップ、コンテンツ、ワイヤーフレーム、フォーム、ビジュアルデザイン、プロトタイピングのそれぞれのプロセスでアクセシビリティを向上させる勘所、達成基準に含まれるがデザインプロセスの中で失われやすい項目、コーディングプロセスに入ってからも気をつけなければならないことが紹介され、WCAG のガイドラインをさらに短く要約した文章も述べられている。

アクセシビリティセミナー2019 開催報告

CEATEC JAPAN 2019 で開催されたアクセシビリティセミナー 2019 のレポート。Web アクセシビリティについての 2 つのセッションが行われ、第 1 セッションは障害者の Web の利用方法を知る内容が、第 2 セッションはなぜ企業が Web アクセシビリティに取り組む必要があるかが紹介されている。アンケートの結果も掲載され、セミナーへの参加者からは高い関心が寄せられたことが伺える。

「すべて」の人にWebコンテンツの価値を届ける品質

2019 年 11 月 2 日に開催された「リーダブルな昼下がり」のセッションの 1 つ、株式会社サイボウズの小林大輔氏による『「すべて」の人に Web コンテンツの価値を届ける品質』のスライド。「アクセシビリティ＝障害者のための特別対応」なのか？という問いかけに始まり、障害とは個人と社会とのミスマッチであること、大きなミスマッチを経験した人が障害を解決する鍵を握っていること、マシンリーダビリティとヒューマンリーダービリティの向上で解決できることが話され、「アクセシビリティ＝ Web 本来の力を活かしきること」とまとめられている。

覚醒するアクセシビリティ (WordCamp Tokyo 2019)

どんなエンジニアになろうか決めかねていた自分が、ある日突然「私はウェブをやるために生まれてきた」と思うに至った、アクセシビリティの話。「アクセシビリティって何？」という人から、「大事なのはわかっているけどいつも後回しにしてしまう」という人まで、明日からアクセシブルな実装をせずにはいられない、ウェブの本質に迫る。

スライド

シビックテックとアクセシビリティ

2019 年 7 月 30 日に開催された「Japan Accessibility Conference Vol.2」のセッションの 1 つ『シビックテックとアクセシビリティ』のスライド。シャムロック・レコード株式会社が開発している『UD トーク』でインクルーシブな社会を実現できるという話と Code for Nerima、シビックテックの話が語られている。

アーカイブ動画

ウェブ制作に活かすユニバーサルデザインの視点

ユニーバサルデザインの考え方を取り入れてウェブ制作に活かす例が紹介されている。色覚特性、コントラスト比、色情報を唯一の手がかりにしないこと、UD フォントの利用、1 行あたりの文字数、行間、文字揃えなど。あらゆる箇所に適用するのではなく、必要な箇所に、目的にあった方法を選択しましょうと語れている。

アクセシビリティを高めるCSS

CSS で対応できるアクセシビリティ改善例が紹介されている。フォーカスリングを消さないこと、ヒットエリアを広げるテクニック、order プロパティでマークアップを変えずに要素の並び順を制御するテクニック、テキストフィールドで placeholder を使わずに placeholder のように表現できるラベルのテクニックが紹介されている。

当社サイトリニューアルとWebアクセシビリティ

株式会社 LAB がウェブサイトをリニューアルした際に JIS X 8341-3:2016 の適合試験を実施したもののうまくいかなかった話。チェックリスト作成の難しさ、AS を検証するために PC-Talker が必要だが高価なので入手しづらいこと、達成基準の用語が分かりにくいこと、試験結果をチームメンバーとどう共有するかなどの課題があったことが紹介されている。

「アクセシビリティ」と「難易度」は別物である

ゲームソフト『Sekiro』にアクセシビリティを求める声が、ゲームの難易度を下げたイージーモードを求める声と混同されているとする話の翻訳記事。

しかし、翻訳した編集部によると、アクセシビリティと難易度が混同されているという前提はそれほど見られず、ほとんどはゲームが難しすぎることに対した素直な意味でのイージーモードを要求している議論が多く、それらの議論ではユーザビリティに近い意味でアクセシビリティという言葉を意図的に使っているのではないか、と推察しているという。

Webアクセシビリティのスキルがビジネスへと繋がる時代

2019 年 7 月 30 日に開催された「Japan Accessibility Conference Vol.2」のセッションの 1 つ『Web アクセシビリティのスキルがビジネスへと繋がる時代』のスライド（PDF）。株式会社ミツエーリンクスの中村精親氏と株式会社コンセントの秋山豊志氏が、Web アクセシビリティを自社のビジネスに繋げた話がそれぞれ紹介されている。ミツエーリンクスでは JIS 規格準拠を目指すクライアントへの検証と試験のニーズを挙げ、コンセントは「Web アクセシビリティはデザインに含まれるもの」とし、クライアント企業の伴走者となって Web 戦略支援のニーズを挙げている。他、両社とも Web アクセシビリティをビジネスにつなげるためには専任チームを組織することから始めている話なども語られている。

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

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

【クロージング・トーク】インクルーシブネスを超えて

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 つ、澤田望氏の『代替テキスト決定ツリーの使い方』のフォローアップ。スライドと動画が公開されており、代替テキストには多様性があることの発表に対してさまざまな意見が寄せられたとのこと。岡山の勉強会「リーダブルな夜」の紹介も書かれている。

辻ちゃん・ウエちゃんのアクセシブル GO GO!!「スクリーンリーダーで『Backlog』を使ってみる

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 の力を活かすことであると述べられている。

私たち障害当事者ですが質問あります？ - Ask Us Anything

2019 年 7 月 30 日に開催された「Japan Accessibility Conference Vol.2」のセッションの 1 つ『Ask Us Anything』の動画。全盲・弱視・ロービジョン・色弱・難聴・肢体不自由の障害当事者との質疑応答が収録され、「Web や ICT 技術によってできるようになった例を教えて」「企業や団体の最近のアクセシビリティ関連の取り組みでよかったものは？」「WCAG、JIS X 8341-3:2016 は当事者に認知されているか、障害者差別解消法の施行についてどう感じているか？」「多くの官公庁サイトで実装されている文字拡縮・色反転・読み上げ機能は使ってるか？」「障害当者と健常者のコミュニケーションで、どうであったら嬉しい・ありがたいなどあるか？」の 5 つの質問に答えている。

「UIデザイナーのスキルマップ」にアクセシビリティスキルを入れた話

Chatwork 株式会社のプロダクトデザイン部では UI デザイナーのスキルマップにアクセシビリティスキルが含まれており、Web サイトやプロダクトで同社のアクセシビリティ方針を実践するべきと話している記事。アクセシビリティスキルは「アクセシビリティの必要性を理解して、具体的にやるべきことを提案・実現するためのスキル」と定義され、4 つのレベルに分かれている。

伊原さんと話すアクセシビリティ - アクセシビリティのガイドラインとは | CodeGrid

株式会社ピクセルグリッドのメンバーと freee 株式会社の伊原力也氏の座談会の後編。WCAG 達成基準の A の線引きの話、alt やコントラスト比で生まれる「虚空」問題、発注者自身にもアクセシビリティや WCAG の理解が必要なこと、ガイドラインより先にユーザーを見る話、そのためにユーザーテストを行なうなどの話がされている。

伊原さんと話すアクセシビリティ - アクセシビリティ対応を訴求するには | CodeGrid

株式会社ピクセルグリッドのメンバーと freee 株式会社の伊原力也氏の座談会の中編。アクセシビリティ対応を訴求するためのターゲット論を軸に、プライバシーの観点からスクリーンリーダーなど AT（支援技術）の利用率が計測できず、アクセシビリティを必要としているユーザー数を使ったビジネスへの訴求が難しいこと、freee 株式会社では利用者の高齢化や社内事情を予想し、アクセシブルなツールを作れば労務コストが下がると試算していること、また自らがアクセシビリティ対応企業として前例となることでアクセシビリティへの意識を日本全体に広めたい狙いなどが話されている。

伊原さんと話すアクセシビリティ - アクセシビリティへのエンジニアの立場と現実 | CodeGrid

株式会社ピクセルグリッドのメンバーと freee 株式会社の伊原力也氏の座談会の前編。アクセシビリティに関心を持っているのはフロントエンドエンジニアが多いこと、受託制作会社のフロントエンドエンジニアがアクセシビリティに取り組むには業務構造的に難があること、WCAG のレベル A でも十分に壁が高いことなどが話されている。

2019年のWebアクセシビリティを振り返る：WCAG 2.1の標準化とWAI-ARIAの落とし穴

2019 年のアクセシビリティ関連の動向をまとめた連載の 1 回目。WCAG 2.1 が標準化されても JIS X 8341-3:2016 が更新される見込みは薄いこと、WCAG2.1 は WCAG2.0 から追加はあっても削除された達成基準のない上位規格なので、日本向けのプロダクトでも WCAG2.1 を満たすことを目標にして良いこと、WAI-ARIA の利用は広まってきたが、ライブリージョンを利用する場合は注意が必要であることが紹介されている。

品質と開発速度を両立させるために捨てたものと守ったもの @wadackel @masuP9

株式会社サイバーエージェントのウェブアプリケーション『WinTicket』の開発に関するスライド。p69 からアクセシビリティについてのセクションで、開発速度を上げるためアクセシビリティ対応に Must と Usual を設定し、レビュー基準とした話が紹介されている。適切な要素選択を目指しつつも徹底はしない話、十字キーのフォーカス移動をやめ全てタブキーでできるようにした話が印象的。

制作者のためのHTML

HTML は「画面を実装するためのフレームワーク」と「デザインを検証するためのフレームワーク」の 2 つの見方が出来るのではないかという話が述べられている。前者は適切な要素選択によってネイティブの機能を提供できること、後者は HTML で見出しのアウトラインを思考することでデザインカンプをより理解できることを理由にしている。この 2 つの側面を意識してウェブサイトを構築すれば結果的にアクセシブルになると言う。

世界中誰もが使えるサービスを目指して、Web標準で作るガラケーサイト @kosamari

ガラケーでも動作するウェブアプリを制作した話が紹介されている。スライドではライブラリやバンドラー、ServiceWorker などを駆使したそう。フォーカス可能な要素を絞ってアプリケーションのユーザービリティを向上させるアイデアはナルホドがある。

音声を伴う動画にはキャプション (字幕) を付ける — Accessible & Usable

Web コンテンツで音声を使用する場合は、JIS 規格で定められた基準に従い、字幕を提供する必要がある。オープンキャプションは字幕が常に表示され、環境に依存せず表示されるが、読みにくい可能性がある。一方、クローズドキャプションは表示/非表示が可能で柔軟に対応できるため、アクセシビリティの観点からはより優れていると考えられる。

韓国モバイルアクセスビリティ現況と展望

韓国ではウェブアクセシビリティ品質認証制度があり、公共機関と法人のウェブサイトにウェブアクセシビリティへの準拠が義務付けられている話が日本語で紹介されている。同国では障害者差別禁止法によって損害賠償請求が可能で、悪質な場合は懲役や罰金刑が課せられるという。

電子書籍版「デザイニングWebアクセシビリティ」制作秘話 ～ Web制作者が電子書籍を作ってみた!

Web アクセシビリティの書籍として定番の地位を獲得しつつある「デザイニング Web アクセシビリティ」。この電子版が昨年末に出版されました。アクセシビリティを語る書籍として、電子版もアクセシブルにしなければならないというミッションの課題と解決策について、Web 制作者でもある著者が語っている。

色に頼らないビジュアル表現を考える

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

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

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

映像に対する情報保障 — Accessible & Usable

動画コンテンツを Web 上で使用する場合、視覚障害者に聴覚による情報保障を提供するため、視覚によって伝わる情報に対しては「代替コンテンツ」や「音声トラック」を提供する必要があることが解説されている。

悩ましいPDFまわりのアクセシビリティ — Accessible & Usable

PDF 形式での情報提供は、効率的でありながらアクセシビリティが不十分なため、ウェブコンテンツとして提供する場合は HTML で制作すべきとする記事。アクセシビリティ向上には、タグ付き PDF をエクスポートするために元ファイルに情報構造を適切に割り当てることが重要であるという。

安全でアクセシブルなアイコン・フォント

アイコンフォントの問題点と、安全な方法で提供する方法について解説された翻訳記事。フォントが読み込まれない場合、@font-face がサポートされていない古いブラウザの場合の話や、アクセシビリティに関してアイコンフォントが適切に動作しない場合の話などが紹介されている。

地図の代替テキストを考える

「冗長な alt テキストは過分であり、意味がある画像に空の alt テキストは不充分、その間を探らないといけない」をテーマにしたツイートのまとめ。画像付近に画像を説明する十分なキャプションがある場合でも、画像の alt 属性値は空にしない方がいいのかどうか、当事者の声も一緒にまとめられている興味深い一本。

動画や音声の自動再生 — Accessible & Usable

ウェブページの動画や音声を自動再生させることについての考察。WCAG 2.0/JIS X8341-3:2010 ではユーザーが任意で再生を停止できる UI を提供することを求めている話などが紹介されている。

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

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

デザイニングWebアクセシビリティ

アクセシビリティとは何か、アクセシブルなコンテンツをどう作るかを学べる一冊。技術的なアプローチではなく、よくある問題とそれを解決するアプローチが概念的に理解できるよう解説されている。

シンポジウム「アクセシビリティ法は社会をいかにして・どのように変えてきたか―諸外国の事例を中心に」

2017 年 6 月 26 日に特定非営利活動法人情報通信政策フォーラム（ICPF）主催で開催された、アクセシビリティに関するイベントの記録。57％の国でスリーンリーダーが市場に提供されているが、公用語による音声認識が可能な国は 55％、視覚障害者向け公共図書館・電子書籍サービスが 32％、アクセシブルな政府ウェブサイトは 45％、テレビの音声ガイドは 17％にとどまっているなどの報告がされている。

コーディングWebアクセシビリティ

恐らく日本初の WAI-ARIA の解説をメインテーマにした本です。ボタンとかタブとかアコーディオンとかダイアログとかをどうマークアップすべきかが、独特な語り口で書かれています。通称緑本。

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

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

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

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

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

アクセシビリティのためのデザイン

様々な障害について、デザインする上で何をすべきか、何をしないべきかをまとめたポスターが PDF データで公開されている。もとはイギリス内務省が作成した DO/DON’T（べき/べからず）の啓発ポスターを日本語化したもの。

アクセシビリティとこれからのWebデザイン

ユニバーサルデザインやバリアフリーと Web アクセシビリティの関係性から、Web の特性そのものがアクセシビリティに通じている点、そしてこれからの Web デザインに必要不可欠な視点である点について論じられている。

アイコンフォントか？ SVG アイコンか？

「ユーザーがフォント設定をカスタマイズした場合などに、アイコンフォントが表示されない (いわゆる「豆腐」になったり、文字化けしたり、空白になったりする)。」という問題に対して考察。アイコンフォントが表示されないリスクは高いのか？

はじめての VoiceOver 対応

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

【Android】Accessibility関連セッションメモ (Google I/O '17)

2017 年の Google I/O で発表された Android のアクセシビリティ関連セッションに関する情報が紹介されている。テスト方法や、アクセシビリティを向上させるためのアプリやツールが書かれている。開発者は Accessibility Services や API を理解し、自分のアプリをテストするために「Accessibility Scanner」アプリを使用し、ユーザー調査を行うことが推奨されているという。良い体験のためのチェックリストもあり。

「インクルーシブデザイン」の二つの視点 — UX デザインの土台としてのウェブアクセシビリティ ー Accessible & Usable

「インクルーシブデザイン」がウェブアクセシビリティのガイドラインを満たすだけでなく、その先のユーザーエクスペリエンス（UX）も考えたアクセシビリティのデザインを目的としている話。障害者だけでなく利用状況によっても困難を抱えるユーザーを排除しないようにデザインされた UX が求められている。また、英バークレイズ社の「Inclusive Design Principles」が実例やノウハウを交えて紹介されている。

Web Content Accessibility Guidelines (WCAG) 2.1

W3C が公開している Web Content Accessibility Guidelines (WCAG) 2.1 を、WAIC 翻訳作業部会が訳したもの。

WCAG 2.0に加えて、「文字キーのショートカット」や「ポインタのジェスチャ」などの達成基準が追加されている。

日本のウェブアクセシビリティの産業規格である JIS X 8341-3:2016 は、本仕様でなく WCAG 2.0 を基にしている。

「WCAG 2.1 解説書」や「WCAG 2.1 達成方法集」は現在翻訳作業中。「早く日本語で読みたい！」というひとはウェブアクセシビリティ基盤委員会の翻訳作業部会に参加すると、幸せになれるかもしれない。

WCAG 2.0 解説書

W3C が公開している Understanding WCAG 2.0 を、WAIC 翻訳作業部会が訳したもの。

抽象度の高い WCAG 2.0 に対し、理解を助けるために W3C が公開している。以下のようなことが説明されている。

  • WCAG 2.0 の達成基準がどのような意図で書かれているのか
  • WCAG 2.0 の達成基準の中で用いられている重要な用語
  • WCAG 2.0 の達成基準が、どんな種類の障害にたいして、どのように役に立つのか
  • どのように対応すべきかの参考資料への動線（Techniques for WCAG 2.0 へのリンク）
  • まずい対応の事例（よくある失敗例）

いわば WCAG 2.0 の副読本。

WCAG 2.0 達成方法集

W3C が公開している Techniques for WCAG 2.0 を、WAIC 翻訳作業部会が訳したもの。

WCAG 2.0とUnderstanding WCAG 2.0は、「技術に依存しない」文書であるのに対し、Techniques for WCAG 2.0 は、具体的な HTML や CSS のコード、チェック方法を例示しつつ、どのように実装すべきか参考になる文書を提供する。

アクセシビリティ・ブルース〜 お前の alt に首ったけ 〜

澤田望氏作詞作曲によるアクセシビリティのオリジナルソング。アクセシビリティの祭典の懇親会では生演奏で披露された。

澤田氏は過去にもアクセシビリティをテーマにした楽曲を作っておられます。

miChecker

JIS X 8341-3:2016 に基づくウェブアクセシビリティ対応の取り組みの支援を目的に、総務省が開発・提供しているアクセシビリティ評価ツール。

markuplint

国産のマークアップ linter。素の HTML だけでなく React や Vue.js のディレクティブにも対応している他、エディタのプラグインもあり。

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

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

スライド

EPUB Accessibility Techniques 1.0

W3C が公開している EPUB Accessibility Techniques 1.0 を、吉村氏が訳したもの。

EPUB における、WCAG で言うところの達成方法集に相当するもの。

EPUB Accessibility 1.0

電子書籍の標準的なフォーマットである EPUB に関する、コンテンツアクセシビリティ仕様。W3C（以前は IDPF）公式文書を吉村氏が和訳したもの。

EPUB 3 Accessibility Guidelines

IDPF による公式のガイドライン(英語)。

EPUB Accessibility 1.0 が公開されるかなり前からあり、位置づけは曖昧になっている。更新はとまっているが、説明がそれなりに詳細なので上に情報がない場合は参考になる。

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

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

PDF版 WCAG 2.0 (JIS X 8341-3:2016、ISO/IEC 40500:2012) 解説書 + 達成方法集 要約(HTML+CSS+js 編)

有限会社時代工房（@jidaikobo + @sbtnbfm）ともんど氏（@momdo_）が作ったWCAG 2.0 の解説書および達成方法集の要約集。

HTML の数にして 200 を超える文書を、A4 裏表の 2 ページに無理繰りまとめたもので、一回解説書や達成方法集を読んでくじけそうになった人向けの文書。

読み上げの確認は NVDA で行われた。

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

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

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

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

Sim Daltonism

macOS 用アプリケーション。オーバーレイウィンドウでデスクトップ上の表示に色覚特性のフィルターを掛けられる。

Assistive technology compatibility tests · PowerMapper Software

NVDA、JAWS、VoiceOver などのスクリーンリーダーを含む AT（支援技術）と各ブラウザの組み合わせでテストした結果が公開されている。テストはコンテンツ、見出し、ラベル、メディア、ナビゲーション、表、PDF などのコンテンツタイプ、ARIA、HTML 属性、HTML 要素、WCAG テクニックなどの基準についてを対象にした全 186 ケース。

Androidアプリの開発者がアクセシビリティ向上のために実践したいこと

モバイルアプリの開発者やデザイナーはアクセシビリティを向上させるために以下のことを心がけるべきであるとされている。

  • コントロールはタップしやすく、幅・高さともに 48dp 以上に設定すること
  • テキストフィールドにはプレースホルダーを表示すること
  • アプリが目に見えるカスタムコントロールを持っている場合、仮想ビュー階層を提供すること
  • 小さなコントロールには説明を追加すること