Brian Heaton and Kristeena Laroue recently conducted a Web Accessibility Clinic. It was a comprehensive training session for identifying and correcting common accessibility issues with websites, including a screen reader demonstration.
Access the presentation
Key takeaways
Headings
- Headings are an outline of your content.
- Do not select heading level based on resulting visual presentation style.
- Page title is heading level 1 (h1); first heading in your content will be h2; subtopic will be h3; etc.
- Do not use bold paragraph for heading.
- Avoid centering headings.
- Headings should make sense out of context.
- Headings divide your content into consumable sections.
Alternative text for non-text content
- Provide alternate (alt) text for non-text content.
- Images, including poster/flyer images (infographics).
- Alt text should convey in text whatever meaning is conveyed by the image/flyer.
- If the image has a lot of information, charts, diagrams, etc., the alt text should contain 1) a short description conveying the essential information presented by the image, and 2) a long description following the image or on another page.
Bar chart displaying cost comparisons as detailed in the following paragraphs.
- If the image has a lot of information, charts, diagrams, etc., the alt text should contain 1) a short description conveying the essential information presented by the image, and 2) a long description following the image or on another page.
Link text (descriptions)
- Very critical to the page containing the link and the destination page.
- Links should make sense out of context.
- Do not use meaningless or incomplete text like click here, learn more, download, etc.
- Do not use URLs for link text.
- Optimal link text is typically 2-6 words.
- Each unique destination should have unique link text.
Content structure
- Use paragraphs, unordered and ordered lists appropriately.
- Write for your target audience.
- Do not use a heading or bolded paragraph for announcement or notice. Use “Intro” or “Notice” markup instead.
- Do not add blank paragraphs to generate separating space.
- Do not create manual lists (e.g., starting lines with a hyphen).
- Do not bold or italicize entire paragraphs, even one-line paragraphs. Treat just the important words.
- Do not use all capital letters.
- Avoid centering content.
- The template is spacious by design; do not try to circumvent vertical spacing.
Tables
- Used for presenting organized data.
- Never use for layout (e.g., two columns).
- Should always have headers (th). No need to bold or specify header as a heading style.
- Do not combine multiple tables into one with embedded description row preceding each table.
- Precede with descriptive heading, paragraph or include a table caption.
Screen readers
The screen reader demonstration showed typical page navigation and how page headings and links are frequently processed in a list. This emphasized how lists are consumed without benefit of the surrounding context, highlighting the importance of clear and complete heading and link text.
Hear your site on a screen reader
The testing center, located in Meyer Library Lower Level, room 010, has screen reader software installed and will have limited availability during the summer, with advance reservation. Please contact the testing center to make an appointment.
More assistance
Future sessions
Early in the fall and spring semesters a weekly open lab session will be focused on web accessibility where you can get one-on-one assistance with identifying and fixing accessibility issues on your website.
- Friday, September 7, 2018, 2 – 4 p.m. Cheek 100
- Friday, February 1, 2019, 2 – 4 p.m. Cheek 100