WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Question on descriptive control labels

for

From: Kian Badie
Date: Apr 14, 2022 4:13PM

Hello Pitri,

Thank you very much for your input. It is very helpful! With your advice, I
think I will use the aria-labelledby on the player attribute to point to
the header that describes the section. This seems like it would provide
more of a description since there are multiple audio players on the page.
Or do you think it would be better to label the individual controls with
more context? I would guess labeling the parent player would be more
concise and sufficient. Do you have any preferences on what is more
helpful? I interpreted support for both options in your reply.

Also, if I may add a related question, how should transcripts be
determined? The narration is just the spoken audio of text existing on the
page. But how would one say "hey, this audio has a transcript over there in
this part of the page"? The examples I have seen online just have a section
on the page with a "Transcript" heading. However, I don't think I can add
that heading to my page. Are there other ways to connect the text to the
audio?

Thank you,
Kian Badie

On Tue, Apr 12, 2022 at 3:33 AM Priti Rohra < <EMAIL REMOVED> > wrote:

> Hi Kian,
>
> With regards to giving context I would suggest text describing the
> media. Yes heading if present can be referenced in the accessible
> name for Play/Pause control via aria-labelledby will give us better
> context about what we'll be playing.
> My thoughts about giving label as "Audio player" or "Video player"
> does suffice the requirement of labelling section/regions but is not
> of any help to the user. Such labels are pretty generic in nature
> whereas giving a descriptive text through hidden heading or labelling
> it via aria-label is a better option as it gives more context to
> users and keeps the content in check.
>
> Always BPositive!
> Priti Rohra
>
>
> On 4/9/22, Kian Badie < <EMAIL REMOVED> > wrote:
> > Hello All,
> >
> > Thank you all very much for the very insightful input!
> >
> > Priti, that is interesting that JAWS does that. From my experience,
> tabbing
> > or arrowing into a native audio element with NVDA unfortunately just
> > announces "play". Good to know that defining a region could be helpful!
> For
> > adding context in the text nearby, are you saying to possibly add some
> text
> > visually that would point out the audio player. Like a heading of sorts?
> >
> > Mark, the heading recommendation is interesting. I have not seen visually
> > hidden headers before! If the slight redundancy is worth better overall
> > accessibility, I will consider that! Would you please be able to expand
> on
> > the naming the player strategy. Is this different from adding a label
> > either through aria-label or a visually hidden label?
> >
> > I am also curious what everyone thinks of the labeling the player itself?
> > Would "audio player" be good, or should it be more specific to what it
> is?
> > Like "page section - audio player", where "page section" is the section
> of
> > the page that the audio pertains to?
> >
> > Thank you,
> > Kian Badie
> >
> > On Thu, Apr 7, 2022 at 8:06 AM < <EMAIL REMOVED> > wrote:
> >
> >> Mark,
> >> I am saving your discussion for future reference. I will need it.
> >> Meanwhile, I have been studying a custom player example at the Mozilla
> >> Developers Network.
> >>
> https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/cross_browser_video_player
> >> The page has an example that uses the figure element as the player
> >> container and figcaption to label it. So far, my experiments indicate
> that
> >> JAWS announces the player when I navigate by tab or arrow keys.
> >> Just wondering what you think.
> >>
> >> Jeff Gutsell
> >>
> >>