"Making Accessibility Accessible" by Kirtika Bhuva
•Download as PPTX, PDF•
0 likes•442 views
A talk given by Kirtika Bhuva at UXPA UK's May 2017 event covering "Global Accessibility Awareness Day". http://uxpa-uk.org/events/uxpa-uk-gaad-2017/ Check out our Events page to see what's coming up in the future: http://uxpa-uk.org/events/
Recommended
Recommended
More Related Content
Similar to "Making Accessibility Accessible" by Kirtika Bhuva
Similar to "Making Accessibility Accessible" by Kirtika Bhuva (20)
More from UXPA UK
More from UXPA UK (20)
Recently uploaded
Recently uploaded (20)
"Making Accessibility Accessible" by Kirtika Bhuva
- 2. Kirtika Bhuva UX Architect & Accessibility Champion
- 3. Checkout - Old design
- 4. Checkout - New design
- 10. Your users are the ones using your product, it is how they interact with that product that is important. After all you are designing and building for your all users.
- 11. ‘If you exclude anyone from using your service based on disability, you may be in breach of the Equality Act 2010’ www.gov.uk Legal and moral reason
- 12. Think Accessibility first Save time and money Brand reputation Cost
- 14. W3C guidelines
- 15. ‘14.1 Use the clearest and simplest language appropriate for a site's content’ From the W3C guidelines
- 21. The task Using the laptop provided add the product shown to your basket...
- 26. Apply our knowledge Think accessibility first Part of our culture
- 30. Objective To identify key accessibility issues that occur throughout the mobile site and give recommendations on how to conform to a AA standard set by WCAG. For John Lewis to be able to apply the knowledge gained from this project and distribute it to further project teams.
- 31. Product page Fashion Electrical Colour ServicesSize Bundles Home Instore only T&C message
- 32. We’ve never had anything as thorough as this from a client before “ ” Third party company feedback
- 33. Strengths ● Overall quality of code is very good ● Consistency of Navigation ● Form Errors are good ● All pages resize well Weaknesses ● Form labelling is inconsistent ● Form grouping (fieldsets and legends) are inconsistent ● Colour contrast needs addressing
- 34. We want to test our work in-house but don’t have the means to do as yet...
- 35. I have no loyalties to a website and will give up if I can’t do what I need to do on there. I won’t shop there again. “ ” Anonymous feedback
- 38. Make no assumptions Test & Learn Think Accessibility first Involve others www.linkedin.com/in/kirtikabhuva
Editor's Notes
- Background - Intro UX Architect and Accessibility champion at John Lewis My background is design based I worked for various agencies where web accessibility wasn’t considered My very basic knowledge allowed me to avoid design mistakes such as applying red text on green backgrounds So when I joined John Lewis in 2012 I wanted to learn more about web accessibility in order to help me grow as a better designer
- Background - Checkout Back in 2014 I was one of the designers for the John Lewis Checkout project As you can see the checkout looked dated and wasn’t customer friendly For example form fields were small in height and difficult to tab onto So we wanted to re-design and build an optimised checkout And I saw this as a great opportunity to apply what I had learned so far to this project But there were a lot of challenges the main one was Trying to get those closely involved on the project to understand why we should do this
- Example of the newly designed checkout
- Sainty check the work we done
- Turns out we didn’t do very well
- example Shows you the area where the bug was found What the bug is Snippet of the code if any And solutions to fix the issue
- So we weren’t quite there yet. We didn’t have the knowledge or understand as we thought we did And we didn’t have the backing of stakeholders And those involved closely on the project I wanted to challenge these perceptions
- John Lewis have been around for a long time and we have a mature demographic customer base With age related issues such as eyesight problems
- Your users are the ones using your product, it is how they interact with that product that is important. After all you are designing and building for your all users.
- Think accessibility first You will save hours of time later on down the line and keep cost down It could be very complicated to apply accessible considerations towards the end of the project You could be taken to court
- With the findings from the audit Challenges to change perceptions around web accessibility I started to think about how I could develop in-house training to help us as a team
- I took a look at the W3C accessibility guidelines Found it to be ironic as this wasn’t accessibility friendly For example someone who is dyslexic and has a short attention span would give up on this page entirely as It wasn’t easy to scan or understand, Jargon used frequently
- What does this mean exactly.. We cannot assume that everybody understands the content of our products - make it easier to comprehend where possible. Avoid using jargon.
- In-house checklist Clean & simple Easy to scan to get to the information you required Examples provided where possible to better understand the information Divided up content into areas for example Images Forms Links Separated content into key disciplines Copywriters Design Developers UI and UX By sharing this checklist with teams I wanted to let them feel empowered to make it their own, by challenging anything that was on the list, make changes if any or by simply sharing the list with others and talking about accessibility ·
- Print Stick everywhere Talk around Refer back to it
- Training and presentations As well as the list I wanted to share knowledge and provide training. As much as I like to ensure the training I provide is fun I am fully aware that there is some seriousness around accessibility We recognise that for someone to deeply empathises with the user they have to understands the user requirements
- As part of my training I used a pair of handcuffs and a blindfold
- There was one catch. You had to be handcuffed behind your back. Gave up. Difficult. One used their nose to try to attempt the task. Good effort but failed. Those who have motor impairment disabilities require assistive technologies to help guide them on the page and if they don’t know where they are on the page this can be a jarring experience which is why keyboard focus matters.
- With the same task but this time I had colleagues wear a blindfold And use JAws a screen reader Needless to say all gave up very quickly they found the experience to be painful and challenging This really sank in as they now knew the importance of having the page structure read in the right way and providing additional information to help guide the user
- Warning some of you may find the next slide upsetting
- MAA - Training - Warning the next slide may upset Tinder users As well as having long term disabilites you could have temporary impairments. Temporary impairments for example overuse of Tinder can cause Tinder finger Thus resulting in your arm being in a sling How do you carry everyday activities with one hand out of action Again this was to relay the importance of keyboard focus
- Equipped with the knowledge, training and tools and with the backing of stake holders we wanted to apply all this to mobile first design project Everyone was enaged to build this product thinking customer first Building accessibility from the ground up This is when it truely felt that accessibility was part of our John Lewis culture
- MAA - Example of work Applied Aria labels where required such as Providing additional content for visually impaired users who use assistive screen readers Additional copy for those who use screen readers
- We wanted to know we were on the right track so...
- Done an audit
- Our objective was
- John Lewis is a big department store this is true in-store as well as online we have a few page templates for the different departments I wanted to ensure that the third party company were going to test all our work and in-order to do so they need to be familiar with the work and so I created a visual site guide This contained the page templates Any component changes Error messaging, swatches and sizes
- Feedback - We have never had anything so thorough as this
- Overall the audit was a very good one, whereby the company had difficulties finding big bugs. The main ones to focus on are Form labels Form groupings And Colour contrast We have taken these three and actioned them into our current work
- We had a ‘research training exercise' to learn how we might go about recruiting for and conducting lab-based Accessibility studies with participants who use adaptive technologies. Our trainer carried out an exercise as a demonstration with a blind screen-reader user.
- For confidentiality reason I cannot give you the participants name, but in this instance let’s call her Alice.
- alices
- The future at John Lewis We want to expand our current testing lab and have a couple more. Up-skill our researchers to have in-house testing Further training in-house to carry out accessibility QA and regular audiTS
- Story - What I have learned Make no assumptions ‘Please offer me a seat’ Many of our customers with impairments, conditions or illnesses, short term or long term, tell us they struggle to get a seat on public transport when they need one Make no assumptions I have learned a lot over the years. Test your work and learn from it you may thin Thinking accessibility first Thinking accessibility first will save you time, money and keep you sane. I like to think of accessibility as the foundations, The bricks that build the house as the skeleton The Fixtures and fittings The Furniture as the content And the homeowners as the customers You wouldn’t build a home without laying a foundation, If you do, you will see cracks and soon the home won’t be habitable Resulting in unhappy, stressed customers Costly and and timely to fix And finally Get others involved Going back to the Accessibility checklist I created and shared with others it empowered them to take ownership, talk about accessibility and get involved