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

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

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

1995年 3

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

5

VoiceXML 6

7

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

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

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

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

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

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

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

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

デジタル庁 16

試して遊ぶ！ macOS VoiceOver 17

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

対面朗読 19

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

21

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

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

24

25

26

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

28

29

lynx 30

31

32

33

テキスト化と図解化 34

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

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

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

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

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

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

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

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

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

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

45

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

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

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

コミュニティ ● 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

Authoring Practices Guide 50

axe 51

WAIC 52

nvda.jp 53

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