WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: JAWS unable to read aria-label for heading

for

From: Joe Chidzik
Date: Mar 7, 2013 1:22AM

> 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