WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: JAWS unable to read aria-label for heading

for

From: Bryan Garaventa
Date: Mar 7, 2013 1:33AM

You will need to use offscreen text if you want this to work correctly.

----- Original Message -----
From: "Joe Chidzik" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Thursday, March 07, 2013 12:22 AM
Subject: Re: [WebAIM] JAWS unable to read aria-label for heading


>> Here's the scenario; I need the screen reader to read something else for
>> the
>> heading than what is actually being displayed.
>>
>> "My Heading" is displayed but screen reader reads "This is my heading"
>>
>> <div>
>> <div aria-hidden="true">My Heading</div>
>> <div aria-label="This is my Heading" role="heading" aria-level="1"
>> tabindex="0"></div>
>> </div>
>>
>> The above code achieves the required behavior on VoiceOver, but I can't
>> get
>> JAWS to do the same. Any Idea how to make it work in JAWS?
>
> [Joe Chidzik] aria-hidden hides content from all users, including
> screenreaders; this is why JAWS is ignoring the initial heading text.
> Don't know why voiceover is ignoring this attribute though. Also, I think
> aria-label is meant (primarily) for form elements; this may be why this
> is not working for your heading.
>
> I would opt to use simpler HTML; something like
>
> <h1>My heading <span class="screenreader-content">This is my
> heading</span></h1>
>
> This would a CSS class similar to:
> .screenreader-content {
> position: absolute !important;
> height: 1px; width: 1px;
> overflow: hidden;
> clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
> clip: rect(1px, 1px, 1px, 1px);
> }
>
> (From:
> http://snook.ca/archives/html_and_css/hiding-content-for-accessibility )
>
> This marks the heading using the standard <h1> element, and simple CSS to
> hide the additional text but leave it accessible for screenreader users.
> This would be read out by a screenreader as "My heading: This is my
> heading". If you really don't want the initial heading read out, you could
> mark it as role="presentation", which leaves it visible, but inaccessible
> to screenreaders e.g.
>
> <h1><span role="presentation">My heading</span> <span
> class="screenreader-content">This is my heading</span></h1>
>
> This would be read out by screenreaders as "This is my heading", but would
> be visible onscreen as "My heading".
>
> Question, though, what is this context for this, and why does the
> screenreader need something different read out? An easier solution would
> be to amend the heading text so that it is suitable for both screenreader
> and non-screenreader users.
>
> Joe
> > >