# スクリーンリーダーでのDiscourse

**URL:** https://meta.discourse.org/t/discourse-with-a-screen-reader/178105
**Category:** UX
**Tags:** accessibility, screen-reader
**Created:** [2021 年 2 月 2 日午後 1:17 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105 "2021-02-02T13:17:53Z")
**Posts on this page:** 20
**Page:** 3

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2021 年 5 月 26 日午前 12:48 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/46 "2021-05-26T00:48:39Z")

</div>

> [@sam](#):
>
> それ以外であれば、トピック一覧のトピックに `role="heading"` を追加することはもちろん可能です。

当面は role を採用するのがよいでしょう。H2 に変更すると、多くのテーマが壊れてしまう可能性があります。

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2021 年 5 月 26 日午前 1:05 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/47 "2021-05-26T01:05:55Z")

</div>

問題ありません、PR は準備中です。

これにより、NVDA でトピックリストを素早く移動するのが非常に快適になりました。h キーを連打してトピック間を移動できます。

> <https://github.com/discourse/discourse/pull/13153>
>
> Previously we had no role set for various topic links, nor did we have any
> heade…rs.
> 
> This teaches screen readers that topic links in topic lists are to be treated
> as H2. We opted for this less radical change cause a change of the element
> type would probably result in many broken themes.
> 
> Confirmed on NVDA you can very quickly breeze through topic lists now. Minor
> edge case is pinned topics which can be a bit annoying due to multiple links.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2021 年 5 月 26 日午前 1:54 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/48 "2021-05-26T01:54:11Z")

</div>

残念ですが、トピックリストには見出し2または見出し3が適しています。ただ、その機会は8年以上前に過ぎ去ったでしょう。

---

<div class="post-metadata">

### Author: ![nolan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nolan/32/208102_2.png) [@nolan](https://meta.discourse.org/u/nolan)
#### Post date: [2021 年 5 月 26 日午後 4:04 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/49 "2021-05-26T16:04:33Z")

</div>

うーん、新しい地域についてどう感じるか少し迷いますね。各投稿に少しだけ余計なテキストが追加されるものの、それほど悪くないと思いますし、矢印キーで移動する際に各投稿に少し追加の文脈が加わるのは良いことです。もし人々が気に入らなかったら、後で元に戻せるでしょうか？

これらの変更はここで既に反映されていると推測しますが、そのようですし、トピックの閲覧体験がはるかに快適になりました。これほど迅速に対応してくださり、本当にありがとうございます。ホストサイトでの新リリースの公開はいつになるのでしょうか？

---

<div class="post-metadata">

### Author: ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [2021 年 5 月 26 日午後 6:17 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/50 "2021-05-26T18:17:10Z")

</div>

> [@nolan](#):
>
> 新しいリリースはホストされたサイトでいつ公開されますか？

デプロイボタンを押した瞬間です 😉。あなたのサイトは今デプロイ中です。約 20 分で公開されるはずです。

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2021 年 5 月 27 日午前 12:58 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/51 "2021-05-27T00:58:35Z")

</div>

@nolan、

> 後で、それが人々に好まれないことが判明した場合は、元に戻せると思いますか？

はい、もちろんです。もし視覚障害者コミュニティが、これが実際には役立つよりもノイズを増やすと感じるようであれば、喜んでロールバックします。

> 私のスクリーンリーダーに HTML の `<select/>` として報告されるドロップダウンは、ほぼ完全に壊れています。

SelectKit というライブラリがあり、至る所で利用しています。カテゴリの選択、プライベートメッセージ作成時のユーザー選択、トピックの「追跡状態」の選択（トピックを監視したいと伝えられる場合など）にこのライブラリを使用しています。

このライブラリは NVDA との相性が非常に悪く、改善に時間を費やす予定ですが、非常に複雑な作業であり、数週間かかる可能性があることをお詫び申し上げます。

今日、いくつかの修正を追加しました。これらはきっと気に入っていただけるはずです。以前、管理インターフェースを見つけるのが非常に困難だとおっしゃっていましたね。

「別のトピックリストやカテゴリへ移動」という項目は、ページ上部にある「何でもあり」エリアで、サイト設定、管理パネル、カテゴリごとのトピックリストなどへのリンクが含まれています。@eviltrout が今朝これを変更し、リストを展開するとフォーカスがそこに移動するようにしました。これにより、NVDA ユーザーにとって明らかに使いやすくなりました。

私はあなたの体験について多くを学んでいます。今日気づいたもう一つの課題は、返信や新しいトピックを投稿した際の「フィードバックの欠如」です。成功したかどうかを判断することが非常に困難です。少なくともフォーカスを操作する工夫をすることで、お手伝いできるよう努めます。長期的には、Discourse に「サウンド」モードを追加して、各種アクションのエラーや成功についてフィードバックを与えるべきではないかと考えています。

