E-mail List Archives

Search E-mail List Archives for

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

From: Angela French
Date: Thu, Jun 16 2011 1:06PM
Subject: revisiting links to document downloads
No previous message | Next message →

I am working on a plan to make our state agency's website accessible. There are many issues, but one in particular is giving me a headache - how to present, in a consistent manner site-wide, links to documents for download.

Here is an example of one current implementation: http://sbctc.edu/college/f_operatingbudget.aspx . As you can see, there are two main issues here. One is that a table is used as the presentation method. This table isn't constructed correctly as there are no table headers. The second is that the actual link (the PDF icon) is not associated with its title which is the preceding table cell. I imagine this makes it hard for screen reader users to comprehend the page content, and of course links mode is not possible at all. But for the sighted person, the construct works well design-wise.

These document links could be presented as a list of links with the document category (for example 2011-13 Budget Request) represented as a heading. The problem (visually) with this approach is that different list links on different pages would have these category headings at various heading levels depending on the page context. I would like to come up with a consistent presentational approach.

Here is an example of another current implementation: http://sbctc.edu/college/_e-assessreports.aspx. As this presentation spans over multiple years, it does "fit" well in a table in that it is a condensed use of page real estate. Put again, no table headers, and no association of document link with the actual title of the document.

Then there is this page, where it is unlikely that any user, sighted or not, has a clue what the document icons open! http://sbctc.edu/general/a_strategictechplan.aspx

See what I'm up against? If any screen reader users would chime in on this one, I'd be grateful. The goal: a consistent approach to presenting documents for download that is accessible and uses screen real estate in a conservative manner.

Thanks!

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED =
http://www.checkoutacollege.com<;http://www.checkoutacollege.com/>;

From: YOUNGV5
Date: Thu, Jun 16 2011 1:33PM
Subject: Re: revisiting links to document downloads
← Previous message | Next message →

Angela,

I'm not a screen reader user, but I might be able to help. I'm just not
sure about the visual and interactive constraints. Can the text be
clickable? Does the PDF have to be an actual src image or can it be a
background image? Does this PDF image have to be clickable in the way
that it is now? Does this HAVE to be in a table?

Thanks!


Vincent Young
User Experience, Web Accessibility Specialist
Nationwide Corporate Marketing
Nationwide®
o | 614·677·5094
c | 614·607·3400
e | = EMAIL ADDRESS REMOVED =




From:
Angela French < = EMAIL ADDRESS REMOVED = >
To:
"'WebAim Forum ( = EMAIL ADDRESS REMOVED = )'"
< = EMAIL ADDRESS REMOVED = >
Date:
06/16/2011 03:06 PM
Subject:
[WebAIM] revisiting links to document downloads
Sent by:
= EMAIL ADDRESS REMOVED =



I am working on a plan to make our state agency's website accessible.
There are many issues, but one in particular is giving me a headache - how
to present, in a consistent manner site-wide, links to documents for
download.

Here is an example of one current implementation:
http://sbctc.edu/college/f_operatingbudget.aspx . As you can see, there
are two main issues here. One is that a table is used as the presentation
method. This table isn't constructed correctly as there are no table
headers. The second is that the actual link (the PDF icon) is not
associated with its title which is the preceding table cell. I imagine
this makes it hard for screen reader users to comprehend the page content,
and of course links mode is not possible at all. But for the sighted
person, the construct works well design-wise.

These document links could be presented as a list of links with the
document category (for example 2011-13 Budget Request) represented as a
heading. The problem (visually) with this approach is that different
list links on different pages would have these category headings at
various heading levels depending on the page context. I would like to
come up with a consistent presentational approach.

Here is an example of another current implementation:
http://sbctc.edu/college/_e-assessreports.aspx. As this presentation spans
over multiple years, it does "fit" well in a table in that it is a
condensed use of page real estate. Put again, no table headers, and no
association of document link with the actual title of the document.

Then there is this page, where it is unlikely that any user, sighted or
not, has a clue what the document icons open!
http://sbctc.edu/general/a_strategictechplan.aspx

See what I'm up against? If any screen reader users would chime in on
this one, I'd be grateful. The goal: a consistent approach to presenting
documents for download that is accessible and uses screen real estate in a
conservative manner.

Thanks!

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED =
http://www.checkoutacollege.com<;http://www.checkoutacollege.com/>;

From: Angela French
Date: Thu, Jun 16 2011 2:12PM
Subject: Re: revisiting links to document downloads
← Previous message | Next message →

Anything is on the table. Right now I'm experimenting with CSS attribute selectors to make the document icon come in dependent upon the file extension like this:

a[href$=".pdf"]:after
{
content: url(/imgs/layout/icon_pdf.gif);
}

but IE 7 doesn't support.

From: YOUNGV5
Date: Thu, Jun 16 2011 3:27PM
Subject: Re: revisiting links to document downloads
← Previous message | No next message

Angela,

This is just a crude example so please treat it as such. Among other
things, you could probably throw in some ARIA here and there and use
relative units, but I'm sure you get the gist below:

- No tables, instead semantic mark-up and CSS
- Image has PDF alt text
- Image used for high-contrast mode
- Text and therefore image link to PDF (image is within link)
- Link has PDF title text

http://www.webhipster.com/testing/accessibility/accessible-pdf-link.html

Maybe use this technique on the other tables?

Hope this helps.

Best,
Vinnie

Vincent Young
User Experience, Web Accessibility Specialist
Nationwide Corporate Marketing
Nationwide®
o | 614·677·5094
c | 614·607·3400
e | = EMAIL ADDRESS REMOVED =




From:
Angela French < = EMAIL ADDRESS REMOVED = >
To:
'WebAIM Discussion List' < = EMAIL ADDRESS REMOVED = >
Date:
06/16/2011 04:09 PM
Subject:
Re: [WebAIM] revisiting links to document downloads
Sent by:
= EMAIL ADDRESS REMOVED =



Anything is on the table. Right now I'm experimenting with CSS attribute
selectors to make the document icon come in dependent upon the file
extension like this:

a[href$=".pdf"]:after
{
content: url(/imgs/layout/icon_pdf.gif);
}

but IE 7 doesn't support.