試して遊ぶ!Webアクセシビリティ

1.2K Views

April 29, 23

スライド概要

第110回「WEB TOUCH MEETING」
Webアクセシビリティとは、障がいを持つ人や高齢者など様々な人々にとってのWebサイトやWebアプリケーションの「利用しやすさ」です。今回は私が喋れる事例やデモを交えて、Webアクセシビリティの背景、学び方、向き合い方などをお話します。視覚障害者やアクセシビリティ検証者に広まりつつあるスクリーンリーダーNVDAも紹介します。
西本 卓也 株式会社シュアルタ / 広島
https://www.webtouchmeeting.com/event/6

profile-image

Shuaruta Inc. ウェブアクセシビリティ基盤委員会 (WAIC) NVDA日本語版 すごい広島 IT初心者の会

シェア

またはPlayer版

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

関連スライド

各ページのテキスト
1.

試して遊ぶ! Webアクセシビリティ 2023年4月29日 西本卓也 / nishimotz / 24motz shuaruta.com 1

2.

おまえだれよ ● 80年代(広島→東京) ○ ○ ● 90年代(東京→京都で大学教員) ○ ○ ● J-WAVE + NIFTY-Serve 京都 吉田山 00年代(京都→東京) ○ ● 電子工作、マイコン、アマチュア無線 8mmフィルムカメラ 東京 谷中・根津・千駄木 現在(退職→広島) ○ ○ イヌとネコ PCNひろしま 2

3.

1995年 3

4.

バージョン管理システム ● ● ● ちゃんとしたソフトウェア技術 みんな使うようになると思った CVS = Concurrent Versions System ○ ○ ● ● 2000年出版 遅すぎた オープンソースコミュニティを意識 その後 ○ ○ Subversion Git 4

6.

VoiceXML 6

8.

広島市視覚障害者情報支援センター(VIC) ● ● ボランティアサークル 視覚に頼らず使う方法を学ぶ 8

9.

ウチコミくんからNVDAまで ● 1999年 ○ ● 2000年から2010年 ○ ○ ○ ○ ○ ● 視覚障害者のためのキータイプ練習ソフト 海外の会議に参加 国内の研究会の運営 情報保障 スクリーンリーダー おもしろい NVDA日本語版の開発者になる 2011年から2012年 ○ ○ ○ 東京から広島へ NVDA台湾チーム訪問 NVDA日本語チームを立ち上げる 9

10.

NVDA = Non Visual Desktop Access ● オープンソースのWindows用スクリーンリーダー ○ ● ● ● ● ● 現在は3カ月ごとにバージョンアップ 特に開発途上国に恩恵 WAI-ARIA対応 ブラウザ対応 NVDA日本語版 ○ ○ ● 2006年からオーストラリア NV Access を中心に開発 本家版の更新に合わせてリリース Webアクセシビリティについて違いはない NVDA日本語チーム ○ 2022年まで西本が代表 10

11.

NVDAの機能あれこれ ● ● ● ● ● ● 文字の確認やカナ漢字変換で詳細読み(文字説明) プログレスバーを音の高さで マウスカーソル位置を音の高さや方向で 「スペルミス」「候補あり」の効果音 インデントの深さを音の高さで 点字ビューアー 11

12.

アクセシビリティの祭典 ● 2017年 ○ ○ ○ ● 2018年 ○ ○ ● Web開発者向けイベント NVDAが紹介されている 神戸に行った NVDAチートシート 園 順一さんと対談 2019年 ○ ○ かずとくん(当時高校生)の質問に回答 小学生でNVDAを使い始めたという話 12

13.

サイトワールド2019 NVDA相談会 ● gihyo.jp 連載記事 クラウドサイン、チャットワーク サイボウズ、freee の皆様と開催 13

14.

2018年から現在 ● ● ● ● 株式会社シュアルタを設立 NVDA日本語版を業務として開発 freeeアクセシビリティチームの動画を制作 障害者情報アクセシビリティ・コミュニケーション施策推進法 ○ ○ ● ウェブアクセシビリティ基盤委員会 (WAIC) ○ ○ ● 内閣府「協議の場」メンバー 支援技術ベンダー、障害当事者、省庁の担当者 2023年度 作業部会2(実装)主査、会員組織 アクセシビリティ・サポーテッド情報 ■ 「達成方法」で本当に「達成できるか」 放送大学の学生(履修生) 14

15.

Webアクセシビリティをやる理由 ● 求められるから ○ ○ ○ ● ミッション(「だれでも」「だれもが」) 品質(ユーザビリティ) コンプライアンス(訴訟リスク) やりたいから ○ ○ やらないとモヤモヤする ■ 排除を生み出したくない ■ 正しい仕事をしたい おもしろい ■ オルタナティブを楽しむ 15

16.

デジタル庁 16

17.

試して遊ぶ! macOS VoiceOver 17

18.

ひょう(テーブル)=「プロンプトエンジニアリング」 音声合成=20年前からあった「生成AI」 18

19.

対面朗読 19

20.

インタフェースを分類する ● わかるから使える ○ ○ ○ ○ ● わからなくても使える ○ ○ ● 道具型インタフェース GUI タッチ メタバース 秘書型インタフェース チャットAI 選べる ○ ○ 自由度が高い 片方が使えない人を排除しない 1991年 20

22.

