スクリーンリーダでMiroを触ってみた

## はじめに
視覚的なツールであるMiroでアイデア出しなどをすることも増えてきたから、スクリーンリーダでMiroを触ってみよう。この記事では、アイデア出しなどで使える基本的な「ボードの内容を読んで、付箋を貼る」ってことをやってみたいと思うんだ。
Miroは意外とスクリーンリーダに対応していて、[Miroのホームページ](https://help.miro.com/hc/ja/articles/4403828752274-%E6%94%AF%E6%8F%B4%E6%8A%80%E8%A1%93%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6-Miro-%E3%83%9C%E3%83%BC%E3%83%89%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95 "支援技術を使って Miro ボードを利用する方法")でも紹介されている。基本的な操作はこのやり方に沿ってほしい。
さあ、"Explore board content"の声が聞こえたらボードを冒険してみて。
> 注意事項
>本記事は「富士通株式会社 デジタルシステムプラットフォーム本部 Advent Calendar 2024」の23日目の記事です。
>記事の掲載内容は私自身の見解であり、所属する組織を代表するものではありません（お約束）。

## 1.ボードの内容を読む📝
まずMiroでよくあるシチュエーションがアイデア出しだ。周りの付箋の内容を読みながら自分の考えに影響されていくのが醍醐味だ。
"Explore board content"が聞こえたらEnterを押すと見出しジャンプで付箋たちをまとめているフレーム間を移動できるはず。（これはスクリーンリーダによって違うかもしれないからいろいろ試してほしい。スクリーンリーダ「NVDA」では確認済み。）

さあ、例えば、カレーの作り方が書かれた付箋をつくってもらい、フレーム１で囲うとしよう。
<img width="400", alt="カレーの作り方が書かれた8つの付箋",  src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3952115/1e66d018-60f6-f328-a565-c69e4a3a03bd.png">
スクリーンリーダではこんな風に読まれる。左から右へ、行き止まりで左下に移る、を繰り返す。
* * *
フレーム１
1. 材料を準備する（肉、野菜、カレールーなど）, light yellow sticky note, 1 of 8
2. 野菜を切る（玉ねぎ、じゃがいも、にんじんなど）, light yellow sticky note, 2 of 8
3. 肉を炒める, light yellow sticky note, 3 of 8
4. 野菜を加えて炒める, light yellow sticky note, 4 of 8
5. 水を加えて煮込む, light yellow sticky note, 5 of 8
6. カレールーを加えてさらに煮込む, light yellow sticky note, 6 of 8
7. 味を調える, light yellow sticky note, 7 of 8
8. ご飯と一緒に盛り付ける, light yellow sticky note, 8 of 8
* * *
おう、順番もいい感じだな。おいしくできそうだ。
ただ、この付箋の位置を縦に並べると、順番が崩れてしまうんだ。
<img width="200", alt="カレーの作り方順番崩れたver",  src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3952115/f88e9660-98fc-e78f-130b-a09d6d79cc38.png">
***
 1. 材料を準備する（肉、野菜、カレールーなど）, light yellow sticky note, 1 of 8
 2. 野菜を切る（玉ねぎ、じゃがいも、にんじんなど）, light yellow sticky note, 2 of 8
 5. 水を加えて煮込む, light yellow sticky note, 3 of 8
 3. 肉を炒める, light yellow sticky note, 4 of 8
 6. カレールーを加えてさらに煮込む, light yellow sticky note, 5 of 8
 7. 味を調える, light yellow sticky note, 6 of 8
 4. 野菜を加えて炒める, light yellow sticky note, 7 of 8
 8. ご飯と一緒に盛り付ける, light yellow sticky note, 8 of 8
***
こんな風に2の後に5が来たりしてしまう。MiroAIで出力したオブジェクトを手動で入れ替えているから、めちゃくちゃになってしまうのかもしれないな。
ひとまず、順番があまり関係ないときは、これで耐えそうだ。

## 2. 付箋を貼る💡
よし、つぎは付箋をはってみよう。
付箋を貼るには、まず特定のフレームに移動して、貼りたい箇所を表示する必要がある。これには2つ方法がある。
①Controls Toolbarで"Frames"を選択し、特定のフレームに移動
②コラボレーターにユーザを呼ぶ機能で連れて行ってもらう
それから、Creation toolbar（画面左側）で、Tabキーを押すと"Sticky note"が聞こえてくるはずだ。ちなみに、ショートカットは"N"。これを押すといろんな色の付箋が選べて、付箋を貼ることができる。
付箋に文字を入力し終えたら"Esc"を押して、ボードに戻ろう。
<img width="200", alt="「9.食べる」と書かれた付箋",  src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3952115/51ba202c-afbb-f995-8321-23a5d89994ae.png">
参考：[Miroのショートカットとホットキー](https://help.miro.com/hc/ja/articles/360017731033-%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88%E3%81%A8%E3%83%9B%E3%83%83%E3%83%88%E3%82%AD%E3%83%BC "miroのショートカットとホットキー")
## さいごに
ここまで読んだ方にはわかると思うが、Miroはまだまだボードを作る側のコツに頼ってしまう。ここに基本的なコツをまとめておくので参考にしてほしい。
**1. フレームを使って構造化する**
スクリーンリーダでMiroを触ると、フレームごとに移動ができるのでフレームの上に付箋などを置くと読み上げられやすい。
**2. 空の付箋は置かない**
アイデア出しの際に端、大量においてある付箋は、”Empty, red sticky note”と読みあげられてしまい、肝心の内容のある付箋が読み上げられない。
**3. ☛左から右へ横長にボードを作る☛**
Miroは左から右へボードが読み上げられる。縦にオブジェクトを置くと読まれないことがあるので横長に置くとよい。

もちろん、ボードをつくる側のコツだけではなく、Miroとスクリーンリーダの相性によってうまく読み上げられないオブジェクトもある。
例えば、中心から外側に向かって重要度が薄れていく（円の中に円がある）サークルマップなどは、順番通りに読み上げられないので、重要度順で読み上げられるようにすると、右のように円がばらばらになってしまう。
<img width="600", alt="サークルマップ",  src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3952115/e198bbd8-8219-d3f1-fa3d-731d9c5c7497.png">
そんな時にはMiroAIのドキュメントも使ってボードの内容をまとめながら、進めてくのがいいかもしれない。
<img width="600", alt="サークルマップをMiroAIに文書化させた画像",  src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3952115/0f147b6a-3b17-5d0e-0c02-9026afbca7a6.png">

これは2024年12月時点のMiroだから、将来的にはどんなひとにでも使いやすいMiroになってほしいってところだな。
この記事の共同執筆者はスクリーンリーダユーザのshun.y(同期)だ。彼からの一言「Miroよ，もっと使いやすくなってみろ！！」