Upload
user-vision
View
399
Download
1
Embed Size (px)
Citation preview
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
#GAAD #accessibility #a11y #UX
Outline
Introduction
#GAAD #accessibility #a11y #UX
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!
#GAAD #accessibility #a11y #UX
Outline
What do we mean by accessibility
#GAAD #accessibility #a11y #UX
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]
#GAAD #accessibility #a11y #UX
Some questions …
HOWdo we make technology accessible and usable for disabled users?
WHEREdo we start?
Inclusive UX = Designing for ALL Users.
#GAAD #accessibility #a11y #UX
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
#GAAD #accessibility #a11y #UX
Creating an accessible UX vision
USER SATISFACTION
PPerceivable
OOperable
UUnderstandable
RRobust
#GAAD #accessibility #a11y #UX
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.
#GAAD #accessibility #a11y #UX
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.
#GAAD #accessibility #a11y #UX
Component accessibility considerations
#GAAD #accessibility #a11y #UX
Outline
Modal Windows
#GAAD #accessibility #a11y #UX
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.
#GAAD #accessibility #a11y #UX
Outline
Tab Panels
#GAAD #accessibility #a11y #UX
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
Screen reader considerations
• 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
#GAAD #accessibility #a11y #UX
Outline
Accordions
#GAAD #accessibility #a11y #UX
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
Screen reader considerations
• 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
#GAAD #accessibility #a11y #UX
Outline
Thank you
#GAAD #accessibility #a11y #UX
29
Thank you.
If you would like more information about today’s presentation please contact us:
#GAAD #accessibility #a11y #UX
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/