Accessibility Basics
Download as PPTX, PDF6 likes2,790 views
The document outlines principles and strategies for creating accessible digital library services, emphasizing user experience and the importance of including diverse user personas. It addresses constructs such as structure, plain language, usability, and laws like the ADA that guide accessibility efforts. Furthermore, it provides practical guidelines for designing digital content and interactions to accommodate individuals with varying abilities and disabilities.
Accessibility Basics
- 1. 1 Accessibility basics: A library for everyone Whitney Quesenbery Center for Civic Design @awebforeveryone | @whitneyq | @civicdesign Designing for Digital 2017
- 2. 2 Hello! Me Civic design User research, accessibility, plain language Storytelling Former theatre designer You?
- 3. 3 Make digital library services for everyone Starting from principles • Accessible UX • People first Building blocks of accessibility • Structure • Plain language • Tables and forms • Images and media Laws and other regulations • ADA, Section 508, CVAA • UN Convention Making it happen • Creating a process
- 4. Principles And a few definitions
- 5. 5 Which of these are for people with disabilities?
- 6. Disability the outcome of the interaction between a person ... and the environment and attitudinal barriers they may face International Classification of Functioning (ICF), World Health Organization
- 7. Usability The effectiveness, efficiency and satisfaction with which a specified set of users can achieve a specified set of tasks in a particular environment. ISO 9241-11
- 8. Accessibility The usability of a product, service, environment or facility by people with the widest range of capabilities. ISO 9241-20
- 9. Plain language means users can find what they need understand what they find use the information to meet their goals This definition was written by Ginny Redish and adopted by international plain language organizations
- 10. Many barriers to cognitive accessibility are the same as usability problems for general audience…but more severe. - Clayton Lewis
- 12. 12 What if we think about accessibility as user experience? Not rules, but thoughtful design Not disability, but experience Not tech, but people
- 13. 13 Principles of Accessible UX 1. People first: designing for differences 2. Clear purpose: well designed goals 3. Solid structure: built to standards 4. Easy interaction: everything works 5. Helpful wayfinding: guides users 6. Clean presentation: supports meaning 7. Plain language: creates conversation 8. Accessible media: supports all senses 9. Universal usability: creates delight
- 14. People First We can’t design for people we don’t know
- 15. 15 People First Designing for differences People are the first consideration, and sites are designed with the needs of everyone in the audience in mind. 15 Steven • Graduated from the Art Institute • Graphic artist in a small ad agency • iPad, iPhone, MacBook Pro, super monitor Jacob • College graduate, legal training courses • Paralegal, writes case summaries • Shares an apartment with a friend • Laptop, iPhone Emily • Graduated from high school and working on a college degree • Lives in a loft with a group of friends • Works part-time at a local community center
- 16. 16 Accessible UX Personas Meeting all kinds of people Carol Jacob Lea Emily Steven Maria Trevor Vishnu
- 17. 17 I like consistent, familiar places on the web Ability: Autism Spectrum Disorder. Uses larger text and a program that hides everything but the text, so he doesn’t get distracted Aptitude: Uses the computer well for games, but doesn’t learn new sites easily Attitude: Prefers familiar sites in an established routine Assistive Technology: Text preference settings, power keyboard user. Trevor • 18 years old • Lives with family • Goes to secondary school • Computers at school; laptop at home; basic mobile phone with SMS
- 18. 18 Emily I want to do everything for myself Ability: Cerebral palsy. Difficult to use hands and has some difficulty speaking clearly; uses a motorized wheel chair Aptitude: Uses the computer well, with the right input device; good at finding efficient search terms Attitude: Wants to do everything for herself; can be impatient Assistive Technology: Communicator (AAC) with speech generator, iPad, power wheelchair • 24 years old • Graduated from high school and working on a college degree • Lives in an independent living facility • Works part-time at a local community center
- 19. 19 Jacob The right technology lets me do anything. Ability: Blind since birth with some light perception Aptitude: Skilled technology user Attitude: Digital native, early adopter, persists until he gets it Assistive Technology: Screen reader, audio note-taker, Braille display • 32 years old • College graduate, legal training courses • Shares an apartment with a friend • Paralegal, reviews cases and writes case summaries • Laptop, braille display, iPhone
- 20. 20 Lea No one gets that this really is a disability. Ability: Fatigue from fibromyalgia, trackball, and special keyboard Aptitude: Average user Attitude: Wishes people would understand how hard it can be for her to make it through the day Assistive Technology: Split keyboard, power keyboard user, Dragon Naturally Speaking • 35 years old • Masters degree • Writes for a trade publication; works from home
- 21. 21 Steven My only disability is that everyone doesn't sign. Ability: Native language is ASL; can speak and read lips; uses SMS/IM, Skype, and video chat Aptitude: Good with graphic tools, and prefers visuals to text; poor spelling makes searching more difficult Attitude: Can be annoyed about accessibility, like lack of captions Assistive Technology: Sign language, CART, captions, video chat • 38 years old • Art school • Graphic artist in a small ad agency • iPad, iPhone, MacBook Pro; good computer at work
- 22. 22 Vishnu I want to be on the same level as everyone else. Ability: Speaks three languages: Gujarati, Hindi, English, and a little spoken Mandarin. Uses contrast adjustment to see the screen clearly Aptitude: Expert user of technical tools; frustrated searching across languages Attitude: Sees himself as a world citizen, and wants to be able to use any site Assistive Technology: Contrast adjustments, screen magnification, personalized stylesheets • 48 years old • Engineering degree • Works for a medical software company on int’l projects • Born in India, graduate school in Malaysia, lives in Singapore • High tech all the way at work; two mobile phones and a personal laptop
- 23. 23 Maria I love this. It's all here...when I can find it. Ability: Prefers Spanish language sites, when she can find them; needs information and instructions written clearly Aptitude: Adventurous, but not very proficient; husband and daughter set up bookmarks for her Attitude: Thinks it’s wonderful to be able to have her favorite websites with her at all times Assistive Technology: Skype, online translation sites • 49 years old • Community college + healthcare certificate • Married, grown children • Spanish – English bilingual • Community health worker • Smartphone from her phone service, computer primarily her husband’s, for his work
- 24. 24 Carol My grandkids are dragging me into the world of technology. Ability: First signs of macular degeneration, mild arthritis; hearing aid; no special AT on computer Aptitude: Used computers when she worked as a bookkeeper, but now her grandkids keep her old home computer updated Attitude: Willing, but not adventurous Assistive Technology: Enlarges text, but makes few other adjustments • 74 years old • Husband passed a year ago • Lives in an apartment near one of her daughters, and her six grandkids (ages 6 to 16) • Retired; worked 25 years as a bookkeeper • Older computer at home; basic mobile phone
- 25. Get to know the personas In groups of 4 Each choose a persona and introduce yourself: What are your top needs and goals? What barriers do you face? Group input: What can you add to understanding the personas? How can we design to help them succeed?
- 26. Building blocks Structure and semantic meaning
- 28. 28 Solid structure starts with design Design structure • Clear layout design that supports users through the interaction or information • Standards-based markup • Design for linearization and responsiveness Code structure • Standards-based markup • HTML5 layout elements • ARIA roles (used wisely) You don’t have to know how to code, but you need to understand how a web page or app is structured to design it well
- 29. 29 Solid structure: Built to standards Which one is accessible? A big hat tip to @AccessibleJoe and all the folks working on making WordPress more accessible, and to Sylvia Eggers, original author of the accessible child theme shown here.
- 32. 32 Friendly structure: Good wayfinding cues
- 33. 33 Identify the areas of a page visually and in code A clean presentation is easier to navigate – for everyone. role = banner role = main role = contentinfo role = complementary role = form role = navigation role = navigation role = search
- 34. 34 Design for responsive as a step to accessibility
- 35. How might you simplify this page?
- 36. Identify the content structures and what order they go in Menus Text Headings Containers Lists Images Forms Links http://www.open.ac.uk/library/
- 37. 37 Use tables (only) for tabular data Don’t use tables for layout Use row and column headings (coded correctly) Check that the table will be intelligible if linearized. Do use “zebra stripes” Two articles on zebra striping http://alistapart.com/article/zebrastripingdoesithelp http://alistapart.com/article/zebrastripingmoredataforthecase
- 38. 38 Use headings correctly The basics One <H1> per page The controversies • Heading order • Empty headings • An <H1> in every <div> • Headings that should really be a link or paragraph style <H1>The visible title of the page</H1> <H2>A major section of the page</H2> <H3>A subheading</H3> <H3>A subheading</H3> <H3>A subheading</H3> <H2>A major section of the page</H2> <H3>A subheading</H3> <H3>A subheading</H3>
- 39. 39 Support preferences for text size Support text zoom with good wrapping. Don't let text be cut off.
- 40. 40 Easy interaction requires correct code Designing interaction • Start with a layout in a logical order • Design the flow of on-page interaction so they work for linear interaction Coding interaction • Use semantic elements in HTML correctly • Don’t rely on visual layout for meaning • Change the appearance with CSS An easy quick check for interaction: can you navigate the entire page, app, or site only using a keyboard?
- 41. 41 Buttons and links Links are for navigation To a new page To a new view To a different URL To a place on a page Buttons are for actions Submit form data to a server Reset a form Open a window Trigger a popup menu Play media content Both links and buttons can be styled with CSS, but for assistive technology to understand them, they must be coded correctly
- 42. 42 Elements of a form Field Label Prompt Validation Errors Submit button
- 43. 43 Every form field needs a label Visible labels on the screen Labels in code for screen readers Date of birth <form> <label for="dob">Date of birth</label> <input type="text" id="dob" /> ..... </form>
- 44. 44 Every field needs a label (not inside the field) <form> <label for="monthField">Month</label> <input type="text" id="monthField" /> <label for="dayField">Day</label> <input type="text" id="dayField" /> <label for="yearField">Year</label> <input type="text" id="yearField" /> </form> Date of birth Month Day Year Date of birth Month Day Year
- 45. 45 Put warnings and prompts in the right order Before the action or field, not after it! What is your date of birth? Month Day Year For example: 12 28 1970 What is your date of birth? Month Day Year For example: 12 28 1970 See Caroline Jarrett's articles on forms and her discussion of the placement of prompts at Forms That Work
- 46. 46 Put error messages where they can be found If the entry is checked as it is entered, the message can go after the field. Otherwise, it should go before the field. If the page refreshes, messages go at the top of the page.
- 48. Break
- 49. Content Plain language and alternatives for media
- 50. 51 WCAG 2.0 Guidelines for content accessibility Text content Level A and AA 2.4.4 & 2.4.9 Link Purpose: 2.4.6 & 2.4.10 Headings &Labels: 3.1.3 Unusual Words Images Level A 1.1 Text Alternatives: 1.4.1 Use of Color 1.3.3 Sensory Characteristics 1.1.1 & 1.4.9 Non-text Content
- 51. 52Plain language 43% of adults in the US read at basic or below basic levels
- 52. 53 Use simple, everyday words Description Of Service The Site is an online community which enables photographers and graphic artists to post photographs and images, share comments, opinions and ideas, promote their work, participate in contests and promotions, and access and/or purchase services from time to time made available on the Site (“Services”). Services include, but are not limited to, any service and/or content 500px makes available to or performs for you, as well as the offering of any materials displayed, transmitted or performed on the Site or through the Services. Content (“Content”) includes, but is not limited to text, user comments, messages, information, data, graphics, news articles, photographs, images, illustrations, and software.
- 53. 54 Use summaries to communicate key points
- 54. 55 Help readers orient themselves (on the site, on the page, in the right order 1. Page title 2. Shortest possible answer 3. Good headings 4. Bullets for key points 5. Good captions
- 55. 56 Put warnings and prompts in the right order Requirements, prompts, warnings, notes and anything else that someone needs to complete an action correctly must come before the action, field or instruction, not after it!
- 56. 57 Use design to make information easy to scan
- 57. 58 Images and media: Appeal to all senses People can understand and use information contained in media, such as images, audio, video, animation, and presentations. • Duplicating cues (color + shape) • Content replacement (audio + captions)
- 58. 59 Color The simplest rule: Do not communicate meaning only with color. Color, shape, text all work together to communicate meaning.
- 59. 60 Color Make sure there is enough contrast between text (or icons) and the background. There are tools for that! • contrast-finder.tanagurconu.com • colorsafe.co/ • webaim.org/resources/contrastchecker lighthouse.org
- 60. 61 Animations and video Transcripts for all audio Synchronized captions for video Audio (or visual) descriptions for action And, make sure the media player is accessible
- 61. 62 Images The most important question: What does this image communicate? 4 Syllables - http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/
- 62. 63 Images What’s the right ALT text for this image? Fox Red fox A red fox, standing on a pile of rocks, looking back at the camera Red fox at Sachuest Point National Wildlife Refuge It depends on context!
- 63. 64 Get the basics right Repeat the text in the image. Alt text: “Webcast. Applying 21st Century Toxicology to Green Chemical and Material Design. September 20- 21, 2011” Identify the link target Alt text: “UXPA group on Facebook” "@UXPA_Int on Twitter" "UXPA's LinkedIN profile" Don’t create noise Alt text: “” Include both image and text in one link
- 64. 65 Don't hide meaningful images Is a profile photo part of the content? <img alt="Photo of Caroline"> or <img alt="Caroline Jarrett">
- 65. 66 On the HTML5 standards horizon: <figure> and <figcaption> Keeps the image, alt text, and caption together <figure><img src="castle- painting.jpg" alt="The castle now has two towers and two walls."> <figcaption>Oil-based paint on canvas. Eloisa Faulkner, 1756.</figcaption></figure> Example from: http://rawgit.com/w3c/alt-techniques/master/index.html#m6
- 66. 67 Make captions and alt text work together The caption: “Figure 1: The ABC of research methods” The alt text: “ABC diagram.” or "ABC diagram sketched on a chalkboard.” or “A diagram sketched on a chalkboard as a triangle. Top: Attitude. Right: Behavior. Left: Comprehension.
- 67. 68 Don't hide information in the alt text Caption: Red fox, credit: John & Karen Hollingsworth Alt text: Red Fox as Sachuest Point NWR. Credit J and K Hollingsworth
- 68. 69 When the information is in a chart... Add a data table The alt text: "Bar chart of data in table below" http://www.careerinfonet.org/finaidadvisor/earnings.aspx?nodeid=21
- 69. Laws
- 70. 72 Americans with Disabilities Act The ADA is one of America's most comprehensive pieces of civil rights legislation that prohibits discrimination and guarantees that people with disabilities have the same opportunities as everyone else to participate in the mainstream of American life -- to enjoy employment opportunities, to purchase goods and services, and to participate in State and local government programs and services. First passed in 1990 https://www.ada.gov/ada_intro.htm
- 71. 73 UN Convention on the Rights of Persons with Disabilities Adopted in 2006 https://www.un.org/development/desa/disabilities/convention-on-the- rights-of-persons-with-disabilities.html
- 72. 74 Section 508 Section 508 covers all electronic and information technology used by the Federal government that agencies develop, procure, maintain, or use. Agencies must ensure that it is accessible to employees and public. First passed in 2001 Updated in 2017 https://www.section508.gov/
- 73. 75 WAI Web Content Accessibility Guidelines 2.0 The WCAG documents explain how to make web content more accessible to people with disabilities. Web "content" generally refers to the information in a web page or web application 1.0 published in 1999 2.0 published in 2008 Work on 2.1 begun in 2017 https://www.w3.org/WAI/intro/wcag
- 74. 76 Accessible UX WCAG 2.0 On the A Web for Everyone book site, you can find resources including a list of the accessible UX principles and a table that cross- references the principles to guidelines and checkpoints in WCAG 2.0 http://rosenfeldmedia.com/books/a-web-for-everyone/#resources
- 75. Making it happen Accessibility is a process
- 76. 78 Work with clear purpose People enjoy products that are designed for the audience and guided by a defined purpose and goals. • Design for clarity and simplicity. • Think “accessibility first.” • Choose an accessibility strategy.
- 77. 79 Start from a solid structure People feel confident using the design because it is stable, robust, and secure. • Start from accessible templates • Code to standards. • Use standard web technologies
- 79. 81 Accessibility testing in layers Principle Testing mode What it tests Perceivable Inspection Basic accessibility errors Robust Code review Use of code standards Semantic structure Operable Check using AT Expert review Interaction using keyboard, screen reader, other AT Operable/ Understandable Usability testing Use by real people
- 80. 82 Accessibility is the work of everyone To make something as simple as a heading... • A UX researcher identifies user needs. • An information architect suggests keywords. • A content strategist plans the tone. • A content author writes the text. • A web producer tags it as a heading. • A visual designer decides on its appearance. • A web specialist creates the style. • And the tech team makes sure the servers are running.
- 81. 83 Be a leader Support an integrated practice: • Set policies and develop training. • Choose content and development tools that • support accessibility. • Create a style guide and media library. • Include people with disabilities. • Make accessibility part of site maintenance.
- 82. 84 Create an integrated practice Make accessibility the way you do business. Assess what’s needed for an integrated practice: • Evaluate the current site. • Identify ways to allocate resources. • Identify opportunities to integrate accessibility into • current processes. • Assess current knowledge and readiness.
- 83. 85 It takes.... ... engaging all types of expertise Photos: ITIF AVTI/CATEA
- 84. 86 Be a ^ superhero Create a new perspective UX
- 85. 87 It takes…. …changing your habits Photo: mtstcil.org
- 86. 88 It takes…. …a new perspective Aimee Mullins TED talk
- 87. Be a superhero for accessible UX Make change happen
- 88. Questions?
- 89. 91 Whitney Quesenbery whitneyq@civicdesign civicdesign.org @whitneyq A Web for Everyone rosenfeldmedia.com/books/a-web-for-everyone @awebforeveryone Center for Civic Design civicdesign.org @civicdesgin
Editor's Notes
- #4: All of the tools and principles of an excellent user experience also support accessibility, just as web design that is responsive to diversity of devices is also responsive to a diversity of human needs. Today is about basics, not technology, but a way of thinking about how to design with clarity, good signposting of structure and function of info and elements, and building a conversation into the interface.
- #7: Social model of disability. It's the interaction. That's what we create. So it make sense that accessibility is part of UX
- #8: ISO says so.
- #9: ISO says so.
- #10: ISO says so.
- #11: ISO says so.
- #26: 20 minutes
- #33: Screen readers can navigate using Anchor links Headings lists WAI-ARIA roles
- #34: Screen readers can navigate using Anchor links Headings lists WAI-ARIA roles
- #35: Linear order and restructuring
- #36: Readabiilty – now Mercury Reader
- #39: If everything is a heading, then navigation by headings has no meaning.
- #40: Discuss trend to relying on platform. Made possible by standards-based code. Also means that the changes are persistent. Page zoom vs. text zoom
- #43: Display form controls in the same order in HTML as they appear on screen. Do not use CSS to rearrange the form controls. Screen readers narrate forms in the order they appear in the HTML.
- #50: 3:15
- #53: U.S. National Assessment of Adult Literacy http://nces.ed.gov/naal/kf_demographics.asp Below basic – only the most simple and concrete reading skills Basic – able to manage everyday tasks Intermediate – moderately challenging activities like consulting reference material Proficient – interpreting text, comparing viewpoints Below Basic: 14% or 30 million people Basic: 29% or 63 million people Intermediate: 44% or 95 million Proficient: 13% or 28 million
- #54: 3.1.3 Unusual Words: The site includes definitions of words or phrases used in an unusual or restricted way, including idioms and jargon. (Level AAA) 3.1.4 Abbreviations: The meaning of abbreviations is available. (Level AAA)
- #62: Extra benefits for SEO, translation, and people listening in noisy environments
- #65: Don't
- #66: Big debate on WebAIM about this – is this just noise, or meaningful. On UXPA's magazine we went with the first option. But I believe you should not "null" this image, as it is important to the sense of this profile page.
- #67: figcaption will replace or work with alt text few browsers support it yet
- #69: In this case, there is a caption that provides some of the information, but other useful information is hidden in the alt text, and some is duplicated
- #86: Throughout the design process.
- #89: Photo: blog.metmuseum.com: Alexander McQueen legs, designed for Aimee Mullins http://blog.metmuseum.org/alexandermcqueen/tag/no-13/ Aimee Mullins: My 12 pairs of legs: http://www.ted.com/talks/aimee_mullins_prosthetic_aesthetics.html