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

6.8K Views

August 29, 22

スライド概要

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

profile-image

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

シェア

またはPlayer版

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

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

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

2.

はじめに Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 1

3.

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

4.

株式会社ミツエーリンクス 株式会社ミツエーリンクス https://www.mitsue.co.jp/ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 3

5.

ミツエーリンクスってどんな会社? https://www.mitsue.co.jp/release/20100129.html より Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 4

6.

ミツエーリンクスの情報発信 https://www.mitsue.co.jp/knowledge/blog/a11y/ より Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 5

7.

ミツエーリンクスの情報発信 https://www.mitsue.co.jp/knowledge/column/ より Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 6

8.

セッションの進め方 1トピック5分の Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. LT × 6本 やります 7

9.

このセッションの目標 • ウェブアクセシビリティについて 2020年以降の主な出来事 を知る • アクセシビリティ界隈の潮流を感じる Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 8

10.

トピック 0 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 会社員になりました 9

11.

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 10

12.

2022 年 4 月からミツエーリンクスの社員に • 人生何度目かの 再出発 • 個人でも取り組めることから 社員でしか取り組めないことへ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. スケールアップ 11

13.

トピック 1 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. WCAG 2.1 関連文書の更新 12

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/ より Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 15

17.

何を更新しているのか? https://waic.jp/docs/WCAG21/Understanding/ より Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 16

18.

何を更新しているのか? https://waic.jp/docs/WCAG21/Techniques/ より Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 17

19.

何を更新しているのか? https://waic.jp/ より Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 18

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 より Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 20

22.

興味が湧いた方はぜひ 日本語で読みましょう 最新の WCAG 2.1 関連文書を Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 21

23.

トピック 2 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. WAI-ARIA 22

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.

WAI-ARIA 1.2 とは https://momdo.github.io/wai-aria-1.2/ より Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 24

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.

WAI-ARIA オーサリング・プラクティスとは https://waic.jp/docs/2019/NOTE-wai-aria-practices-1.1-20190207/ より Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 26

28.

再編成され、モダンにアップデート https://www.w3.org/WAI/ARIA/apg/ より Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 27

29.

再編成され、モダンにアップデート https://www.w3.org/WAI/ARIA/apg/patterns/ より Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 28

30.

ARIA in HTMLとは https://momdo.github.io/html-aria/ より Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 29

31.

ARIA in HTMLとは WAI-ARIAをHTMLで使用するにあたっての 要素 に対して、どのARIA属性 • HTMLの 機能 に対して、どのARIA属性 • HTML各 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 適合要件を定めるもの (ロール/ステート/プロパティ) (ステート/プロパティ) が使えるのか が使えるのか 30

32.

とはいえ毎回参照するのも大変 覚えるよりも Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. ツールを使いましょう(axeとか...) 31

33.

トピック 3 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. WCAG 2.2 32

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.

WCAG 2.2 の勧告予定 https://www.w3.org/WAI/standards-guidelines/wcag/#versions より Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 34

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.

焦る必要はありませんが そろそろ基準を Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. アップデートしましょう 36

38.

トピック 4 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. axe 37

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.

axe とは? •axe-core オープンソースのアクセシビリティ・ルールライブラリー •axe DevTools 開発者ツールでアクセシビリティチェックできるブラウザ拡張機能 •axe Monitor 対象サイトを自動巡回してアクセシビリティチェックするツール Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 39

41.

axe DevTools axe DevToolsの実行例 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 40

42.

axe Monitor(ミツエーリンクスのサービス) https://www.mitsue.co.jp/service/accessibility/axe_monitor.html より Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 41

43.

アクセシビリティチェックはツールと目視の2本立て アクセシビリティチェックを日常化 axe使って ... 目視検証はミツエーリンクスへ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 42

44.

トピック 5 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. アクセシビリティ オーバーレイ 43

45.

アクセシビリティBlog への登場:2 回 / コラムへの登場:1 回 2021年11月5日 アクセシビリティ オーバーレイ に対する見解 2022年5月30日 アクセシビリティオーバーレイ のとりとめもない話 2022年8月4日 アクセシビリティ オーバーレイ の是非 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 44

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

48.

焦らずよく考えましょう アクセシビリティ オーバーレイに頼らなくても実現できることは 地道に取り組みましょう Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 47

49.

トピック 6 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 障害者差別解消法 48

50.

アクセシビリティBlog への登場:1 回 / コラムへの登場:1 回 2021年1月12日 民間に対する法律上の「合理的配慮」の見直しについて 2021年8月6日 障害者差別解消法 の改正とWebアクセシビリティ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 49

51.

障害者差別解消法とは? 2016年4月1日施行 • 障害のある人に対する 不当な差別的取扱いの禁止 • 障害を理由とする差別の解消についての 合理的配慮の提供 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 50

52.

改正された内容 2016年4月1日施行 2021年6月4日公布 (3年以内に施行) 行政機関等 義務 義務 事業者(一般企業) 努力義務 義務 義務化されるのは... 合理的配慮の提供 JIS X 8341-3 レベルAA に準拠 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 51

53.

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

54.

施行までに何をすべきか? そろそろ 準備を始めましょう 公共サイトの基準を参考に しましょう Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 53

55.

公式アカウント @mlca11y フォローをよろしくお願いします。 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 54

56.

〒160-6133 東京都新宿区西新宿8-17-1 住友不動産新宿グランドタワー33階 会社案内:https://www.mitsue.co.jp/ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 55