WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Re: FW: CSS and 508 Challenge

for

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

From: Jared Smith
Date: Tue, Aug 24 2010 12:33PM
Subject: Re: FW: CSS and 508 Challenge
No previous message | Next message →

On Tue, Aug 24, 2010 at 11:59 AM, Langum, Michael J wrote:

> Can you override the screen reader output of actual text within anchor tags using title attributes?

No. In this case the screen reader will generally ignore the title
attribute and read the visible link text. In fact, there really isn't
any way to hide or replace visible screen text for screen readers.

You can, however, add additional text and hide it visually so that it
is only available to screen readers (e.g., <a href="mypdf.pdf">OPM
71<span class="hidden"> Fillable Form - PDF Format</a>), though this
technique should be used judiciously.

In this case, why do you think only screen reader users would be
interested in knowing that it's a fillable PDF. If this is useful
information for screen reader users, wouldn't it be useful to everyone
else?

Jared Smith

From: Langum, Michael J
Date: Tue, Aug 24 2010 12:48PM
Subject: Re: FW: CSS and 508 Challenge
← Previous message | Next message →

Jared asked: "why do you think only screen reader users would be interested in knowing that it's a fillable PDF"

My question arose because I am trying to ensure that the message spoken when a JAWS user lists only links, will be equivalent to the text displayed in the full HTML. A co-worker had suggested this code.

<dl>
<dt>OPM 71</dt>
<dd><a href="form.pdf" title="OPM 71, Request for leave or Approved Absence, Fillable">
Request for leave or Approved Absence</a></dd>
<dd>Fillable</dt>
<dd>[59 KB]</dd>
</dl>

I wanted to confirm whether or not it would do the job. I take your response to say "no."

-- Mike



-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jared Smith
Sent: Tuesday, August 24, 2010 2:33 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] FW: CSS and 508 Challenge


On Tue, Aug 24, 2010 at 11:59 AM, Langum, Michael J wrote:

> Can you override the screen reader output of actual text within anchor
> tags using title attributes?

No. In this case the screen reader will generally ignore the title attribute and read the visible link text. In fact, there really isn't any way to hide or replace visible screen text for screen readers.

You can, however, add additional text and hide it visually so that it is only available to screen readers (e.g., <a href="mypdf.pdf">OPM 71<span class="hidden"> Fillable Form - PDF Format</a>), though this technique should be used judiciously.

In this case, why do you think only screen reader users would be interested in knowing that it's a fillable PDF. If this is useful information for screen reader users, wouldn't it be useful to everyone else?

Jared Smith

From: Waltenberger, Lon (LNI)
Date: Tue, Aug 24 2010 12:51PM
Subject: Re: FW: CSS and 508 Challenge
← Previous message | Next message →

Jared is right on.

Notification that a link opens anything other than an HTML page should
be available to all users.

It should be available especially when links are listed by those using
screen readers.

It should be available to those using screen magnifiers.

It should be available to those with slow connections who may not want
to open a PDF, especially a large one.

That information can be included in the link but styled to appear
differently for visual users.

For an example, see the list of financial reports on
http://www.lni.wa.gov/ClaimsIns/Insurance/Learn/StateFund/Reports/Defaul
t.asp. We list download times for any file over 400KB including a 20%
overhead at 56k.

From: Jared Smith
Date: Tue, Aug 24 2010 1:03PM
Subject: Re: FW: CSS and 508 Challenge
← Previous message | Next message →

On Tue, Aug 24, 2010 at 12:45 PM, Langum, Michael J wrote:

> My question arose because I am trying to ensure that the message spoken when a JAWS user lists only links, will be equivalent to the text displayed in the full HTML.

I see. There is some complexity when the additional information is
already presented to the user visually, but not within the link text.
As noted, the title attribute won't do anything in this case (except
for provide a tooltip with redundant information for some sighted
mouse users). And if it did, it would be very repetitive for the
screen reader user listening to the page (as opposed to navigating by
links). This also makes the hidden text approach I suggested less than
optimal, though better than nothing, I suppose.

I think a much simpler approach solves the problem for everyone
without the overhead of hidden styles, title attributes, and (I think
incorrect) use of definition lists - <a href="form.pdf">OPM 71,
Request for leave or Approved Absence (Fillable PDF, 59KB)</a>.
Putting a <br> after "OPM 71" and even styling the remaining text to
be indented would give a very similar visual presentation.

Jared

From: deborah.kaplan@suberic.net
Date: Tue, Aug 24 2010 1:18PM
Subject: Re: FW: CSS and 508 Challenge
← Previous message | Next message →

Lon wrote:

> Jared is right on.
>
> Notification that a link opens anything other than an HTML page should
> be available to all users.

exactly. I don't have any visual disabilities, but because of my
motor disabilities, I often grab my links off of my browser's
list of all links on the page, and if the link text is
insufficiently informative, it becomes much more difficult. This
is really a question of universal design; there's no particular
reason that the way I do things would be unique to people with
motor disabilities instead of a matter of personal choice or
style.