試して遊ぶ!フォーム入力 ● ● ● dialogはLinuxで使われるテキストベースの ユーザーインターフェースウィジェットツール 名前と年齢を取得するシンプルなBashスクリプト GPT-4プロンプト ○ ○ ○ ○ ○ Linux で dialog を使う例 Cancel を処理できるように スクリプトを終了するときに画面を消したい Esc キーを押すと Cancel させたい 年齢入力で Cancel すると名前入力に戻りたい 22

23.

試して遊ぶ!フォーム入力 23

27.
[beta]
Webアプリ化 = Streamlit (Python) に移植
import streamlit as st
st.title("名前と年齢の入力")
name = st.text_input("名前を入力してください:")
age = st.number_input("年齢を入力してください:", min_value=0, step=1)
if st.button("送信"):
if name and age >= 0:
st.success(f"あなたの名前は{name}で、年齢は{age}歳です。")
else:
st.error("名前と年齢を正しく入力してください。")

27

30.

lynx 30

34.

テキスト化と図解化 34

35.

試して遊ぶ!見出しジャンプ 以下のドキュメントを要素単位で上下に移動できるとします。初期位置は一番 上です。操作をつたえるごとに現在位置をおしえてください。 ● ● ● ● ● ● 見出しレベル1 アンパンマンの登場人物 見出しレベル2 アンパンマンと仲間たち アンパンマン ジャムおじさん 見出しレベル2 敵キャラクター ばいきんまん 35

36.

現在のドキュメント構成: 1. 2. 3. 4. 5. 6. 見出しレベル1 アンパンマンの登場人物 見出しレベル2 アンパンマンと仲間たち アンパンマン ジャムおじさん 見出しレベル2 敵キャラクター ばいきんまん 現在の位置: 1. 見出しレベル1 アンパンマンの登場人物 36

37.

次の見出しに移動 現在の位置: 2. 見出しレベル2 アンパンマンと仲間たち 37

38.

次の見出しレベル2に移動 現在の位置: 5. 見出しレベル2 敵キャラクター 下に移動 現在の位置: 6. ばいきんまん 38

39.

MiChecker 音声ユーザビリティの可視化 39

40.

このドキュメントの範囲で、アンパンマンの登場人物のメンバー全員を箇条書きで このドキュメントの範囲で、アンパンマンの登場人物のメンバー全員は以下の通り です。 1. 2. 3. アンパンマン ジャムおじさん ばいきんまん ドキュメントにはこれら3名のキャラクターが記載されています。 情報の意味的な構造はAIのためでもある 40

41.

# 枕草子 | 季節 | いいもの | | ---- | ----------- | | 春 | あけぼの。 | | 夏 | 夜。 | 秋 | 夕ぐれ。 | | 冬 | つとめて。 | | 41

42.

このドキュメントで、テーブルに入ったら、左端から右端に、セル単位で移動して、 右端に来たら次の行の左端に移動できるものとします。初期位置はドキュメントの 先頭の見出しです。操作をつたえるごとに現在位置をおしえてください 現在位置: 見出し "枕草子" 移動の指示をお知らせいただければ、現在位置を更新いたします。 42

43.

次に移動 現在位置: テーブルのセル "春" (1行目, 1列目) 次に移動 現在位置: テーブルのセル "あけぼの。" (1行目, 2列目) 現在位置の列見出しは? 現在位置の列見出し: "いいもの" 手前に移動 現在位置: テーブルのセル "春" (1行目, 1列目) 現在位置の列見出しは? 現在位置の列見出し: "季節" 43

44.

ひとつ下のセルに移動 現在位置: テーブルのセル "夏" (2行目, 1列目) ひとつ右のセルに移動 現在位置: テーブルのセル "夜。" (2行目, 2列目) 次に移動 現在位置: テーブルの右端に到達したため、次の行の左端のセルに移動しまし た。 セル "秋" (3行目, 1列目) 44

46.

役割分担を考える 音声・点字 PC-Talker / NVDA / JAWS NetReader Webサイト Webアプリ Chrome / Edge Safari / Firefox VoiceOver ナレーター macOS iOS Windows 46

47.

アクセシビリティチェック ● JBICT第2回支援技術利用状況調査(2022年) ○ ○ ○ ○ ● チェック方法 ○ ○ ○ ● パソコンで使うことがある技術 PC-Talker 82% NVDA 55% スマートフォン iPhone 92% ツール Windows + NVDA + Chrome iPhone + VoiceOver 西本 卓也 & 辻 勝利「スクリーンリーダーは怖くない! NVDA & VoiceOver 10の 基本テクニック」【GAAD Japan 2021】 47

48.

なるべくキーボードを使わないNVDAの操作 48

49.

コミュニティ ● Webアプリケーション・アクセシビリティ ○ ○ ● NVDA日本語チームラジオ = YouTube配信 ○ ○ ● 技術評論社から 2月に発売 ひとりから組織へ 5月18日(第3木曜日)21時から 通常は第2木曜日 Global Accessibility Awareness Day (GAAD) ○ ○ ○ 5月の第3木曜日に世界各地でデジタル分野の「アクセシビリティ」を考える 2023年5月18日 GAAD Japan 2023 (オンライン) 2023年5月19日 アクセシビリティの祭典 2023 (オンライン) 49

50.

Authoring Practices Guide 50

51.

axe 51

52.

WAIC 52

53.

nvda.jp 53

54.

試して遊ぶ! ● ● 「できるはずだ」を増やす イノベーション ○ ○ ● オルタナティブ ○ ● 技術の組み合わせによる問題解決 バリアフリーはきっかけになりやすい わからなくても使えるスクリーンリーダー すごい広島 ○ ○ 水曜日の19:00からオンライン 月末はすごい広島 .rb with Python 54