accrefs

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

カラーモード

活動報告

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

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

アクセシビリティ改善中！ 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 人が登場して、疑問に答えたりディスカッションをしている。

プロジェクト発足から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 基準を満たすレベルのアクセシビリティガイドラインを制定し、画面仕様の変更はなくしている。最低限の知識で実践し、ガイドラインを決めてから実装に入ることで改善方針が明確になった。ドキュメント化しているため今後も継続的に改善できる。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2019年、サイバーエージェントのアクセシビリティを振り返る

株式会社サイバーエージェントが 2019 年に実施したアクセシビリティ関連の活動のまとめ。多数のプロダクトでアクセシビリティを改善した話や、エンジニアの評価制度にアクセシビリティに関する項目を新設したことなどが紹介されている。

サイボウズの組織的な取り組みとビジュアルデザイン

2019 年 6 月 1 日に開催された「CSS Nite LP62『Web アクセシビリティの学校』特別授業」のセッションの 1 つ、サイボウズ株式会社の小林大輔氏・樋田勇也氏の『サイボウズの組織的な取り組みとビジュアルデザイン』のフォローアップ。アクセシビリティをチームで取り組むことの重要性、チーム支援や議論が重要であることが強調されている。

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

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

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

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

スライド