Content on all Arts, Sciences & Engineering (AS&E) websites should be accessible to everyone. Below are some steps you can take to help make sure that everyone has equal access to our sites.
Images with text, like posters or infographics are inaccessible to unsighted visitors. By law everything that is available to sighted users must also be available to unsighted users. Therefore, any information that is displayed in an image must also be written out in the text on the page.
If the image is also a link, then the link destination should be described in the alt text.
Alt text (image description)
To make images accessible to people who are visually impaired, it’s important to always include “alt text.” Alt text is used by screen readers to explain what the image shows.
When writing alt text, you want to provide a concise but complete description of what is in the image. You can leave out phrases like “photo of” or “image of” because the alt text implies this already. Some screen readers cut off alt text after 125 characters, so it’s important to keep your description to that character count or less, if possible. We also suggest using a period at the end of alt text so that the screen reader pauses before continuing to the rest of the content.
Alt Text Example
Ok: Photo of student
Better: Student in the library.
Best: University of Rochester English major poses in Rush Rhees Library between bookshelves.
Screen readers read out all the text verbatim, including URLs. To create a better user experience for those with screen readers, it’s important to use meaningful hyperlinks instead of spelling out URLs. You’ll also want to keep hyperlinked text to 100 characters or less to make sure they’re accessible to screen readers.
Screen readers also can read all the hyperlinks, allowing unsighted users to “scan” the web page. To make this feature useful to non-sighted readers, we suggest avoiding “here” and “click here” links as they don’t tell the user where the link goes. Creating meaningful hyperlinks helps sighted users as well because it allows them to quickly scan the page for important links.
Here are some examples for how to rewrite "here" and "click here" links:
- Instead of “you can apply to Rochester by clicking here” try:
- Apply to Rochester online!
- Instead of “to see a full description of services click here” try:
- For more information about our services, check out the Complete Service Description (PDF).
- Instead of “click here to register” try:
- Register online through our secure system.
In AS&E, our content management system applies the proper “markup” or coding to help make tables accessible to non-sighted readers. If you’re coding a table using HTML or using a different system, you’ll want to make sure it’s coded properly so that non-sighted readers can access it. WebAIM’s creating accessible tables page is a great resource for properly coding tables.
In addition to being coded properly, all tables must include a caption. The caption should be a short heading for the table content.
To add a caption to a table in Cascade, click on the Accessibility tab that comes up on the screen after you click "Check Content and Submit". Under Actions click Fix and enter your table heading.
All videos used on the AS&E pages must be captioned and use an accessible video player like YouTube. If you’re using auto-generated closed captioning, be sure to review the captions for accuracy before adding the captioned video to your website.
We also suggest providing a transcript and audio description to help ensure that everyone can experience the content in the video.
Interested in learning more? The University of Washington has a great page about creating accessible videos.
If you need assistance in uploading videos in YouTube, University IT provides an uploading service for a small fee. Submit a help request to firstname.lastname@example.org.
If you need assistance in captioning videos, University IT recommends rev.com for captioning services.
Many PDFs aren’t accessible to screen readers at all, and even ones that are accessible can be difficult to use. We recommend limiting PDF use, but if a PDF is needed, they must be accessible.
Creating an accessible PDF starts at the document stage. When writing your document, you’ll want to use:
- Meaningful hyperlinks
- Alt text on your images
- Page breaks rather than tabbing to the next page
- Headings, following a consistent heading hierarchy
- Simple tables
Once the document has been created be sure to save as a PDF. Saving allows screen readers to access the code in the original document. If you use print as a PDF instead it will strip all this code away, making the content inaccessible to a screen reader.
For more information about making a PDF more accessible see SiteImprove’s How to Create Accessible PDF article.
Section, page title, and heading tags tell non-sighted users how content is organized on a page. Therefore, it’s important to use tags appropriately for information hierarchy rather than just visual emphasis.
For example, you wouldn't want to use a heading tag to highlight an application deadline. You also wouldn't want to use bolding in place of a heading tag because this would get skipped when a screen reader "scans" the headings and won't have the same orientation effect as a heading would.