スクリーン・リーダーNVDAを使ってCodiMDとDocBaseでドキュメントを作る

Katsutoshi Tsuji

こんんいちは。アクセシビリティエンジニアの辻勝利です。今年の9月からより多くの人たちにSmartHRを活用していただけるようにアクセシビリティ向上の取り組みを進めています。

これはアクセシビリティ Advent Calendar 2021の12月7日の記事です。

昨日の記事はRikiya Ihara / magiさんの2021年、freeeのアクセシビリティを振り返るでした。 伊原さんやFreeeの皆様が今年取り組んでこられたアクセシビリティ向上の話を読みながら、僕もアクセシビリティで一発当てられるように頑張りたいなと思いました。

さて今日は、チーム内のドキュメントの共有にスクリーン・リーダーを使ってどのように参加するかについて書いてみます。

今回紹介するツールの他にも、GoogleドキュメントやMicrosoft Wordを使ってスクリーン・リーダーの利用者がドキュメントの共同編集に参加する方法もあります。

複数のアクセシブルな選択肢があるというのは素晴らしいことですね。

初めに

皆さんは、チーム内のドキュメントの共有にどんなツールを使っていますか？ SmartHRで僕たちは、社内向けのドキュメントの共有にCodiMDとDocbaseを使用しています。

両者ともに、スクリーン・リーダー利用者にとって比較的扱いやすいMarkdownで共有ドキュメントを作成できるので、社内で共有されているほとんどのドキュメントは僕にとってもとても読みやすいものです。

僕たちは、ドキュメントの下書きや修正はCodiMDで行い、できあがったものはDocBaseで全社に公開するような使い方をしています。

CodiMDやDocBaseを使えば、手元にエディタがなくてもオンラインでドキュメントの編集と社内共有ができるのですが、スクリーン・リーダーを使っている場合は一手間かける必要があります。

今回は、無料でオープンソースのWindows用スクリーン・リーダー、NVDAを使ってCodiMDとDocbaseでドキュメントを作成・編集する方法を紹介します。

テストした環境

今回ドキュメントの編集に用いたのは以下の環境です。

※それぞれのリンク先からは更新バージョンが入手できるかもしれません

作成済みのドキュメントの読み上げ

両者ともにMarkdownで作成されたドキュメントが格納されていて、ドキュメントを開くとHTMLとして表示されます。 NVDAを初めとしたスクリーン・リーダーでは、一般的なWeb閲覧用のコマンドを使ってコンテンツを読み進めることができます。

なお、NVDAはブラウズモードで操作する必要があります。詳細はNVDA日本語版　操作ガイドを参照していただくとして、よく使いそうなコマンドをいくつか紹介します。

  • 見出しに移動する: HまたはShift+H

  • 特定レベルの見出しに移動する: 1～6またはShift+1～6

  • リストに移動する: LまたはShift+L

  • テーブルに移動する: TまたはShift+T

CodiMDでドキュメントを作成する

それでは実際にNVDAを使ってCodiMDでドキュメントを作ってみます。 なお、CodiMDのエディットボックスはスクリーン・リーダーで内容を確認しながら編集することができないため、ドキュメントはあらかじめVisual Studio Codeで書いておくと良いでしょう。

また、ドキュメントの作成中はNVDAのブラウズモードとフォーカスモードを切り替えながら作業しますので、必要なときにNVDAキー＋スペースキーを押して切り替えてください。

  1. CodiMDにサインインして「新規ノート」というリンクを開きます

  2. ドキュメントの内容を入力するためのエディットボックスにフォーカスが移動島す

  3. Visual Studio Codeで作成しておいたドキュメントの内容をここに貼り付けます

  4. 貼り付けたドキュメントがどのように表示されるかを確認するには「ブラウズモード」に切り替えてページ内を読み上げます

  5. エディットボックスの前にあるラジオボタンは次のように機能します（ショートカットキーでも切り替えられます）

    • 編集モード（Alt+Ctrl+E）

    • 分割モード（Ctrl+Alt+B）

    • 表示モード(Ctrl+Alt+V)

