Unlabeled buttons

[joshms123]

Home Assistant release with the issue:
0.94.1

Last working Home Assistant release (if known):
None

UI (States or Lovelace UI?):
Lovelace

Browser and Operating System:
Chrome, Windows 10

Description of problem:

As a visually impaired user, I have found several accessibility issues over the year or so while using home assistant. The biggest issue currently (of mine at least) is the number of unlabeled buttons in the Lovelace UI. Currently when navigating with my screen reader, I hear "unlabeled 0", "unlabeled 1", etc. With a different screen reader (NVDA), I get even less feedback.
List of unlabeled buttons I know of currently:

• The button to show the menu bar and developer tools.
• Notifications button.
• Button to activate the microphone.
• Button that shows a menu with unused entities, configure UI and help.
• Button after that is unknown (nothing noticeable seems to happen).
• Almost all buttons to control devices are unlabeled apart from execute for scripts, learn more, ARM HOME/AWAY and lock/unlock. I may have missed a few here.
  This is the current list of buttons I have just gone over; if I find more, I will either update or comment.

Javascript errors shown in the web inspector (if applicable):
N/A

Additional information:
N/A

[balloob]

I have opened a pull request to address a couple of the mentioned missing labels. The pull request is #3310.

[balloob]

For people looking into helping with this issue, there is an accessibility dev tool to help find bad buttons: https://www.deque.com/axe/.

[steverep]

I am a visually impaired user as well and noticed media device buttons, as well as a few others, got labeled in a recent release. Thanks for that.

My cover device cards are not labeled yet though.

I'll point out more as I come across them.

[balloob]

Opened pull request #3421 to add labels to the cover and cover tilt controls.

[joshms123]

Hi there!

Great work on the accessibility fixes so far, I really appreciate it!

The following buttons are unlabeled:

• On the hass.io tab, when viewing an add-on the back button is unlabeled.
• When viewing more information in the states view, the close/dismiss button is unlabeled.

The following button from my original post is still unlabeled:

• Button to activate the menu that shows unused entities, configure UI and help.

[balloob]

@joshms123 addressed in #3422

[steverep]

In the modal dialog when editing an entities card, there are 2 unlabeled buttons associated with each entity in the list. One of them deletes the entity and I'm not sure what the other one does.

[balloob]

@steverep addressed in #3430

[steverep]

Two more:

• Close button on any modal dialog (e.g. device more info, adding integration, editing view, etc.)
• When configuring Lovelace UI, button after each card that shows a menu to either move or delete the card

[bramkragten]

Do you have a more specific example of the close button?
I don't see a close button in the adding integration and the more info dialog does have a label.
The view editing dialog only has a cancel button, but that has text in it so should be ok?

[steverep]

Do you have a more specific example of the close button?

Sorry, I was a bit lax on that and looks like several were fixed. Here's a few that I just found:

• Close button on notifications dialog
• When opening an entity's more info dialog from a view, there is an unlabeled button that opens another dialog to edit the entity name and ID
• The resulting edit name/ID dialog has a close button that is also unlabeled. Weirdly, it is labeled if you go through the entity registry instead.

[balloob]

@steverep wanted to let you know that @bramkragten is working for @NabuCasa and will focus on the Home Assistant frontend. Improving accessibility is one of this tasks so please keep the issues coming.

[steverep]

A few more to add to the list from my last comment:

• Button to show menu with Configure UI and Help
• Button to exit UI configuration mode
• Button to edit Lovelace UI title

[iantrich]

@balloob @bramkragten is there a way to integrate axe into our test builds to alert us before merging new unlabeled buttons?

[steverep]

More...

• On Configuration > Integrations page, buttons/links to devices under each integration are all unlabeled

[steverep]

• The button to add an integration is now labeled "hass:plus". I'm pretty sure this used to to have a useful label, so some extra quality control on new commits would help.

[springstan]

Can we somehow translate the aria-labels in js files?
So far I had no luck and I was wondering if there was any way to do so.

[Nardol]

Thermostat card buttons are also not labelled.

- type: thermostat
  entity: climate.thermostat_salon

[spacegaier]

PR #10875 fixes the climate modes in the thermostate card.

PR #10876 fixes the log download button for ZWave JS. I however have no such setup, so this is untested.

Reg. the log levels: Could you please add a screenshot so that I can see which element this is regarding, because just looking at the code I did not see anything there.

[steverep]

One more:

• On The system configuration page, there's a "more options" button after the host shutdown in the tab sequence. It shows hardware, import from USB, and move datadisk as options.

