スクリーンリーダーで使いやすい サービスやアプリを作りたい技術者の声

Slides:



Advertisements
Similar presentations
11 ActiBook の機能( PC 閲覧画面側・ flash 版) テキストの位置 まで検索可能 背景色・背景画 像の選択可能 ※自社のロゴを入れたり「お問い合わせ」ボタン を入れたりすることが可能です。 ページ内に動画を埋め込 むことが可能です。 付箋メモに書き 込みが可能 ボタンバーの画像変更可能.
Advertisements

コンピュータ基礎実習 ( 上級 ) 第三回 ウェブページの作成について2 清水淳紀. 前回までの内容  ページの簡単な作り方。  ページの編集・アップロード・確認 方法について。  ページはメモ帳や Kompozer 等で編集できる。 ウェブサー バーにアップロード  ページを公開するには、必要ファイル群をウェブサー.
PowerPoint 入門 2004年1月17日 聖路加看護大学 中山和弘. PowerPoint とは Microsoft 社製プレゼンテーション用ソフ ト 基本操作や図表作成は Word 、 Excel など と共通 スライド作成ソフト、液晶プロジェクタ でプレゼンテーション スライドは、テキスト、図表、写真など.
1 WORD の起動法と終了法 ● WORD の起動法 (1) デスクトップの Microsoft Word アイ コンをダブルクリックする。 * (2) 「スタート」 ― 「すべてのプログラ ム」 ― 「 Microsoft Word 」と選ぶ。 (3) Word で作成された文書があるとき は、そのアイコンをダブルクリック.
IT 講習会 -PowerPoint- テックサポーター 板垣翔大. 目次  PowerPoint とは?  PowerPoint を起動しよう  基本操作を知ろう  SmartArt で情報の「見える化」  伝わるスライドのために  スライドショー  得する小技 IT 講習会 -PowerPoint-
Internet Explorer v7,v8 の主な機能
F5 を押すか、または [スライド ショー] > [最初から] をクリックして、コースを開始してください。
2017/2/26 情報処理 第5回.
Microsoft Office 2010 クイックガイド ~OneNote編~
スクリーンリーダー NVDA と LibreOffice
応用コース:ワープロを活用する WORD2000 1回目 基礎コースの復習(第1章と付録) 2回目 文字の入力(第2章と第4章)
図の挿入 ●方法1 ①図を挿入する位置にカーソルを置く。 ②「挿入」タブ ⇒「図」 → 「ファイルから」とクリックする。 ③挿入するファイルを選択し、「挿入」をクリックする。 ●方法2(書式までコピーされるので、ファイルサイズが大きくなる) ①挿入する図をコピーする。 ② 挿入する位置にカーソルを移動し、ツールバーまたは右クリックメニューの「貼り付け」をクリックする。
情報処理 第8回.
2017/3/2 情報処理 第8回.
Microsoft PowerPoint98 Netscape Communicator 4.06[ja]
コンピュータ プレゼンテーション.
パワーポイントの使い方 東京女子大学 情報処理センター 浅川伸一.
情報処理 第7回.
Flashプレイヤーを使った動画配信 情報工学科 宮本 崇也.
デジタルポートフォリオ作成支援ツール PictFolio 使用マニュアル
Lync 会議 Lync 会議に参加する Lync 2013 クイック リファレンス Lync 会議のスケジュール
2017/3/7 情報処理 第8回.
Microsoft Office クイックガイド ~Word 2013~
情報処理 第12回の教材 プレゼンテーションソフト PowerPoint 高知大学 共通教育 理学部 対象 担当教員 : 塩田
文字書式設定(1) 方法1: ①文字書式を設定したい文字列を選択する。 ②「書式」メニュー → 「フォント」とクリックする。
第1回 HTML5入門.
エクセル(1)の目次 起動法、ブック、シート、セル ブックの開き方 エクセル画面 マウスポインターの種類 シート数の調節 データの入力法
情報爆発A01支援班 マイサーチエンジン開発環境支援グループ 中村聡史, 大島裕明, 田中克己, 喜連川優
ネットワーク情報活用 ILC Office / ILP KOBAYASHI Tomoko
F5 を押すか、または [スライド ショー] > [最初から] をクリックして、コースを開始してください。
情報コミュニケーション入門 2016年度版 情報コミュニケーション入門m 総合実習(1).
インターネット活用法 ~ブラウザ編~ 09016 上野喬.
9 Microsoft Word(1).
アプリケーション共有機能 〈参考〉 (図1) (図2)
情報処理 第6回.
情報処理 第6回.
チュートリアル EBSCOhostの概要
Microsoft Office 2010 クイックガイド ~応用編~
2017/4/9 情報処理 第5回.
サイト運営者へむけて、CMS管理画面をつかって サイト運営していく方法を紹介します。
WordPressに挑戦! WordPress(ワードプレス)は、ブログを 作成するためのWEBアプリケーションです。
マイクロソフト Access を使ってみよう 第1回
マイクロソフト Access での SQL 演習 第1回 SQL問い合わせ(クエリ)
Microsoft Office 2010 クイックガイド ~応用編~
基礎プログラミング演習 第1回.
PowerPointとは? 百聞は一見しかず! プレゼンテーションソフトウェア 今、使っているこれがそうです!
Microsoft Office 2010 クイックガイド ~OneNote編~
Microsoft® Office SharePoint® Server 2007 トレーニング
Microsoft PowerPoint Netscape Communicator
経営工学基礎演習a PowerPointの利用.
10 Microsoft Word(1) 10.1 Microsoft Word v.Xの概要 起動 終了
情報処理 第7回 表がある文書の作成.
Office IME 2010 を使う.
Microsoft Office 2010 クイックガイド ~Word編~
Microsoft Office 2010 クイックガイド ~Word編~
情報処理 第8回.
利用説明 2018年9月 (株)紀伊國屋書店.
ネットショップデザイン入門Ⅰ・ⅡSEO 2013/12/18 Webデザイン入門 SEOの基本.
2019/2/24 情報処理 第13回.
PowerPoint へようこそ 簡単に操作するための 5 つのヒント.
Microsoft Office クイックガイド ~応用編~
情報スキル活用 第2週 基礎技術ー2 : Webページの基本形.
すべて読む Microsoft SharePoint ニュース
ここに 表題や引用文が入る 背景への図の使用とキャプションへのテクスチャの適用 (中級)
情報処理 第13回の教材 プレゼンテーションソフト PowerPoint 高知大学 共通教育 理学部 対象 担当教員 : 塩田
Microsoft Office クイックガイド ~応用編~
Microsoft SharePoint Online の Web サイトを カスタマイズする方法
常設チャット トピック フィードを作成してアクティビティをフォローする Lync 2013 クイック リファレンス
Microsoft Office 2010 クイックガイド ~応用編~
サンプル見出し テキスト 1 行目 テキスト 2 行目 テキスト 3 行目 (中級) 図の背後でタイトルを移動させるアニメーション効果
Presentation transcript:

