Accessible UX: Going beyond WCAG (#LWSa11y)

Accessible UXGoing beyond WCAG

16 May 2016

Jon Gibbins, @dotjay

@webstandards #lwsA11y #a11y #UX

https://twitter.com/dotjay

Accessible UX: Going beyond WCAG

Jon Gibbins▸ Digital accessibility consultant at Dig Inclusion,

Bristol▸ Testing, training, development, support▸ Web, mobile, PDF, ebook

Accessible UX


Problems1. Accessibility cannot be done by one person in your team • Raise awareness • Teach


Problems2. QA and testing often too late for accessibility • Bake it into the process - accessible UX!


Problems3. Accessibility not built into development processes • BS 8878 • Not a set of development guidelines. • Project management roadmap for ensuring that web products are built in an accessible way.


I don’t have all the answers▸ Accessibility is contextual▸ Accessibility comes with experience▸ Accessibility is not just about code


Incorporate accessibility in UX design process▸ Research▸ Define▸ Wireframe▸ Test with people▸ Iterate


Research▸ Think about accessibility early▸ Accessibility more likely to

▸ get baked into prototypes▸ persist through development▸ make it into production at an acceptable level


Research▸ Putting people first goes a long way towards

accessibility▸ Include people with disabilities for diverse personas

▸ Different disabilities, different needs▸ Older people (often first time users)▸ Plan to test with similar people


Define▸ Information architecture

▸ Plan understandable structure▸ Plan heading structure


Define▸ Labelling

▸ Use concise, clear, consistent and descriptive labels▸ Navigation▸ Link text


Design▸ Design with accessibility in mind

▸ Multimodal interactions – choice▸ Familiarity

▸ Design patterns▸ Iconography

▸ Layout▸ Content order


Design▸ Contrast

▸ 4.5:1 at least (higher for mobile – see later)▸ Colour combinations

▸ Avoid red/green▸ Avoid red/black▸ Don’t use colour alone▸ Test using colour blindness tools


http://webaim.org/resources/designers/

http://webaim.org/resources/designers/


Wireframe▸ Wireframe with accessibility in mind

▸ Fix accessibility before it hits the screens, e.g. order

▸ Documenting accessibility as you go will help future iterations

▸ Annotate wireframes with accessibility detail▸ Show structure, headings, labels, order


“Menu”

Articleheadings


Test▸ Incorporate people with disabilities

▸ Wireframe and design reviews▸ Prototype testing▸ User testing

▸ User sessions, be prepared for interactions to take longer

▸ Is the test lab accessible? Can you test at home or remotely?

UX meets WCAG

Information & Relationships▸ Sometimes adding semantics is not enough▸ Did you know?

▸ Does or get pronounced differently in screen readers?

Information & Relationships▸ Sometimes adding semantics is not enough▸ Did you know?

▸ Does or get pronounced differently in screen readers? Not by default!

▸ Do not rely on them for very important information.▸ Consider whether the content deserves to be a

heading, or could be supplemented with iconography (alternative text), etc.


Information & Relationships▸ Use of structure helps

▸ Context▸ Overview▸ Navigation▸ Also breaks up content to make is more digestible

▸ Markup▸ Headings▸ Landmarks▸ Lists


Language▸ Define for page▸ Define where there are changes▸ If you don’t…

LanguageSur le Pont d'AvignonL'on y danse, l'on y danseSur le Pont d'AvignonL'on y danse tous en rond

LanguageSur le Pont d'AvignonL'on y danse, l'on y danseSur le Pont d'AvignonL'on y danse tous en rond


Instruction & Orientation▸ Informative label text▸ Informative heading text▸ Informative error messages


Images of Text▸ We know about alternative text▸ Images of text is not flexible

▸ Cannot be selected▸ Cannot be used with “Speak Selection” features▸ Sighted screen reader user?!


Content (WCAG 2.0 Level AAA)▸ Reading level

▸ Use of plain language whenever possible▸ Avoid unnecessary jargon and slang

▸ Line length▸ Do not use justified text▸ Glossary

Beyond WCAG


Design▸ Sans-serif fonts for body text▸ Supplementing with imagery and iconography

▸ WCAG doesn't really cover this▸ Helps people with learning disabilities, dyslexia,

reading a second language


Design for mobile▸ Touch target sizes and spacing

▸ When designing for touch, make sure the tap size of the navigation item is at least 7mm (equivalent)

▸ Finger tips are ~7mm▸ Reachability▸ Zoom design

▸ Labels above control▸ Higher colour contrast due to mobile context, e.g. glare

▸ BBC guidelines suggest 7:1 ratio (the WCAG AAA requirement)


Content▸ Good accessibility begins with content


Writing style▸ Make your point clear first then explain▸ One point per paragraph▸ Use short line lengths wherever possible▸ Helps people who are deaf or have cognitive and

learning disabilities


CAPS▸ Harder to read (dyslexia)▸ Shouting, caps can cause different reading by screen

readers


Screen reader nuances▸ Using semantic markup helps▸ But screen readers can still get things wrong


Screen reader pronunciation▸ We have language selection in WCAG, but what

about pronunciation?


Hyphenation▸ Example: E-newsletter▸ iOS▸ enewsletter “ehneyewsleta” = ˌe njuːsletər (sounds Russian)▸ e-newsletter “ee newsletter” = ˈiːnuːzˌletər (correct)▸ Android▸ enewsletter “eh newsletter” = ˌenuːzˌletər (wrong “e” sound)▸ e-newsletter “ee newsletter” = ˈiːnuːzˌletər (correct)▸ Windows mobile▸ enewsletter “ee newsletter” = ˈiːnuːzˌletər (correct)▸ e-newsletter “ee newsletter” = ˈiːnuːzˌletər (correct)


Compound words▸ Compound words are commonplace▸ Homepage▸ Sitemap▸ "Signup" announced as "sig nup" in VoiceOver iOS▸ Spaces and hyphens are your friends.

Read / Reading▸ “Reeding” vs “Redding”▸ <h2>Get reading</h2> = “Get Redding”▸ <a href="#">Read more</a> = “Red more”


Emphasis▸ “Skip to content” vs “Skip to main content”▸ “con tent” vs “con tent”


Date format▸ ambiguity, clarity (e.g. US versus UK)▸ 01 03 2015 could be “1st of March” or “3rd of January”▸ An interesting thing to note in VoiceOver

▸ it sometimes reads numbers strangely▸ for example: 2013 = “twenty thirteen inches”

▸ “Date expected in dd/mm/yyyy format”▸ “millimetres” in some speech engines

Long numbers▸ Phone numbers▸ Company numbers▸ trick

▸ 08245475▸ CSS 3 speak-as: digits

▸ Very poor support but should improve


Moving forward▸ More testing currently being done in this area.▸ Other pronunciation examples:

▸ http://lab.dotjay.co.uk/tests/screen-readers/pronunciation/


Responsibility?▸ Users?▸ Software vendors?▸ Developers?▸ Content creators?▸ Web standards?


Responsibility?▸ Users?▸ Software vendors?▸ Developers?▸ Content creators?▸ Web standards?

All of us!


Final points▸ Test, test, test!

▸ No. (one-word sentence) is read by VoiceOver on iPad correctly, but on iPhone it reads it as “number”.

▸ These changes to our content are clearer for all!

What can I do?


Jon has personal connections to accessibility.


Jon has personal connections to accessibility.

Photo credit: Jon Gibbins with thanks to Drake Music Project


Empathy▸ Most of us have a connection to accessibility


Empathy▸ Mobile

▸ small screens▸ text sizes▸ touch targets and keys▸ environment (hands-free, noise, rain)


Empathy▸ Ageing

▸ We are all ageing▸ Multiple disabilities of different types


Empathy▸ Accessibility is about understanding people and the

barriers that they face▸ Getting your own experience of accessibility helps

you to put yourself in the shoes of others and keep accessibility in mind when building and testing your sites and applications


Commit▸ Establish an ongoing commitment to accessibility▸ Create an accessibility statement▸ Get an accessibility champion on your team

Resources


Resources: accessibility books▸ Design Meets Disability

book by Graham Pullin


Resources: guidelines▸ Guidelines for mobile and platform-specific

▸ WCAG 2.0▸ http://www.w3.org/WAI/WCAG20/

▸ BBC Mobile Accessibility Guidelines▸ http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mo

bile▸ BBC GEL – How to design for accessibility

▸ http://www.bbc.co.uk/gel/guidelines/how-to-design-for-accessibility

http://www.w3.org/WAI/WCAG20/

http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile

http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile

http://www.bbc.co.uk/gel/guidelines/how-to-design-for-accessibility

http://www.bbc.co.uk/gel/guidelines/how-to-design-for-accessibility


Resources: W3C WAI▸ David Sloan has a good run down of helpful UX resources

▸ http://www.paciellogroup.com/blog/2013/06/accessible-user-experience-and-w3c-wai/

▸ Designing for Inclusion▸ http://www.w3.org/WAI/users/Overview.html

▸ Effective involvement of people with disabilities in the design process▸ Planning and Implementing Web Accessibility

▸ http://www.w3.org/WAI/managing.html▸ Involving Users in Web Projects for Better, Easier Accessibility

▸ http://www.w3.org/WAI/users/involving

http://www.paciellogroup.com/blog/2013/06/accessible-user-experience-and-w3c-wai/

http://www.paciellogroup.com/blog/2013/06/accessible-user-experience-and-w3c-wai/

http://www.w3.org/WAI/users/Overview.html

http://www.w3.org/WAI/managing.html

http://www.w3.org/WAI/users/involving


Resources: W3C WAI (continued)▸ Involving users in evaluation

▸ http://www.w3.org/WAI/eval/users.html▸ Mobile Accessibility

▸ http://www.w3.org/WAI/mobile/▸ Shared Web Experiences: Barriers Common to Mobile

Device Users and People with Disabilities▸ http://www.w3.org/WAI/mobile/experiences

http://www.w3.org/WAI/eval/users.html

http://www.w3.org/WAI/mobile/

http://www.w3.org/WAI/mobile/experiences

Questions?

#sharetheorange https://youtu.be/x9MvEZskR6o

https://youtu.be/x9MvEZskR6o

Thanks!Jon Gibbins, @dotjay

https://twitter.com/dotjay

Accessible UX: Going beyond WCAG (#LWSa11y)

Internet

Transcript of Accessible UX: Going beyond WCAG (#LWSa11y)