accrefs

アクセシビリティに取り組む・推進している日本企業まとめ

日本に拠点があり、アクセシビリティに取り組んでいることが分かる事例（アクセシビリティ方針、事業サービス、チームの取り組み、記事リンク等）を掲載している企業のまとめ。yamanoku 氏が随時追加している。

]]>

WPDS - Audio and Video

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

]]>

WPDS - Alt text

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

]]>

WPDS - Accessibility Checklist

ワシントンポストのデザインシステムに組み込まれているアクセシビリティのチェックリスト。スクリーンリーダーとキーボードコントロール、マルチメディア、テキスト・ラベル・ズーム設定、色、自動テストについて簡潔にリスト化されている。

]]>

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

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

]]>

アクセシビリティ方針 | ビジネスチャットならChatwork

Chatwork 株式会社のアクセシビリティ方針と試験結果が掲載されている。

]]>

WAI-ARIA対応のタブ型UIの作り方（Vue.js編）

Vue.js でアクセシブルなタブ UI を実装するコード例。

]]>

LIFULL Accessibility Guidelines

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

]]>

UXライターが挑戦！画像のALT即興ライティング大会

SmartHR 社の UX ライター 3 人が、出されたお題（画像）の alt 属性値を即興で考える様子を配信した動画。お題は 3 つあり、1 つ終わるごとに同社のアクセシビリティスペシャリストによる講評が行われた。

]]>

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

]]>

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

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

スライド

]]>

夏だ！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 名以上の障害当事者にユーザーインタビューを実施し、カイゼンを進めた。これにより、キーボード操作やショートカットキーなど、操作方法の選択肢を増やすことがアクセシブルなプロダクトにつながることが学ばれた。さらに、機能のカイゼンや社内整備、イベント登壇など、アクセシビリティ強化施策を実施している。クリエイターの意見・要望を受け、引き続き創作活動がしやすい環境づくりを進めていく。

]]>

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

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

]]>

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

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

]]>

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

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

]]>

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

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

]]>

WEB+DB PRESS Vol.125 フロントエンド羅針盤 ── Web体験向上へのアプローチ【第3回】継続的なアクセシビリティ改善の探求 ……誰もがいつでも使えるWebを目指して

サイバーエージェント社での取り組みをもとに、アクセシビリティ改善を継続的に行っていく方法について探求している。

]]>

WEB+DB PRESS 20周年記念特集「これからのWeb開発」（コラム寄稿）

「第 3 章：Web」では、かつて Web のユニバーサル性を高めたものが何だったかを振り返りつつ、これからの Web アクセシビリティの未来予想について述べている。

]]>

WEB+DB PRESS Vol.116 特集3『アプリケーションアクセシビリティ』

Web／モバイルアプリケーションでのアクセシビリティについて取り組み方から改善のノウハウ、よくある問題の解決法まで、先進的な取り組みで知れる freee 株式会社での実例も交えながら紹介。

]]>

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

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

]]>

駒瑠市〜アクセシビリティ上の問題の体験サイト〜

多数のアクセシビリティの問題を再現できるシミュレーター。たとえば、alt 属性の不備、テーブルの説明不足、フォーカス順序の不備などがある。プリセット版には障壁が設置されているが、カスタマイズ版では障壁を設定でき、URL によって個別に障壁を設定できる。

]]>

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

]]>

もしあなたが『アクセシビリティ試験』をやることになったら WP ZoomUP #68

参加者から募った Web サイトを題材に、アクセシビリティの検証の進め方や、アクセシビリティ試験の実施要件などをデモしながら解説している。

イベントページ

]]>

続・もしあなたが『アクセシビリティ試験』をやることになったら WP ZoomUP #71

参加者から募った Web サイトを題材に、アクセシビリティの検証の進め方や、アクセシビリティ試験の実施要件などをデモしながら解説している。

イベントページ

]]>

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 の利用法などを学べる。また、画像、色・コントラスト、タイポグラフィ、動画・音声、フォームなども扱われる。自動テストや手動テスト、アシスタントテクノロジーのテストも学べる。

]]>

電子決済等代行事業者協会アクセシビリティ勉強会『Webアクセシビリティの概要』

書籍『Web アプリケーションアクセシビリティ』の 1 章をもとに、Web アクセシビリティの概要について解説。

]]>

デザイン周辺勉強会「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 要素はスクリーンリーダーユーザーが情報を正確かつ迅速に取得できるようにするために重要である。

]]>

内で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 ではバグが確認されている。

]]>

PWA Night vol.35 yamanoku 登壇資料

PWA の活用方法や PWA のミライについて考えていく会「PWA Night」。そのなかでのアクセシビリティ回の登壇資料。PWA の実装を行う上でのアクセシビリティについて解説している。

]]>

アクセシビリティアプリを企画する時点で考えるべきこと (PWA Night)

PWA の活用方法や PWA のミライについて考えていく会「PWA Night」。そのなかでのアクセシビリティ回の登壇資料。PWA を企画する時点でのアクセシビリティについて解説している。

]]>

