Practical A11y testing for surveys
Download as PPTX, PDF•0 likes•69 views
The document provides an overview of accessibility testing for surveys and web pages. It discusses common accessibility issues like missing labels, unlabeled form fields, lack of color contrast, and improper heading structure. The document also summarizes key WCAG 2.0 success criteria for perceivable, operable, and understandable content. Testing techniques involve using accessibility evaluation tools and disabling CSS to check for proper reading order and focus navigation.
Practical A11y testing for surveys
- 1. “WELL, THERE’S YOUR PROBLEM RIGHT THERE” Practical, browser-based testing.
- 2. A11Y FOR SURVEYS RUNNER UP EDITION “Well, there is your problem right there”
- 3. WHAT YOU SHOULD LEAVE THIS SESSION WITH A Basic understanding of WCAG 2.0 How WCAG applies to web pages The most common failures and violations and how to catch them A general sense of wellbeing and enlightenment* *Nope. That is a straight up lie.
- 4. WHO WE ARE Sandhya Bikmal Research Computing Division RTI International [email protected] Sridevi Sattaluri Research Computing Division RTI International Jeff Coburn Institute for Community Inclusion University of Massachusetts Boston [email protected] (@coburnicus)
- 5. WHO YOU ARE (HOPEFULLY) • Responsible for a product • If you have googled the words “how to check for accessibility?” this is for you. • If you have typed “npm install axe-core --save- dev” this might not be for you.
- 6. WHY MAKE THE WEB ACCESSIBLE ? Spider-Man: Homecoming Also, it’s your job.
- 7. QUICK MESSAGE FROM BILLY DO YOUR JOB
- 8. IF YOU, OR SOMEBODY ELSE, NEEDS TO BE REMINDED. Accessibility is a Civil Right - Marcy Sutton https://marcysutton.com/accessibilit y-is-a-civil-right The web we broke - Ethan Marcotte https://ethanmarcott e.com/wrote/the- web-we-broke/
- 9. THE STATE OF WEB ACCESSIBILITY IN 2019
- 10. NOTE: THIS IS THE BARE MINIMUM OF TESTING User testing with people with disabilities combined with unit testing is preferable.
- 11. TESTING PAGE/SURVEY |-----------------Launching without testing, FAILING | | | <----------We are here | |-----------------Unit Testing at code level | | | |----------------Testing with actual users
- 12. TESTING ELECTRICAL SOCKET |--------------Touching wires with screwdriver, DYING. | | | <----------We are here | |-------------Using Multi-meter| | | |-------------Calling an electrician
- 13. OUR BASIC TOOLBOX Browsers: Chrome , Internet Explorer Extensions: https://chrispederick.com/work/web -developer/ & https://wave.webaim.org/extension/ *(I ❤️🔥🦊)
- 14. LET’S TALK ABOUT WCAG Perceivable - You can detect what is there, and what it's purpose is, using your senses within your confines and conditions. Operable – It’s usable. You can navigate and interact with it. Things behave in an expected way. Understandable - The content/instructions are comprehensible and useful. Things are labeled correctly. You know what to do. Robust - The form works on appropriate devices and allows for assistive technology, and future technologies.
- 15. WCAG 1.3.1 – INFO AND RELATIONSHIPS Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A) REAL TALK: Passing this mean that you are using non-visual cues and/or the “semantic web” convey information. The page will work if you change context. Symptoms: The page looks right, but is not semantically marked up; form fields are not associated with appropriate labels. Test: Is the content structured and can be programmatically determined? How to: Web Accessibility Toolbar: Structure - Fieldset/Labels; Tables - Show data tables
- 16. WCAG 1.3.1 – INFO AND RELATIONSHIPS (CODE) Compliant <span style="font-size:0px"><label for="LangSelect">Language </label></span> <select id="LangSelect" name="LangSelect" ><option value="1">English</option> <option value="2">Spanish</option> </select> Language ‘English’ Editable combo box Collapsed Non-Compliant <select id="LangSelect" name="LangSelect" > <option value="1">English</option> <option value="2">Spanish</option> </select> ‘English’ Editable combo box Collapsed
- 17. WCAG 2.4.6 – HEADINGS AND LABELS Headings and Labels: Headings and labels describe topic or purpose. (Level AA) Real Talk: Headings describe the content the are the header of. Forms have helpful prompts and labels. Symptoms: The user sees unhelpful headings like “section 1” or form labels that aren’t specific or clear. ie., do I enter my whole name or just my first name? Test: Look at your headings, could you create a TOC based on them? Does every form element have a descriptive label?
- 18. WCAG 3.3.2 – LABELS OR INSTRUCTIONS Labels or instructions are provided when content requires user input. (Level A) Real Talk: It is clear what you are to enter into each input, including format. Symptom: The user cannot submit the form because the have inputted their birth date or phone number incorrectly. Test: Can required fields be clearly identified? Are data formats provided?
- 19. AN INTERLUDE • Good web pages are like a good soup.
- 20. W C A G 1 . 3 . 2 – M E A N I N G F U L S E Q U E N C E When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. (Level A) Real Talk: If the order of content matters, does the content maintain it’s order when context is changed. Symptoms: A screen reader will read the content in an order that is not helpful Test: Remove CSS to see reading order. Disable styles, or Reader View
- 21. WCAG 1.4.1 - USE OF COLOR Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A) Real Talk: Don’t use red as the only way to alert users that they messed up filling the form, or that certain fields are required Test: Kill the styles, can you still tell what fields are required. Use gray scale (mac: Universal Access, win: search “turn on color filters”)
- 22. WCAG 1.4.3 – COLOR CONTRAST The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA) Real Talk: Text has to have appropriate contrast to it’s background. Symptoms: Some of the text is subtle or greyed out. Culprits are often footers, fineprint and “helper text.” Test: Run Wave test, click “contrast tab”
- 23. WCAG 1.4.4 – RESIZE TEXT Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA) Real Talk: It’s not a pain-in-the-arse to change the size of the text; and when you do, it doesn’t break the page. Symptom: increasing the text size doesn’t. Test: Increase the text size (Mac: command+, Win cntrl+). Does the page still function and read correctly? Does ALL the text increase in size?
- 24. INTERLUDE II From my experience, most accessibility issues come from: • Content creation done in MS word. • Wordpress and Drupal themes • People making decisions based on ease of production for development, or design preferences of the designer/creative director, over the needs of the user.
- 25. WCAG 2.1.1 – KEYBOARD All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. (Level A) Real Talk: You can use the page using only a keyboard. Symptom: In order to achieve a task, the user must use a mouse. Test: Use the page with only a keyboard.
- 26. WCAG 2.1.1 – KEYBOARD (PART DEUX) • You should be able to: • Tab and shift-tab (reverses direction) around focusable elements (forms) • Enter to submit a form • Space Toggle an element's state (for example checkbox) or Open or close an element (for example combobox) • Arrow up, down, left, right: Change the value of an item or open/close a tree • Esc: cancel or close a prompt • https://www.accessibility-developer- guide.com/knowledge/keyboard-only/browsing-websites/
- 27. WCAG 2.1.1 – KEYBOARD Compliant <p >..... <a id="atip" class="ctooltip" aria-describedby="tp1">policies and procedures<span id="tp1" class="ctooltiptext" role="tooltip" aria-hidden="true">policies and procedures described...</span></a>…….</p> .ctooltip:hover .ctooltiptext { visibility: visible; opacity: 1; } .ctooltip:focus .ctooltiptext { Non - Compliant <p>.....<a id="atip" class="ctooltip" >policies and procedures<span id="tp1" class="ctooltiptext" >policies and procedures described...</span></a> ….. </p> .ctooltip:hover .ctooltiptext { visibility: visible; opacity: 1;}
- 28. WCAG 2.1.2 – NO KEYBOARD TRAP • If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away. (Level A) • Real Talk: You can get out of any interaction you initiate. • Symptom: The use activates a form element, and can’t move out until completing it. Or a dialogue box opens, and the user can’t use keyboard to close it. • Test: Move through the entire page without entering data, or using mouse to close out any interactions.
- 29. WCAG 2.4.1 – BYPASS BLOCKS A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A) Real Talk: Don’t make somebody with a screen reader or keyboard-only listen/navigate 300 link navigation just to get to the content. Provide “skip to content” Symptoms: A user filling out a multi-page survey must tab through the navigation on every page. Test: If there is a beefy-nav©, you should be able to focus on “skip link” and press enter to skip activate it.
- 30. WCAG 2.4.3 – FOCUS ORDER If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A) Real Talk: Tabbing through a form, dialogue, or app happens in a predictable and logical manner. Symptoms: A user fills in their “first name”, but then tab to something besides “last name” because of layout nonsense. Test: Begin tabbing through page. Before each tab press, predict where it should end up. If it ends up somewhere surprising, you got issues.
- 31. WCAG 2.4.7 – FOCUS VISIBLE Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA) Real Talk: You can tell where your keyboard is focused and/or what field you are about to type in. Symptoms: Because of a finicky creative director, css was used to to hide the very helpful focus defaults provided by the browser. Test: When you tab through can you easily tell where on the page you are? Can you tell when to type? When to hit enter to submit?
- 32. WCAG 3.2.1 – ON FOCUS When any component receives focus, it does not initiate a change of context. (Level A) Real Talk: Just tabbing onto something doesn’t activate it. Symptom: The user finds that when the navigate over a checkbox or a radio button, it is automatically being activated. Test: Tab through your form without hitting space or enter, was anything selected or activated just by tabbing past it?
- 33. WCAG 2.4.4 – LINK PURPOSE The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A) Real Talk: Links text is useful/descriptive or easily placed in context. Symptoms: A user finds themselves forced to follow links in order to discover what was being link to. Test: Focus on just the link, or what the link is associated with. Does it make sense.
- 34. INTERLUDE III From my experience, most accessibility issues come from: • Content creation done in MS word. • Wordpress and Drupal themes • People making decisions based on ease of production for development, or design preferences of the designer/creative director, over the needs of the user.
- 35. WCAG 2.4.5 – MULTIPLE WAYS Multiple Ways: More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process. (Level AA)
- 36. WCAG 3.2.3 – CONSISTENT NAVIGATION Navigational Mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user. (Level AA) Real Talk: Repeated components occur in the same order on each page. Symptoms: A user finds themselves having to reorient and familiarize every time they navigate to a different page within the website. Test: Are navigational elements repeated across multiple Web pages occur in the same relative order?.
- 37. WCAG 3.2.4 – CONSISTENT IDENTIFICATION Components that have the same functionality within a set of web pages are identified consistently. (Level AA) Real Talk: Functionality on one page on a site is consistently identified on other pages Symptom: The user finds that a desired function on one page is identified differently on another page. Test: Scan for a desirable function on one page and see if it is consistent across multiple pages.
- 38. SCREEN READERS Good News: They aren’t an absolute waking nightmare for the casual tester to install, configure and operate, any more. All modern Operating Systems have screen readers built in (desktop and mobile). Windows: Narrator | Apple: VoiceOver | Andoid: TalkBack For the record. All screen readers pronounce “GIF” with a hard “G” HARD G for LIFE
- 39. RESOURCES • Websites https://webaim.org/ (Trusted, been around forever) https://a11yproject.com/ (New kid on the block) • Books https://abookapart.com/products/accessibility- for-everyone (shorter, accessible read) https://shop.smashingmagazine.com/products/i nclusive-design-patterns (Very technical, funny, is hardcover and has built in bookmark) • Emal List: https://a11yweekly.com
- 40. MORE EDUCATION • International Association of Accessibility Professionals (IAAP) • CPACC • WAS • Trainings • DEQUE • Google Accessibility (free)
- 41. Questions?
Editor's Notes
- #2: Hello, hope you you all ate non bread and pasta based lunches and are ready to stay alert and learn about WCAG guidelines for the next 50 minutes. Thanks to Ethan and Ashley for inviting me to be apart of this. I’m really happy to be here and quite chuffed to see an organization like this investing in inclusion. I don’t know how many of you correspond directly with Ethan, but he is the #1 most positive emailer I’ve ever worked with. After every exchange I’m like “Ethan is right, I am good at my job, and my work does matter” it’s nice to experience that.
- #4: I will focus a lot on the intersection of keyboard access and web forms. Because I think that is where most accessibility issues live.
- #6: Everyone is responsible for the accessibility of the product. From the design, to the programming, to the readability, everybody plays a role. There is a sweet spot that this is probably going to land hardest for. Those who understand the web, maybe know accessibility 101, but are interested in more. Even if you are doing cool things like running axe pineapple, you probably learn some thing
- #7: John Watts skipped the origin story. Now. Why am I telling you this? Because right here is where we would historically do a bunch of slides about why we make things assessible. What do spider-man homecoming, and this slide have in common? They both give you the credit for knowing the back story. Jon Watts didn’t make you sit through Peter Parker getting bitten by a radioactive spider, and uncle ben dying and with great power come great responsibility blah blah. He knew you’d sat through this two to three times, assumed you knew that part, and got on with the rest of the story. This slide assumes you don’t need the close captions work in bars, curb cuts help strollers. It assumes you know that part of the story and are ready for the next part. It assumes you don’t need to see bruce waynes parents get murdered again, and the pearls fall on the sidewalk to understand where batman came from. You know what we must the web assessible, you’re not monsters.
- #8: We have a saying where I’m from
- #10: Let’s call a spade a spade and admit that currently, the web is dumpster fire when it comes to accessibility. The Webaim survey really showed us that the majority of the web has significant, yet easily fixable issues. We can do better While the web is bad, but I’m hopeful that fresh soldiers are coming into the fight.
- #12: This is sort of the area that we are playing in today.
- #14: A note on Browsers. I prefer firefox, but Chrome and the chrome development team seem to be a very thoughtful team that care deeply about accessibility. But...I’m starting to develop trust issues with google. Deque also makes an awesome accessibility testing tool, but I choose to highlight WAVE in this talk.
- #15: There is a new WCAG being developed that is a lot different, but still a long away off It’s called project “silver” because the initials for Accessibility Guidelines is AG which is Silver on the periodic table. NERDS ARE THE BEST.
- #16: Hack: Reader mode Biggest culprit is microsoft word.
- #17: Hack: Reader mode Biggest culprit is microsoft word.
- #18: Highlight forms fields without labels. This success criterion does not require headings or labels. This success criterion requires that if headings or labels are provided, they be descriptive. Also note that, if headings or labels are provided, they must meet Understanding Success Criterion 1.3.1 Info and Relationships
- #19: When labels are provided for input objects, the input object's relationship to the label (or to redundant text serving as the label) must be programmatically determinable or available in text per Understanding Success Criterion 1.3.1 Info and Relationships.
- #20: You a good stock and whole ingredients. For the web semantic html and css are your robust soup. Semantic HTML with CSS is good and healthy, its real food. Javascript and ARIA are your seasoning. You use them to enhance the flavor of the stock ingredients. If you are relying on seasoning to cover up problems with the stock, you got problems. Almost nobody wants hot ham water HTML is inherently accessible, ARIA tends to be an apology not understanding that #Try to avoid using ARIA to fix unsemantic HTML
- #23: Note, this does not help when text is over an image or gradients. Quick and dirty grayscale test
- #24: Layout can change, that is not break the page. The goal is not to maintain layout, the goal is to maintain readability. You should make all the text readable by default, to force people me to grab my reading glasses or bump on the text. A note on “on page” text size increasers. You shouldn’t have to add those. The text should be readable for most poeple, and then allow people who really require bigger text to bump it up using their own methods and tools.
- #26: I don’t have a coded example coded, but the quintessential ones I see are drag and drop that require a mouse, or sliding scales that require a mouse.
- #29: Some times people have a misguided thought the best way to require a field to be filled, is to force focus on it until data is entered. This is bad.
- #30: You can use tab orders but you risk plopping somebody into the first field without any context. I didn’t code an example. I mean, I’ve unwittingly coded hundreds of examples. But you can imagine how frustrating this would be. The skip links is a good solution, and enhancing your content with landmarks and roles is a good idea too My dream is that eventually the <header><nav><main> tags become the ultimate solution.
- #32: Tab through and show how it’s harder to tell when to type email.
- #33: Checkbox might be a trick once you focus it is clicked.
- #34: Read more isn’t bad, it just has to be apart of the paragraph it is associated with.
- #38: Example 7: Example of a Failure A submit "search" button on one Web page and a "find" button on another Web page both have a field to enter a term and list topics in the Web site related to the term submitted. In this case, the buttons have the same functionality but are not labeled consistently.
- #39: Back in my day, the only screenreader in town was Jaws. And it cost a million dollars to buy, so you had a get a demo version that only ran for 15 minutes and if you needed it longer you had to restart your machine to get another 15 minutes. Everytime I used it I wanted to light myself on fire.