スクリーンリーダーで使いやすい サービスやアプリを作りたい技術者の声 西本 卓也 @nishimotz / @24motz NVDA日本語チーム 代表 / 株式会社シュアルタ

01.mp4

かずと君 2010年に家族が「無料のスクリーンリーダー」を見つける その後、思い切ってNVDAに乗り換える 今日のお題 当時、小学校3年生 一般のソフトを使いたい 今日のお題 NVDAで「あれっ」と思うこと

自己紹介:西本 広島 → 早稲田大学 → 京都工芸繊維大学 → 東京大学 スクリーンリーダー NVDA 日本語版 広島(2011年から) 機械学習、認知科学、障害者支援 → 博士(工学) スクリーンリーダー NVDA 日本語版 広島(2011年から) リモートワーク/ソフトウェア受託開発 株式会社シュアルタ(2018年から) 信号処理/自然言語/Web/組み込み/モバイル/クラウド 活動 WAIC / Python / こどもプログラミング

NVDA: Non-Visual Desktop Access オープンソースの Windows 対応スクリーンリーダー オーストラリアの NPO と世界のコミュニティ 3ヶ月ごとにリリース、新しい技術や環境への対応 NVDA日本語チーム : www.nvda.jp 日本語版の配布 本家版の開発と翻訳 FocusHighlight アドオン 利用者・技術者・開発者に対する普及啓発(11月 サイトワールド) NVDAチートシート配布中

CSUN 2019 アナハイム

質問①

02.mp4

何をやっていたのか Chrome を NVDA で使っている キーボード(矢印キー)で移動して Web サイトを読む

「リンク」だと解釈されていません! 「クリック可能」は NVDA の実力 そして悲鳴! 答え① 「リンク」だと解釈されていません! 「クリック可能」は NVDA の実力 そして悲鳴!