私たちは長い道のりを歩むことになりますが、非常にワクワクしています。

私の目標、そして Discourse の目標は、PHPbb と「同等」になることではありません。私たちは「古い方法」よりもあらゆる点で優れているため、皆様の第一選択肢になりたいと考えています。そこに到達するには時間がかかりますが、私たちはすでに旅を始めています。

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2021 年 5 月 27 日午前 1:51 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/52 "2021-05-27T01:51:55Z")

</div>

> [@sam](#):
>
> 皆さんのご経験について多くの時間を費やして学んでおりますが、今日気づいたもう一つの課題は、返信や新規トピックを投稿した際の「フィードバックの欠如」です。投稿が成功したかどうかを判断することが非常に困難です。少なくとも、皆様のお役に立てるよう、いくつかのフォーカス操作の工夫を試みてまいります。

これには aria live regions を活用できるかもしれません。[ARIA ライブリージョン - ARIA | MDN](https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) 検索結果の件数を発表する例が一般的ですが、空の div を live region としてマークし、必要に応じて「返信が投稿されました」といったテキストを追加することも可能です。

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2021 年 5 月 27 日午前 1:56 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/53 "2021-05-27T01:56:55Z")

</div>

ライブリージョンは素晴らしいですね。select キットの課題に対する解決策にもなり得るかもしれません。

あ、role=alert もさまざまなエラーに対して非常に効果的ですね。今すぐ追加します！

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2021 年 5 月 27 日午前 8:32 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/54 "2021-05-27T08:32:59Z")

</div>

@nolan 本日もいくつかの素晴らしい修正・改善を行いました（すべてのテストは NVDA で実施しています）。

1. 投稿が短すぎる場合にアラートとして ARIA ロールを設定し、スクリーンリーダーが問題（投稿が短すぎるなど）を伝えるようにしました。

2. モーダルのフォーカスロジックを改善し、現在では無条件にモーダルにフォーカスを合わせます。これにより、さまざまなキーボードショートカットを発見しやすくなります。ショートカットへのリンクは「別のトピックリストまたはカテゴリへ移動」セクションにあります。

変更は現在、あなたのサイトにデプロイされています。

ご感想をお聞かせください！

---

<div class="post-metadata">

### Author: ![ethindp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ethindp/32/221618_2.png) [@ethindp](https://meta.discourse.org/u/ethindp)
#### Post date: [2021 年 5 月 27 日午後 4:56 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/55 "2021-05-27T16:56:00Z")

</div>

はい、少し細かすぎる指摘かもしれませんが、トピックのリストの表示が少し変に感じます。個々の列ではなく、行全体が見出しとしてマークされているように見えます。先ほど述べた通り、これは本当に些細なことです。私が気にしすぎなのかもしれません。

---

<div class="post-metadata">

### Author: ![nolan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nolan/32/208102_2.png) [@nolan](https://meta.discourse.org/u/nolan)
#### Post date: [2021 年 5 月 27 日午後 7:21 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/56 "2021-05-27T19:21:56Z")

</div>

おっと、このスレッドが盛り上がっているんですね。ブラウザ通知を有効にするとメールが届かなくなるのかもしれません。その辺りを修正できるか確認してみます。

これらの変更は素晴らしいです！ありがとうございます！

トピックリストの見出しが少し奇妙だという点には同感です。見出しには絶対的に必要な情報のみを含める方が好みかもしれません。他の詳細が必要なら、どこで確認できるか分かっているからです。

例えば、投稿表示を見てみると、私が追加した h2 の役割は名前と投稿時刻のみを囲んでいます。h/H キーで投稿を移動する際、最も重要視する情報はこれらだと思われます。トピックリストの場合、タイトルさえあれば十分かもしれません。

Ethin さん、もし同じ問題について話しているなら、あなたの意図を正しく捉えられたことを願っています。もし違っていたら、お知らせください。

---

<div class="post-metadata">

### Author: ![celtichawk](https://avatars.discourse-cdn.com/v4/letter/c/eb9ed0/32.png) [@celtichawk](https://meta.discourse.org/u/celtichawk)
#### Post date: [2021 年 5 月 27 日午後 8:43 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/57 "2021-05-27T20:43:26Z")

</div>

また、@Sam さんにもお伝えしたいのですが、これは Orca に対応していません。@Ethindp さんが Linux のバグハンティングやその他のお手伝いをしていただけるかどうかはわかりませんが、少なくとも私のシステム（Ubuntu + Orca/Firefox）では、ドロップダウンが少し機能しています。