WAI-ARIA勉強会

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

]]>

Front-End Study #3「『当たり前』をつくりだすWebアクセシビリティ」

フロントエンドエンジニア向けのアクセシビリティのセミナー。「Web エンジニアとしていま知っておきたい Web アクセシビリティ」「これからもつづける Web アクセシビリティ」「実践！React で学ぶアクセシビリティ」の 3 本のプレゼンテーション。

]]>

高まるウェブアクセシビリティの需要ーfreee × ニューズピックスー〜フロントエンド最前線〜

freee 株式会社、株式会社ニューズピックスでアクセシビリティに携わっているメンバーによる、各社の取組事例のプレゼンテーション。

]]>

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

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

]]>

事例に学ぶ、ウェブアクセシビリティ〜フロントエンド最前線〜

note 株式会社、STORES 株式会社でアクセシビリティに携わっているメンバーによる、各社の取組事例のプレゼンテーション。

]]>

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

ユーザーテスト結果から、タブの問題がスクリーンリーダーでのアクセシビリティに影響を及ぼしていることが判明した。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 サイトを目指すことが重要だ。

]]>

NVDAでアクセシビリティーチェック

オープンソースの Windows 向けスクリーンリーダーである NVDA を使用して、アクセシビリティーチェックの手順を解説している。

]]>

macOS 版 VoiceOver のチートシート＋ちょっと便利になる小ネタ

macOS には VoiceOver というスクリーンリーダーがあり、視力や文字読み取りに困難を持つユーザーに役立つ。この記事では、ウェブ開発者向けの macOS 版 VoiceOver チートシートを紹介し、便利機能も解説している。PDF 版も提供されている。

]]>

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 テキストは、画像を視覚的に見ることができない人や環境に対応するための「代替テキスト」として、スクリーンリーダーなどの支援技術を利用するユーザーにとって必要不可欠なものであるとされている。

]]>

aria-expandedのよくある間違い

WAI-ARIA の中でもよく使われている属性で、コンテンツが展開されているかどうかの状態を表す aria-expanded を使う際によく見られる間違いの事例が 2 つ紹介されている。

]]>

WinTicket ウェブアクセシビリティ方針

株式会社 WinTicket が提供する『WinTicket』における、ウェブアクセシビリティポリシーと試験結果が掲載されている。不適合となった項目について詳細と対応策も掲載されている。

]]>

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

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

]]>

視覚障害がある人々にビジネス参画チャンスを freeeがアクセシビリティを意識して得た気づきとは

freee 株式会社の伊原力也氏と中根雅文氏が、アクセシビリティに取り組む意味ときっかけ、実践、今後のビジョンについてインタビュー形式で答えている記事。

]]>

サイバーエージェント：アクセシビリティへの取り組み

「サイバーエージェントのサービスを利用する全ての人が、心身の機能や利用する環境に関係なく、提供されている情報やサービスを利用できること」を目指し、ウェブサービスのアクセシビリティ向上に取り組んでいることの表明。

]]>

改善！マークアップ：パンくずナビゲーションの機能向上

パンくずナビゲーションに WAI-ARIA と構造化データを追加して、マシンリーダビリティとアクセシビリティを高めたコード例が掲載されている。

]]>

書籍『Form Design Patterns―シンプルでインクルーシブなフォーム制作実践ガイド』

土屋一彦氏による、Adam Silver 著の同名書籍の翻訳書。ロバスト、プログレッシブエンハンスメント、アクセシビリティを軸に、ウェブの特性を最大限に活かした形であらゆるユーザーにとって利用可能なフォームの実装方法が解説されている。

]]>

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

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

]]>

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

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

]]>

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

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

]]>

React-axe で React アプリケーションのアクセシビリティを向上させる

React-axe を使ってメルカリのある画面で報告された問題がどういったものかとそれを解決する方法が紹介されている。eslint-plugin-jsx-a11y、jext-axe を使った例もあり。

]]>

人事労務freeeのアクセシビリティへの取組み ~ アクセシビリティQAのススメ ~

freee 株式会社が提供する『人事労務 freee』にアクセシビリティ QA を取り入れた話。障害当事者の中根氏とマネージャーの伊原氏が担当となり、デザイン時と実装時の 2 回でチェックをしている話が紹介されている。

]]>

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

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

]]>

AI問診をささえるデザインの視点 - アクセシビリティ / 専門家との協働

AI 問診というプロダクトを設計するうえでのユーザーの多様性と、そこへの対応方法について、3 つのケースをもとに述べている。

]]>

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

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

スライド

]]>

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

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

アーカイブ動画

]]>

stylelint-a11yについて調べてわかったこと

stylelint-a11y（おそらく v1.2.1 時点）の各ルールがどのような項目なのかがまとめられている。

]]>

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

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

スライド版（Speaker Deck）『ウェブ制作に活かすユニバーサルデザインの視点 / Universal design for web design』

]]>

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

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

]]>

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

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

]]>

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

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

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

原文『“Accessibility” and “difficulty” aren't the same thing | Opinion | GamesIndustry.biz』

]]>

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

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

