ミツエーリンクスから見たアクセシビリティ界隈この2年半

7.2K Views

August 29, 22

#open-seminar #オープンセミナー #accessibility #a11y #アクセシビリティ #oso2022 #WCAG #WAI-ARIA #Web Accessibility #デジタルアクセシビリティ

スライド概要

2022年8月20日に開催されたオンラインイベント「オープンセミナー2022@岡山」でのセッション「ミツエーリンクスから見たアクセシビリティ界隈この2年半」に使用したスライドです。

株式会社ミツエーリンクス

@Mitsue-Links

スライド一覧

株式会社ミツエーリンクスのドキュメント共有です。

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

（ダウンロード不可）

関連スライド

ミツエーリンクスのご紹介

株式会社ミツエーリンクス 37.2K

あると便利なCSS Anchor Positioning

css techfeed_experts_night techfeed

株式会社ミツエーリンクス 3.1K

State of CSS 2022に見るアクセシビリティ関連機能

accessibility a11y アクセシビリティ css techfeed techfeed_experts_night

株式会社ミツエーリンクス 2.1K

WebアクセシビリティとEPUBアクセシビリティ

web accessibility a11y アクセシビリティ epub

株式会社ミツエーリンクス 2.1K

アクセシビリティオーバーレイの是非

accessibility a11y overlay techfeed techfeed_experts_night アクセシビリティ

株式会社ミツエーリンクス 2.1K

学振特別研究員になるために～2025年度申請版

学振 dc1 dc2 jsps pd

大上雅史 475.1K

各ページのテキスト

オープンセミナー2022@岡山ミツエーリンクスから見たアクセシビリティ界隈この2年半 2022年8月20日株式会社ミツエーリンクス澤田望

自己紹介株式会社ミツエーリンクスアクセシビリティ部マネージャー澤田望（さわだのぞみ）アクセシビリティ・コンサルタントとして、ウェブサイト構築時の監修や検証を行うほか、企業向けガイドラインの監修、作成なども担当。 • ウェブアクセシビリティ基盤委員会（WAIC）作業部会2 主査 • 岡山情報ビジネス学院非常勤講師 • おかやまUDアンバサダー Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 2

https://www.mitsue.co.jp/

https://www.mitsue.co.jp/release/20100129.html

https://www.mitsue.co.jp/knowledge/blog/a11y/

https://www.mitsue.co.jp/knowledge/column/

10.

11.

12.

13.

14.

アクセシビリティBlog への登場：7 回 2020年3月13日 WAICサイトで WCAG 2020年10月27日 WCAG 2.1達成方法集が一部公開されました 2021年7月27日 WCAG 2.1達成方法集の更新について（2021年7月） 2021年9月9日 WCAG 2.1と解説書、達成方法集の更新について（2021年9月） 2021年12月17日 WCAG 2.1の関連文書の更新について（2021年12月） 2022年4月28日 WCAG 2.1達成方法集が更新されました（2022年4月） 2022年7月11日 WCAG 2.1達成方法集の翻訳が完了した話 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 2.1解説書が公開されました 13

15.

何を更新しているのか？ WCAG（Web Content Accessibility Guidelines）2.1 関連文書の翻訳 • 解説書：難解なガイドラインを少し読みやすく解説したもの • 達成方法集：ガイドラインの基準を満たせる方法を集めたもの • クイックリファレンス：今のところ翻訳予定なし Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 14

16.

https://waic.jp/docs/WCAG21/

17.

https://waic.jp/docs/WCAG21/Understanding/

18.

https://waic.jp/docs/WCAG21/Techniques/

19.

https://waic.jp/

20.

なぜ JIS ではなく WCAG なのか? WCAG 2.0（2008）= ISO/IEC 40500:2012 = JIS X 8341-3:2016 WCAG 2.1（2018） • 国際的なスタンダードになりつつある • 国内でもグローバルな企業での採用が増加 • モバイル／弱視（ロービジョン）／認知・学習障害への対応強化（WCAG 2.0 では現代のウェブ利用状況に十分対応しきれていない） Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 19

21.

https://waic.jp/docs/WCAG21/Understanding/non-text-contrast.html

22.

23.

24.

アクセシビリティBlog への登場：6 回 2020年1月27日 2019年末に更新された WAI-ARIA 2020年5月12日 WAI-ARIA オーサリング・プラクティス 1.1 が公開されました 2021年3月3日 WAI-ARIA 1.2 の勧告候補が公開されました 2021年7月7日 ARIA in HTML 仕様が勧告候補に 2021年10月1日 ARIA in HTML 仕様が勧告案に 2022年6月27日リデザインされた ARIA Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 1.2 について Authoring Practices Guide について 23

25.

https://momdo.github.io/wai-aria-1.2/

26.

WAI-ARIA 1.2（勧告候補）の主な変更点 • 新しいロールを11種追加 • • blockquote caption • • code deletion • • insertion meter paragraph subscript • • • • superscript time • generic • 特定のロールでの使用に限定 • aria-disabled • aria-invalid • aria-errormessage aria-haspopup • • aria-expanded が49種のロールで使用禁止 • • • • • alert alertdialog article banner blockquote • • • • caption cell compleme ntary contentinfo • • • • • definition deletion dialog directory feed • • • • • figure form grid group heading • • • • • img insertion landmark list listitem • • • • • log main marquee math menu • • • • • menubar navigation note paragraph radiogroup • • • • • region search select status subscript • • • • • superscript table tabpanel term time • • • • • timer toolbar tooltip tree treegrid • combobox の実装時の矛盾点を解消 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 25

