Universal Design for the Web Flashcards
What is universal design?
Creating designs that apply to people with or without disabilities. Create products and environments that the vast majority of people can use by taking into account our natural physical diversity.
How is universal design different from providing accommodations?
Universal design is a proactive approach, benefiting a wide range of users, while providing accommodations is a reactive approach, making adjustments to meet the needs of a person with a disability.
What are universal design recommendations for images on the web?
- Don’t assume everyone can see images.
- Add a text alternative for that image. Alt text is usually invisible and only people who know the alt text is there is your blind users
- If you don’t add alt text, SRs either skip over the image or try to read related text like file name, which is unhelpful
What are universal design recommendations for colors on the web?
- Don’t assume everyone can see colors
- Don’t rely on color alone to convey meaning; always supplement color-coded info with text explanations
- e.g. person who’s completely blind can’t see any colors, person with low vision may have hard time distinguishing some colors, and person with colorblindness may not be able to distinguish certain combos of colors
What are universal design recommendations for contrast on the web?
- Don’t assume everyone has perfect vision
- Ensure contrast of text against background is sufficient to allow text to be read easily
- Some people with low vision see in low contrast
- Don’t always have to use highest contrast, but choose colors that don’t make reading difficult
What are universal design recommendations for video & audio on the web?
- Provide synchronized captions for the deaf, synchronized audio descriptions for the blind, and text transcript for those who are both deaf and blind
- Captions – if you can’t hear, you won’t be able to make sense of speech in a video
- Transcripts – only way to make video/audio accessible for someone both deaf & blind
- Audio descriptions – blind person won’t understand what’s happening in video unless there is narration. Audio descriptions explain visual aspects of the video. Works best when users can turn it on/off or when there’s separate version of video with audio descriptions for blind users.
What are universal design recommendations for links on the web?
- Ensure link text clearly explains destination or purpose of link
- SR users usually use tab key to go through links on a page/keyboard shortcut to pull up list of links, which only reads the link text, so “click here” or “more” is useless
- Good link text also makes navigation more understandable for everyone, incl. people with cognitive disabilities
What are universal design recommendations for headings on the web?
- Use headings to create a properly structured outline of the page, which helps organize content and navigation for SR users
- Headings speed up navigation and make structure of page easier to understand
What are universal design recommendations for keyboard accessibility on the web?
- Ensure that all functionality is keyboard-accessible, that tab order is logical, and focus indicator is always visible
- Don’t assume everyone uses a mouse
- Users need to be able to tab to all links, forms, dynamic content, and operate it using keyboard
- Some complex widgets may require use of enter/return key, arrow keys, space bar
- Tab order should be logical – would the order make sense if you couldn’t see the rest of the page and the only thing you could hear was the text in objects with tab focus?
- Visual focus indicator should be visible to sighted keyboard users; don’t turn focus indicator off in your styles. Can use CSS to enhance indicator
What are universal design recommendations for tables on the web?
- Associate data cells with header cells to allow SR users to navigate effectively within tables, use <th> tags for headers
- Blind users can’t see visual organization of a table so you have to make explicit association between data cells & header cells
- If marked up correctly, SR reads header cells before each data cell
What are universal design recommendations for forms?
- Every form element needs a label, and that label must be associated with the form element in the markup
- Use <label> tag</label>
What are universal design recommendations for dynamic JavaScript?
- Make dynamic JS accessible by using: (1) ARIA and marking up name, role, state, properties of elements and (2) by controlling keyboard focus
What are universal design recommendations for PDF documents?
- Must be in “tagged PDF” format, be edited for reading order/tab order and other semantic and structural markup – start with accessible doc like MS Word or Adobe InDesign and use Acrobat Pro to convert to tagged PDF
- Provide accessible alternative to PDF document
