E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 10 (In chronological order)

From: Jamous, JP
Date: Fri, Sep 16 2016 7:49AM
Subject: Implementing aria-label
No previous message | Next message →

Morning Folks,

I wanted to check with those who have robust ARIA background before I try to figure out a way for this.

I have a situation where aria-label or a message to the screen reader should be provided. This message must fire when the screen reader obtains focus on a p or span tag.

I know what you are thinking. Did you have enough coffee in you this morning JP? Yes, I have, but this is one of those goofy situations that we all dislike.

I am unable to use keyboard focusable objects due to precious page space. Also, the message will have to be repeated multiple times on the page. It can range between 1 to 15 times.

As I used aria-label in a span tag, VoiceOver read it. However, this fails for both JAWS and NVDA. So the goal is to make them speak this message as VoiceOver is speaking the aria-label in a span tag.

If it can be done through aria-attribute, that will be great. If not, I may have to add a JS function.




**************************************************

Jean-Pierre Jamous
Digital Accessibility Specialist & Developer
UI Accessibility Team

SME for EBN Include
Digital Accessibility Specialist & Blind and Visually Impaired Expert

The only limitations in life are those we set for ourselves

**************************************************

From: Lovely, Brian (CONT)
Date: Fri, Sep 16 2016 7:54AM
Subject: Re: Implementing aria-label
← Previous message | Next message →

Applying tabindex="0" will make it focusable. Not my favorite solution, but maybe for a "goofy situation".

From: Beranek, Nicholas
Date: Fri, Sep 16 2016 7:57AM
Subject: Re: Implementing aria-label
← Previous message | Next message →

I don't believe that's the question here. I assume that you have a situation with a focusable <p> or <span> that contains an aria-label and it's not reading out as you would expect. Does it have an accessible role? What is the purpose of the element?

From: Birkir R. Gunnarsson
Date: Fri, Sep 16 2016 7:58AM
Subject: Re: Implementing aria-label
← Previous message | Next message →

aria-label does not work consistently un elements with no ARIA role.
What you can do,, and it is a bit of a hack, is to give it a role,
e.g. role="img", or give it a tabindex of 0 and role="button" (with
aria-disabled="true").
It is a hack, I know, but it should get the aria-label spoken by all
screen readers.
What about hiding the actual text with aria-hidden="true" and
replacing it with screen reader only text?
If it is a live region, I think you will need the good old JavaScript.
If you can give more specifics on the problem we can get more creative
(or hopefully less creative).

It's a hack, notwhat the

On 9/16/16, Jamous, JP < = EMAIL ADDRESS REMOVED = > wrote:
> Morning Folks,
>
> I wanted to check with those who have robust ARIA background before I try to
> figure out a way for this.
>
> I have a situation where aria-label or a message to the screen reader should
> be provided. This message must fire when the screen reader obtains focus on
> a p or span tag.
>
> I know what you are thinking. Did you have enough coffee in you this morning
> JP? Yes, I have, but this is one of those goofy situations that we all
> dislike.
>
> I am unable to use keyboard focusable objects due to precious page space.
> Also, the message will have to be repeated multiple times on the page. It
> can range between 1 to 15 times.
>
> As I used aria-label in a span tag, VoiceOver read it. However, this fails
> for both JAWS and NVDA. So the goal is to make them speak this message as
> VoiceOver is speaking the aria-label in a span tag.
>
> If it can be done through aria-attribute, that will be great. If not, I may
> have to add a JS function.
>
>
>
>
> **************************************************
>
> Jean-Pierre Jamous
> Digital Accessibility Specialist & Developer
> UI Accessibility Team
>
> SME for EBN Include
> Digital Accessibility Specialist & Blind and Visually Impaired Expert
>
> The only limitations in life are those we set for ourselves
>
> **************************************************
>
>
> > > > >


--
Work hard. Have fun. Make history.

From: Jamous, JP
Date: Fri, Sep 16 2016 8:02AM
Subject: Re: Implementing aria-label
← Previous message | Next message →

Nick,

You got it right.

The purpose of the element is to convey text to users. That works find for sighted users with or without disabilities, but for blind users it is an issue. It does not make sense and violates WCAG 1.3.1 Info and Relationships.

The goal is to mask the onscreen text so the screen reader can make sense out of the information being presented.

I hope that was clear enough.




**************************************************

Jean-Pierre Jamous
Digital Accessibility Specialist & Developer
UI Accessibility Team

SME for EBN Include
Digital Accessibility Specialist & Blind and Visually Impaired Expert