動画

]]>

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

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

]]>

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

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

]]>

辻ちゃん・ウエちゃんのアクセシブル 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アクセシビリティを振り返る：デザインシステムとアクセシビリティ

2019 年のアクセシビリティ関連の動向をまとめた連載の 3 回目。多くの企業が活発にデザインシステムに取り組んだ印象で、特にデザインシステムにアクセシビリティを取り入れて組織浸透を目指したものが目立ったという話が掲載されている。

]]>

2019年のWebアクセシビリティを振り返る：noteのalt属性の実装

2019 年のアクセシビリティ関連の動向をまとめた連載の 2 回目。この年話題になった note の alt 問題を引き合いに、Authoring Tool Accessibility Guidelines（ATAG）についての話が掲載されている。

]]>

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 の利用は広まってきたが、ライブリージョンを利用する場合は注意が必要であることが紹介されている。

]]>

WCAG 2.0 達成基準・実装チェックリスト

WCAG2.0 の全基準がリストアップされ、選択していくことでチェックシートが作れるウェブアプリ。シートを作成後、適応の有無・実装の可不可・試験方法の選択が画面上で行え、IndexDB への保存や PDF 出力もできる。

web アクセシビリティ実装チェックリストを作ったにて解説されている。

]]>

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

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

]]>

マークアップで改善するウェブアクセシビリティ

アクセシビリティを損なうよくある HTML の問題点と、visually-hidden を使った読み上げ可能な非表示テキスト、クリック時にアウトラインを表示しない what-input.js の利用、aria-labelledby を使った触知可能なアイコンボタンの実装など、それを改善する方法が紹介されている。

]]>

制作者のためのHTML

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

]]>

色にまつわるエトセトラ（いろいろ）澤田望

コントラストを確保するだけでなく、形や模様を工夫する方法が解説されている。

]]>

コントラスト高めでいこう澤田望

コントラスト比 4.5:1 を確保せよの話のほか、テキストのアンチエイリアス部分についての解説や「白／黒との相対輝度」についても解説されている珍しいスライド。

]]>

デザインシステムの設計とアクセシビリティの実現 @ymrl

組織が成長したことで陥ったプロダクト品質の問題を、デザインシステムとガイドラインを用いてボトムアップしようという取り組みが紹介されている。

]]>

高齢層にやさしいwebデザインって、どんなもの？ tossy

高齢者が忌避する設計がわかりやすくまとめられたスライド。高齢者に優しい設計は多くの人にとってもアクセシブルになるという。

]]>

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

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

]]>

Web App Checklist ~高品質のWebアプリケーションをつくるために~ @herablog @tokimariri

ウェブアプリケーションの品質を、サーバーサイドとフロントエンドの両面から解説している包括的なスライド。サイバーエージェントではウェブアプリ向けに専用のチェックリストを作って運用しているという。

]]>

HEX Contrast Ratio Calcurator

コントラストチェッカー。複数の色の組み合わせをまとめて検証できる。

]]>

リーダブルな夜スマホのスクリーンリーダーを触ってみよう

スマホのスクリーンリーダー（VoiceOver、TalkBack）の基本的な操作方法がまとめられた PDF ファイル。

]]>

リーダブルな夜 PC のスクリーンリーダーを触ってみよう

デスクトップ PC のスクリーンリーダー（VoiceOver、NVDA）の基本的な操作方法がまとめられた PDF ファイル。

]]>

Accessibility Testing Frameworkを使用したAndroid Accessibility Testの紹介

Android アプリのアクセシビリティについてのかんたんな紹介と Accessibility Testing Framework for Android の導入方法についてのスライド。

]]>

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

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

]]>

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

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

]]>

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

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

]]>

電子書籍のアクセシビリティとDRM

なぜ日本の電子書籍のアクセシビリティ対応が進まないのか？について、リーダーと DRM の観点から解き明かす記事。

]]>

誰でも使えるプラグインを作りたい – WordPress プラグイン開発者の視点で考えるアクセシビリティ

WordPress プラグイン『Contact Form 7』のアクセシビリティ対応事例が紹介されている。

講演動画もあり。

]]>

見落としがちなVoiceOver対応

iOS アプリで VoiceOver に対応した事例の紹介。標準の UILabel や UIButton で実装する場合は気にしなくて良いが、画像のみのボタンを使う場合は注意が必要だという。

]]>

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

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

]]>

色だけに依存しない - Accessible & Usable

色覚特性についての解説と、当事者にとって問題になる事例が紹介されている。「その 2」では検証方法や対策について書かれている。

その 2

]]>

総務省｜情報バリアフリー環境の整備｜障害者のウェブページ利用方法の紹介ビデオ

障害当事者がウェブページを利用する様子の動画が掲載されている。

]]>

第2回「アクセシビリティBAR」秋の文字サイズ変更ボタン祭り開催

JIS の達成基準の解説と、各民間企業の文字サイズ変更ボタンの調査。押しても何も起きないように見えるサイト多数。加えて、なぜ IR サイトでよく見かけるのかの推察も。

]]>

