Recomendados
Recomendados
Más contenido relacionado
Similar a How we became accessibility champions and how you could to!
Similar a How we became accessibility champions and how you could to! (20)
Último
Último (20)
How we became accessibility champions and how you could to!
- 1. How we became accidental accessibility champions, and how you could too! 1 Section title Chris Gibbons Senior UX Developer @_gbbns Anya Braun UX Researcher @ux_lady
- 2. What we’re going to do: • Talk about how we accidently become the face of accessibility • Things that helped us along the way • Establishing an inclusive design culture • What we’ve still got to learn 2 Section title
- 3. You’ll get a chance to: • Empathise with a range of impairments • Carry out your own accessibility testing (ethically) • Takeaway practical tips & advice to enable you to do this 3 Section title
- 5. 5
- 6. 12t h biggest UK Page views, ComScore CY2017 website 55mmonthly 585,000 Vehicles listed per day (average) 4xmore Auto searches than Google Engagement compared with all other portals COMBINED 2.5x 95 Adviews per second 140kvehicles moved with MTD cross-platform visits ComScore –Nov 17 2xmore influential for new car buyers than nearest competitor Annual Car Buying Report 2016
- 8. Globally, how many people have some form of disability?
- 10. How many people in the UK do you think have access needs?
- 11. 13.9 million people in the UK Family resources survey - financial year 2016/17 https://www.scope.org.uk/media/disability-facts-figures
- 12. In 2011 what % of websites failed to meet WCAG guidelines? 12
- 14. POUR 4 principles of accessibility 14
- 16. POUR • Perceivable • Operable • Understandable • Robust
- 17. What is inclusive design?
- 18. Over to you
- 19. “Digital inclusion, or rather, reducing digital exclusion, is about making sure that people have the capability to use the internet to do things that benefit them day to day” https://www.gov.uk/government/publications/government-digital-inclusion- strategy/government-digital-inclusion-strategy
- 20. 'The design of mainstream products and/or services that are accessible to, and usable by, as many people as reasonably possible...
- 21. Predictive text
- 22. 22
- 23. Subtitles
- 24. 24
- 25. OXO Good Grips
- 28. Vision
- 29. Hearing
- 30. Motor
- 31. Cognitive
- 32. Web Accessibility Perspectives: Keyboard Compatibility https://www.youtube.com/watch?v=93UgG72os8 M
- 33. Accessibility Research How would you make users feel comfortable? 33
- 34. Things to consider: • Assistive tech/equipment • Home visit • Consider meet & greet? • Ensure safety & comfort Section title 34
- 36. Steps we’ve taken • Building awareness • Audit & Integrate with product life cycle • Building up a case study • Creating a working group • Getting stakeholder buying in
- 39. 39
- 41. Are we digitally inclusive? Section title 41
- 43. “But blind people dont drive cars?” Section title 43
- 49. 49 Research How can we prove that these users exist?
- 51. 51 Unique events per month 1k – 3k
- 52. 52 <a href="#content" class="tracking-standard-link at- accessibility-link" data-label="accessibility-skip-to- content"> Skip to content </a>
- 53. Lab Study Goal: Observe how users with different impairments interact with Auto Trader 53
- 54. 5 participants • Visually impaired • Dyslexic • ADHD • Motor Impairment • Colour Blind 54
- 58. Design
- 59. Re-brand
- 63. Recurring themes
- 66. Missing attributes 66 <img src="https://placekitten.com/g/200/300" alt="Kitten looking confused" />
- 70. Anchor tags without href. 70 <li> <a class="a-class">a link</a> </li> <li> <a class="a-class">a link</a> </li>
- 71. Anchor tags without href. 71 <li> <a class="a-class" href="/path-to-url/">a link</a> </li> <li> <a class="a-class" href="/path-to-url/">a link</a> </li>
- 73. Is it a button or a link? 73 “Something that comes up again and again in front-end accessibility is the issue of links versus buttons. You know, the HTML elements that open links in new windows or submit forms? ” https://marcysutton.com/links-vs-buttons-in-modern-web-applications/
- 74. :focus 75 /* remember to define focus styles! */ :focus { outline: 0; } http://www.outlinenone.com/
- 75. Marking up a things correctly 76 <label>Enter your name:</label> <input type="text” />
- 76. Marking up a things correctly: 77 <label for="name">Enter your name:</label> <input type="text" name="name" id="name”/>
- 79. Automate all the things 80
- 82. Take the no mouse challenge https://webaim.org/articles/screenreader_testing/
- 84. Over to you
- 85. Experience it for yourself
- 87. Discussion
- 88. Case Study
- 89. Careers site
- 91. 94
- 92. Working group
- 95. How to do this? • Spam communication channels • Biscuits • “Recruit” people after the awareness workshops Section title 98
- 98. Assistive tech & screen readers 101 https://www.nvaccess.org/
- 100. Takeaways • Build awareness • Audit & Integrate with product life cycle • Case study • Working group • Know your audience (stakeholders) 106
- 101. • It’s not easy • It’s not quick • But it’s rewarding!
- 102. Apple – Accessibility – Sady https://www.youtube.com/watch?v=XB4cjbYywqg Section title 108
- 103. “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect…” https://www.w3.org/Press/IPO-announce
- 104. Section title 110
- 105. Thank you. @_gbbns @ux_lady Resources: https://goo.gl/f5KTgK #autotraderlife
Notas del editor
- Anya Same intro style as Camp Digital Anya 1st then hand over to Chris
- Chris A story of how we implemented and the validity of accessibility That’s what we would like to share with you Our plan is to hopefully entertain and inform you
- Anya
- Chris Has anyone hear heard of auto trader? Who thinks we still produce a magazine? At it’s peak 450,000 magazine copies were sold every week - not anymore yet we still have people telling us that they bought it last week
- Chris Has anyone hear heard of auto trader? Who thinks we still produce a magazine? At it’s peak 450,000 magazine copies were sold every week - not anymore yet we still have people telling us that they bought it last week
- Anya Big digital player - here are some massive numbers from ComScore (independent) We're the 12th biggest after the likes of Google and Facebook Humble Not just used car Huge amount of traffic - over half a million! We have huge access to data and as a digital business it enables us to ask questions
- Anya Aside from being a big digital brand the company is also heavily invested into having a diverse and inclusive culture that is there to support everyone Pride/ATWN/BAME
- Chris
- Chris Explain what WCAG is - websites failed to meet the W3C's international Web Content Accessibility Guidelines
- Anya
- Anya As well as the public site we provide software and tools for dealers, who in turn have a whole raft of laws to comply with. If their employees can't use our software/tools then we're the ones who will get in trouble
- Chris Explain what WCAG is - websites failed to meet the W3C's international Web Content Accessibility Guidelines ** BREAKING NEWS ** 2.1 is now a recommendation!
- Gibbons
- Chris
- Alistair Duggin Head of Accessibility @gdsteam
- Chris Perceivable – All users have the same experience Operable – All elements/controls are usable Understandable – Content is clear and easy to understand Robust – Can access all content with a wide range of tech
- ANYA For this next section we’re going to be talking about What is accessibility Who it affects? How it affects them **Ask the audience ** Universal design refers to broad-spectrum ideas meant to produce buildings, products and environments that are inherently accessible to older people, people without disabilities, and people with disabilities.
- ANYA SPLIT INTO MINI GROUPS IN YOUR TABLES SPEND A COUPLE OF MINTUES WRITING WHAT YOU THING.. DISCUSS Then ask for people’s answers after a few minutes… go round the room/tables etc.
- CHRIS - Digital inclusion, or rather, reducing digital exclusion, is about making sure that people have the capability to use the internet to do things that benefit them day to day
- CHRIS Inclusive design does not suggest that it is always possible to design one product to address the needs of the entire population. Instead, inclusive design guides an appropriate design response to diversity in the population through: Thinking about that Lets think about things we take for granted
- Chris Can trace it’s origins back to the early 1970s. 1988 when the software for a text system for communicating with deaf people via phone was patented
- Keystrokes was designed for users with motor problems
- Anya first inivented for hard of hearing to watch film/video
- Anya sure we all use it commute to work forgotten headphone videos on the train/bus...
- Chris OXO products follow the Universal Design philosophy in which designers take into consideration the greatest variety of needs in order to create products that are usable by as many people as possible
- The idea behind OXO Good Grips kitchen tools came to Sam Farber while on holiday. He observed his wife Betsy, who suffered from arthritis, struggling with metal handled kitchen tools. He made a few models of new handle styles and, after returning home to New York, the Farbers worked with the design firm Smart Design to develop OXO Good Grips.
- Anya Look at different types Long term & temporary/situational Predefined by global standards body
- ANYA LONG Colour Blind, registered blind, visual impaired, Chris Temp/Situational Forgotten glasses, migraine, screen glare
- Anya: the next category of impairments hearing hard of hearing ? deaf? Chris: Phone in busy noisy environment or something as innocuous as an ear infections
- Anya: Motor skills Arthritis, Cerebral palsy, Chris: Broken wrist, holding a baby/
- Anya: Autism, Dyslexia, Dyscalculia Chris Medication, Headache, Tired, or Hangover
- Show a quick video to demonstrate what we’ve been talking about
- Anya with Chris supporting Over to the audience for discussion (Ethics) Making users feel comfortable with the session Make sure you have correct equipment for the test and for them in general Reasonable adjustments Persona screen
- Things to consider: Will you provide assistive tech or will participants bring their own equipment Is it easier for you to visit them instead? Do you to need to consider meet and greet aspects? How will you ensure the safety and comfort of your participants?
- Anya Barclays do accessibilty / inclusive design brilliantly They have created personas Google/GitHub https://www.barclayscorporate.com/content/dam/corppublic/corporate/Documents/Accessibility/Diverse-Personas-Issue-1.pdf
- Chris
- Chris
- Chris UX in the city Henry Charge
- Got back to the office and asked the question
- Chris
- Anya Company attitude wasn’t doing it’s duty Inclusive culture but not transferred into the digital aspect Out of sync We felt that the digital aspect of our site didn’t quite marry up with all the great things that were going on with the culture Ask the question from a product point of view
- Chris Inspired We needed take this on for Auto Trader Chris - Head of experience design - Sigma Molly – Has Usher syndrome and is a web accessibility and usability consultant
- Anya Facing questions And off the back of Chris and Mollys awesome workshop Dispell the myth It’s something that we’ve tried to overcome with the awareness piece, First we know that many visually impaired users still drive, purchase cars for other family members and it’s not just about the visual side it’s the cognitive and motor
- Anya As part of diversity and inclusion month at AT we ran three workshops (2 in Manchester office, one in London) There was an interest Cross section of job roles People wanted to learn We wanted to give people something to takeback to their squads That was their own light bulb moment
- Anya Can you imagine having to search for a car through a straw?
- Anya – engineering design center It wasn't until this point that people had their own light bulb moment
- Anya This was all well good to find out But we had to work out how we were going to actually action this and keep the momentum going
- Anya Nicely into the next section around integrating into product life cycle and auditing our products
- The start of our funnel was the research It didn’t take much to build up a case! NNgroup – 5 participants Agency
- If anyone is new the the accessibility world, many websites have ‘skip to content’ button where by a user that is using their keyboard to navigate a site rather than visually looking at it They can skip straight into the main site rather than having to have the navigation read out
- We started with the quant side of things https://analytics.google.com/analytics/web/#/report/content-event-events/a59686422w94748938p100822865/_u.date00=20180101&_u.date01=20180402&explorer-segmentExplorer.segmentId=analytics.eventLabel&explorer-table.plotKeys=%5B%5D&explorer-table.filter=accessibility-skip-to-content&explorer-table-tableMode.selected=data/
- https://analytics.google.com/analytics/web/#/report/content-event-events/a59686422w94748938p100822865/_u.date00=20180101&_u.date01=20180402&explorer-segmentExplorer.segmentId=analytics.eventLabel&explorer-table.plotKeys=%5B%5D&explorer-table.filter=accessibility-skip-to-content&explorer-table-tableMode.selected=data/
- We then wanted to build up a better picture and speak to some real users with different impairments Observe how they interact with the site and if there were any pain points This wasn’t a full usability study but rather some initial research
- a range of impairments
- We learnt a valuable lesson in that we should have used specialized recruitment rather than our usual recruiment agency
- We observed things like cognitive overload, some participants struggling with the mobile site,
- Lots of colour contrast ratio issues Where they were not strong enough
- We recently rebranded
- New set of colours We now know which colours work well together to form a high colour contrast Ratio of AA The WebAIM guidelines recommend an AA (minimum) contrast ratio of 4.5:1 for all text. An exception is made for very large text (120-150% larger than the default body text), for which the ratio can go down to 3:1.
- All of these colours are housed in our pattern library along with other design elements such as illustrations and type Everything in there has been considered from an accesiiblity stand point It was important to get accessibility into design thinking as it's often the start of the journey
- ie: alt attribute on images [insert WAVE picture showing fuck tonne of errors]
- ie: alt attribute on images [insert WAVE picture showing fuck tonne of errors]
- ie: alt attribute on images [insert WAVE picture showing fuck tonne of errors]
- ie: alt attribute on images [insert WAVE picture showing fuck tonne of errors]
- ie: alt attribute on images [insert WAVE picture showing fuck tonne of errors]
- This is what we found when doing a quick audit for you a11y workshops… not going
- Chris – Explain demos etc.
- These cause the screen reader to interpret the content as a link, and the button functionality is lost. For these cases, replace the anchor tag with a real button and style it appropriately.
- These cause the screen reader to interpret the content as a link, and the button functionality is lost. For these cases, replace the anchor tag with a real button and style it appropriately.
- :focus states on links and buttons in CSS, it takes minutes to do. Usually a design steer, but incredibly important aspect to keep in.
- Does a form have a legend? Do inputs have a label? Are form elements group logically in fieldsets?
- Does a form have a legend? Do inputs have a label? Are form elements group logically in fieldsets? This is bread & butter work. You don't need permission to do it right.
- Just do it.
- Aim is to get it into all pipelines, currently my teams project has it in and we can get it showcased w/learnings One of the QA's has setup pa11y dashboard Slowly getting traction, ace. pa11y-ci pa11y-dashboard [What do our pa11y tests currently look like? Show example code of it logging into the app! Screenshots/outcomes] §
- Chris
- Apple a11y video
- 12:05 12:15 Anya Next section is going to be over to you
- Not strictly for a11y, but it'll help enforce better standards/consistency between devs
- Anya: Experience some impairments On the table - some simulation equipment Task to carry out, a couple of people Rotate around
- Anya Blind film critic video Instagram!
- Anya
- Anya: Next section Chat about building up a case study
- Anya Build traction and people were getting more involved HR build site that reflected inclusive nature We need a case study to prove that it could be carried out successfully Continue .... Site improve
- Chris Next step was to create a reuseable set of patterns and components which have all be tested for A11Y Production tested
- Chris learnt from the careers site Next step was to create a reuseable set of patterns and components which have all be tested for A11Y Production tested
- Anya We also got a working group together We have a cross section of people from all around the company
- Anya We've adopted the spotify model Tribes & squads / Chapters Guilds A guild is a community of members with shared interests. These are a group of people across the organization who want to share knowledge
- Anya 0.24%! Needed help Based on feedback from the workshops Find champions across the business
- Anya 0.24%! Needed help Based on feedback from the workshops Find champions across the business
- Chris TRAINING KNOWLEDGE SHARING TOOLS Chat New tools Distribute Knowledge Improve quality Consistency of experience
- Chris We want people to be building things right. We want to educate people, not just developers. Plans to run primer style courses on core web dev topic Brown bags Meet-ups Conferences
- Chris Currently none. However we are looking at screen readers such as NVDA (which is free + open source!) as well as using the tools baked into iOS and Android.
- Anya Final step we wanted to talk about was around Getting stakeholder buy in; But its about how you sell it senior management vs. product owner. You can tell the same story, but in different ways! KPI’s etc.
- Anya
- Chris Semantic - is it a button, or a link? Is it a paragraph? Correct heading level etc. Valid - We had a lot of errors, not an issue as such but could break assistive tech WAI-ARIA (Web Accessibility Initiative Accessible Rich Internet Applications) - Our apps in 'trade' are SPA's so are we using the correct attributes, or even actually using it? We have a lot of shared code, some components are global across our apps ie. Header/Footer. How can we build a consistent experience for users with & without assistive tech? add in more desc for non tec user & add examples
- Chris Why? Share knowledge Keeps everyone in the loop of what's been done and why
- Anya
- Anya A video of Sady Who has cerebal palsy
- CHRIS: Tim Berners Lee, pioneer of the internet as we know it. Accessibility should be baked in from the beginning and not an after thought, It shouldn't be hard or expensive but if you leave it until the end it will be.
- 12:20