The only limitations in life are those we set for ourselves

**************************************************

From: Birkir R. Gunnarsson
Date: Fri, Sep 16 2016 8:14AM
Subject: Re: Implementing aria-label
← Previous message | Next message →

What about
<div><p aria-hidden="true">text to be hidden from screen
readers.</p><p class="screenReaderText">text for screen reader
users<</p></div>
I am always worried about this type of construct, aria-hidden should
ideally never be used, or at least the justification has to de damn
good, but you know what you're doing so if you need it, this is one
way to achieve it.


On 9/16/16, Jamous, JP < = EMAIL ADDRESS REMOVED = > wrote:
> Nick,
>
> You got it right.
>
> The purpose of the element is to convey text to users. That works find for
> sighted users with or without disabilities, but for blind users it is an
> issue. It does not make sense and violates WCAG 1.3.1 Info and
> Relationships.
>
> The goal is to mask the onscreen text so the screen reader can make sense
> out of the information being presented.
>
> I hope that was clear enough.
>
>
>
>
> **************************************************
>
> Jean-Pierre Jamous
> Digital Accessibility Specialist & Developer
> UI Accessibility Team
>
> SME for EBN Include
> Digital Accessibility Specialist & Blind and Visually Impaired Expert
>
> The only limitations in life are those we set for ourselves
>
> **************************************************
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

From: Jamous, JP
Date: Fri, Sep 16 2016 8:19AM
Subject: Re: Implementing aria-label
← Previous message | Next message →

I know I have to hack the sucker one way or another.

I am testing multiple ways and will get to one eventually.

What I am wondering is the class you referenced in your P tag. Do you mean to use negative margins in the class to put the text off-screen?




**************************************************

Jean-Pierre Jamous
Digital Accessibility Specialist & Developer
UI Accessibility Team

SME for EBN Include
Digital Accessibility Specialist & Blind and Visually Impaired Expert

The only limitations in life are those we set for ourselves

**************************************************

From: Birkir R. Gunnarsson
Date: Fri, Sep 16 2016 8:30AM
Subject: Re: Implementing aria-label
← Previous message | Next message →

The idea is to expose a text that is visually hidden but available to
screen readers, yeap.

I would use the clip method to hide text over moving it out of the
viewport, because off-screen CSS leads to all sorts of issues when
using Voiceover on an iOS device.
The CSS class could look something like:



.SRText {
position: absolute;
clip: rect(1px1px1px1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
z-index: -1000;
}
see article at:
https://developer.yahoo.com/blogs/tenydnblog/clip-hidden-content-better-accessibility-53456.html


On 9/16/16, Jamous, JP < = EMAIL ADDRESS REMOVED = > wrote:
> I know I have to hack the sucker one way or another.
>
> I am testing multiple ways and will get to one eventually.
>
> What I am wondering is the class you referenced in your P tag. Do you mean
> to use negative margins in the class to put the text off-screen?
>
>
>
>
> **************************************************
>
> Jean-Pierre Jamous
> Digital Accessibility Specialist & Developer
> UI Accessibility Team
>
> SME for EBN Include
> Digital Accessibility Specialist & Blind and Visually Impaired Expert
>
> The only limitations in life are those we set for ourselves
>
> **************************************************
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

From: Jonathan Avila
Date: Fri, Sep 16 2016 8:33AM
Subject: Re: Implementing aria-label
← Previous message | Next message →

> I would use the clip method to hide text over moving it out of the viewport

As an FYI - I think the latest techniques now recommend clip-path: as well since clip has been depreciated.
http://unobfuscated.blogspot.com/2015/01/updated-offscreen-techniques.html

Jonathan Avila
Chief Accessibility Officer
SSB BART Group 
= EMAIL ADDRESS REMOVED =
703.637.8957 (Office)

Visit us online: Website | Twitter | Facebook | Linkedin | Blog
Check out our Digital Accessibility Webinars!

From: Jamous, JP
Date: Fri, Sep 16 2016 8:41AM
Subject: Re: Implementing aria-label
← Previous message | No next message

Birker and Jonathon,

I like that approach. I think I might implement it once I refine my code.

I definitely do not want to put anything off-screen for the sake of iPhones and SEO.

Thank you folks. Greatly appreciate it. I have something to work with now.
**************************************************

Jean-Pierre Jamous
Digital Accessibility Specialist & Developer
UI Accessibility Team

SME for EBN Include
Digital Accessibility Specialist & Blind and Visually Impaired Expert

The only limitations in life are those we set for ourselves

**************************************************