A short guest lecture I did recently speaking about my career path into digital accessibility. This talk also discusses the barriers i've come across whilst working in accessibility and how i've collaborated with teams to over come them.
1. My experiences of working in
digital accessibility
Rebecca Topps
@beckytopps
2.
3. UX Designer and
Accessibility lead
Sigma
2012
BSc Web and
Multimedia degree
University of Central
Lancashire
Usability and
Accessibility consultant
AbilityNet
2017
UX Researcher and
Accessibility consultant
Shop Direct
4. What is digital
accessibility?
Making your digital products
easily accessible for people
of all abilities on all devices.
Ensuring that as many
people as possible can use
your product and easily
complete the key user goals.
Image: BBC Gel guidelines
5. “Accessibility only affects a small amount of our users…”
More than 1 billion of people worldwide have a long
term disability
6. There are around 2 million blind and partially
sighted people living in the UK.
Every day over 100 people start to lose their
sight; and 1 in 12 of us will become blind or
partially sighted by the time we are 60.
17. “Going to the supermarket
for example can be a major
deal as not only do you have to
navigate your way there, but it
takes a long time once you have
done that and found assistance. I
also worry that I’m not aware
of the cheapest deals in the
shop, unlike when I use the
[Ocado] mobile app.”
18. By making small changes to
our digital products we have
the potential to greatly
improve people’s daily lives
20. Links
§ Accessibility intro by Gov.uk - https://www.gov.uk/service-manual/helping-people-to-use-your-service/making-
your-service-accessible-an-introduction
§ Statistics – https://www.shopify.com/partners/blog/why-and-how-to-improve-ecommerce-website-accessibility
§ WCAG guidelines – https://www.w3.org/TR/WCAG20/
§ We are nomensa, accessibility future - https://register.gotowebinar.com/register/740076163237605635
§ BBC mobile guidelines – http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile
§ BBC Gel - http://www.bbc.co.uk/gel/guidelines/how-to-design-for-accessibility
§ Microsoft inclusive design patterns – https://www.microsoft.com/en-us/design/inclusive
§ eBay Accessibility design patterns – https://ebay.gitbooks.io/mindpatterns/content/
§ Colour contrast analyser – https://www.paciellogroup.com/resources/contrastanalyser/
§ UDacity web accessibility course – https://www.udacity.com/course/web-accessibility--ud891
§ Google material design guidelines – https://material.io/guidelines/usability/accessibility.html
§ Link to cat meme – http://hmig.github.io/acCeSSibility/images/no-access.jpg
§ Barclays accessibility information – https://www.barclayscorporate.com/insight-and-research/managing-your-
business/making-your-business-accessible/inclusive-design.html
§ Sight loss statistics – http://www.rnib.org.uk/knowledge-and-research-hub/key-information-and-statistics
§ Ocado applications, iOS – https://itunes.apple.com/gb/app/ocado-your-grocery-shop-perfectly-
delivered/id319691481?mt=8
Editor's Notes
I’m going to be quickly discussing some of my experiences and challenges whilst working with digital accessibility
I found out about digital accessibility and UX after seeing my younger sister Chloe struggling with using a form due to the wording on the form fields being unclear. She has learning difficulties and this prompted me to research if there was any way in which we can make websites better for people with learning difficulties.
From this I started to go to NUX meet ups and focused on accessibility and UX in my degree around web and multimedia.
After completing my degree it’s not been a straight forward journey or focused on one specific subject. However, throughout I have always tried to focus on both UX and accessibility in my work – mainly UX research and integrating accessibility into UX processes.
Now I’m working under Topps Usability and contracting with Shop Direct working in UX research as well as introducing accessibility into the company.
The way I think about digital accessibility (or digital inclusion) is that it is about making your digital products easily accessible for everyone on all devices. It’s about making small changes and integrating the considerations into your teams so that it becomes the norm.
This includes people with various different impairments – Sight, hearing, cognitive and motor. As well as thinking about temporary impairments, such as a broken wrist or bright sunlight when trying to use a phone.
Image - http://www.bbc.co.uk/gel/guidelines/how-to-design-for-accessibility
One of the main things people will say to me, often stakeholders, is that it only affects a small number of the website users. However, more than 1 billion people worldwide have a long term disability [this includes - ….....]. This equates to around 1 in 7 people.
In the UK – STATS
Every day over 100 people start to lose their sight and 1 in 12 of us will become blind or partially sighted by the time we are 60. – IS THIS IN THE UK
Focusing on statistics around visual impairments…
Vocal eyes
Every day over 100 people start to lose their sight and 1 in 12 of us will become blind or partially sighted by the time we are 60. – IS THIS IN THE UK
It’s also important to remember that digital accessibility is likely to affect everyone at some point. An example of this is something we call ‘temporary impairments’; some examples include - ….
Another challenge When working with different teams I noticed that people often focus on the WCAG guidelines… The web content accessibility guidelines are a series of recommendations for developers and owners of websites about how to adapt their sites to be easily accessible for people with all abilities.
When it comes to focusing on accessibility people can often put too much emphasis on the WCAG guidelines only.
WCAG has been updated to include mobile guidance – been updated for the first time in 10 years [WCAG 2.1]
Outdated and focused on desktop
A better way to think about accessibility is to think about how you can include people to test your products; looking at current guidelines, for example the bbc mobile guidelines; introducing review tools to teams to speed up processes- such as the colour contrast tool by Pacellio group; and potentially using automated testing tools as well as conducting manual testing to speed up development findings.
Do user testing with users of different abilities to understand the issues that you will face on the website. Currently planning a 2 day user test on the Very website including inviting stakeholders into the sessions so they can see the impact it has.
Also at Shop direct we are currently creating design guidelines based around the Google material guidelines. We have gone through the new guidelines and completed workshops to go through potential accessibility issues.
Companies such as microsoft have created inclusive design toolkit available online.
https://ebay.gitbooks.io/mindpatterns/content/disclosure/carousel.html
MIND PatternseBay Accessibility Patterns for the Web – Using to influence Shop Direct
This book will assist frontend developers in building accessible e-commerce websites and components.
This book is not a visual design system or a CSS framework (à la Bootstrap) - it is instead intended to complement those systems & tools.
This book is a living, work-in-progress document. Some patterns are complete, but gaps in the documentation still remain. We are addressing these gaps as quickly as we can.
Pattern Philosophy
These patterns will assist developers with accessibility, but are not considered to be final, production ready code!
All patterns leave additional steps for the frontend developer to complete. This typically means any CSS styling and JavaScript behaviour not related to accessibility.
Each pattern follows a Progressive Enhancement strategy (where applicable) and aims to conform to WCAG 2.0 Level AA.
Another big challenge whilst working in accessibility has been that a lot of manual testing is conducted after the website is created or a new feature has gone live .
Often I find that smaller websites and different UI on larger websites is tested for accessibility after going live to the users. This has resulted in complaints from customers as well as more time needed to be given to accessibility and usually a lot of panic…
This can be avoided by testing any new UI before it goes live as well as practicing the areas mentioned. At Barclays we would test any new features before they went live to find and hopefully fix issues before the release was shown to the public.
Put Barclays here – when working with AbilityNet I was fortunate to work on the Barclays mobile apps.
At Barclays We tested the applications just a couple of days each month and raised any accessibility issues or changes at that time with developers. This worked with the new agile ways of working as any issues would be raised each time new releases and UI were released.
Large companies such as Barclays, Microsoft, The BBC, Google and many others are now creating internal accessibility guidelines and integrating accessibility teams. Hopefully these companies will prompt other companies to also consider accessibility in the same way
Hazel is also one of the 4% of registered blind people who cannot see anything at all.
When working with Barclays and abilitynet I was fortunate to meet Hazel and I still work with her now. It’s good to build a relationship with your participants if possible and potentially build a database of users who you can keep working with. Hazel reminds me about why I continue to work in accessibility and essentially fight the cause.
Hazel is also one of the 4% of registered blind people who cannot see anything at all.
There are around 2 million blind and partially sighted people living in the UK. Every day over 100 people start to lose their sight and 1 in 12 of us will become blind or partially sighted by the time we are 60. Only 4% of people who are registered blind see nothing at all - (Statistics from Vocaleyes)
Visually impaired iPhone users, such as Hazel, can use the built in iPhone screen reader, Voiceover, to navigate around the phone screen and applications. Voiceover gives users the ability to hear and interact with the different elements available on the screen. For more information about Voiceover see the Apple website - Apple website
One of the things Hazel mentioned to me whilst chatting about apps was the Ocado app. Hazel uses this app on a weekly basis to do her shopping as she says it’s easy to use and she can find the best deals. Using apps such as Ocado can help Hazel significantly in tasks which we may take for granted – such as grocery shopping.
Ocado app and quote – supermarket shopping
Image - https://blog.ocado.com/ocado-mobile-apps/
And to remember that by us trying to influence others and make small changes to our products, we could have a big impact like Hazel and make their lives a little easier.
To start it is important that everyone in the team is on the same page and understands accessibility to a high level.
Another case study I have used is to look at the
Google udacity course here
Change this to the same design as the introduction
Do user testing with users of different abilities to understand the issues that you will face on the website. Currently planning a 2 day user test on the Very website including inviting stakeholders into the sessions so they can see the impact it has.
Also at Shop direct we are currently creating design guidelines based around the Google material guidelines. We have gone through the new guidelines and completed workshops to go through potential accessibility issues.
Companies such as microsoft have created inclusive design toolkit available online.
https://ebay.gitbooks.io/mindpatterns/content/disclosure/carousel.html
MIND PatternseBay Accessibility Patterns for the Web – Using to influence Shop Direct
This book will assist frontend developers in building accessible e-commerce websites and components.
This book is not a visual design system or a CSS framework (à la Bootstrap) - it is instead intended to complement those systems & tools.
This book is a living, work-in-progress document. Some patterns are complete, but gaps in the documentation still remain. We are addressing these gaps as quickly as we can.
Pattern Philosophy
These patterns will assist developers with accessibility, but are not considered to be final, production ready code!
All patterns leave additional steps for the frontend developer to complete. This typically means any CSS styling and JavaScript behaviour not related to accessibility.
Each pattern follows a Progressive Enhancement strategy (where applicable) and aims to conform to WCAG 2.0 Level AA.
When working with Barclays we were creating in-house dev guidelines and I often referred to the BBC mobile guidelines
My Biggest challenge when working in accessibility has been influencing companies and teams to consider accessibility and teaching people about how they can easily integrate it into the current processes.