例えば、トピックを作成すると、カテゴリのドロップダウンを展開してカテゴリ名を入力できます。状態選択メニューを開くこともできますが、そのメニューを展開するとボタンとして動作します。そのため、意図した状態メニューにたどり着けるかどうかわからないまま、盲目に（言葉遊びですが）状態メニューを押す必要があります。Orca や ATSPI イベントについて詳しくないため、あるスクリーンリーダーで動作するものが Orca でも動作するかどうか、あるいはより多くの作業が必要になるかどうかはわかりません。

---

<div class="post-metadata">

### Author: ![ethindp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ethindp/32/221618_2.png) [@ethindp](https://meta.discourse.org/u/ethindp)
#### Post date: [2021 年 5 月 27 日午後 10:12 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/58 "2021-05-27T22:12:43Z")

</div>

Firefoxからは atspi イベントを制御できないため、そこは問題ではありません。問題は、スクリーンリーダーに提示されるロールだけです。コントロールがコンボボックスのように振る舞う場合は、ARIA を使ってブラウザにそれがコンボボックスであることを伝えてください。覚えておいてください：使用しようとしている機能にデザインパターンが存在しない場合（それは非常に稀で、そのドキュメントは非常に包括的ですが）を除き、ARIA のデザインパターンに従ってください。

@nolan はい、私が言及していたのはそれです。見出しを通じてテーブル（および投稿）を移動するテーブルナビゲーションは、以下の理由により私にとって遅くなります：

1. 全ての列が見出し、または複数の見出しとなっています。そのため、以下のように読み上げられます：トピックタイトル。一時停止。トピックに関する情報。一時停止。トピックに関する情報。一時停止。など。Orca は NVDA と異なり、矢印キーで移動する際（この場合は「h」キーを使用して移動する際）、個々の列ではなく、テーブルの行全体を読み上げます。
2. 投稿も同様です。全ての投稿情報は、再び個別の見出しとなっており、上記のように読み上げられます。

解決策としては、視覚的なレイアウトを壊さない限り、重要な情報のみを含まれるそれぞれの列を単一の見出しに統合することです。（正直なところ、テーブル内での見出しナビゲーションにはあまり賛成ではありません。それはテーブルの動作とは異なり、見出しは本来そこに配置されるべきではないからです。）

最後に小さな問題が一つあります：全ての見出しが同じレベルに見えます。これは問題です。なぜなら、スクリーンリーダーは異なるレベルによってページ内を移動できるからです。全ての見出しが同じレベルであるため、トピックの見出しと関連投稿の見出しの間を移動することができません。結果として、トピック全体を読み上げなければならず、特に投稿数が非常に多いトピックでは非常に煩わしくなります。

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2021 年 5 月 27 日午後 10:40 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/59 "2021-05-27T22:40:31Z")

</div>

> [@nolan](#):
>
> トピックリストの見出しが少し奇妙だとのこと、同意します。見出しは絶対に必要な情報だけを含める形の方がいいかもしれません。それ以外の情報が必要な場合は、どこで確認できるか分かっていますから。

現在、ARIA の見出しロールは行全体に設定されています。これを、必須情報（ステータス、タイトル、カテゴリ、未読数など）である大テーブルの最初の列のみに移動させます。

一歩進めて、見出しロールをトピックタイトルだけに設定するのはどうでしょうか？トピックのステータスやカテゴリなどの情報は左右に移動して確認することを覚えていれば、これで処理が少し速くなるはずです。

@celtichawk ありがとうございます！@j.jaffeux さんが提案されているのは、JAWS、Orca、NVDA との互換性があるドロップダウンの解決策です。先ほどお伝えした通り、時間がかかるかもしれませんが、現在取り組んでおり、数週間以内に何かお見せできることを願っています。

@ethindp トピックの見出しに関するアイデアがあります。「ユーザー名」のような単一の要素にヘッダーロールを設定し、その上に「サムが3時間前に投稿しました」という ARIA 説明を加えるのです。そうすると、スクリーンリーダーは以下のように読み上げるはずです：

「投稿 #3 リージョン、サムが3時間前に投稿しました」

これで試してみましょうか？

---

<div class="post-metadata">

### Author: ![ethindp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ethindp/32/221618_2.png) [@ethindp](https://meta.discourse.org/u/ethindp)
#### Post date: [2021 年 5 月 27 日午後 10:55 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/60 "2021-05-27T22:55:02Z")

</div>

やってみるべきだね。そのアイデア、実は好きだよ。（マジで、テンプレートって最高だろ！）

---

<div class="post-metadata">

### Author: ![nolan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nolan/32/208102_2.png) [@nolan](https://meta.discourse.org/u/nolan)
#### Post date: [2021 年 5 月 27 日午後 11:13 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/61 "2021-05-27T23:13:15Z")

</div>

うーん、おそらく最初の列だけで十分でしょう。少し試してみましたが、タイトルだけでなく、既読/未読のステータスやカウントも読み上げてくれるのが気に入りました。幸い、残りの部分は最後に読み上げられるので、現状のままでも問題ないとは思いますが、最初の列のみを読み上げる方が、私の期待に近いですね。

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2021 年 6 月 1 日午前 6:05 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/62 "2021-06-01T06:05:30Z")

