1. Web Accessibility Clinic – Common Issues
Brian D. Heaton
May 17, 2018

2. Common A11y Issues I’ve seen a11y everywhere. What does that mean?
A11y is the common shorthand for accessibility, which has 11 characters between the a and y, hence a11y.
I’m just the content editor. What can I do?
Plenty! As the last person to touch your content before it goes live, you are the difference in success or failure.
Office of Web and New Media

3. Why Worry Why worry about having an accessible page?
Your website is utilized by many devices. Accessible pages have a much greater probability of being processed as you desire by desktops, smartphones, screen readers, braille devices, search engines, etc.
It’s the right thing to do.
Better search engine results.
It’s the law!
Office of Web and New Media

4. The Big Five Headings Alternative text for non-text content
Link text (descriptions)
Content structure
Tables
Other issues
Bonus: Improving your search results
Office of Web and New Media

5. 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.
Office of Web and New Media

6. 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.
Office of Web and New Media

7. Link Text
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.
Office of Web and New Media

8. 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.
Office of Web and New Media

9. 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.
Office of Web and New Media

10. Additional Issues
Other common issues are eliminated or reduced by Web Press.
Contrast – standard stylesheet insures appropriate levels of contrast.
Keyboard navigation – major structure sections and navigation links are included in our templates.
Responsive design – allows consumption by smaller screen devices, like tablets and smartphones.
Office of Web and New Media

11. Identify Issues
The following tools can assist in identifying issues on a page:
Web Press editor
Accessibility Checker
Browser tools
aXe Developer Tools – plugin for Firefox and Chrome
Lighthouse - developer tools feature in Chrome
Full site scan
Available this fall (pending funding)
Office of Web and New Media

12. Bonus: Enhanced Search Results
As promised, here are the items that will greatly enhance your website for search results:
Use headings, appropriately.
Provide alternate text for non-text content.
Use meaningful link text (descriptions).
Craft your message (content) using best practices.
Use data tables for presenting organized data, not for achieving faux column layout.
Office of Web and New Media

13. Hand in Hand
Websites optimized to appear prominently in search results are more accessible.
Websites optimized for accessibility will appear more prominently in search results.
Accessibility and search results go hand in hand; ignoring or improving one will affect the other.
Office of Web and New Media

14. More Assistance Weekly open lab sessions Web help desk
Every Friday university offices are open.
2 – 4 p.m.
Summer: ALUM 601 downtown Fall/Spring: CHEK 100
Web help desk
Weekday afternoons
Office of Web and New Media