A few reasons why should we make websites accessible:
- The best reason is that it’s the right thing to do. People with disabilities should be able to access the web.
- It's the law. Many institutions of higher education have had complaints filed against them by users that are disabled and the Department of Education's Office of Civil Rights.
- One law that pertains to web accessibility is Section 504 of the Rehabilitation Act of 1973. There was no web as we know it back then, but it has been established that this law applies to information technology. This law says if an institution receives federal dollars (which we do) it is covered by the regulations of Section 504 requiring institutions such as UNI to make their programs accessible to qualified students with disabilities.
- Another law is Title II of the Americans with Disabilities Act. It says that you can't discriminate on the basis of disability in the services, programs, or activities of all state and local governments.
- Another reason to make websites accessible is that it helps almost everyone. As we age, our eyesight can decrease, making sufficient color contrast important. People with disabilities can use screen reader software to speak the content of a web page when it has been created with accessibility in mind. Closed captions help English language learners, users in noisy environments, and people that keep the sound turned down.
- One important accessibility feature on web pages is to use appropriate alternative (alt) text for ALL images. Alt text is what a screen reader will announce when it encounters an image. Determining appropriate, equivalent, alternative text is often a matter of personal interpretation. Here are some guidelines:
- Do:
- Be succinct
- Don't
- Use phrases such as "image of…" or "graphic of...". Screen readers will announce these things before the alt text is read.
- Use text in images unless it is a logo or wordmark. If you do have words in your image, use those exact words as your alt text.
- Do:
- Provide appropriate document structure
- Headings: UNI Drupal sites use what’s in the title field to create a Heading 1 (most important) and there should only be one Heading 1 on your page. Use a hierarchy (like an outline). Heading 2 should be a sub-section of Heading 1, Heading 3 should be a sub-section of Heading 2, etc. There are 6 levels of headings. Don’t skip levels-for instance, don’t go to a Heading 4 as the next step after a Heading 2. Screen reader users can have a list of headings read to them with their screen reader software-they can skim a page like other users do with their eyes.
- Lists
- Using true bulleted and numbered lists help screen reader users organize content into manageable chunks. The screen reader tells the user that it is a list, and how many items are in it.
- Don’t use lists just to indent text
- Tables
- Avoid using tables for layout design. Use tables for displaying data.
- Provide headers for data tables. In Drupal, when creating a table, be sure there is something besides “none” in the "Headers" drop-down menu.
- Add a caption to tables
- Ensure links make sense out of context
- Every link should make sense if the link text is read by itself. Screen reader users may choose to have only the links on a web page read to them.
- Don’t link words such as "Click here", "Read more" or a URL for link text.
- Create proper closed captions for video
- Contact Student Accessibility Services if you need closed captions as an accommodation for a student.
- Fill out a Service Hub ticket if you need closed captions for a public-facing video.
- You can correct the automatic captions in the YouTube videos in your channel.
- Ensure accessibility of non-HTML content, including PDF files, Microsoft Word documents, and PowerPoint presentations. If you can create your content in a Web page, do that instead of creating a separate document.
- Do not use Flash. Just don’t.
- Use color with care
- Don’t use color alone to convey information, i.e. "Click the red button…". Some color-blind people wouldn't be able to tell which button is red.
- Foreground and background colors should have sufficient color contrast. You can use an app (Windows or Mac) called Colour Contrast Analyser to determine color contrast. Or use the color contrast tool in the WAVE accessibility checker mentioned in #9 below.
- Make sure content is clearly written and easy to read.
- Do not use text in graphics, unless it is branding like a logo or nameplate.
- One way to test for accessibility is the WAVE accessibility checker. You can either use the web form to enter a URL into the field, or you can add an extension to Firefox and/or Chrome to check accessibility in-page.
- See some short, basic tutorials on electronic documents accessibility. These are works in progress.
