2022年

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

参考資料

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

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

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

アクセシビリティ推進組織立ち上げ後半年間の動き - 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 のトップページからアクセシビリティに関連した改修に着手し、キーボードだけで操作できるようにするなどの変更を行った。

自社サービスのアクセシビリティ向上、良いパターンとアンチパターン

freee 株式会社で 5 年弱アクセシビリティ向上を推進し、ここ 1 年で何社か手伝いをする中で、進捗が良くなる進め方と、逆に足踏みになりがちなやり方が見えてきた。それらを良いパターン・アンチパターンとして紹介している。

スライド

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

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

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

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

スライド

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

アクセシブルFlutter: Semantics入門

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

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

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

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

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

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

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

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

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

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

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

この記事では、アコーディオン 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 上の問題を説明している。見出し要素はウェブページの構造を示し、スクリーンリーダーや検索エンジンによって理解される。また、見出し要素は階層構造に対応しており、一定の順番で使用する必要がある。本記事では、見出し要素の不適切な使用によって生じる問題と解決策を紹介している。

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

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

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

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

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 の知識が必要となる。リリース後も頻繁に更新されており、今後も注目されるライブラリとなっている。