Web a11y の役割分担 音声・点字 👪😎 NVDAが作る世界 変化に強い スクリーンリーダー コンテンツ アプリ OS 画面拡大

👪😎 フォーカスモード(ガシャ) ブラウザ OS コンテンツ A B C D NVDA キーイベントはブラウザへ ふつうのPC操作と同じ コンテンツの操作 ブラウザ自身の操作も 上下矢印でスクロール ふつうのPC操作と同じ マウスなしでWindows NVDA コンテンツ ブラウザ OS

👪😎 ブラウズモード(ポン) ブラウザ OS コンテンツ A B C D NVDA キーイベントはNVDAへ 読み取り場所 レビューカーソル ナビゲーターオブジェクト NVDA コンテンツ ブラウザ OS

ブラウズモードの機能 上下の矢印キー : 読み取り場所の移動 Tab / スペース / Enter など : フォーカスモードと同じ機能 自動的にフォーカスモードに切り替わる エディットフィールド、コンボボックス 1文字ナビゲーション(見出しジャンプなど) NVDA+F7 : 要素リスト

1文字ナビゲーションの例 D: ランドマーク(Shift+Dで逆方向、以下同じ) H: 見出し I: リスト項目 E: エディットフィールド B: ボタン C: コンボボックス X: チェックボックス G: 画像

クリック可能? Firefox : リンク Chrome : クリック可能 「リンク」であるべき Enter または スペース リンクを開く

Firefox アクセシビリティプロパティ

Chrome "Role: LayoutTable"

<a> を display: table している

「クリック可能」=「実行」可能 DOM の click イベントに反応できる NVDA では NVDAの「悲鳴」 通常はボタンやリンクの「既定のアクション」として実装 だが onclick 属性さえあれば「マウスとタップに反応」できる NVDA では 「既定のアクション」がない要素を「実行」できる フォーカスできない要素を NVDA+Enter で「実行」できる ロールがあれば「クリック可能」を省略して「リンク」などと読む NVDAの「悲鳴」 CSS によって「リンクではなくなった」と Chrome が解釈 「書式とドキュメント情報」で報告をオフにできる

<a role="link"> で回避

資料 WEB+DB PRESS Vol.95 黒澤さんの記事 《「実行」は、入力デバイスごとの場合分けが不要な操作》

質問②

何をやっていたのか? Internet Explorer 11 + NVDA で「ツイキャス」を使う Flash が使われている

実はすでに、ものすごく配慮されている! Chrome を使いましょう! 答え② 実はすでに、ものすごく配慮されている! Chrome を使いましょう!

NVDAの「埋め込みオブジェクト」対応 対象 NVDA ブラウズモード オブジェクトの中に入ると Oracle Java Applet Adobe Flash Player HTML5 Video (MediaElements.js) NVDA ブラウズモード O / Shift+O : 1文字ナビゲーション Enter : オブジェクトの中に入る オブジェクトの中に入ると アプリのように Tab / Shift+Tab でフォーカス移動 NVDA+Ctrl+スペース : 元のドキュメントに移動 ブラウズモードのドキュメント 埋め込みオブジェクト https://github.com/nvaccess/nvda/issues/7239

アンケート ボタン しか見えないが 画像を変更 ボタン アンケート ボタン 録画を保存する ボタン このライブを削除する ボタン 画像を変更 ボタン アンケート ボタン 録画を保存する ボタン このライブを削除する ボタン 録画はあとで公開 ボタン

考察 たしかに だが 許してあげよう(許してください) 埋め込みオブジェクトで Enter できない(気がする) オブジェクトの中のボタンは Tab で見つかる(確実ではないが) だが IE11 + Flash + スクリーンリーダーは配慮されている スクリーンリーダーユーザーにしか見えないボタンがある 許してあげよう(許してください) IE11 だし Flash だし

質問③

何をやっていたのか? Chrome + NVDA +「日本語表現インフォ」 辞書検索サイト 広告で繰り返し「追加マークあり」と読まれる 動的コンテンツとして広告が入る 広告で繰り返し「追加マークあり」と読まれる

「校閲者による更新の報告」をオフに! 「挿入マークあり」になるかも! 答え③ 「校閲者による更新の報告」をオフに! 「挿入マークあり」になるかも!

NVDA 追加マークあり = inserted identifies inserted content reported when text is marked as having been inserted

