Building accessible web components without tears
-
Upload
russ-weakley -
Category
Education
-
view
4.266 -
download
1
Transcript of Building accessible web components without tears
Have you ever tried to navigate through your web site or
application using the keyboard only (no mouse)?
1
As you navigated through the application using keyboard only, could you always see
the element that was in focus?
3
Was tab order in a logical order (that reflected the on-
screen order) or did focus jump all around the page?
4
Developers are now being asked to be fluent in all sorts of libraries and frameworks - to be “full stack” developers.
https://www.flickr.com/photos/tinto/16027598548
Why should I care?
One of our core roles as web professionals is making sure
our sites /applications can be used by the widest possible
audience.
This means everyone, including people with
disabilities that include: Visual, Auditory, Motor skill and
Cognitive
Input devices: Accessible keyboards, Track pads, Head wands, Puffers,
Switches, Touch screens, Voice activation software, etc.
I'm going to talk about some quick things you can do to
make some common application components more
accessible.
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/
WAI-ARIA defines a way to make web sites and web
applications more accessible - especially advanced
JavaScript-based components.
Roles: Is it a widget (menu, slider,
progress bar etc.) or an important type of element
(heading, region, table, form etc.)
Properties: What are the properties of the
widget? Does it have live regions, does it have
relationships with other elements, etc?
<button aria-‐label="Close and return to application"> Close </button>
<a href="#" aria-‐describedby="info1"> Purchase </a>
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.
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.
The aria-live attribute allows us to notify screen readers when content is updated in
specific areas of a page.
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.
The aria-live attribute can be used for any page regions that are likely to get updates after
the initial page is loaded.
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
Assistive Technologies should not announce updates unless
the assistive technology is currently focused on that
region.
Assistive Technologies should announce updates at the next graceful opportunity
(e.g. end of current sentence).
Should only be used if the interruption is imperative for users to know immediately
such as error alerts.
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
aria-relevant This attribute gives a hint
about what types of changes are relevant and should be
announced by Assistive Technologies.
<!-‐-‐ Insertion of nodes into the live region should be considered relevant -‐-‐> <div aria-‐relevant="additions"> </div>
<!-‐-‐ Deletion of nodes should be considered relevant -‐-‐> <div aria-‐relevant="removals"> </div>
<!-‐-‐ Changes to the textual content of existing nodes should be considered relevant -‐-‐> <div aria-‐relevant="text"> </div>
It is important to understand that Screen Reader users
generally read and interact with web pages in two main
ways:
‘Form’ mode: User can enter data into form controls. Keyboard access is restricted to page elements
that can accept focus.
These days, screen readers will automatically switch
between these two modes - though users can manually
trigger these modes as needed.
If a screen reader is in forms mode, content that is not
directly associated with form controls may not be
announced.
<!-‐-‐ this error message may not be announced -‐-‐> <div> <label for="email">Email</label> <input type="email" id="email"> <p class="error">Error</p> </div>
1. Form control validation Individual form fields are
validated as the user moves focus out of the form control.
2. On-submit form validation The entire form is validated as
the user submits the form - before the script sends the
form to the server.
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.
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.
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.
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.
4. The error message should be informative - it should
provide information that will help users fill in the field
correctly.
There are a range of different methods to programmatically associate error messages with
form controls.
<div> <label for="email"> Email <input type="email" id="email"> <span class="error">Error</span> </label> </div>
The form has two errors that must be completed before it can be submitted.
1. Error: You must include your first name2. Error: Email address must include an "@" symbol
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.
The error message container can exist on the page, even when non-active. However, it
should not contain any content until triggered.
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.
If present, the tabindex attribute value needs to be
changed from “-1” to “0” so that the element will appear in
normal tab order.
<div class="error-‐message-‐container" role="alert" aria-‐live="polite" tabindex="0" aria-‐label="Form Errors">
</div>
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.
Problem 3: Screen reader users are
sometimes not made aware of the purpose of the modal or what actions they need to perform within the modal.
Problem 4: Screen reader users are
sometimes sent to the top of the parent page after a modal window has been closed. This
can be confusing.
When a modal is not in use, we need to hide it so that is not
seen by sighted users or announced to Screen
Readers.
When the modal window becomes active, all other content should be hidden
from Assistive Technologies.
<!-‐-‐ all other content -‐-‐> <div aria-‐hidden="true"> ... </div>
<!-‐-‐ modal window -‐-‐> <div style="display:block"> ... </div>
We need to set the initial focus to the modal window
element itself rather than elements inside the modal.
If we set focus on an element inside the window, the label
will not be announced to Assistive Technologies.
We need to provide a label for the modal dialog, so
Assistive Technologies can announce its purpose.
<div style="display:block" role="dialog" aria-‐labelledby="modal-‐label">
<h1 id="modal-‐label">Choose account</h1>
</div>
In some circumstances, we may need to provide a more detailed description of the purpose of the modal dialog.
<div style="display:block" role="dialog" aria-‐labelledby="modal-‐label" aria-‐describedby="modal-‐description">
<h1 id="modal-‐label">Choose account</h1> <p id="modal-‐description"> Description here </p>
</div>
For some important actions inside the modal window,
Assistive Technologies should be given additional
information to let them know what will happen.
As screen reader users focus on the “Close” function, they
should be informed that closing will take them back
to the parent page.
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.
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”
Accessible tabs
https://www.flickr.com/photos/quandc/16426960180
Problem 2: Keyboard-only users are often unable to navigate through the
tabs and panels simply or intuitively.
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.
Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1Lorem 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
Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1Lorem 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
Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1Lorem 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
Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1Lorem 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
Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1Lorem 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 tabsTAB
Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1Lorem 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
Tab 1 Tab 2 Tab 3
This is a heading inside Tab 2Lorem 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
Tab 1 Tab 2 Tab 3
This is a heading inside Tab 3Lorem 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
Tab 1 Tab 2 Tab 3
This is a heading inside Tab 3Lorem 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
Tab 1 Tab 2 Tab 3
This is a heading inside Tab 3Lorem 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
Tab 1 Tab 2 Tab 3
This is a heading inside Tab 3Lorem 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 tabsTAB
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.
Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1Lorem 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
Tab 1 Tab 2 Tab 3
This is a heading inside Tab 1Lorem 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
<!-‐-‐ In-‐page-‐tabs -‐-‐> <ul> <li><a href="#panel1">Apple</a></li> <li><a href="#panel1">Pears</a></li> <li><a href="#panel1">Oranges</a></li> </ul> <div id="panel1">Panel 1</div> <div id="panel1">Panel 2</div> <div id="panel1">Panel 3</div>
<!-‐-‐ presentation applied to LI -‐-‐> <ul role="tablist"> <li role="presentation"> </li> <li role="presentation"> </li> <li role="presentation"> </li> </ul>
<!-‐-‐ tabs applied to tabs -‐-‐> <ul role="tablist"> <li role="presentation"> <a href="#panel1" role="tab">Apple</a> </li> <li role="presentation"> <a href="#panel2" role="tab">Pears</a> </li> <li role="presentation"> <a href="#panel3" role="tab">Oranges</a> </li> </ul>
<!-‐-‐ tabpanel applied to panels -‐-‐> <div id="panel1" role="tabpanel"> Panel 1 </div> <div id="panel1" role="tabpanel"> Panel 2 </div> <div id="panel1" role="tabpanel"> Panel 3 </div>
<!-‐-‐ relating panels to tabs -‐-‐> <a href="#panel1" role="tab" aria-‐controls="panel1">Apple</a>
<div role="tabpanel" id="panel1">
<!-‐-‐ relating tabs to panels -‐-‐> <a href="#panel1" role="tab" aria-‐controls="panel1" id="tab1">Apple</a>
<div role="tabpanel" aria-‐labelledby="tab1" id="panel1">
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.
<!-‐-‐ selected tab -‐-‐> <a href="#panel1" role="tab" aria-‐controls="panel1" aria-‐selected="true" id="tab1">Apple</a>
<!-‐-‐ inactive tab -‐-‐> <a href="#panel2" role="tab" aria-‐controls="panel2" aria-‐selected="false" id="tab2">Pears</a>
<!-‐-‐ active panel -‐-‐> <div role="tabpanel" aria-‐hidden="false" aria-‐expanded="true" aria-‐labelledby="tab1" id="panel1">
<!-‐-‐ inactive panel -‐-‐> <div role="tabpanel" aria-‐hidden="true" aria-‐expanded="false" aria-‐labelledby="tab2" id="panel2">
<!-‐-‐ active tab -‐-‐> <a href="#panel1" role="tab" aria-‐controls="panel1" aria-‐selected="true" tabindex="0" id="tab1">Apple</a>
<!-‐-‐ inactive tab -‐-‐> <a href="#panel2" role="tab" aria-‐controls="panel2" aria-‐selected="false" tabindex="-‐1" id="tab2">Pears</a>
<!-‐-‐ active tabs -‐-‐> <a href="#panel1" role="tab" aria-‐controls="panel1" aria-‐selected="true" tabindex="0" id="tab1">Apple</a>
<!-‐-‐ inactive tabs -‐-‐> <a href="#panel1" role="tab" aria-‐controls="panel1" aria-‐selected="false" tabindex="-‐1" id="tab1">Apple</a>
<!-‐-‐ active panels -‐-‐> <div role="tabpanel" aria-‐hidden="false" aria-‐expanded="true" aria-‐labelledby="tab1" id="panel1" class="panel">
<!-‐-‐ inactive panels -‐-‐> <div role="tabpanel" aria-‐hidden="true" aria-‐expanded="false" aria-‐labelledby="tab1" id="panel1" class="panel">
Moving forward
https://www.flickr.com/photos/kakissel/5484265811
Tenon https://tenon.io/
Web Accessibility Toolbar https://www.paciellogroup.com/resources/wat/
Accessibility Viewer https://www.paciellogroup.com/resources/aviewer
Colour Contrast Analyser https://www.paciellogroup.com/resources/contrastanalyser/
Accessibility Evaluation Toolbar 1.5.7.1.1 https://addons.mozilla.org/en-US/firefox/addon/accessibility-evaluation-
toolb/
WAVE http://wave.webaim.org/
Total Validator http://www.totalvalidator.com/
CynthisSays http://www.cynthiasays.com/
Win/IE11
Win/IE8
Win/Chrome
Win/Firefox
OSX/Chrome
OSX/Firefox
OSX/Safari
NVDA
PASS/FAIL
PASS/FAIL
PASS/FAIL
PASS/FAIL
-
-
-
JAWS
PASS/FAIL
PASS/FAIL
PASS/FAIL
PASS/FAIL
-
-
-
Voiceover
-
-
-
-
PASS/FAIL
PASS/FAIL
PASS/FAIL
Get expert assistance and conduct a formal accessibility audit of your website or web application and action as needed.
4
The best time to focus on accessibility is right at the beginning of development
process, when creating the individual components in
your pattern library.
Russ Weakley Max Design
Site: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley