Accessibility: New Topic/Reply form not accessible to screen reader

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

Image%20from%20iOS(3)

  • 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”
9 лайков

Is this specific to mobile?

1 лайк

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

2 лайка

@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?

5 лайков

The Chrome Vox screenreader was recommended for accessibility testing.

NVDA is another free option for Windows.

3 лайка

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

1 лайк

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

1 лайк

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.

5 лайков

The issue with the reply button was fixed by commit 31ffcf989ce63e. I just tested this on iOS with VoiceOver.

Now I’ll investigate the other two issues.

7 лайков

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.

5 лайков

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.

6 лайков

Я добавил метки к кнопкам «Загрузить» и «Предпросмотр», а также к переключателю панели инструментов.

@Matt_Campbell Вы правы насчёт преимуществ использования существующего текста, где это возможно, но в итоге я добавил две новые строки, чтобы метка могла гласить «[Показать/скрыть] панель инструментов композера». Я рассматривал вариант со словом «параметры», но оно показалось недостаточно описательным, особенно учитывая, что кнопка является переключателем.

6 лайков

@owlish @Matt_Campbell @awesomerobot, как обстоят дела на данный момент?

Исходная просьба касалась исправления надписи «Или нажмите Ctrl+Enter» на кнопке ответа. Может быть, просто добавить к этой кнопке aria-label="reply"?

2 лайка

VoiceOver на iOS читает метку кнопки «ответить», а затем заголовок, и то же самое наблюдается с NVDA на настольных компьютерах, поэтому, думаю, здесь всё учтено, но я могу проверить подробнее, если что-то ещё упущено.

Одно незначительное улучшение — убрать заголовок на мобильных устройствах, так как горячие клавиши там обычно не актуальны.

3 лайка

Отлично, ставлю таймер на 2 недели, чтобы закрыть это.

Если найдёте что-то ещё, не стесняйтесь открывать новые темы, @owlish

Эта тема была автоматически закрыта через 9 дней. Новые ответы больше не допускаются.