<ins> 要素 : 製作者の意図?

ins 要素とは 文書に 追加 されたテキストの範囲を表します

「追加マークあり」の使われ方 ROLE_INSERTED_CONTENT NVDA : 同じ種類の情報は同じように読み上げる IAccessible2 で標準化 NVDA : 同じ種類の情報は同じように読み上げる Webでもアプリでも 一貫性

Microsoft Word「変更履歴の記録」 追加マーク

上から下に1行ずつ移動 こんにちは。 これは2行目です。 追加マークあり これは2行目と3行目の間に追加された行です。 追加マークなし これは3行目です。 ブランク

下から上に1行ずつ移動 これは3行目です。 追加マークあり これは2行目と3行目の間に追加された行です。 追加マークなし これは2行目です。 こんにちは。

「追加マークあり」の経緯 変化したら差分を報告する NVDA 2015.4 NVDA 2016.2 書式とドキュメント情報の設定 逆方向の移動や1文字ナビゲーションで破綻したくない NVDA 2015.4 IE / MSHTML で <ins> / <del> などを報告 NVDA 2016.2 Microsoft Word で文章校正結果の報告 書式とドキュメント情報の設定 校閲者による更新の報告 無効にすると「日本語表現インフォ」に効果あり

変更履歴機能がWebアプリに IAccessible2 の開発 Firefox と Chrome の開発者が議論 NVDA 2018.3 現在は github.com/LinuxA11y/IAccessible2 Firefox と Chrome の開発者が議論 あっという間に <ins> 対応 NVDA 2018.3 Google Chrome において Webページの中で挿入や削除のマークアップを報告するように Firefox + NVDA も対応済み Firefox 66.0.5 で確認

https://github.com/LinuxA11y/IAccessible2/issues/4

「挿入マークあり」にするべき insert = 追加(根拠はたぶんMDN) Microsoft ランゲージポータル : insert = 挿入 / add = 追加 「マーク」は意訳(議論は歓迎) https://osdn.net/projects/nvdajp/ticket/35562 https://github.com/nvaccess/nvda/issues/4920

質問④

何をやっていたのか? Chrome + NVDA Google 検索 YouTube サイトで実行すると エディットに移動 : 自動的にフォーカスモードに(ガシャ) Enter : 検索が実行されて次のページへ ページ更新 : 自動的にブラウズモードに(ポン) 開いたページの自動読み上げ YouTube サイトで実行すると ページが変わっているのに、ブラウズモードに戻らない? NVDA+T : 現在のウィンドウのタイトルの報告

答え④ 慣れましょう!

実はページ遷移してない どうやら www.youtube.com は SPA 入力して Enter を押すとページ遷移する ように見える Single-Page Application 入力して Enter を押すとページ遷移する ように見える タイトルやURLは更新される 新しいHTMLページが取得されていない /results?search_query=NVDA → application/json NVDA は「ポン」にならない 直前のエディットフィールドでフォーカスモードになったまま Microsoft Edge + ナレーターでも状況は同じ

NVDAのブラウズモード 設定できること ブラウズモードに自動的に切り替えない FocusHighlight 6.0 自動読み上げしない 「ガシャ」「ポン」のかわりに音声でモードを報告 ブラウズモードに自動的に切り替えない NVDA 2019.2 で追加されるオプション アクセシビリティ検証におすすめ? FocusHighlight 6.0 ブラウズモードでない場合は常にフォーカスモード 色や太さのカスタマイズ機能を実装中 将来のNVDAにハイライト機能を標準搭載

NVDAで検証する意義 開発者も利用者も無料 やってみないとわからない 他のスクリーンリーダーに対応させる準備になる 相手にお願いしやすい やってみないとわからない サードパーティのライブラリやフレームワーク 動的なコンテンツ 他のスクリーンリーダーに対応させる準備になる 標準化を推進 開発者と利用者が Web の「概念」を共有する手段 開発や翻訳への参加を歓迎

アクセシビリティのこれから 頻繁にリリースされるアプリやサービス アクセシビリティを頑張ってもすぐに壊れる? 展望 組み込まれていく 機械学習・人工知能・クラウド オープンソース・検証ツール・自動化 組み込まれていく 新しい技術、正しい開発手法、ビジネス習慣

PowerPoint 代替テキストの自動生成

Android リリース前レポート

NVDA 日本語版のユーザー数

Thanks to かずと君