Reg. the log levels: Could you please add a screenshot so that I can see which element this is regarding, because just looking at the code I did not see anything there.

Upon closer inspection, it's not actually a button but instead a drop-down menu to select the log level. There's a similar one on the system configuration page as well, and a lot more now that I think about it. The problem is that their ARIA is very screwy (e.g. they are being exposed mixed as buttons and menus, tabbing works but browsing doesn't, etc.). I'll tkae a closer look at the HTML and open a separate ticket to work on the ARIA pattern.

[Nardol]

Thanks!

I also noticed the buttons are not labelled on the media_player card.

- type: media-control
  entity: media_player.enceinte_bureau

[spacegaier]

@steverep PR created. Separate issue for the dropdowns is the correct way 👍

@Nardol PR created as well.

[Nardol]

Thanks for your work!
In the visualization screen of a climate entity, the two button to set up and down the temperature from 0.5° are not labelled.
I know what they do because I pressed these 🙂 I made a snapshot to be sure I explained which screen right.

[spacegaier]

@Nardol: Good catch. PR #10921 will fix that.

[Nardol]

I also noticed buttons on and of for switches with assumed_state: true are also not labelled.
Next time I'll try to have more than one...

[spacegaier]

I also noticed buttons on and of for switches with assumed_state: true are also not labelled. Next time I'll try to have more than one...

Can you provide some more details what you mean, so I can try to reproduce.

[Nardol]

For example Broadlink RM Mini allow to create switch to execute remote commands.
In this case, instead of a classic switch we have two buttons: one for switching it on and the otther to switch it off.
And these buttons are not labelled.
These switch have the property assumed_state set to on.

[spacegaier]

For example Broadlink RM Mini allow to create switch to execute remote commands. In this case, instead of a classic switch we have two buttons: one for switching it on and the otther to switch it off. And these buttons are not labelled. These switch have the property assumed_state set to on.

And those are icon buttons so buttons that only show an icon, without any text? Can you quickly add a screenshot to illustrate and ensure we are talking about the same thing 😄.

[Nardol]

Hm. My mistake, I should have tested better. It was something I did not use for some weeks and remembered.
Looks OK now, sorry.

[steverep]

In debugging #8178 and #10617, I noticed another problem with nearly all buttons I've seen across the UI: the SVG icon within the button has no accessible name, which fails WCAG criterion 1.1.1.

In most cases I'm seeing the ha-icon-button (wrapped around mwc-icon-button) or ha-fab components used to insert <button> elements with SVG children. Since the <button> element is getting the aria-label for ha-icon-button, the child icon should be removed from the accessibility tree. Giving it a role also doesn't hurt since SVG has no implicit role. So please add the 2 attributes as:

<svg role=img" aria-hidden="true" ...

In the case of the ha-fab component, the same applies for the SVG, but also the aria-label is completely unnecessary since the accessible name will be taken from the text. There's no harm if they match, but if one were to change without the other this might run afoul of WCAG criterion 2.5.3.

[Nardol]

After some test 🙂 I found two unlabelled check boxes:
In configuration->Integrations when clicking system configuration for an integration "Enable newly added entities" and "Enable polling for updates." are not labelled right for screen readers, tested on Firefox.
If I press down arrow I have the text but not when pressing tab/Shift+Tab to focus these settings, instead I have "[object Object]".
The label are not directly set for the check boxes.

I would like to contribute and tried to understand why the labels were not right but I did not figure how to do so, where or how could I find some way to help?

[spacegaier]

@steverep PR #11389 created for the SVG topic.

Reg. <ha-fab>: We are not specifically setting an aria-label here, but just the regular label of the component that then automatically gets also set apparently as the aria-label. So they should always match.

[steverep]

Thanks @spacegaier. I recently setup a a complete dev environment for myself so I can fix a lot of that small stuff myself now. I could really use your help with #8178 if you have time to lend.

[spacegaier]

Thanks @spacegaier. I recently setup a a complete dev environment for myself so I can fix a lot of that small stuff myself now. I could really use your help with #8178 if you have time to lend.

I don't own a single Apple device, so I am afraid I cannot really help with #8178

[steverep]

Finding a few more while fixing other accessibility issues...

• Close button for hardware dialog (looks like a bad variable reference)
• More options popup menu button on Backups tab
• More options popup menu on System tab under Host
• Quick bar button
• Delete button in manage add-on repositories dialog
• Delete button for device energy

[steverep]

@bramkragten I went to go fix those from my last comment but didn't relize you already did. You probably didn't see when I edited the comment to add 3 more (quick bar button, delete repository in dialog, and delete energy device).