---
title: 試して遊ぶ！Webアクセシビリティ
tags: 
author: [Takuya Nishimoto](https://www.docswell.com/user/nishimotz)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/LEL9LQGVJR.jpg?width=480
description: 第110回「WEB TOUCH MEETING」 Webアクセシビリティとは、障がいを持つ人や高齢者など様々な人々にとってのWebサイトやWebアプリケーションの「利用しやすさ」です。今回は私が喋れる事例やデモを交えて、Webアクセシビリティの背景、学び方、向き合い方などをお話します。視覚障害者やアクセシビリティ検証者に広まりつつあるスクリーンリーダーNVDAも紹介します。 西本 卓也 株式会社シュアルタ / 広島 https://www.webtouchmeeting.com/event/6
published: April 29, 23
canonical: https://www.docswell.com/s/nishimotz/ZGX144-2023-04-29-215725
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/LEL9LQGVJR.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/4JMZM1QNEW.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/PJR6VL8479.jpg)

1995年
3


# Page. 4

![Page Image](https://bcdn.docswell.com/page/PEXMZW8Z7X.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/3EKG8VKVJD.jpg)

5


# Page. 6

![Page Image](https://bcdn.docswell.com/page/L73N2M3Q75.jpg)

VoiceXML
6


# Page. 7

![Page Image](https://bcdn.docswell.com/page/87DWZ64WJG.jpg)

7


# Page. 8

![Page Image](https://bcdn.docswell.com/page/VJP9DYMXE8.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/2EVM1G93EQ.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/57GG28ZY7L.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/4EQXP9L67P.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/KJ46YXDM71.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/LE1V6NZY7G.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/GEWLW49172.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/47ZM529XE3.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/YJ6N9VKPJV.jpg)

デジタル庁
16


# Page. 17

![Page Image](https://bcdn.docswell.com/page/GJ55NDPPJ4.jpg)

試して遊ぶ！ macOS VoiceOver
17


# Page. 18

![Page Image](https://bcdn.docswell.com/page/9E2N586Z7R.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/D7YPK69N7M.jpg)

対面朗読
19


# Page. 20

![Page Image](https://bcdn.docswell.com/page/VEN5RZLVJ8.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/Y79YMZ4VE3.jpg)

21


# Page. 22

![Page Image](https://bcdn.docswell.com/page/G786L1Q4JD.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/L7L9LQXVER.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/4EMZM1LN7W.jpg)

24


# Page. 25

![Page Image](https://bcdn.docswell.com/page/PER6VLK4J9.jpg)

25


# Page. 26

![Page Image](https://bcdn.docswell.com/page/P7XMZWLZJX.jpg)

26


# Page. 27

![Page Image](https://bcdn.docswell.com/page/37KG8VLVED.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/LJ3N2M6QJ5.jpg)

28


# Page. 29

![Page Image](https://bcdn.docswell.com/page/8JDWZ6VWEG.jpg)

29


# Page. 30

![Page Image](https://bcdn.docswell.com/page/VEP9DYVX78.jpg)

lynx
30


# Page. 31

![Page Image](https://bcdn.docswell.com/page/27VM1GZ37Q.jpg)

31


# Page. 32

![Page Image](https://bcdn.docswell.com/page/5JGG284YJL.jpg)

32


# Page. 33

![Page Image](https://bcdn.docswell.com/page/47QXP9G6JP.jpg)

33


# Page. 34

![Page Image](https://bcdn.docswell.com/page/KE46YX5MJ1.jpg)

テキスト化と図解化
34


# Page. 35

![Page Image](https://bcdn.docswell.com/page/L71V6NWYJG.jpg)

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


# Page. 36

![Page Image](https://bcdn.docswell.com/page/G7WLW461J2.jpg)

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


# Page. 37

![Page Image](https://bcdn.docswell.com/page/4JZM52YX73.jpg)

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


# Page. 38

![Page Image](https://bcdn.docswell.com/page/YE6N9VDPEV.jpg)

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


# Page. 39

![Page Image](https://bcdn.docswell.com/page/GE55ND3PE4.jpg)

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


# Page. 40

![Page Image](https://bcdn.docswell.com/page/972N58ZZJR.jpg)

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


# Page. 41

![Page Image](https://bcdn.docswell.com/page/DJYPK6RNJM.jpg)

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


# Page. 42

![Page Image](https://bcdn.docswell.com/page/V7N5RZDVE8.jpg)

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


# Page. 43

![Page Image](https://bcdn.docswell.com/page/YJ9YMZGV73.jpg)

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


# Page. 44

![Page Image](https://bcdn.docswell.com/page/GJ86L1V4ED.jpg)

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


# Page. 45

![Page Image](https://bcdn.docswell.com/page/LJL9LQ5V7R.jpg)

45


# Page. 46

![Page Image](https://bcdn.docswell.com/page/47MZM13NJW.jpg)

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


# Page. 47

![Page Image](https://bcdn.docswell.com/page/P7R6VLQ4E9.jpg)

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


# Page. 48

![Page Image](https://bcdn.docswell.com/page/PJXMZW5ZEX.jpg)

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


# Page. 49

![Page Image](https://bcdn.docswell.com/page/3JKG8V6V7D.jpg)

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


# Page. 50

![Page Image](https://bcdn.docswell.com/page/LE3N2M8QE5.jpg)

Authoring Practices Guide
50


# Page. 51

![Page Image](https://bcdn.docswell.com/page/8EDWZ6MW7G.jpg)

axe
51


# Page. 52

![Page Image](https://bcdn.docswell.com/page/V7P9DYRXJ8.jpg)

WAIC
52


# Page. 53

![Page Image](https://bcdn.docswell.com/page/2JVM1GR3JQ.jpg)

nvda.jp
53


# Page. 54

![Page Image](https://bcdn.docswell.com/page/5EGG28MYEL.jpg)

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