This is a small design pattern for making sure a link to a PDF is accessible.
- 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.
<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>
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!