WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Implementing aria-label

for

From: Jamous, JP
Date: Sep 16, 2016 8:41AM

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

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















-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Birkir R. Gunnarsson
Sent: Friday, September 16, 2016 9:30 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Implementing aria-label

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 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
>
> **************************************************
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Birkir R. Gunnarsson
> Sent: Friday, September 16, 2016 9:14 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Implementing aria-label
>
> 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 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
>>
>> **************************************************
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
>> Behalf Of Beranek, Nicholas
>> Sent: Friday, September 16, 2016 8:57 AM
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Subject: Re: [WebAIM] Implementing aria-label
>>
>> 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?
>>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
>> Behalf Of Lovely, Brian (CONT)
>> Sent: Friday, September 16, 2016 9:54 AM
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Subject: Re: [WebAIM] Implementing aria-label
>>
>> Applying tabindex="0" will make it focusable. Not my favorite
>> solution, but maybe for a "goofy situation".
>>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
>> Behalf Of Jamous, JP
>> Sent: Friday, September 16, 2016 9:49 AM
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Subject: [WebAIM] Implementing aria-label
>>
>> 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
>>
>> **************************************************
>>
>>
>> >> >> archives at http://webaim.org/discussion/archives
>> >> >>
>> The information contained in this e-mail is confidential and/or
>> proprietary to Capital One and/or its affiliates and may only be used
>> solely in performance of work or services for Capital One. The
>> information transmitted herewith is intended only for use by the
>> individual or entity to which it is addressed. If the reader of this
>> message is not the intended recipient, you are hereby notified that
>> any review, retransmission, dissemination, distribution, copying or
>> other use of, or taking of any action in reliance upon this
>> information is strictly prohibited. If you have received this
>> communication in error, please contact the sender and delete the
>> material from your computer.
>> >> >> archives at http://webaim.org/discussion/archives
>> >> >>
>> The information contained in this e-mail is confidential and/or
>> proprietary to Capital One and/or its affiliates and may only be used
>> solely in performance of work or services for Capital One. The
>> information transmitted herewith is intended only for use by the
>> individual or entity to which it is addressed. If the reader of this
>> message is not the intended recipient, you are hereby notified that
>> any review, retransmission, dissemination, distribution, copying or
>> other use of, or taking of any action in reliance upon this
>> information is strictly prohibited. If you have received this
>> communication in error, please contact the sender and delete the
>> material from your computer.
>> >> >> archives at http://webaim.org/discussion/archives
>> >> >> >> archives at http://webaim.org/discussion/archives
>> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.