盲目のiPhoneユーザーに聞いた、視覚を使わない驚きのスマホ操作術

視覚障害の当事者へのインタビュー記事。視覚情報なしに iPhone を使ってキーボード入力をする動画が掲載されている。触知可能な腕時計や点字ディスプレイの話などもあり。

]]>

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

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

]]>

無料でできる！画像をDropBoxにアップロードすると自動でalt属性を作る仕組みをノンコーディングで作った話（Microsoft Flow）

Microsolf Flow を使って Dropbox に画像がアップロードされたら画像解析をして代替テキストを自動生成して Slack に投稿させる仕組みを作った話が紹介されている。

登壇スライドもあり。

]]>

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

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

]]>

既存 Web アプリケーションのアクセシビリティを向上させるときによくあるヤツと対応方針

アクセシビリティに不確かな人間が実装を間違えてしまう典型的ないくつかのパターンが紹介されている。

]]>

情報取得における支援技術の進展と利用シーンの変化

アクセシビリティ専門家であり、ロービジョンの当事者でもある伊敷政英氏による、Web で便利になった実体験の事例紹介。

]]>

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

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

]]>

弁護士ドットコムがアクセシビリティ向上に本気で取り組むワケ

弁護士ドットコムのアクセシビリティ向上の取り組み。アクセシビリティエンジニアの採用、障害のあるユーザーを補助する支援技術の必要性の説明、検索エンジン経由でも読みやすくするためのアクセシビリティ改善の必要性が紹介されている。

]]>

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

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

]]>

多様なユーザーニーズに応えるフロントエンドデザインパターン入力フォーム編

デザイニング Web アクセシビリティやコーディング Web アクセシビリティの内容も交えた、フォームの対応パターン。講演動画あり。

]]>

多様なユーザーニーズに応えるフロントエンドデザインパターンベーシック編

インクルーシブ HTML の書籍発売時期に合わせて行われた各種登壇の資料。ボタン、ナビゲーション、ブログ記事。リンクしているフォローアップページにスライド、動画、質疑もろもろあります。

]]>

多様なユーザーニーズに応えるフロントエンドデザインパターンアドバンスド編

インクルーシブ HTML の書籍発売時期に合わせて行われた各種登壇の資料。商品リスト、フィルターウィジェット、プロトタイピング。講演動画あり。

]]>

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

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

]]>

動画キャプションを聴覚障害者の UX として考える — Accessible & Usable

動画字幕制作では、発話以外の情報も角括弧で表現できること、字幕を表示させるタイミングと文面はバランスを考慮して細かく区切りすぎず、長すぎずに提示する必要があること、細かく書くことでユーザーが動画を具体的に想像しやすくなることが紹介されている。

]]>

動画キャプション (字幕) の表記スタイル — Accessible & Usable

動画字幕を表示する際の表記スタイルと、同一サイト内でスタイルを統一すべきという話が紹介されている。

]]>

動画キャプション (字幕) の品質基準 : FCC のルールより — Accessible & Usable

米国の連邦通信委員会（Federal Communications Commission : FCC）が発表したクローズドキャプションの品質ルールが、ウェブ上の動画メディアにも適応できそうとする記事。

]]>

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

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

]]>

動画のクローズドキャプションの作りかた (HTML5 の

video 要素を用いてクローズドキャプションをつける方法が紹介されている。

]]>

動画にキャプションをつけなきゃ　ダメよ?ダメダメ

CSS Nite Shift8 のフォローアップ。音声や状況の書き起こし方や、YouTube でキャプションを付ける方法などが具体的に紹介されている。

]]>

入門者向け alt属性の書き方アドバイス

alt 属性値の入れ方についてわかりやすくまとめられているスライド。地図の alt の書き方や、alt= でいい場合の例が解説されている。

]]>

企業サイトのWebアクセシビリティの今とこれから

企業がデジタルマーケティング時代に Web アクセシビリティに取り組む意義や有用性について紹介されている。

]]>

代替テキストの基本から応用まで

alt 属性値の入れ方についてわかりやすくまとめられているスライド。figure 要素や WAI-ARIA の活用方法も紹介されている。

]]>

一歩踏み込んだときにやりがち、ウェブアクセシビリティ向上の失敗例

アクセシビリティ向上を唱える人間が実装を間違えてしまう典型的なパターンが紹介されているスライド。

]]>

メディア事業でのアクセシビリティ展開事例 - CyberAgentではこうやってます

アクセシビリティおじさんと渋谷の alt 刑事の奮闘記。GitHub の PR での細かなレビュー、Slack の専用チャンネルでの布教、ドメイン知識にアクセシビリティ意識を根付かせる検定の実施などが紹介されている。

]]>

マークアップの最適解を見つけ出す方法

何のためにマークアップするのか？といった基本から、マークアップには正解がない中で、最適解に近づくためにはどう考えたら良いのか？といった現場での優先度決めなどの考え方を紹介しているスライド

]]>

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

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

]]>

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

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

]]>