-deborah

From: Langum, Michael J
Date: Tue, Aug 24 2010 1:33PM
Subject: Re: FW: CSS and 508 Challenge
← Previous message | Next message →

Jared,

Your suggestion re: using <br> tags would be great IF we didn't also have a requirement to alter the default <dl> layout, -- using CSS float attributes to lay each <dt> and <dd> next to each other horizontally. This whole page began life as a <table> with columns for "form number," "form name," etc.

I'm assuming that I'll have to give up the <dl> structure, and go to a <ul> with floating <div>s within each <li> that correspond to the original <dt> and <dd> tags. I've heard of CSS "display:table" (and similar) attributes.

Does anyone have an opinion on that approach?
-- Mike


-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jared Smith
Sent: Tuesday, August 24, 2010 3:02 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] FW: CSS and 508 Challenge


On Tue, Aug 24, 2010 at 12:45 PM, Langum, Michael J wrote:

> My question arose because I am trying to ensure that the message
> spoken when a JAWS user lists only links, will be equivalent to the
> text displayed in the full HTML.

I see. There is some complexity when the additional information is already presented to the user visually, but not within the link text. As noted, the title attribute won't do anything in this case (except for provide a tooltip with redundant information for some sighted mouse users). And if it did, it would be very repetitive for the screen reader user listening to the page (as opposed to navigating by links). This also makes the hidden text approach I suggested less than optimal, though better than nothing, I suppose.

I think a much simpler approach solves the problem for everyone without the overhead of hidden styles, title attributes, and (I think
incorrect) use of definition lists - <a href="form.pdf">OPM 71, Request for leave or Approved Absence (Fillable PDF, 59KB)</a>. Putting a <br> after "OPM 71" and even styling the remaining text to be indented would give a very similar visual presentation.

Jared

From: Jeevan Reddy
Date: Wed, Aug 25 2010 4:36AM
Subject: Re: FW: CSS and 508 Challenge
← Previous message | Next message →

Hello,
It's always allowed, but screen readers doesn't interpret the content in
the in the "title " attribute.
In your example, <a href="mypdf.pdf" title="OPM 71 Fillable Form - PDF
Format">OPM 71</a>
Screen Reader interpret this link as "OPM71" not as "OPM71 fillable
Form-PDF"
so Adding "title" attribute the links can't give extra information to the
Screen reader Users, but may useful for Sited users when they mouse over it,
they can get that information and looks odd if you use Title attribute to
each link .

if you want convey extra information about a link, span the extra
information that you want to convey and Use CSS to hide that in an
Accessible manner as follows
<a href="mypdf.pdf" >OPM 71<span>PDF Formate</span></a>

<style> a span { height: 1px; width: 1px; position: absolute; overflow:
hidden; left: -100px; }</style>

Now Screen Readers Read as "OPM71 PDF Formate".
Hope this will help you.
Regards,
Jeevan

On Tue, Aug 24, 2010 at 11:29 PM, Langum, Michael J
< = EMAIL ADDRESS REMOVED = >wrote:

> Can you override the screen reader output of actual text within anchor
> tags using title attributes?
> e.g. <a href="mypdf.pdf" title="OPM 71 Fillable Form - PDF Format">OPM
> 71</a>
> -- Mike
>
>

From: Rakesh.Paladugula@cognizant.com
Date: Wed, Aug 25 2010 4:48AM
Subject: Re: FW: CSS and 508 Challenge
← Previous message | No next message

As a screen reader user I don't recommend hiding text unless there is no
alternate. It shows usage of a different approach for a blind and sited
person.
Its just my personal openion.

Regards
Rak

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jeevan Reddy
Sent: Wednesday, August 25, 2010 4:04 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] FW: CSS and 508 Challenge

Hello,
It's always allowed, but screen readers doesn't interpret the
content in
the in the "title " attribute.
In your example, <a href="mypdf.pdf" title="OPM 71 Fillable Form - PDF
Format">OPM 71</a>
Screen Reader interpret this link as "OPM71" not as "OPM71 fillable
Form-PDF"
so Adding "title" attribute the links can't give extra information to
the
Screen reader Users, but may useful for Sited users when they mouse over
it,
they can get that information and looks odd if you use Title attribute
to
each link .

if you want convey extra information about a link, span the extra
information that you want to convey and Use CSS to hide that in an
Accessible manner as follows
<a href="mypdf.pdf" >OPM 71<span>PDF Formate</span></a>

<style> a span { height: 1px; width: 1px; position: absolute; overflow:
hidden; left: -100px; }</style>

Now Screen Readers Read as "OPM71 PDF Formate".
Hope this will help you.
Regards,
Jeevan

On Tue, Aug 24, 2010 at 11:29 PM, Langum, Michael J
< = EMAIL ADDRESS REMOVED = >wrote:

> Can you override the screen reader output of actual text within
anchor
> tags using title attributes?
> e.g. <a href="mypdf.pdf" title="OPM 71 Fillable Form - PDF Format">OPM
> 71</a>
> -- Mike
>
>