accrefs

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

カラーモード

2021年

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

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

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

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

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

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

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

第1回支援技術利用状況調査報告書

日本視覚障害者 ICT ネットワーク (JBICT.Net) が 2021 年 4 月から 5 月にかけて実施した第 1 回支援技術利用状況調査の結果をまとめたもの。日本において、もっぱら視覚に障害がある人を対象に、どのような環境で Web を見ているのか？がわかる。

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

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

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

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

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

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

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

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

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

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 に対してどのようにプロダクトのパーソナリティを表現するかが問題となる。

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

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

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 と異なる振る舞いをすることがあるため、注意が必要だ。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

アクセシビリティからデザインを学ぼう

アクセシビリティを学ぶと、バリアフリーに始まり、ヒトと障害の多様性、さまざまな支援技術や手段について知ることができ、デザインの知識と理解が深まったという話が掲載されている。

NVDA チートシート

NVDA のチートシートが PDF とパワーポイントファイルで公開されている。