A11Y: Certain buttons remain unlabeled

Creating this as a separate topic since I remember something being mentioned about taking things in chunks (which makes sense) and this is an unrelated problem.

Currently, parts of the Discourse UI have unlabelled buttons. Sometimes this is alleviated when navigating through all buttons on the page (i.e., by using the b key with NVDA), and in that case NVDA will announce the name of the button. However, arrowing around the page still just says “button”. In other instances, there are no labels at all from NVDA’s point-of-view. In particular, in the administration panel, settings that allow you to save/reset the individual settings have their buttons unlabelled and this in turn requires guesswork as to what each button does. There are probably more instances of this particular issue, but this is the most significant area I noticed this particular problem. (Also, the keyboard shortcuts button is unlabelled, but b reads the label at least.)

2 Likes

Thanks again for reporting, we can certainly get these buttons labeled soon.

Thank you very much! I have a few more unlabelled buttons I found. They’re when yo ugo to edit categories. There are a lot of unlabelled buttons, above the color hex value edit field and below it. The one above makes a bit of sense – these appear to be colors (but we could probably make that an ARIA region or something to explicitly note this as such?) but I have no idea what the (three or four) buttons that are unlabelled below it do. By “below it”, I mean the ones right above “save” and “delete”.

1 Like

I’ve made some changes that will be included the next time you update Discourse:

  • The save/cancel buttons in the admin settings are now labeled
  • The keyboard shortcut button (and other buttons in that area of the UI) are now labeled
  • The category color controls are now labeled

Yes, this is a mix of predefined color options and colors already in use for other categories — I’ve added a group role and a label to the predefined options, labeled each option, and also include an indicator for whether or not they’re already used.

1 Like