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. This is why 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 then link destination should be described in the alt text.
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 on 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 of 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 have the ability to read all of 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 actually 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 should include a table summary that describes what’s in the table. This description should follow the same general guidelines outlined for images.
To add a summary to a table in Cascade, click on the "Accessibility" tab that comes up after you click "Check Content and Submit".
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 and/or captioning videos in YouTube, University IT provides captioning service for a small fee. Submit a help request to email@example.com.
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, and using accessible PDFs for those you do use.
Section, page title, and heading tags tell non-sighted users how content is organized on a page. This is why 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.