WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Implementing aria-label

for

From: Birkir R. Gunnarsson
Date: Sep 16, 2016 8:30AM

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