Design pattern: Accessible links to PDF files

This is a small design pattern for making sure a link to a PDF is accessible.

PDF icons placed before the filename and included as part of the 'a href'

  • Provide alt text for each PDF icon, eg ‘PDF file opens in a new window’.
  • Ensure that the icon is placed inside the <a> tag to ensure the alt text is announced by screen readers along with the link.
  • Duplicate the alt text description in the ‘title’ attribute of the <a> tag.

Example code

<a href= “xxx.pdf” title=”This link will open a pdf file in a new window”>

<img src=”xxx/pdf_icon.gif” alt=”This link will open a pdf file in a new window”> A form </a>

Note 

Screen readers do not usually announce the ‘title’ attribute, and that’s why we need to include the PDF icon as part of the link, as a screen reader user will then hear the alt text associated with the icon. The ‘title’ attribute gives you the hover over tooltip that is useful for sighted users.

I learned this the hard way after assuming that screen readers read out ‘title’ text!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s