ポイント

  • ドキュメントを閲覧したいだけなら「表示モード」への変更がお勧めです

  • エディットボックス内でカーソルを動かしても編集中の内容を読み上げることはできません

作成済みのドキュメントを編集する

作成済みのドキュメントを編集する際は、他の人が同じドキュメントを編集していないかに十分注意してください。

  1. CodiMDにアクセスします

  2. 見出しレベル4に移動して編集したいドキュメントを探してEnterを押します

  3. 「編集モード」のラジオボタンにチェックを付けてドキュメントが編集できる状態にします

  4. 本文が書かれている複数行のテキストフィールドに移動してフォーカスモードに入り、全てのテキストを選択して切り取ります（編集中のテキストフィールドの内容は読み上げられません）

  5. Visual Studio Codeの新しいファイルに切り取った内容を貼り付けます

  6. 貼り付けた内容を編集します

  7. 編集が終わったら全ての内容を選択してコピーします

  8. CodiMDのウインドウに戻ってコピーした内容を貼り付けます

DocBaseでドキュメントを作成する

こんどはNVDAを使ってDocBaseでドキュメントを作ってみます。 なお、DocBaseのエディットボックスはNVDAで内容を確認しながら編集することができないため、ドキュメントはあらかじめVisual Studio Codeで書いておくと良いでしょう。

  1. DocBaseにアクセスしてログインします

  2. 「新しいメモを作成」というリンクを開きます

  3. 「タイトル」というテキストフィールドにドキュメントのタイトルを入力します

  4. 「タグ」というテキストフィールドにタグ（省略可能）を入力します

  5. 次のテキストフィールド（エディット複数行と読まれる）にVisual Studio Codeで作成しておいたドキュメントの内容を貼り付けます

  6. ブラウズモードに変更して「公開範囲を選択」というリンクまで移動してEnterを押します

  7. 「X」を押して目的の公開範囲のチェックボックスに移動し、スペースを押してチェックを付けます

  8. 「Shift+B」を押して前のボタンを探してEnterを押します（ボタンの文言は公開範囲に応じて変わります）

ポイント

  • エディットボックス内でカーソルを動かしても編集中の内容を読み上げることはできません

  • 公開範囲を指定しないとドキュメントの公開ができません

  • 「公開範囲を選択」というテキストは、上記7.のチェックボックスで選択した公開範囲に応じて内容が変更されます

  • ドキュメントを公開するためのボタンの文言は公開範囲に応じて変更されます

作成済みのドキュメントを編集する

作成済みのドキュメントを編集する際は、他の人が同じドキュメントを編集していないかに十分注意してください。

  1. 「投稿したメモ」などから編集したいメモにアクセスします

  2. 見出しレベル3に移動して編集したいドキュメントを探してEnterを押します

  3. メインランドマークに移動して「edit編集」というリンクを開きます

  4. 「クリック可能 pen」と読み上げられたところでEnterを押してテキストが編集できる状態にします

  5. 本文が書かれている複数行のテキストフィールドに移動してフォーカスモードに入り、全てのテキストを選択して切り取ります

  6. Visual Studio Codeの新しいファイルに切り取った内容を貼り付けます

  7. 貼り付けた内容を編集します

  8. 編集が終わったら全ての内容を選択してコピーします

  9. DocBaseのウインドウに戻ってコピーした内容を貼り付けます

  10. 公開ボタンを押して編集したテキストを公開します

まとめ

今回ご紹介したCodiMDやDocBaseは複数のメンバーとドキュメントを共同編集できるツールです。 スクリーン・リーダーを使っているユーザーにとって、快適にドキュメントの作成や編集ができるわけではありませんが、使い方に慣れれば会議の議事録や社内ドキュメントを閲覧したり編集したりと業務に活用できると思います。

本当は、エディタが手元になくても、NVDAとブラウザーさえあればドキュメントの作成や編集が完結するところまでできるようになると素敵ですよね。 今後の使い勝手の改善に期待したいと思います。

この記事が気に入ったらサポートをしてみませんか？