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".

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jamous, JP
Sent: Friday, September 16, 2016 9:49 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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

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


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.

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?

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Lovely, Brian (CONT)
Sent: Friday, September 16, 2016 9:54 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Jamous, JP
Sent: Friday, September 16, 2016 9:49 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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

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


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.
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.

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

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















-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Beranek, Nicholas
Sent: Friday, September 16, 2016 8:57 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Lovely, Brian (CONT)
Sent: Friday, September 16, 2016 9:54 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Jamous, JP
Sent: Friday, September 16, 2016 9:49 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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

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


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.
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.

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
>
> **************************************************
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Beranek, Nicholas
> Sent: Friday, September 16, 2016 8:57 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf
> Of Lovely, Brian (CONT)
> Sent: Friday, September 16, 2016 9:54 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf
> Of Jamous, JP
> Sent: Friday, September 16, 2016 9:49 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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
>
> **************************************************
>
>
> > > 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.
> > > 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.
> > > http://webaim.org/discussion/archives
> > > > > >


--
Work hard. Have fun. Make history.

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

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















-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Friday, September 16, 2016 9:14 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 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
>
> **************************************************
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Beranek, Nicholas
> Sent: Friday, September 16, 2016 8:57 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On
> Behalf Of Lovely, Brian (CONT)
> Sent: Friday, September 16, 2016 9:54 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On
> Behalf Of Jamous, JP
> Sent: Friday, September 16, 2016 9:49 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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.

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
>
> **************************************************
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Birkir R. Gunnarsson
> Sent: Friday, September 16, 2016 9:14 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 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
>>
>> **************************************************
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
>> Behalf Of Beranek, Nicholas
>> Sent: Friday, September 16, 2016 8:57 AM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On
>> Behalf Of Lovely, Brian (CONT)
>> Sent: Friday, September 16, 2016 9:54 AM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On
>> Behalf Of Jamous, JP
>> Sent: Friday, September 16, 2016 9:49 AM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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.
> > > http://webaim.org/discussion/archives
> > > > > >


--
Work hard. Have fun. Make history.

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!

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Friday, September 16, 2016 10:30 AM
To: WebAIM Discussion List
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 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
>
> **************************************************
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Birkir R. Gunnarsson
> Sent: Friday, September 16, 2016 9:14 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 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
>>
>> **************************************************
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
>> Behalf Of Beranek, Nicholas
>> Sent: Friday, September 16, 2016 8:57 AM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On
>> Behalf Of Lovely, Brian (CONT)
>> Sent: Friday, September 16, 2016 9:54 AM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On
>> Behalf Of Jamous, JP
>> Sent: Friday, September 16, 2016 9:49 AM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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.

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

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















-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Friday, September 16, 2016 9:30 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 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
>
> **************************************************
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Birkir R. Gunnarsson
> Sent: Friday, September 16, 2016 9:14 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 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
>>
>> **************************************************
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
>> Behalf Of Beranek, Nicholas
>> Sent: Friday, September 16, 2016 8:57 AM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On
>> Behalf Of Lovely, Brian (CONT)
>> Sent: Friday, September 16, 2016 9:54 AM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On
>> Behalf Of Jamous, JP
>> Sent: Friday, September 16, 2016 9:49 AM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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.