デザイニングWebアクセシビリティコーナーの記事一覧

書籍『デザイニング Web アクセシビリティ』の 4 章と 7 章の内容がウェブページで公開されている。4 章は「ナビゲーション設計」、7 章は「コンテンツ設計」となっている。

]]>

スクリーンリーダーのテーブルまわりの対応状況を検証する（特に見出し関係） | kzakza

テーブル関連要素、特に caption 要素、th 要素、scope 属性、headers 属性に対する、主要ブラウザとスクリーンリーダーの対応状況がまとめられている。

]]>

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

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

]]>

サイトをアクセシブルにするための受発注のセオリー

アクセシビリティの要件定義の必要性、定義方法とそのアンチパターンや、問題を起こしやすい要件について解説されている。

]]>

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

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

]]>

コントラストチェッカーのばらつきと対策

チェックツールによって算出されるコントラスト比が異なり、適合結果にも影響する話が掲載されている。基準値ギリギリのコントラスト比を設定するのはリスクがありそう。

]]>

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

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

]]>

カラーユニバーサルデザイン（CUD）を意識してUIを改善した話

Chatwork の CUD を用いた UI 改善事例が紹介されている。

]]>

ウェブ制作者のための「はじめてのiOS VoiceOver」チュートリアル（初級編）

アクセシビリティのショートカット設定から、具体的な使い方が紹介されている。

]]>

ウェブ制作者のための「はじめてのiOS VoiceOver」チュートリアル（中級編：ローター）

中級編として、ローターの活用方法。見出しジャンプの例などが紹介されている。

]]>

ウェブページに文字拡大機能を置くのは「時代遅れ」 — Accessible & Usable

文字サイズ変更ボタンについての考察記事。

]]>

ウェブサイト上でみられる文字拡縮や読み上げツールについての調査

霞が関の中央省庁を対象に、どんな形で機能が実装されているのかを調査した結果が紹介されている。

ウェブサイト上でみられる文字拡縮や読み上げツールについての調査(2)｜#a11y tips:PDF とウェブアクセシビリティ by moya ｜ note

]]>

ウェブにおけるテキストライティングの重要性 — Accessible & Usable

コンテンツライティングが、ユーザビリティ、アクセシビリティ、SEO の観点から大きな役割を果たすとする記事。テクニカルライティングの手法に加え、検索キーワードを意識した語り口や、簡潔な文章構成が重要と書かれている。

]]>

インクルーシブデザインの原則 (Inclusive Design Principles)

植木真氏と土屋一彦氏による Inclusive Design Principles の日本語訳。７つの原則について概要と詳細例が掲載されている。

]]>

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

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

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

]]>

インクルーシブHTML+CSS & JavaScript

アクセシビリティを意識した、実践的なマークアップを知ることができる書籍。

]]>

アジアにおける障害者のアクセシビリティ法制 - ジェトロ・アジア経済研究所

アジア 7 カ国における障害者のアクセシビリティ法制に関する研究の中間報告が掲載されている。最終報告書は 2 年目の分析を経て作成されるという。

]]>

アクセシブルなモーダルダイアログの作り方

アクセシブルなモーダルダイアログの作り方に話を絞って丁寧に解説されている。

]]>

アクセシブルなナビゲーションデザインの考え方

アクセシブルなナビゲーション設計の考え方が紹介されている。

]]>

アクセシブルなデータグリッドを実装する

業務アプリケーションで頻繁に作るデータグリッドについて、アクセシブルなグリッドとはどういうものか、どう実装すべきかが紹介されている。

]]>

アクセシビリティ関連動画の再生リスト - YouTube

障害当事者がインターネットを利用する上で感じたリアルな意見が動画で紹介されている。古いながらも数が多く、とても貴重な資料。

]]>

アクセシビリティ対応テーマ (WordPress)

WordPress でアクセシビリティ対応のタグがついたテーマの検索結果。

]]>

アクセシビリティ・サポーテッド（AS）情報 | ウェブアクセシビリティ基盤委員会（WAIC）

｢アクセシビリティ・サポーテッド検証結果｣をふまえて、それぞれの実装方法がアクセシビリティ・サポーテッドであるかどうか、つまり達成基準を満たすことのできる実装方法であるかどうかを判断するための参考資料が掲載されている。

]]>

アクセシビリティ・ガイドラインの歩き方（初心者編）

WCAG 仕様書を閲覧する際、そもそも何が書かれているのか、どう読んでいけばいいのかの手引きが紹介されている。

]]>

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

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

]]>

アクセシビリティとは

ウェブアクセシビリティ基盤委員会（通称：WAIC）の放つ、公式感漂う SEO 的に強そうなドキュメント。Web アクセシビリティ確保と JIS の関係性について解説しています。

]]>

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

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

]]>

アクセシビリティvsセキュリティ～こんな対策はいらない！～

セキュリティ要件がアクセシビリティを阻害する例として、CAPTCHA、フォームバリデーション、セッションタイムアウトが紹介されている。

]]>

