WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Question on descriptive control labels

for

From: Mark Magennis
Date: Apr 7, 2022 6:47AM

The button name "Play" is correct. But as you've pointed out, this only works if the user knows they are on a page or in a part of a page that contains a media player, in which context "Play" (and any other player controls you have) is understandable.

Using a named region is one way of doing this. If you Tab into a region, a screen reader will often announce the region and its name before announcing the focussed element. But this doesn't always happen and it may not happen if you arrow into the region or if you enter it by any other means, such as jumping to a heading or button within it or using a jump link that moves focus to it. So named regions are unreliable. Your task is to code the thing in such a way that the user will always know they are in a media player, no matter how they get into it. Unfortunately this can be difficult.

One thing I would definitely recommend would be to add a heading, because headings are one of the most reliable structural indicators ad screen reader users often navigate within a page using them. You can combine this with a region so you could have for example <section aria-label="media player"><h2 class="sr-only">media player</h2>...<button>Play</button>...</section>. This means that you have a region starting with a heading of the same name and in some cases both will be read which is a unnecessarily verbose but a small price to pay for making the player understandable. Note that the "sr-only" class is there if you want to make the heading invisible which is sensible because it's probably visually unnecessary, though DHS Trusted Tester will flag this erroneously as an a11y fail).

Another thing you may be able to name is the video player itself. This may be some kind of object and it may be embedded within a <div role="application"> if it implements common media player keyboard shortcuts such as Space for Play/Pause, arrow keys for volume and scrubbing. The player object and the application can both be given names. Obviously, the more things you name the more potential verbosity you may introduce but not all screen reader read all objects' names in all circumstances so it's worth playing around with naming all the different layers of containers (section, application, object, toolbar container, etc.) and testing it in the range of browser/screen reader combinations you want to support to see if you can find a best combination that will always ensure that the user gets something no matter how they enter it and there is never so much repetition that it gets confusing or totally annoying.

Mark