This month we did something a little bit different with the meet-up format. Instead of one person presenting a slide deck, we had a panel discussion on all things accessibility with four accessibility experts - Eric Bailey, Helena McCabe, Scott O'Hara, and Scott Vinkle!
Eric Bailey is a UX Designer at Cantina in the greater Boston area. He prides himself on creating straightforward solutions that address a person’s practical, physical, cognitive, and emotional needs using accessible, performant, device-agnostic technology. Which roughly translates into: he makes accessible websites.
Helena McCabe is a senior front-end developer at Lullabot and lives in Orlando, Florida. She is passionate about creating online experiences that are accessible to everyone. She is also one-half of the Accessibots team on Twitter that promotes website accessibility.
Scott O’Hara is an accessibility engineer at The Paciello Group and is also from the Boston area. When not at work, you can find him adding code to various accessibility-focused GitHub repos including many of his own.
Scott Vinkle is a front-end developer and website accessibility advocate at Shopify. He’s from the great city of Kingston, Ontario and a big part of the a11yproject as well as many other accessibility organizations.
There were some questions lined up to keep the conversation going, but we ended up having some amazing on-the-fly questions from the audience, so it was a bit more spontaneous and a lot of fun!
1. When did you first start working in website accessibility and why?
Family reasons, knew someone with a disability, wanting to help, and wanting to give back to the community were all reasons brought up during the discussion.
2. What do you find to be the most common accessibility mistakes?
- Lack of education/know-how
- Lack of planning
- Lack of resources put towards accessibility
- Not designing with accessibility in mind
- Adding ARIA and other “accessible” markup that actually makes the accessibility worse
- Never going to have 100% accessibility, so try things out, but test and retest
- Lack of testing
- Not understanding there are all types of disabilities and assistive technologies to build for
- Missing contact form/phone number/email or another way for people to be able to tell the website maintainers if they find an issue
3. What are good examples of types of disabilities that have unique accessibility problems and how are they best addressed? Are any of these just not really covered by WCAG 2.0?
- By addressing WCAG 2.0 AA that is a really good start, but does not cover all the recent tech changes (example: mobile). WCAG 2.1 does do a better job at that, but those rules are still being worked on.
- But by just going down the WCAG 2.0 checklist (or even the 2.1 version), does not mean that you have achieved accessibility.
- Some people do not think about “disability” in broader terms, they might just think of more major disabilities such as deafness or blindness. People are extremely variable and there are a lot of things to consider. Examples include:
- Vestibular issues where parallax can make them seasick
- Learning disability and you need more time to read a scrolling carousel
- Temporary/situational disabilities
- Cognitive impairments (biological or situational)
- Additionally, some people may have limitations, but do not see themselves as “disabled”. But these people could also benefit from accessible websites (example: color blindness, hard of hearing, wearing glasses).
4. How accessible does hamburger navigation tend to be? Have any libraries or examples you like?
- It is still a bit of a “wild west” when it comes to mobile navigation (example: a hamburger menu inside of a hamburger).
- Make sure you even *need* a hamburger menu in the first place.
- Make sure menus have appropriate ARIA tags/state, focus states, visible design
- Make sure you theme your focus states! Not all keyboard only users are blind. Make a nice looking focus state that does not rely on color alone. A lot of browsers have bad inherent focus states.
- Also make sure your mobile navigation does not trigger a vestibular issue when there is movement (ie. do not make the movement very fast or jerky)
- A11Y Patterns (accessible mobile menu link) - http://a11yproject.com/patterns
- A11Y Style Guide - http://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-navigation-mobile
- Scott O’Hara GitHub repo - https://github.com/scottaohara
- Scott Vinkle GitHub repo - https://github.com/svinkle
- Eric Bailey GitHub repo - https://github.com/ericwbailey
5. What are your top three accessibility tools? What automatic tools do you use in accessibility testing?
- WAVE tool - http://wave.webaim.org
- AXE tool - https://www.deque.com/products/axe
- ARIA best practices website - https://www.w3.org/TR/wai-aria-practices
- Color contrast checkers - https://contrastchecker.com and https://webaim.org/resources/contrastchecker
- Giphy capture - https://giphy.com/apps/giphycapture
- Zoom - good for accessibility for meetings - https://zoom.us
- Color Oracle - http://colororacle.org
- Contrast A (Das Plankton) - http://www.dasplankton.de/portfolio-item/contrast-a
- Pa11y - especially good for sprint regressions - http://pa11y.org
- React accessibility linter - https://github.com/reactjs/react-a11y
- General accessibility linter - https://www.npmjs.com/package/grunt-tenon-client
- Twitter has a setting to turn descriptions on for images
- Twitter account that reminds you to add descriptive text to images - https://twitter.com/PleaseCaption
- Manual testing, including keyboard, education, and empathy!
6. Have you started to incorporate WCAG 2.1 guidelines/techniques? In your review of it, is there anything you’re already doing, and if so, can you highlight one?
- WCAG 2.1 timeline - https://www.w3.org/WAI/GL/wiki/WCAG_2.1_timeline
- Working 2.1 draft - https://www.w3.org/TR/WCAG21
- Some have worked with WCAG 2.1, but not a lot. In the meantime, before 2.1 is out, work on WCAG 2.0 AA and even AAA levels to get you ready for the official release.
7. What do you think accessibility will look like in 5 years?
- Siri and Alexa and other machine vision integrations
- 2D image recognition and what that morphs into might be interesting
- “Internet of things” (example: house being wired to be voice or touch controlled)
- Virtual reality integration with accessibility in mind (example: blind gamer who was able to “see” motion when using VR)
- The area of augmented reality (beyond VR) will also be interesting in the next five years
- Explosion of accessibility tools lately, thinking this will only expand
8. What is the one thing you would say to new people starting off in accessibility?
Scott O: Just care and do your best.
Scott V: Talk to people, go to local meet-ups/conferences, read things, but also do things, such as contributing to A11Yproject.com.
Helena: Web accessibility is not an obligation or a thing to check off a list. Think of website accessibility as the exciting challenge that it is that will positively impact your users and have a positive attitude about it.
Eric: Don’t be afraid to get your feet wet. There is always more work to be done, but you need to start somewhere.
Drupal Accessibility Group
Join the Accessibility group on Drupal.org for hints, tips, discussions, and patch proposals to help make Drupal more inclusive.
A11Y Talks - December 20th, 2017 (12pm ET)
Topic: Accessibility Priorities (plus some demos of cool new accessibility things)
Speaker: To be announced soon!