アクセシビリティ改めインクルーシブデザイン？

インクルーシブデザインの定義から、Web デザインの文脈でどのように捉えるべきかの提案や、具体的なアプローチなどが紹介されている。

]]>

アイコンフォントとアクセシビリティ：ディスレクシア（失読症）向けフォントでの表示問題について

アイコンフォントを利用していると、ディスレクシア向けの機能でフォントが置き換えられた場合にコンテンツが正しく表示されない問題が紹介されている。

]]>

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

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

]]>

わたしたち、こうしてつくっていますアクセシブルなサービス提供に向けた取り組み

Chatwork 株式会社、KDDI ウェブコミュニケーションズ、NEC、富士ゼロックスの、既存の Web アクセシビリティの概念に囚われない取り組み事例が紹介されている。

]]>

より多くの人へ届けるために Webコンテンツで「ちょっと」気をつけたいこと

Web コンテンツで非アクセシブルになりがちな例が紹介されている。特にコンテンツのライティングでアクセシビリティが向上させられる例は参考になる。

]]>

もうalt属性で迷いたくない

W3C の作成した An alt Decision Tree （「alt 属性決定木」）の翻訳記事。

]]>

はじめての VoiceOver 対応

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

]]>

なにからはじめたらいいかわからない人のための、これからはじめる『ウェブアクセシビリティ』

アクセシビリティに関心を持った実装者に見てほしい一本。講演動画あり。

]]>

これでわかる！Webアクセシビリティって？JIS X 8341-3って？

ウェブアクセシビリティ基盤委員会（通称：WAIC）の放つ入門編。Web アクセシビリティの概念から、JIS の概要までを紹介しています。

]]>

こうすれば書ける！ウェブアクセシビリティ方針と試験結果表示

JIS X 8341-3:2016 への対応を進めるにあたって必要なウェブアクセシビリティ方針の策定方法と試験結果の表示方法が紹介されている。

]]>

こうすればできる！ウェブアクセシビリティ実装のポイントと実装チェックリストの作り方

WCAG の達成基準に基づいた実装チェックリストの作成方法と、1 つの達成基準に対してどの達成方法を選ぶかのポイントなどが紹介されている。

]]>

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

]]>

Web Content Accessibility Guidelines (WCAG) 2.0

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

この文書単体ではあまり役に立つものではなく、WCAG 2.0 解説書やWCAG 2.0 達成方法集とあわせて読むようにできている。

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

]]>

Accessible Rich Internet Applications (WAI-ARIA) 1.2

WAI-ARIA 仕様勧告の日本語訳。

]]>

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 に基づくウェブアクセシビリティ対応の取り組みの支援を目的に、総務省が開発・提供しているアクセシビリティ評価ツール。

]]>

mark要素をアクセシブルにするのにaria-label属性は有効か？

みるく氏による貴重な WAI-ARIA の AS 情報。

]]>

markuplint

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

]]>

iPhone や iPad の音声読み上げ機能 (VoiceOver) — Accessible & Usable

iOS 版 VoiceOver の基本的な使い方が解説されている。

]]>

iPhone や iPad の音声読み上げ機能 (VoiceOver) (その2) — Accessible & Usable

iOS 版 VoiceOver のズーム機能とローター機能、一文字ずつ読み上げる詳細読みについて紹介されている。

]]>

iOSアプリにおけるアクセシビリティの概観メモ

UI Accessibility プログラミングインターフェイスについて概説されている。

]]>

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 が公開されるかなり前からあり、位置づけは曖昧になっている。更新はとまっているが、説明がそれなりに詳細なので上に情報がない場合は参考になる。

]]>

axe | Deque

多くのサービスに採用されているアクセシビリティ自動チェックツール。

]]>

aria-labelledby属性とaria-describedby属性を4種スクリーンリーダーで読み上げた検証結果

みるく氏による貴重な WAI-ARIA の AS 情報。

]]>

alt属性の良い事例(つけ方・書き方)

alt 属性値を考えるにあたって参考になる大量の事例が掲載されている。

]]>

altはつけるだけじゃなくて

2003 年に公開と古いものながら 2020 年に加筆修正され、多くの人がいまなお参照している、alt の考え方を示す日本語テキストの原典的な存在。

]]>

WordPressでも意識したいアクセシビリティ〜「優しいウェブサイト」作りをはじめよう〜

WordPress でアクセシブルなコンテンツを制作する要点などが紹介されている。

スライドはこちら。

]]>

Web担当者向けアクセシビリティセミナー：質疑応答

同タイトルのイベントの質疑応答で集められた質問と回答。イベントの資料や動画のアーカイブは connpass にまとめられている。

Web 担当者向けセミナー：障害者差別解消法施行目前！アクセシビリティ対応、なぜ始める？どう進める？ - connpass

]]>

Webアプリのアクセシビリティを追求せよ！「インクルーシブ」なマークアップを議論しながら学んでみた

「多様なユーザーニーズに応えるフロントエンドデザインパターンアドバンスド編」の登壇をテーマにした記事。

]]>

