Awesome Docs: Creating Accessible Content Part 1 Keith Hays Information Design Specialist: IT Accessibility IT Access Initiative User Experience Design Campus Information Technologies and Educational Services (CITES) University of Illinois at Urbana/Champaign

A Definition of IT Accessibility To provide the ability to access, consume and interact with digital media while maintaining content, message and purpose. Who is it for? Everyone: Accessibility is Usability Impairments: Vision Hearing Motion Cognition Difficulties: Language Age Technical Limitations

Modes of Interaction Consider: Different impairments afford different ways of perceiving and interacting with information. Blind users cannot see images. Low-mobility users cannot use a mouse (blind users don’t either) Low-vision users who magnify the screen see just a bit of it at a time.

Four Questions When creating content, consider these questions: Purpose? - Is this the page I’m looking for? Structure? - Where are things on the page? Interaction? - Can I do what I came to do? Navigation? - Where can I go from here? The answer may change based on a user’s impairment.

Not Covered In This Session Downloadable Documents (PDF, Word, Excel, etc.) Tables Forms Dynamic Content Multimedia

How Screen Reader Users See the Web Visual users infer meaning or function of content based on its visual layout. Non-visual users see a page as it is written, not as it is visually styled. Screen readers “linearize” a page (“The Reading Order”) Screen reader users see one element at a time. Context may not be readily apparent. Screen reader users cannot skim a page. Show CITES home page – kill css Show Midwest site and linearize.

Reading Order START HERE END ----- Meeting Notes (3/21/12 15:50) ----- Reading order is especially important for screen reader users. Reflects the flow of the source code. The experience on this page is very different for screen reader users than it is for visual users.

Typical Patterns of Navigation Most screen reader users: Use the tab key to jump to focusable objects, like links. Use navigation keys to jump through content. Call up lists of elements to choose from.

What You Can Do: The right tool for the write job Like a written paper, good structure helps: Use headings to identify sections of your document. Use lists to group elements that should be grouped. Be descriptive (links, images, etc.). Be consistent. Consider multiple modes of interaction. For example: Do not rely on color alone. Remember the four questions: Purpose, structure, interaction, and navigation.

Semantic Structure: Headings Headings provide clues to how a page is put together. Headings orient a users to how a section of a page fits into the whole. Headings are essential for non-sighted users to know where they are on a page. Headings are invisible if they are not true headings. Show wikipedia page

Semantic Structure: Headings DO: Use appropriate headings (i.e. <h1>,<h2>, <h3>, etc.). Use headings in proper order for each section (avoid overuse). If creating content for a CMS (e.g. Drupal), look for and apply the heading styles (‘Heading 1’, ‘Heading 2’, etc.) DO NOT: Do not visually style text as a heading (e.g. via larger font and bold text) without proper markup. Just because it looks like a heading doesn’t mean it acts like one. Visual styling is invisible to screen-reader users.

Semantic Structure: Lists Lists group items that logically go together. Designers often use visual styling to indicate semantic similarity. Not perceivable by blind users. Lists are essential for non-sighted users. Lists remove ambiguity about how items should be grouped. Very important for long lists of items. Show CITES page

Semantic Structure: Lists DO: Use lists to group items that should go together. Use numbered (i.e. ordered) lists for items that should be listed in a particular order. Use bulleted (i.e. unordered) lists for items that can be listed in any order. DO NOT: Do not use ordered lists for items that are unordered. Do not use lists for layout. Do not rely upon visual spacing to indicate groups of elements.

Semantic Markup: Bold and Italic Text DO: Use <strong> for bold emphasis. Use <em> for italic emphasis. (<strong> and <em> cue some screen readers to change inflection.) CMS editors will do this for you when you use the bold and italic button in the editor. DO NOT: Do not use <b> and <i> tags. They are invisible to screen readers. Do not use markup for purely visual effect.

Being Descriptive: Images Remember: Blind users cannot perceive the content of images. DO: Consider the purpose of the image you wish to use.(purely decorative, informational, complimentary) Provide descriptive text alternatives (the alt attribute). Consider what you would say if you were describing the image to someone on the telephone. Be clear and concise (90-100 characters or less).

Being Descriptive: Images DO NOT: Do not use images for text when CSS styling can provide the desired look and feel (usually possible). If you must use an image, the alt text must match. Do not include words like “image of” or “picture of”. Screen readers will add the word “image”. Do not provide alt text for purely decorative images. Provide an empty alt attribute (alt=“”) to make the image invisible to screen readers.

Being Descriptive: Images If an image conveys more information than an alt text can convey, provide full descriptive text: Provide an in-page description or a link to a description (in-page is better). Use alt text to provide a concise name for the image (maintain association with the description). For graphs: The alt text should provide an image title. The description should summarize major features and trends.

Being Descriptive: Images If an image is used as a link, the alt text should describe the function or destination of the link. Make sure the image is large enough to click (minimum 16x16 pixels).

Being Descriptive: Links Remember: The disorientation you feel when a link goes someplace unexpected is much worse when you can’t skim the page to find out where you are. DO: Use link text that is clear and unambiguous. Normally link text should be the title of the linked page. Check that the purpose of your links can be understood without their context. Remember that screen reader users skip to links or pick from a list. Use the same link text for links that go to the same place. Link text should at least be substantively the same.

Being Descriptive: Links DO NOT: Do not use ‘click here’ as link text. provides no information about link purpose. Do not use the URL as link text (in most cases). Do not use link text that is too short. Links text should be at least 4 characters in length. Use enough text to avoid ambiguity. Do not use link text that is too long. Concise text improves usability.

Interaction Modes: Color Remember: Different impairments afford different ways of perceiving and interacting with information. Low-vision users require high contrast and often need to reduce visual clutter. Blind users cannot perceive color. Colorblind users cannot perceive certain colors or some combinations of colors. Some cannot perceive color at all. Users with cognitive impairments need to reduce visual clutter (unambiguous document structure helps).

Interaction Modes: Color DO: Convey information in multiple ways: Use text and/or unique images as well as color. Change font size and/or underline, bold, italicize. Use sufficient color contrast: 4.5:1 for text < 16pt. 3:1 for text 16pt or larger. Juicystudio.com has a tool that can help: http://juicystudio.com/services/luminositycontrastratio.php

Interaction Modes: Color DO: Avoid color combinations that are not perceivable to colorblind users: Red on black – some users cannot perceive light that is red (i.e. red is invisible to them). Red-Green – some users cannot distinguish between these two colors. Blue-Yellow – more rare than red-green colorblindness. Total color blindness – check if image is perceivable when converted to a grayscale image. Check out Colour-Blindness.com for more information: http://www.colour-blindness.com/variations/

Interaction Modes: Color DO NOT: Do not rely on color alone to convey information. Do not place “busy” background images behind text. Do not use low-contrast color schemes.

A Note About Navigation Consider how annoying it is to have to keep going back and forth between pages. Consider how this would be multiplied if you can’t skim a page to easily find information. Avoid structuring your content so that users need to jump between pages in order to understand the content. At a minimum, provide links to the referenced material.

Conclusion Remember that different impairments afford different ways of interacting with content. Consider the four questions: Purpose? - Is this the page I’m looking for? Structure? - Where are things on the page? Interaction? - Can I do what I came to do? Navigation? - Where can I go from here? Remember that different impairments will lead to different answers. Use common sense

Conclusion Questions?