1. 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

2. 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

3. 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.

4. 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.

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

6. 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.

7. 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.

8. 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.

9. 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.

10. 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

11. 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.

12. 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

13. 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.

14. 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.

15. 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 ( characters or less).

16. 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.

17. 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.

18. 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).

19. 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.

20. 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.

21. 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).

22. 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:

23. 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:

24. 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.

25. 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.

26. 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

27. Conclusion
Questions?