Webアクセシビリティ対策って、何からやればいいんですか？

株式会社インフォアクシアの植木真氏が、文字サイズ変更ボタン、読み上げ機能、色の反転機能を指して「それはいらない三種の神器ですね」と言う漫画。

]]>

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

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

]]>

Web ライティングのツボ — Accessible & Usable

ウェブコンテンツを適切に表現するためのライティングの要点がシリーズで連載されている。

]]>

Web Accessibility Laws & Policies - W3C

このリンクの解説が『ウェブアクセシビリティに関する法律/政策のデータベース (W3C) - Accessible & Usable』にてされている。

]]>

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 で行われた。

]]>

JIS X 8341-3:2016 達成基準早見表（レベルA & AA）

ウェブアクセシビリティ基盤委員会（WAIC）が作った WCAG 2.0 の早見表。「原則」「ガイドライン」「達成基準」を一覧できる。

時代工房＋もんど版の早見表とは異なり、レベル A とレベル AA のみになっていて、より実用重視。

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

]]>

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

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

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

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

]]>

WCAG2.0 / 2.1とCUDの整理、スクリーンメディアにおけるCUD

WCAG と CUD のそれぞれの基準の解説と違いが紹介されている。

]]>

WCAG Theme Song by David MacDonald

この曲を聞くと WCAG の発音がわかる！

]]>

WAVE

WebAIM 提供の自動チェックツール。英語だが、チェック対象のウェブページの上に問題点が重なって表示されるので、わかりやすい。Chrome 機能拡張、Firefox 機能拡張もある。

]]>

WAI-ARIA対応のタブ型UIの作り方（React編）

React でアクセシブルなタブ UI を実装するコード例。

]]>

WAI-ARIA対応のタブ型UIの作り方（Angular編）

Angular でアクセシブルなタブ UI を実装するコード例。

]]>

WAI-ARIA対応のタブ型 UI を4種スクリーンリーダーで読み上げた検証結果2

みるく氏による貴重な WAI-ARIA の AS 情報。

]]>

WAI-ARIA対応のタブ型 UI を4種スクリーンリーダーで読み上げた検証結果1

みるく氏による貴重な WAI-ARIA の AS 情報。

]]>

WAI-ARIAを活用したフロントエンド実装

CodeGrid の WAI-ARIA 実装例の連載。実践的なコード紹介とそれを読み上げ音声も掲載されている。

]]>

WAI-ARIA 対応のアクセシブルなタブ UI を React で実装する

React でアクセシブルなタブ UI を実装するコード例。

]]>

WAI-ARIA の基礎知識 — Accessible & Usable

WAI-ARIA とは何かの初学者向けの解説記事。Roles、States、Propaties、HTML との関係が書かれている。

]]>

WAI-ARIA Authoring Practice Dialog(Modal)のフォーカス管理

ARIA Authoring Practices Guide に掲載されているアクセシブルなダイアログの実装例で、フォーカス管理の要点が紹介されている。

]]>

Tenon.io

有料のアクセシビリティテストツール。

]]>

Sony Global - Accessibility and Usability

Sony アクセシビリティガイドライン。ハードウェアの話も多い。

]]>

Sim Daltonism

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

]]>

ReactとWAI-ARIAでアクセシブルなアコーディオンUIを実装してみた

React でアクセシブルなアコーディオン UI を実装するコード例。すべて展開するボタンとすべて閉じるボタンを role=toolbar でまとめているなど参考になる。

]]>

Q&A | ウェブアクセシビリティ基盤委員会（WAIC）

過去数年にわたる問い合わせやセミナーでの質疑が蓄積されています。

]]>

Pa11y

アクセシビリティテストができる無料のオープンソースツール。テスト実行のスケジューリングができるウェブサービス、ダッシュボード、CI 向けの CLI ツールがある。

]]>

PC-Talker マニュアル

PC-Talker のマニュアルをダウンロードできる。操作方法の参考に。

]]>

NVDA チートシート

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

]]>

NVDA のキーボード操作リファレンス — Accessible & Usable

NVDA を使って Web サイトを閲覧する時に知っておくとよいキーボード操作がまとめられている。

]]>

Mac OS X における音声読み上げ (VoiceOver) — Accessible & Usable

デスクトップ版 VoiceOver の使い方が紹介されている。

]]>

Mac OS X における音声読み上げ (VoiceOver) (その2) : 「クイックナビ」と「トラックパッドコマンダー」 — Accessible & Usable

デスクトップ版 VoiceOver のクイックナビで要素間をジャンプする方法と、トラックパッドコマンダーの使い方が紹介されている。

]]>

JAWS Documentation

JAWS 公式のドキュメント集。操作方法や AS 情報が掲載されている。

]]>

HTML5 と SVG で考える、これからの画像アクセシビリティ

SVG がなぜアクセシブルなのかの概要と具体例が共に紹介されている。 aria-labelledby 属性を使ったラベリング、foreignObject 要素を使ったスクリーンリーダー向けの見出しジャンプ機能の対応は必見。

]]>