27.

https://waic.jp/docs/2019/NOTE-wai-aria-practices-1.1-20190207/

28.

https://www.w3.org/WAI/ARIA/apg/

29.

https://www.w3.org/WAI/ARIA/apg/patterns/

30.

https://momdo.github.io/html-aria/

31.

32.

33.

34.

アクセシビリティBlog への登場：5 回 2020年2月28日 WCAG 2.2 の最初の公開作業草案が発行されました 2020年8月17日 WCAG 2.2 作業草案の更新 2020年9月28日 WCAG 2.2 の勧告スケジュールと、次世代のガイドラインについて 2021年5月14日 WCAG 2.2 のドラフトが更新されました 2022年5月23日ライトニングトーク「WCAG Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 2.2 で追加される達成基準」のフォローアップ 33

35.

https://www.w3.org/WAI/standards-guidelines/wcag/#versions

36.

WCAG 2.2 で追加される達成基準（Blog紹介時点のWorking Draft） 2.4.11 フォーカスの外観（最低限） AA キーボードフォーカスのコントラスト比や最小サイズを確保すること 2.4.12 フォーカスの外観（高度） 2.4.13 改ページのナビゲーション 2.5.7 ドラッグ操作 AA ドラッグ前提の機能はシングルポインタでも実行できること 2.5.8 ターゲットサイズ（最小） AA タッチ／クリック領域は24×24CSSピクセル以上あること 3.2.6 一貫したヘルプ 3.2.7 可視コントロール 3.3.7 アクセシブルな認証 A 認知機能テストに頼らない認証方法、または完遂を助ける機能が使えること 3.3.8 冗長な入力 A 同一プロセス／セッションで利用者が提供済みの情報は再利用可能なこと AAA A A AA ページ分割したコンテンツには行き来する機能があること提供されるヘルプ手段は複数ページでの順序が相対的に同じことホバー／フォーカスで現れるUIコンポーネントが使えるかどうか判ること ※ 正確に知りたい方は原文をご覧ください。 ※ Editor's Draftによると、まだ変更される可能性があるようです。 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 35

37.

38.

39.

アクセシビリティBlog への登場：4 回 2020年2月12日 Axe更新情報：Dequeが Axe-core 3.5をリリース！ 2020年5月13日 Dequeのアクセシビリティ関連ソフトウェアが axe ブランドに一元化 2020年9月8日 2021年8月10日 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. Deque Systemsが新たなデジタルアクセシビリティのカンファレンス「axe-con」を開催（2021年3月10〜11日） Deque社の axe-core が2億5000万ダウンロードを突破 38

40.

41.

42.

https://www.mitsue.co.jp/service/accessibility/axe_monitor.html

43.

44.

45.

46.

アクセシビリティオーバーレイとは？コンテンツ側の改修を行わず、特定のスクリプトを読み込むだけでウェブページのアクセシビリティ向上を目指すソリューション。導入されるウィジェットで調整可能 • 画面拡大 • 表示フォント／文字サイズ変更 • テキスト色／背景色変更 • 行高／文字間隔変更 • フォーカス強調 • 画像に対する代替テキストの自動付与など Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 具体的なソリューション名はここでは取り上げません 45

47.

注意が必要なポイントアクセシビリティオーバーレイ導入 ≠ JIS X 8341-3 レベルAA に準拠（導入結果の検証／ウィジェット操作上のアクセシビリティ確保／明確な説明などが必要）その上で... • 調整できる項目の多くはブラウザの標準機能／拡張機能／OSの機能でも調整可能 • コンテンツの本質的なアクセシビリティを改善する訳ではない（代替テキスト／ラベルの内容など） • アクセシビリティオーバーレイ導入によるアクセシビリティ低下の報告※もある ※ https://overlayfactsheet.com/ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 46

https://overlayfactsheet.com/

48.

49.

50.

51.

52.

53.

ウェブアクセシビリティとの関係ウェブアクセシビリティを含む情報アクセシビリティは、合理的配慮を的確に行うための環境の整備として位置づけられており、各団体においては、事前的改善措置として計画的に推進することが求められます。どのレベルまで整備すればいいのか？ JIS X 8341-3:2016 レベル AA 準拠みんなの公共サイト運用ガイドライン（2016年版）より ↓ 事業者向けのガイドラインはまだ存在しない Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 52

https://www.soumu.go.jp/main_content/000439213.pdf#page=32

54.

55.

56.

https://www.mitsue.co.jp/

ミツエーリンクスから見たアクセシビリティ界隈この2年半

株式会社ミツエーリンクス

関連スライド

ミツエーリンクスのご紹介

あると便利なCSS Anchor Positioning

State of CSS 2022に見るアクセシビリティ関連機能

WebアクセシビリティとEPUBアクセシビリティ

アクセシビリティ オーバーレイの是非

学振特別研究員になるために～2025年度申請版

各ページのテキスト

アクセシビリティオーバーレイの是非