E-mail List Archives
Thread: JAWS unable to read aria-label for heading
Number of posts in this thread: 6 (In chronological order)
From: Emad Aziz Suria
Date: Wed, Mar 06 2013 11:12PM
Subject: JAWS unable to read aria-label for heading
No previous message | Next message →
Hi Everyone
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?
Eventually I'll be looking for a solution that's compatible with with both
VoiceOver and JAWS.
Thanks
--
Emad Aziz Suria
From: Joe Chidzik
Date: Thu, Mar 07 2013 1:22AM
Subject: Re: JAWS unable to read aria-label for heading
← Previous message | Next message →
> 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
From: Bryan Garaventa
Date: Thu, Mar 07 2013 1:33AM
Subject: Re: JAWS unable to read aria-label for heading
← Previous message | Next message →
You will need to use offscreen text if you want this to work correctly.
----- Original Message -----
From: "Joe Chidzik" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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
> > >
From: Sailesh Panchang
Date: Thu, Mar 07 2013 7:46AM
Subject: Re: JAWS unable to read aria-label for heading
← Previous message | Next message →
This is a case of unnecessary use of ARIA. The off-screen technique
will work to get desired results as others pointed out.
Aria-label works alright generally with UI elements like form controls
and nav elements.
But the basic question is why should screen reader users not see the
heading displayed to all users in the browsers and be provided some
other content instead? The other content can be off-screen and
supplement the real visual heading as an accessibility aid if needed
and be in the same element as the main heading (properly marked up
with an h-tag and styled as needed.
Sailesh Panchang
On 3/7/13, Emad Aziz Suria < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Everyone
>
> 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?
>
> Eventually I'll be looking for a solution that's compatible with with both
> VoiceOver and JAWS.
>
> Thanks
>
> --
> Emad Aziz Suria
> > > >
From: Rakesh
Date: Sat, Mar 09 2013 5:55AM
Subject: Re: JAWS unable to read aria-label for heading
← Previous message | Next message →
Hello Suria,
If my understanding is correct you want JAWS to read "This is my
heading" heading level one. JAWS is not reading it in any of the
browsers but NVDA can do it with internet explorer.
To my understanding aria-label is used for form fields. Using aria-label
works fine with almost all screen readers when used in conjunction with
HTML form elements. You can find more information at
http://maxability.co.in/2013/01/25/aria-label-labelledby-describedby/
Thanks & Regards
Rakesh
On 3/7/2013 11:42 AM, Emad Aziz Suria wrote:
> Hi Everyone
>
> 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?
>
> Eventually I'll be looking for a solution that's compatible with with both
> VoiceOver and JAWS.
>
> Thanks
>
From: Benjamin Hawkes-Lewis
Date: Sat, Mar 09 2013 6:53AM
Subject: Re: JAWS unable to read aria-label for heading
← Previous message | No next message
On 7 March 2013 06:12, Emad Aziz Suria < = EMAIL ADDRESS REMOVED = > wrote:
> Here's the scenario; I need the screen reader to read something else for
> the heading than what is actually being displayed.
I second Joe’s query: why?
> "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?
For what it’s worth, according to ARIA 1.0’s accessible name
computation algorithm, “This is my Heading” is indeed the name of that
heading.
--
Benjamin Hawkes-Lewis