Font-Awesomeでアクセシビリティを確保しながらウェブフォントを活用する

Font-Awesome を使いつつアクセシビリティを確保するコード例が紹介されている。

]]>

Extended HTML WAI-ARIAとMicrodataでHTMLを拡張する

WAI-ARIA と microdata で HTML のセマンティクスを拡張する話のスライド。WAI-ARIA とは、microdata とはの紹介から、いくつかのコード例が紹介されている。

]]>

EPUB Accessibility 1.0 概要 | kzakza

EPUB 関連仕様の概要がまとめられている。

]]>

Dynamic Type 対応について考える

iOS アプリに搭載されている Dynamic Type についてのナレッジ。実装のコツやコード例が紹介されている。

]]>

Contrast

Mac のメニューバーに常駐するタイプのコントラストチェッカー。有料だがシンプルな UI。

色のアクセシビリティが確認できる Mac アプリ「Contrast」が超便利

]]>

Colour Contrast Analyser

コントラストチェッカー。Windows/Mac 両方で動作し、ローカライズもされている。

]]>

Assistive technology compatibility tests · PowerMapper Software

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

]]>

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

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

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

]]>

Android アプリのアクセシビリティガイドライン概観メモ

Android の実装チェックリストにおける最低＆推奨要件について。マシンリーダブルなテキスト情報を付与し、フォーカスありきのナビゲーションに対応した UI 設計にすることが求められると述べられている。

]]>

Android の音声読み上げ機能 (TalkBack) — Accessible & Usable

TalkBack の起動方法と、基本的な Web 閲覧操作について。

]]>

Ameba Accessibility Guidelines

Ameba のサービス内に敷設する、WCAG の達成基準に合わせた制作指針集。

]]>

Accessible Publishing Knowledge Base

EPUB のアクセシビリティ部分を担っている DAISY コンソーシアムチームによる実装のベストプラクティス集。

]]>

AccessLint - Automated and continuous web accessibility testing

GitHub の PR に対しアクセシビリティの問題点があればコメントしてくれるインテグレーション。

]]>

AbemaTVのアクセシビリティ小さな一歩

AbemaTV のアクセシビリティ改善例。背景色を統一し色数を減らしてコントラスト比を確保する取り組みが紹介されている。

]]>

AI を使った画像解析による代替テキスト提案機能「Alt サジェスト」｜PowerCMS ブログ

PowerCMS 5 に搭載された画像を解析してテキストを抽出したり alt 属性値の候補を自動生成する機能の紹介。

]]>

A11yc アクセシビリティチェックサービス

有限会社時代工房が提供する、ウェブサイトのアクセシビリティチェックができるツール。

]]>

Web Accessibility for Designers

間嶋沙知氏作、Web アクセシビリティを担保するためにウェブデザイナーが気をつけるべき 12 個の項目をまとめたポスター画像。“Great web accessibility starts in the design.” のコピーが印象的。

A4 版 PDF

]]>

要素のalt属性の入れかた — Accessible & Usable

alt 属性値を記述する具体的なルールが整理されている。

]]>

4.8.4.4 画像に対して代替として動作するテキストを提供に対する要件

HTML 仕様書による alt の書き方が掲載されている。alt をどう書くかの公式文書と考えてよいだろう。

]]>

accrefs

アクセシビリティに取り組む・推進している日本企業まとめ

WPDS - Audio and Video

WPDS - Alt text

WPDS - Accessibility Checklist

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

アクセシビリティ方針 | ビジネスチャットならChatwork

WAI-ARIA対応のタブ型UIの作り方（Vue.js編）

LIFULL Accessibility Guidelines

UXライターが挑戦！画像のALT即興ライティング大会

Accessibility Support

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

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

障害者に関する法律関連

Subtitle Guidelines

映像字幕をつくるときに

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WEB+DB PRESS Vol.125 フロントエンド羅針盤 ── Web体験向上へのアプローチ【第3回】継続的なアクセシビリティ改善の探求 ……誰もがいつでも使えるWebを目指して

WEB+DB PRESS 20周年記念特集「これからのWeb開発」（コラム寄稿）

WEB+DB PRESS Vol.116 特集3『アプリケーションアクセシビリティ』

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

駒瑠市〜アクセシビリティ上の問題の体験サイト〜

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

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

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

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

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

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

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

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

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

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

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

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

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

A11y Annotations (by Accessible & Usable)

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

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

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

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

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

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

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

アクセシブルFlutter: Semantics入門

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

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

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

もしあなたが『アクセシビリティ試験』をやることになったら WP ZoomUP #68

続・もしあなたが『アクセシビリティ試験』をやることになったら WP ZoomUP #71

A beginner’s guide to manual accessibility testing

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

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

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

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

AAA11Y

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

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

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

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

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

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

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

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

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

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

電子決済等代行事業者協会アクセシビリティ勉強会『Webアクセシビリティの概要』

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

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

アクセシビリティアプリを企画する時点で考えるべきこと (PWA Night)

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

改善！マークアップ：パンくずナビゲーションの機能向上