# 无障碍性：新主题/回复表单无法被屏幕阅读器访问

**URL:** https://meta.discourse.org/t/accessibility-new-topic-reply-form-not-accessible-to-screen-reader/107038
**Category:** Bug
**Tags:** pr-welcome
**Created:** [2019年一月20日 19:45 UTC](https://meta.discourse.org/t/accessibility-new-topic-reply-form-not-accessible-to-screen-reader/107038 "2019-01-20T19:45:06Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### Author: ![owlish](https://avatars.discourse-cdn.com/v4/letter/o/b487fb/32.png) [@owlish](https://meta.discourse.org/u/owlish)
#### Post date: [2019年一月20日 19:45 UTC](https://meta.discourse.org/t/accessibility-new-topic-reply-form-not-accessible-to-screen-reader/107038/1 "2019-01-20T19:45:06Z")

</div>

A screen reader user on iOS reported that several buttons on the New Topic/Reply form are not correctly labelled.

 ![Image%20from%20iOS(3)](https://global.discourse-cdn.com/meta/original/3X/1/5/158ed5f15d6240c65b08f9406aaf14c459ce5542.jpeg)

- The reply button in the bottom-left is being read as “Or press Ctrl+Enter”, not “Reply” as expected
- The hamburger button in the top-right is not labelled
- The upload image button in the bottom-right is read as “link”

---

<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: [2019年一月21日 04:42 UTC](https://meta.discourse.org/t/accessibility-new-topic-reply-form-not-accessible-to-screen-reader/107038/2 "2019-01-21T04:42:26Z")

</div>

Is this specific to mobile?

---

<div class="post-metadata">

### Author: ![owlish](https://avatars.discourse-cdn.com/v4/letter/o/b487fb/32.png) [@owlish](https://meta.discourse.org/u/owlish)
#### Post date: [2019年一月21日 19:05 UTC](https://meta.discourse.org/t/accessibility-new-topic-reply-form-not-accessible-to-screen-reader/107038/3 "2019-01-21T19:05:04Z")

</div>

Of the buttons listed, I think only the Reply button appears on the desktop version but it’s still labelled “Or press Ctrl+Enter”

---

<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: [2019年三月4日 05:18 UTC](https://meta.discourse.org/t/accessibility-new-topic-reply-form-not-accessible-to-screen-reader/107038/4 "2019-03-04T05:18:13Z")

</div>

@owlish I would love to get this sorted, can you provide us with a quick start of how to test this? What software do we install locally?

---

<div class="post-metadata">

### Author: ![owlish](https://avatars.discourse-cdn.com/v4/letter/o/b487fb/32.png) [@owlish](https://meta.discourse.org/u/owlish)
#### Post date: [2019年三月5日 03:08 UTC](https://meta.discourse.org/t/accessibility-new-topic-reply-form-not-accessible-to-screen-reader/107038/5 "2019-03-05T03:08:19Z")

</div>

The [Chrome Vox screenreader](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) was recommended for accessibility testing.

[NVDA](https://www.nvaccess.org/) is another free option for Windows.

---

<div class="post-metadata">

### Author: ![owlish](https://avatars.discourse-cdn.com/v4/letter/o/b487fb/32.png) [@owlish](https://meta.discourse.org/u/owlish)
#### Post date: [2019年三月24日 17:52 UTC](https://meta.discourse.org/t/accessibility-new-topic-reply-form-not-accessible-to-screen-reader/107038/6 "2019-03-24T17:52:39Z")

</div>

Just wanted to check in to see if there’s been any movement on this or if you need any more information

---

<div class="post-metadata">

### Author: ![owlish](https://avatars.discourse-cdn.com/v4/letter/o/b487fb/32.png) [@owlish](https://meta.discourse.org/u/owlish)
#### Post date: [2019年四月29日 15:53 UTC](https://meta.discourse.org/t/accessibility-new-topic-reply-form-not-accessible-to-screen-reader/107038/7 "2019-04-29T15:53:44Z")

</div>

Hi @sam, is there any other information you need for this?

---

<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: [2019年四月30日 02:57 UTC](https://meta.discourse.org/t/accessibility-new-topic-reply-form-not-accessible-to-screen-reader/107038/8 "2019-04-30T02:57:17Z")

</div>

I think we have what we need, its just a question of resources at the moment.

I am adding a #pr-welcome on this in case someone from the community wants to help out.

---

<div class="post-metadata">

### Author: ![Matt\_Campbell](https://avatars.discourse-cdn.com/v4/letter/m/73ab20/32.png) [@Matt\_Campbell](https://meta.discourse.org/u/Matt_Campbell)
#### Post date: [2019年六月23日 23:13 UTC](https://meta.discourse.org/t/accessibility-new-topic-reply-form-not-accessible-to-screen-reader/107038/9 "2019-06-23T23:13:15Z")

</div>

The issue with the reply button was fixed by [commit 31ffcf989ce63e](https://github.com/discourse/discourse/commit/31ffcf989ce63e). I just tested this on iOS with VoiceOver.

Now I’ll investigate the other two issues.

---

<div class="post-metadata">

### Author: ![Matt\_Campbell](https://avatars.discourse-cdn.com/v4/letter/m/73ab20/32.png) [@Matt\_Campbell](https://meta.discourse.org/u/Matt_Campbell)
#### Post date: [2019年六月23日 23:51 UTC](https://meta.discourse.org/t/accessibility-new-topic-reply-form-not-accessible-to-screen-reader/107038/10 "2019-06-23T23:51:39Z")

</div>

I verified that the hamburger button in the composer isn’t labeled. Specifically, this is the `toggle-toolbar` button in the `composer-toggles` component. This button is only rendered in the mobile view.

What would be a reasonable label for this button? Maybe “Formatting”, since many of the toolbar options are formatting related? Not all of them are, though. Maybe the more generic “Tools” would be better.

---

<div class="post-metadata">

### Author: ![Matt\_Campbell](https://avatars.discourse-cdn.com/v4/letter/m/73ab20/32.png) [@Matt\_Campbell](https://meta.discourse.org/u/Matt_Campbell)
#### Post date: [2019年六月24日 00:59 UTC](https://meta.discourse.org/t/accessibility-new-topic-reply-form-not-accessible-to-screen-reader/107038/11 "2019-06-24T00:59:56Z")

</div>

It occurred to me that, to enable accessibility fixes to reach Discourse’s worldwide user base without imposing too much on translators, we should use existing strings for unlabeled controls when it makes sense. So, for the hamburger button, would it make sense to use “show more” as the title? We could use “options”, and I think that would be a better fit, _except_ that there’s already an “options” button in the toolbar itself. I think that would be confusing.

---

<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: [2020年九月5日 02:25 UTC](https://meta.discourse.org/t/accessibility-new-topic-reply-form-not-accessible-to-screen-reader/107038/12 "2020-09-05T02:25:07Z")

</div>

我已为上传和预览按钮以及工具栏切换添加了标签。

> <https://github.com/discourse/discourse/commit/13c9d7e70431c91d03e206e2f04121bc8cb69db7>

@Matt_Campbell 你关于尽可能使用现有文本的观点是正确的，但我最终添加了两条新字符串，以便标签可以显示为“[显示/隐藏] 编辑器工具栏”。我考虑过使用“选项”，但觉得不够明确，尤其是考虑到该按钮是一个切换按钮。

---

<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: [2023年二月16日 00:40 UTC](https://meta.discourse.org/t/accessibility-new-topic-reply-form-not-accessible-to-screen-reader/107038/13 "2023-02-16T00:40:21Z")

</div>

@owlish @Matt_Campbell @awesomerobot ，最近情况怎么样？  
原始请求是关于修改回复按钮上的标题“或按 Ctrl+Enter”。我们是否可以简单地为此按钮添加 `aria-label="reply"`？

---

<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: [2023年二月16日 17:48 UTC](https://meta.discourse.org/t/accessibility-new-topic-reply-form-not-accessible-to-screen-reader/107038/14 "2023-02-16T17:48:42Z")

</div>

VoiceOver 在 iOS 上会朗读按钮标签“回复”然后是标题，桌面上的 NVDA 也是如此，所以我认为这里已经涵盖了所有内容，但如果还有遗漏，我可以再仔细看看。

一个小的改进是移除移动设备上的标题，因为键盘快捷键通常在那里不相关。

---

<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: [2023年二月16日 23:09 UTC](https://meta.discourse.org/t/accessibility-new-topic-reply-form-not-accessible-to-screen-reader/107038/15 "2023-02-16T23:09:17Z")

</div>

好的，我将设置一个为期两周的关闭此问题的计时器。

如果你发现任何问题，请随时在此处开启后续讨论 @owlish

---

<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: [2023年二月26日 21:00 UTC](https://meta.discourse.org/t/accessibility-new-topic-reply-form-not-accessible-to-screen-reader/107038/16 "2023-02-26T21:00:00Z")

</div>

该主题已在 9 天后自动关闭。不再允许回复。