</div>

こんにちは、ノランさん。

今日はこれを変更しようかと考えていたのですが、`TD` 要素にはすでに「rowheader」というロールが割り当てられています。これいじりには少し懸念があります。

ここでいくつかの選択肢があります：

1. 重要な情報がすべて含まれている `TD`（テーブルの列）のロールを変更する。

2. `link-top-line` の `SPAN` にロールを追加する。これには重要な情報が含まれていますが、カテゴリやタグは含まれていません。

3. 本当はやりたくないのですが、ラッパーとなる `DIV` を追加することもできます。

どの案を採用すべきでしょうか？

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2021 年 6 月 9 日午前 6:22 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/63 "2021-06-09T06:22:17Z")

</div>

Claus は、見出しの役割が独特である点についても課題を提起しました。おそらく、見出しの役割を「リンク」そのものだけに割り当てるべきではないかと考えています。

そうすれば：

- ステータス（ロック済み、ピン留めなど）に関する内容は読み上げられません
- H キーを押します
- トピックのタイトルが読み上げられます
- 再度 H キーを押します
- 次のトピックのタイトルが読み上げられます

トピックに関する特別な情報を確認したい場合や、よりリッチな方法で操作したい場合は、いつでも上または下のキーを押して詳細を取得できます。

完全な解決策ではありませんが、「ピン留め」リンクに直接移動する場合や、行全体が読み上げられる場合に比べれば、多少の改善になると感じられます。

---

<div class="post-metadata">

### Author: ![thoeg](https://avatars.discourse-cdn.com/v4/letter/t/258eb7/32.png) [@thoeg](https://meta.discourse.org/u/thoeg)
#### Post date: [2021 年 6 月 9 日午前 6:57 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/64 "2021-06-09T06:57:26Z")

</div>

実際、フォーラムのトピック一覧を表示するためにテーブルを使用するのは非常に優れています。Orca を除く既知のすべてのスクリーンリーダーはテーブルをナビゲートできるため、正しい行と列の情報を取得すれば、優れたナビゲーションが実現します。トピックの見出しをリクエストした理由は、開いているトピックを安定してナビゲートするための確実な方法を得るためでした。テーブルに見出しを追加する明確な利点は特に見当たりませんが、適切に実装すれば問題を引き起こすことはありません。  
Claus

---

<div class="post-metadata">

### Author: ![nktech1135](https://avatars.discourse-cdn.com/v4/letter/n/82dd89/32.png) [@nktech1135](https://meta.discourse.org/u/nktech1135)
#### Post date: [2021 年 6 月 10 日午前 10:35 UTC](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/65 "2021-06-10T10:35:55Z")

</div>

こんにちは。  
このスレッドの皆さんに心から感謝を伝えたいと思います。私は Discourse インスタンスを数件管理するお手伝いをしていますが、ここで言及されていることのほとんどに気づいていました。昨日、あるフォーラムが更新され、状況が好転するまで、それに対処する方法を調べようという努力を払うことはありませんでした。

そして今朝、このスレッドに出会えたことで、状況がさらに改善していくという大きな希望が湧いてきました。

具体的な提案はあまりありませんが、私の抱える問題のほとんどはすでにカバーされているので、この調子で進めてほしいと思います。

ただ、少なくともこのスレッドでは言及されていなかった点が一つあります。それは、スレッド内で誰かの発言を引用する際、アクセスしやすい方法が欲しいということです。引用したい場合、私は通常以下のようにしています。

> ここに引用を挿入

しかし、本来の引用方法を使いたいと願っています。Markdown の書き方を詳しく知らないので、手書きで入力するのは難しく、仮に知っていたとしてもそれは少し手間がかかります。マウスが使えない場合に、皆さんはスレッド内で誰かを引用するためにどのような工夫をしているのか、気になります。

[前のページ](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105.md?page=2)

[次のページ](https://meta.discourse.org/t/discourse-with-a-screen-reader/178105.md?page=4)
