Slides from #Respond16, Sydney Melbourne 2016
So, you've built an amazing new web application. It uses all the latest frameworks and libraries. It's beautiful to behold.
But is it accessible? Many web applications these days are built on top of pre-existing frameworks or code bases and there is little thought to how well these components will work for different assistive devices.
This talk will look at a range of common application components and how they can be made accessible - quickly and easily - for all users. We'll look at how to notify users when changing the DOM after page load. We will also look in-depth at accessible form validation, modal windows, drop-down menus, in-page tabs and other commonly used we components. You will leave this talk ready and eager to enhance your application, and in the process, make it available to entirely new audiences.
26. I have a range of online tests
available, which show how
different assistive technologies
work with application
components.
http://maxdesign.com.au/jobs/sample-accessibility/
40. Well done! Your changes have been saved
Inserted after page load
41. Adding content after the initial
page has loaded can cause
potential issues for screen
readers.
42. Problem 1:
Screen readers “buffer” pages
as they are loaded. Any
content that is added after this
time many not be picked up by
the screen reader.
43. Problem 2:
Screen readers can only focus
on one part of the page at a
time. If something changes on
another area of the page,
screen readers may not pick
this up.
48. If we then use JavaScript to
inject/hide/show content
within this element, screen
readers will be made aware of
any DOM changes within that
element.
49. The aria-live attribute can be
used for any page regions that
are likely to get updates after
the initial page is loaded.
50. Success alerts! Your changes are saved
Info alerts! Some info to be aware of
Warning alerts! Something has changed
Error alerts! Fix the error and try again
Alert messages
63. Should only be used if the
interruption is imperative for
users to know immediately
such as error alerts.
64. Unfortunately, aria-
live=“assertive” is not well
supported at this point, so
the “polite” value may be
preferred.
http://maxdesign.com.au/jobs/sample-accessibility/10-notifications/
index.html
85. If a screen reader is in forms
mode, content that is not
directly associated with form
controls may not be
announced.
86. <!-‐-‐ this error message may not be announced
-‐-‐>
<div>
<label for="email">Email</label>
<input type="email" id="email">
<p class="error">Error</p>
</div>
92. Problem 1:
Form Control Error messages
only appears after a control
has lost focus. For this reason,
it is not immediately presented
to screen reader users.
93. Screen reader users often
have to travel back through the
form to try and find invalid
form controls. If invalid form
controls are not effectively
flagged, users may not be
able to find them.
95. In the worst cases, focus
remains on the form submit
button, even after the form
has been found to be invalid,
and screen reader users have
no idea why the form won’t
submit.
97. 1. When a form control is
defined as invalid, the control
and associated label should be
“flagged” so that users can be
made aware that there is an
error.
98. 2. Flagging form controls and
associated labels should not
use colour alone to signify
errors.
99. 3. An error message should be
displayed in close proximity to
the relevant form control.
112. 4. Each error should ideally be
a link that takes the user to the
relevant form control.
113. The form has two errors that must be completed before it
can be submitted.
1. Error: You must include your first name
2. Error: Email address must include an "@" symbol
114. Optionally, error messages can
be placed inside a hide/show
function that allows users to
choose whether they see the
list of errors or not.
115. The form has two errors that must be completed before it
can be submitted.
View all errors
124. When the error message
needs to be displayed (i.e. the
user has attempted to submit
the form with invalid form
controls) some changes need
to occur dynamically.
125. If present, the tabindex
attribute value needs to be
changed from “-1” to “0” so
that the element will appear in
normal tab order.
132. Problem 1:
Keyboard-only users are often
able to TAB outside of the
modal window while the
modal is still active. This can
be very confusing and
disconcerting.
181. For some important actions
inside the modal window,
Assistive Technologies should
be given additional
information to let them know
what will happen.
182. As screen reader users are
submitting form data, they
should be informed that:
189. When the modal window is
closed, if users are being
taken back to the parent
page:
190. 1. Focus should be placed on
the relevant component of
the parent page. The most
common practice is to move
focus back to the element that
invoked the dialog.
191. The user should not be
thrown back to the top of the
parent page unless there is a
good reason!
192. 2. The user should be
informed where they are and
what change has occurred.
194. Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut laoreet dolore magna aliquam
erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip vel eum iriure dolor in
hendrerit in vulputate.
Accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
Heading here
Another thing here
Add your bank balance
Another heading
$1,200.34
Focus
“Bank balance $1200.34 added
to bank information table”
195. Modals are a pain,
but we can make
them less painful
202. The preferred keyboard-only
navigation method for in-
page tabs uses TAB keystrokes
to move onto the active tab
and active panel, and ARROW
keys to move across tabs.
204. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 1.
This is a link above the tabs
This is a link below the tabs
TAB
205. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 1.
This is a link above the tabs
This is a link below the tabs
TAB
206. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 1.
This is a link above the tabs
This is a link below the tabs
TAB
207. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 1.
This is a link above the tabs
This is a link below the tabs
TAB
208. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 1.
This is a link above the tabs
This is a link below the tabs
TAB
210. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 1.
This is a link above the tabs
This is a link below the tabs
TAB
211. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 2
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 2.
This is a link above the tabs
This is a link below the tabs
ARROW
212. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 3
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 3.
This is a link above the tabs
This is a link below the tabs
ARROW
213. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 3
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 3.
This is a link above the tabs
This is a link below the tabs
TAB
214. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 3
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 3.
This is a link above the tabs
This is a link below the tabs
TAB
215. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 3
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 3.
This is a link above the tabs
This is a link below the tabs
TAB
217. Ideally, focus should be placed
on the panel itself after
moving off the relevant tab
above. This also allows us to
announce the panel to screen
reader users.
218. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 1.
This is a link above the tabs
This is a link below the tabs
TAB
219. Focus can then move to any
focusable items inside the
panel as needed.
220. Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1
Lorem ipsum dolor sit amet consect etuer adipi
scing elit sed diam nonummy nibh euismod
tinunt ut laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam, quis
nostrud exerci tation.
This is a link inside tab 1.
This is a link above the tabs
This is a link below the tabs
TAB
233. Now, we need to set the
various states for the tabs
using aria-selected=“true” (if
the user has selected this tab)
or aria-selected=“false” (for all
other tabs.
256. Get expert assistance
and conduct a formal
accessibility audit of
your website or web
application and action as
needed.
4
257. When is the best
time to focus on
accessibility?
258. The best time to focus on
accessibility is right at the
beginning of development
process, when creating the
individual components in
your pattern library.