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

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

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

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

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

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

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

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

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

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

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

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

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

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 417-836-5271 webpress@missouristate.edu Office of Web and New Media