Working with departments on web content and CMS training, I am constantly preaching the importance of web accessibility. I know how to make content more accessible and why, but explaining the importance to our web authors can be difficult, until the day I met Brian. During a workshop for our Web Accessibility Higher Education project, the campus Disability Resource Center brought in a student to give us some perspective. Brian is blind and in his third year of law school at OU. He is easy-going, patient and despite explaining how difficult it can be to get your education, has persevered. He discussed how difficult it is the get digital textbooks that aren’t just scanned images of the text book pages, among the other simple tasks I am sure many students take for granted. While I can’t fix some of the academic struggles students like Brian have (although our Disability Resource Center does a wonderful job), I can make an impact when it comes to the web.
Our last workshop covered the topic of web accessibility. We hosted a guest speaker, Gates Moskovsky, who does accessibility consulting work. He is also blind and was able to demo his screen reader and help us see what the experience is really like to users with disabilities. A great tip we heard was if you want to demo a screen reader on your website, do it with the screen turned off so you can really understand how it works.
For more basic accessibility tips and tricks, here’s 10 Accessibility How To’s. You can also download the presentation so you can reference all the great links and resources. Web Accessibility Tips and Tricks Powerpoint (includes notes) or Web Accessibility Tips and Tricks PDF.
1. Alt Text: Alt text is not only the description of an image that a screen reader will read out when a blind user comes to that image on your site, but it is also the place you can put in keywords that describe your image and will improve your search engine optimization. People with a slow internet connection, who are browsing with disabled or are using a text only browser would also only see this alt text. Alt text should also be incorporated into Word documents and PDFs that you put online. The links below are some great alt text resources.
W3C Techniques for providing useful text alternatives
2. Proper Headings: Every page in your website should have one H1 which should be the main title of the page. Then you should begin to organize your content with H2 and then subheadings within each H2 section could be your H3s.Headings should also be used in Word and PDF docs. Think of it like building a resume.
Proper Headings example:
<h3> Application Process
<h3>OU Graduate College Requirements
<h3>College of Blank Requirements
3. Steps to Make PDFs Accessible: During a conference in October, an accessibility expert from the University of Washington shared some great workflows on how to make accessible PDFs from scratch, exporting from Word to tagged PDF and repairing and creating inaccessible PDFs and PDF forms using Acrobat Pro. Find them here: http://uw.edu/accessibility/pdf.html
4. Use Text NOT Pictures of Text: Pictures that contain text are not readable on a screen reader, on a text only browser or on a browser with images disabled. Pictures become blurry when enlarged and take longer to download, especially on a slow internet connection. Text in an image is not searchable either. If you post an image of a posted from a symposium, all the great info on the poster will not be indexed or searchable online.
5. Choose Your Words Carefully: Word length and sentence complexity have an effect on the ability of certain individuals to decode the words on a page. If I have a learning disability, long winded content may give me difficulties. Proper spacing between paragraphs is also helpful to users who may have trouble following a lot of text on a page.Resources: Juicy Studio Readability Test –http://juicystudio.com/services/readability.php or Struggling with Understandability –http://terrillthompson.com/blog/10.
6. Use Proper Headings in Tables: People need to be able to follow along and clearly understand the information you have built in a table. If you have a contact information table, make sure Name, Phone, Email and other columns of information have proper headings.
7. Become a Closed Captioning Master: All videos posted online, whether it’s through iTunes U, YouTube or some other service, is required to be captioned. But who benefits from a transcript? People who are deaf-blind (easier to read than captions with a Braille device). People with low Internet bandwidth. People who want the information but don’t have time to watch the video. Don’t forget to describe content that is otherwise only accessible to people who can see it. Examples: Words on the screen, critical actions or other critical details about the setting, etc. See the Webcomm website for more captioning resources and how-to’s: http://www.ou.edu/content/home/webcomm/video/captioning.html. You can also check more entries in our blog: https://blogs.ou.edu/webcomm/?s=captioning
8. Color Contrast Checker: People who are color blind are also an audience we have to consider when creating accessible web content. Learn about color contrast, minimum guidelines and how you can analyze color contrast: http://www.paciellogroup.com/resources/contrast-analyser.html
9. Get Involved:
- Follow #a11y on Twitter
- Contact the Disability Resource Center and get involved with the Web Accessibility Higher Education project
- The EDUCAUSE IT Accessibility Constituent Group is working to get accessibility on the radar of EDUCAUSE, CIO’s, and other IT Leaders. Learn more at http://educause.edu/groups/itaccess
10. Screen Readers: If you’d like to demo a screen reader, all of the computer labs on campus have the software on most of the computer. You can also download a demo:
- JAWS: http://freedomscientific.com/products/fs/jaws-product-page.asp
- Window-Eyes: http://www.gwmicro.com/Window-Eyes/
- NVDA (Free!): http://www.nvda-project.org
- VoiceOver (built in to Mac OS X and iOS): http://www.apple.com/accessibility/voiceover/