Making a website or course materials fully accessible can be a daunting task, but you can make a great deal of progress by adopting some specific, better practices right now. Focus on your website, and don’t worry about fixing materials from past courses — concentrate your effort on what you’re using now and will use in the future. Accessibility isn’t about retroactive change, it’s about making small but effective changes from now on.
Break the file upload habit.
Why put a PDF or Word document on a website when you could just as easily create that content as a web page by copying and pasting it? Putting that content on a page or post saves you the trouble of making the original file accessible. This isn’t just an accessibility best practice, it’s a web best practice: At least 50 percent of users are using mobile devices as their primary means of accessing the Internet, and PDFs and Word docs don’t work great on phones.
Make uploaded files accessible.
If you absolutely must post a PDF or other file, make it accessible. Microsoft Office and Adobe Acrobat Pro offer accessibility checkers that identify accessibility problems in files. We encourage anyone who produces PDFs or other files for upload to A&S-hosted websites to seek training. The Technology Accessibility team, part of the Office of Information Technology, offers workshops and a wealth of online resources for faculty, staff, and students. The National Center on Disability and Access to Education (NCDAE) offers “cheat sheets” for making accessible files from several different applications; view or download NCDAE cheat sheets from the organization’s website.
None of this will benefit mobile users, however, and studies show that more than half of Americans use mobile devices as their primary means of accessing the Internet.
Use heading styles consistently.
The code that creates header styles — h1, h2, h3, etc. — is what web developers call “semantic,” which means it tells screen readers and other assistive technologies helpful information about how the page is structured.
A prospective student browsing your site with a screen reader can, for example, use the screen reader to skim the page by reading only headings. If you’ve created your headings by increasing type size, using all-caps, or adding bold, underline, or italics, the screen reader may not interpret your headings as headings. That would make your page un-skimmable, which will force your user to listen to the entire page to find what he or she is looking for.
Add meaningful alt text to meaningful images.
Alt text is meant to offer users an alternative to looking at the actual images on your pages. Screen readers read alt text, so it’s important to (a) include it and (b) use it to provide relevant information about the image.
Some alt text basics:
- Don’t repeat the caption in your alt text because screen readers will read those, too. If the caption is already descriptive, you may not need alt text; use “” instead so screen readers will know to ignore it.
- Don’t say “image of” or “photo of” — screen readers already supply those words.
- If the medium of the image is important, include that information in the caption (e.g., “the last photograph taken of Abraham Lincoln, our 16th president.”).
- Consider the context of the image and what you’re trying to convey with it.
- Alt text should be descriptive, but limit yourself to no more than 15 words.
- You needn’t provide alt text for bullets and decorative flourishes that don’t convey information.
WebAIM offers great information about alt text, including examples of alt text tailored to context or to work with a caption. Search the site for “alt text,” or read the site’s most all-purpose alt text article. You might also read the Teaching Hub’s post on meaningful link text for more information.
Don’t use an image as the sole means of providing information.
Alt text should include any text that appears in the image, and it should be descriptive enough that the user understands the information conveyed by the image. When an image contains a large amount of information not easily summarized, you may need to provide a longer description in addition to alt text. Check out our guide to providing text equivalents. Check out our guide to providing text equivalents.
Don’t use color as the sole means of providing information.
Colorblind users cannot distinguish between certain color cues, so it’s important that color-coded information be conveyed in other ways. For example, you might underline or bold an important point instead of only using red text. In addition to colored text, error messages should include symbols like an “x,” exclamation point, or checkmark near the relevant text field so the user knows an error has occurred.
Make your link text meaningful.
Don’t just say “more” or “click here,” because a screen reader can be used to skim a document by reading a list of linked text, and in such a case “more” would be meaningless. A good alternative is to use a call to action: “Learn more about the math minor.” “Read the rest of ‘Title of Excerpted Article’” “Download the 2015 newsletter.” Read the Teaching Hub post on meaningful link text for more information.
Use sufficient contrast.
Be sure there is sufficient contrast between the background and the text and images in the foreground. Generally speaking, a color scheme is considered accessible if it can be read in grayscale. Avoid harsh colors like orange and red-green combos. If you use a subtle color palette, use a color analyzer, like WebAIM’s color contrast checker, to ensure it has sufficient contrast.