translating good design into great accessibility

Translating good design into great accessibilitybreakfast briefing seminar

Gayle Whittaker – User Experience Consultant

Natalie Simpson – User Experience Analyst

Marie Moyles – User Experience Analyst

18 May 2017

#GAAD #accessibility #a11y #UX


Outline

Introduction


Applying UX strategies to benefit our clients since 2000

Offices in Edinburgh, London & Dubai

Global Accessibility Awareness Day 2017

The purpose of today is to get us talking, thinking and learning about digital access and inclusion for people with different disabilities.

Please feel free to ask questions and contribute with examples!


Outline

What do we mean by accessibility


Making the web accessible for all

VisualBlindness, low vision, colour blindness

HearingDeaf and hard of hearing

MotorInability to use a mouse, limited motor control

CognitiveLearning disability, distractibility, dyslexia

1 in 6 people in the UK have a disability[Office for Disability Issues, 16 January 2014]


Some questions …

HOWdo we make technology accessible and usable for disabled users?

WHEREdo we start?

Inclusive UX = Designing for ALL Users.


How? Any resources I can use?

• Come to our breakfast briefings and talks just like this!

• Put yourself in the shoes of the user – unplug your mouse and navigate a web page using the keyboard alone

• Get familiar with the Web Content Accessibility Guidelines (WCAG 2.0)

• Design with inclusivity in mind, from the outset

• Incorporate HTML5 and semantically correct HTML to your work

• Get familiar with ARIA attributes – accessible rich internet applications


Creating an accessible UX vision

USER SATISFACTION

PPerceivable

OOperable

UUnderstandable

RRobust


Where do we start?

• Start simply – get the basics right.

• Think about:

• Colour – is there enough contrast?

• Visual focus indicator – do users know what part of a page they are on?

• How the page is laid out – is there a correct and natural navigation order?

• Do images convey information? If so, they will need alternative text to explain this.


How we approach it all

• Carry out a typical user journey – ideally want to complete a task for example get to the checkout and make a purchase.

• Use tools such as

• Wave to highlight the most obvious issues – use of headings, labelling issues, form association etc.

• NVDA to experience the site from the perspective of visually impaired users.

• Inspect the code in the browser.


Component accessibility considerations


Outline

Modal Windows


Modal dialog windows

Pop up windows provide a way to deliver contextual information, notifications and other actions relevant to the current page.Should never be obscured, either by other elements or the screen edge. Should always retain focus until dismissed or a required action has been taken.

Keyboard considerations

• Focus must shift to the modal window or to the first interactive element in the modal, such as an input element

• Dialog's tab order must wrap, the tab order should be contained by the dialog, until the user decides toleave

• When closing the dialog the focus should return back to the element that opened the dialog

Screen reader considerations

• Implement the ARIA dialog role

• Dialog must be properly labelled

• When the dialog is correctly labelled and focus is moved to a control inside the dialog, screen readers should announce the dialog's accessible role, name and optionally description before announcing the focused element.


Outline

Tab Panels


Tab Panels

Tabs make it easy to explore between views within the same context. The component is made up of three parts, tab, tab list and the tab panel. On default one tab should be selected with its related panel visible.

Visuals considerations

• Highlight the currently selected tab

• Ensure the colour of text contrasts well with the background of the selected tab, the unselected tab and tab panel


• Implement the ARIA tab model

• State the number of tab list options – 1 of 5

• Announce which is the selected tab

• On selection, keyboard focus must enter the tabpanel to the heading within the panel


Outline

Accordions


Accordions

Accordions are a simple way of showing, hiding and breaking down content, reducing page length and scrolling. Allowing users to have control over the content by expanding it or deferring it for later lets them decide what to read and what to ignore.

Visuals considerations

• The collapsed state should be clearly identifiablewith an icon to illustrate the closed state

• Interacting with the options should trigger a focusand hover state with clear contrast


• Similar interaction to the tab pattern

• Implement the ARIA tab model

• Use the tab key on your keyboard to access the header of content

• Use the return key to expand the content

• On selection, keyboard focus is pushed to the content within the header panel


Outline

Thank you


29

Thank you.

If you would like more information about today’s presentation please contact us:

• [email protected]



mailto:[email protected]




30

Resources

Slack – a11y communication

Global accessibility slack group is: web-a11y.slack.coma11yscotland: a11yscotland.slack.com

WAI-ARIA Design Patterns and widgets

https://www.w3.org/TR/wai-aria-practices/#aria_ex

Open Ajax Accessibility Alliancewww.oaa-accessibility.org

jQuery UIhttp://jqueryui.com/demos/

web-a11y.slack.com

a11yscotland.slack.com

https://www.w3.org/TR/wai-aria-practices/#aria_ex

http://www.oaa-accessibility.org

http://jqueryui.com/demos/

translating good design into great accessibility

Business