Building accessible web components without tears
-
Upload
russ-weakley -
Category
Education
-
view
4.243 -
download
5
Transcript of Building accessible web components without tears
![Page 1: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/1.jpg)
without tears
Building accessible web components
![Page 2: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/2.jpg)
Four painful questions
![Page 3: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/3.jpg)
Have you ever tried to navigate through your web site or
application using the keyboard only (no mouse)?
1
![Page 4: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/4.jpg)
Were you able to perform all the site/application tasks
without issues?
2
![Page 5: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/5.jpg)
As you navigated through the application using keyboard only, could you always see
the element that was in focus?
3
![Page 6: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/6.jpg)
Was tab order in a logical order (that reflected the on-
screen order) or did focus jump all around the page?
4
![Page 7: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/7.jpg)
The myth of “Full stack”
![Page 8: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/8.jpg)
Over the last 5 years, there seems to have been
a major change in front end development.
![Page 9: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/9.jpg)
Developers are now being asked to be fluent in all sorts of libraries and frameworks - to be “full stack” developers.
![Page 10: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/10.jpg)
But many “full stack” developers seem to have
forgotten some of the core web principles…
![Page 11: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/11.jpg)
Like… understanding basic HTML, CSS, accessibility, and
using progressive enhancement.
![Page 12: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/12.jpg)
“Why can’t I wrap a span
around a div?”
![Page 13: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/13.jpg)
Web accessibility begins with
semantic markup
![Page 14: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/14.jpg)
https://www.flickr.com/photos/tinto/16027598548
Why should I care?
![Page 15: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/15.jpg)
One of our core roles as web professionals is making sure
our sites /applications can be used by the widest possible
audience.
![Page 16: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/16.jpg)
This means everyone, including people with
disabilities that include: Visual, Auditory, Motor skill and
Cognitive
![Page 17: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/17.jpg)
This also means making our sites and apps accessible for
Assistive Technologies:
![Page 18: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/18.jpg)
Input devices: Accessible keyboards, Track pads, Head wands, Puffers,
Switches, Touch screens, Voice activation software, etc.
![Page 19: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/19.jpg)
Output devices: Text-based browsers, Screen
Readers, Magnifiers, Refreshable Braille Devices
etc.
![Page 20: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/20.jpg)
Assistive Technologies are
more than just screen readers
![Page 21: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/21.jpg)
Don’t panic!
![Page 22: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/22.jpg)
All of this may sound time consuming and costly, but it
doesn’t have to be.
![Page 23: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/23.jpg)
I'm going to talk about some quick things you can do to
make some common application components more
accessible.
![Page 24: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/24.jpg)
I’ll be focussing on some components that often
present major barriers to Assistive Technologies.
![Page 25: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/25.jpg)
Online tests
![Page 26: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/26.jpg)
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/
![Page 27: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/27.jpg)
WAI ARIA
![Page 28: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/28.jpg)
WAI: Web Accessibility Initiative
ARIA: Accessible Rich Internet Applications
![Page 29: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/29.jpg)
WAI-ARIA defines a way to make web sites and web
applications more accessible - especially advanced
JavaScript-based components.
![Page 30: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/30.jpg)
We can use HTML attributes to define the role, states and
properties of specific HTML elements.
![Page 31: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/31.jpg)
Roles: Is it a widget (menu, slider,
progress bar etc.) or an important type of element
(heading, region, table, form etc.)
![Page 32: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/32.jpg)
<ul role="menu"> ... </ul>
<main role="main"> ... </main>
![Page 33: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/33.jpg)
States: What is the current state of the widget? Is it checked, disabled
etc.
![Page 34: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/34.jpg)
<input aria-‐disabled="true" type="text">
<input aria-‐checked="true" type="radio">
![Page 35: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/35.jpg)
Properties: What are the properties of the
widget? Does it have live regions, does it have
relationships with other elements, etc?
![Page 36: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/36.jpg)
<button aria-‐label="Close and return to application"> Close </button>
<a href="#" aria-‐describedby="info1"> Purchase </a>
![Page 37: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/37.jpg)
ARIA allows us to make specific HTML
elements more meaningful for ATs
![Page 38: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/38.jpg)
Dynamic content
![Page 39: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/39.jpg)
The problem
![Page 40: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/40.jpg)
Well done! Your changes have been saved
Inserted after page load
![Page 41: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/41.jpg)
Adding content after the initial page has loaded can cause potential issues for screen
readers.
![Page 42: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/42.jpg)
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.
![Page 43: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/43.jpg)
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.
![Page 44: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/44.jpg)
A solution
![Page 45: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/45.jpg)
The aria-live attribute allows us to notify screen readers when content is updated in
specific areas of a page.
![Page 46: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/46.jpg)
We can apply the aria-live attribute to any HTML
element.
![Page 47: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/47.jpg)
<div aria-‐live="polite">
</div>
![Page 48: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/48.jpg)
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.
![Page 49: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/49.jpg)
The aria-live attribute can be used for any page regions that are likely to get updates after
the initial page is loaded.
![Page 50: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/50.jpg)
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
![Page 51: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/51.jpg)
Dynamic stock info
![Page 52: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/52.jpg)
Sortable tables
![Page 53: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/53.jpg)
Possible values
![Page 54: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/54.jpg)
There are three possible values for aria-live: “off”, “polite” and “assertive”.
![Page 55: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/55.jpg)
<div aria-‐live="off">
</div>
![Page 56: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/56.jpg)
Assistive Technologies should not announce updates unless
the assistive technology is currently focused on that
region.
![Page 57: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/57.jpg)
Should be used for information that is not
critical for users to know about immediately.
![Page 58: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/58.jpg)
<div aria-‐live="polite">
</div>
![Page 59: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/59.jpg)
Assistive Technologies should announce updates at the next graceful opportunity
(e.g. end of current sentence).
![Page 60: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/60.jpg)
Should be used for warning notifications that users may
need to know.
![Page 61: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/61.jpg)
<div aria-‐live="assertive">
</div>
![Page 62: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/62.jpg)
Assistive Technologies should announce updates
immediately.
![Page 63: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/63.jpg)
Should only be used if the interruption is imperative for users to know immediately
such as error alerts.
![Page 64: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/64.jpg)
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
![Page 65: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/65.jpg)
aria-relevant
![Page 66: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/66.jpg)
aria-relevant This attribute gives a hint
about what types of changes are relevant and should be
announced by Assistive Technologies.
![Page 67: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/67.jpg)
<!-‐-‐ Insertion of nodes into the live region should be considered relevant -‐-‐> <div aria-‐relevant="additions"> </div>
![Page 68: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/68.jpg)
<!-‐-‐ Deletion of nodes should be considered relevant -‐-‐> <div aria-‐relevant="removals"> </div>
![Page 69: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/69.jpg)
<!-‐-‐ Changes to the textual content of existing nodes should be considered relevant -‐-‐> <div aria-‐relevant="text"> </div>
![Page 70: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/70.jpg)
<!-‐-‐ All changed nodes should be considered relevant -‐-‐> <div aria-‐relevant="all"> </div>
![Page 71: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/71.jpg)
The default behaviour is equivalent to “additions text”.
![Page 72: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/72.jpg)
aria-relevant values of “removals” or “all” should be
used sparingly.
![Page 73: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/73.jpg)
role=alert
![Page 74: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/74.jpg)
role=“alert” Defines a message with important information.
![Page 75: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/75.jpg)
<div role="alert">
</div>
![Page 76: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/76.jpg)
Elements with the role=“alert” have an implicit aria-live
value of “assertive”.
![Page 77: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/77.jpg)
aria-live: easy to apply, major benefits
![Page 78: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/78.jpg)
Accessible Errors
https://www.pexels.com/photo/animal-dog-pet-sad-7289/
![Page 79: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/79.jpg)
Screen reader modes
![Page 80: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/80.jpg)
It is important to understand that Screen Reader users
generally read and interact with web pages in two main
ways:
![Page 81: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/81.jpg)
‘Read’ mode: Users can read and navigate the page but can not enter
data into form controls.
![Page 82: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/82.jpg)
‘Form’ mode: User can enter data into form controls. Keyboard access is restricted to page elements
that can accept focus.
![Page 83: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/83.jpg)
These days, screen readers will automatically switch
between these two modes - though users can manually
trigger these modes as needed.
![Page 84: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/84.jpg)
Why do these two modes
matter?
![Page 85: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/85.jpg)
If a screen reader is in forms mode, content that is not
directly associated with form controls may not be
announced.
![Page 86: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/86.jpg)
<!-‐-‐ this error message may not be announced -‐-‐> <div> <label for="email">Email</label> <input type="email" id="email"> <p class="error">Error</p> </div>
![Page 87: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/87.jpg)
Types of form validation
![Page 88: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/88.jpg)
We’re going to look at two different aspects of client-
side form validation.
![Page 89: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/89.jpg)
1. Form control validation Individual form fields are
validated as the user moves focus out of the form control.
![Page 90: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/90.jpg)
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.
![Page 91: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/91.jpg)
The problem
![Page 92: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/92.jpg)
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.
![Page 93: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/93.jpg)
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.
![Page 94: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/94.jpg)
Problem 2: Screen reader users are often not informed that the overall
form contains errors.
![Page 95: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/95.jpg)
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.
![Page 96: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/96.jpg)
A solution for form control validation
![Page 97: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/97.jpg)
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.
![Page 98: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/98.jpg)
2. Flagging form controls and associated labels should not use colour alone to signify
errors.
![Page 99: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/99.jpg)
3. An error message should be displayed in close proximity to
the relevant form control.
![Page 100: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/100.jpg)
Error: The phone number must include a 10 digit number
Phone
![Page 101: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/101.jpg)
4. The error message should be informative - it should
provide information that will help users fill in the field
correctly.
![Page 102: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/102.jpg)
5. The error message should be programmatically
associated with the form control.
![Page 103: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/103.jpg)
This means that the error message should be
announced along with the relevant label information.
![Page 104: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/104.jpg)
There are a range of different methods to programmatically associate error messages with
form controls.
![Page 105: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/105.jpg)
The simplest is to place the error message content inside
the label.
![Page 106: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/106.jpg)
<div> <label for="email"> Email <input type="email" id="email"> <span class="error">Error</span> </label> </div>
![Page 107: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/107.jpg)
A solution for on-submit
form validation
![Page 108: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/108.jpg)
If there are one or more form validation errors:
![Page 109: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/109.jpg)
1. An error message should appear at the top of the form alerting users that there are
errors.
![Page 110: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/110.jpg)
2. Focus must be taken to the error message as soon as the user has attempted to submit
for form.
![Page 111: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/111.jpg)
3. The error message should list all errors.
![Page 112: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/112.jpg)
4. Each error should ideally be a link that takes the user to the
relevant form control.
![Page 113: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/113.jpg)
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
![Page 114: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/114.jpg)
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.
![Page 115: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/115.jpg)
The form has two errors that must be completed before it can be submitted.
View all errors
![Page 116: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/116.jpg)
Markup for error messages
![Page 117: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/117.jpg)
The error message container can exist on the page, even when non-active. However, it
should not contain any content until triggered.
![Page 118: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/118.jpg)
This container should be set with role=“alert”. This is used
to communicate important information.
![Page 119: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/119.jpg)
<div class="error-‐message-‐container" role="alert">
</div>
![Page 120: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/120.jpg)
Optionally, the aria-live attribute can added with a
value of “assertive” or “polite”.
![Page 121: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/121.jpg)
<div class="error-‐message-‐container" role="alert" aria-‐live="polite">
</div>
![Page 122: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/122.jpg)
This container can be set with tabindex value of “-1” so that
it will not receive focus.
![Page 123: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/123.jpg)
<div class="error-‐message-‐container" role="alert" aria-‐live="polite" tabindex="-‐1">
</div>
![Page 124: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/124.jpg)
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.
![Page 125: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/125.jpg)
If present, the tabindex attribute value needs to be
changed from “-1” to “0” so that the element will appear in
normal tab order.
![Page 126: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/126.jpg)
<div class="error-‐message-‐container" role="alert" aria-‐live="polite" tabindex="0">
</div>
![Page 127: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/127.jpg)
The container can be given a label so that it is announced to
screen reader users.
![Page 128: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/128.jpg)
<div class="error-‐message-‐container" role="alert" aria-‐live="polite" tabindex="0" aria-‐label="Form Errors">
</div>
![Page 129: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/129.jpg)
Accessible form errors:
simple solutions, major benefits.
![Page 130: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/130.jpg)
Accessible modals
![Page 131: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/131.jpg)
The problem
![Page 132: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/132.jpg)
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.
![Page 133: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/133.jpg)
Problem 2: Screen reader users are
sometimes not informed that an action will trigger a modal.
![Page 134: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/134.jpg)
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.
![Page 135: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/135.jpg)
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.
![Page 136: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/136.jpg)
A solution
![Page 137: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/137.jpg)
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.
![Page 138: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/138.jpg)
<div style="display:none"> ... </div>
![Page 139: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/139.jpg)
When a modal window is triggered, we need to change
the value.
![Page 140: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/140.jpg)
<div style="display:block"> ... </div>
![Page 141: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/141.jpg)
When the modal window becomes active, all other content should be hidden
from Assistive Technologies.
![Page 142: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/142.jpg)
<!-‐-‐ all other content -‐-‐> <div aria-‐hidden="true"> ... </div>
<!-‐-‐ modal window -‐-‐> <div style="display:block"> ... </div>
![Page 143: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/143.jpg)
We need to set the initial focus to the modal window
element itself rather than elements inside the modal.
![Page 144: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/144.jpg)
Initial focus
![Page 145: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/145.jpg)
Initial focus
![Page 146: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/146.jpg)
This is important because we are going to give the modal a
label.
![Page 147: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/147.jpg)
If we set focus on an element inside the window, the label
will not be announced to Assistive Technologies.
![Page 148: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/148.jpg)
We need to inform screen reader users that this modal window is a “modal dialog”.
![Page 149: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/149.jpg)
<div style="display:block" role="dialog"> ... </div>
![Page 150: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/150.jpg)
We need to provide a label for the modal dialog, so
Assistive Technologies can announce its purpose.
![Page 151: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/151.jpg)
<div style="display:block" role="dialog" aria-‐labelledby="modal-‐label">
<h1 id="modal-‐label">Choose account</h1>
</div>
![Page 152: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/152.jpg)
In some circumstances, we may need to provide a more detailed description of the purpose of the modal dialog.
![Page 153: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/153.jpg)
<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>
![Page 154: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/154.jpg)
Keystrokes
![Page 155: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/155.jpg)
TAB
![Page 156: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/156.jpg)
TAB
![Page 157: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/157.jpg)
TAB
![Page 158: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/158.jpg)
TAB
![Page 159: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/159.jpg)
TAB
![Page 160: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/160.jpg)
TAB
![Page 161: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/161.jpg)
TAB
![Page 162: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/162.jpg)
TAB
![Page 163: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/163.jpg)
SHIFT + TAB
![Page 164: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/164.jpg)
SHIFT + TAB
![Page 165: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/165.jpg)
SHIFT + TAB
![Page 166: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/166.jpg)
SHIFT + TAB
![Page 167: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/167.jpg)
SHIFT + TAB
![Page 168: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/168.jpg)
SHIFT + TAB
![Page 169: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/169.jpg)
SHIFT + TAB
![Page 170: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/170.jpg)
ENTER
![Page 171: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/171.jpg)
ENTER
![Page 172: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/172.jpg)
SPACE
![Page 173: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/173.jpg)
SPACE
![Page 174: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/174.jpg)
TAB
![Page 175: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/175.jpg)
ARROW
![Page 176: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/176.jpg)
Option 1 - applesARROW
![Page 177: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/177.jpg)
Option 2 - pearsARROW
![Page 178: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/178.jpg)
Option 3 - bananasARROW
![Page 179: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/179.jpg)
ESC
![Page 180: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/180.jpg)
Adding meaning to important
actions
![Page 181: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/181.jpg)
For some important actions inside the modal window,
Assistive Technologies should be given additional
information to let them know what will happen.
![Page 182: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/182.jpg)
As screen reader users are submitting form data, they
should be informed that:
![Page 183: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/183.jpg)
1. They will be taken back to the parent page.
![Page 184: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/184.jpg)
2. Where this data will be submitted when they return to
the parent page.
![Page 185: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/185.jpg)
ENTER
“Submit and return to bank balance information. Your data will be added to the Balance table”
![Page 186: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/186.jpg)
As screen reader users focus on the “Close” function, they
should be informed that closing will take them back
to the parent page.
![Page 187: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/187.jpg)
ENTER
“Leave form and return to bank balance information”
![Page 188: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/188.jpg)
After modal dialog closes
![Page 189: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/189.jpg)
When the modal window is closed, if users are being taken back to the parent
page:
![Page 190: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/190.jpg)
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.
![Page 191: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/191.jpg)
The user should not be thrown back to the top of the parent page unless there is a
good reason!
![Page 192: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/192.jpg)
2. The user should be informed where they are and
what change has occurred.
![Page 193: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/193.jpg)
ENTER
![Page 194: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/194.jpg)
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”
![Page 195: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/195.jpg)
Modals are a pain, but we can make them less painful
![Page 196: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/196.jpg)
Accessible tabs
https://www.flickr.com/photos/quandc/16426960180
![Page 197: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/197.jpg)
The problem
![Page 198: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/198.jpg)
In-page tabs can present issues for screen reader as
well as keyboard-only users.
![Page 199: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/199.jpg)
Problem 1: Screen reader users are often confused by the relationship
between tabs and panels.
![Page 200: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/200.jpg)
Problem 2: Keyboard-only users are often unable to navigate through the
tabs and panels simply or intuitively.
![Page 201: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/201.jpg)
A solution
![Page 202: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/202.jpg)
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.
![Page 203: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/203.jpg)
“TAB & ARROW”: Straight through
pass
![Page 204: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/204.jpg)
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
![Page 205: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/205.jpg)
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
![Page 206: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/206.jpg)
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
![Page 207: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/207.jpg)
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
![Page 208: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/208.jpg)
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
![Page 209: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/209.jpg)
“TAB & ARROW”: Across the tabs
pass
![Page 210: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/210.jpg)
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
![Page 211: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/211.jpg)
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
![Page 212: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/212.jpg)
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
![Page 213: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/213.jpg)
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
![Page 214: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/214.jpg)
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
![Page 215: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/215.jpg)
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
![Page 216: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/216.jpg)
Where to put focus for panels?
![Page 217: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/217.jpg)
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.
![Page 218: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/218.jpg)
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
![Page 219: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/219.jpg)
Focus can then move to any focusable items inside the
panel as needed.
![Page 220: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/220.jpg)
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
![Page 221: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/221.jpg)
What about markup?
![Page 222: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/222.jpg)
We can start with a basic list and a series of <div> elements
below.
![Page 223: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/223.jpg)
<!-‐-‐ 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>
![Page 224: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/224.jpg)
We can then use WAI ARIA to define the role or purpose of
each element.
![Page 225: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/225.jpg)
<!-‐-‐ tablist applied to UL -‐-‐> <ul role="tablist">
</ul>
![Page 226: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/226.jpg)
<!-‐-‐ presentation applied to LI -‐-‐> <ul role="tablist"> <li role="presentation"> </li> <li role="presentation"> </li> <li role="presentation"> </li> </ul>
![Page 227: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/227.jpg)
<!-‐-‐ 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>
![Page 228: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/228.jpg)
<!-‐-‐ 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>
![Page 229: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/229.jpg)
Next up, we need to define the controls for the tab panels
- using aria-controls.
![Page 230: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/230.jpg)
<!-‐-‐ relating panels to tabs -‐-‐> <a href="#panel1" role="tab" aria-‐controls="panel1">Apple</a>
<div role="tabpanel" id="panel1">
![Page 231: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/231.jpg)
We also need to add labels to the tab panels using aria-
labelledby.
![Page 232: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/232.jpg)
<!-‐-‐ relating tabs to panels -‐-‐> <a href="#panel1" role="tab" aria-‐controls="panel1" id="tab1">Apple</a>
<div role="tabpanel" aria-‐labelledby="tab1" id="panel1">
![Page 233: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/233.jpg)
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.
![Page 234: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/234.jpg)
<!-‐-‐ 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>
![Page 235: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/235.jpg)
And the various states for the tabs panels using aria-hidden
and aria-expanded.
![Page 236: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/236.jpg)
<!-‐-‐ 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">
![Page 237: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/237.jpg)
And now to set focus on the relevant elements.
![Page 238: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/238.jpg)
<!-‐-‐ 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>
![Page 239: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/239.jpg)
JavaScript can be used to swap these various option as
needed.
![Page 240: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/240.jpg)
Breakdown
![Page 241: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/241.jpg)
<!-‐-‐ active tabs -‐-‐> <a href="#panel1" role="tab" aria-‐controls="panel1" aria-‐selected="true" tabindex="0" id="tab1">Apple</a>
![Page 242: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/242.jpg)
<!-‐-‐ inactive tabs -‐-‐> <a href="#panel1" role="tab" aria-‐controls="panel1" aria-‐selected="false" tabindex="-‐1" id="tab1">Apple</a>
![Page 243: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/243.jpg)
<!-‐-‐ active panels -‐-‐> <div role="tabpanel" aria-‐hidden="false" aria-‐expanded="true" aria-‐labelledby="tab1" id="panel1" class="panel">
![Page 244: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/244.jpg)
<!-‐-‐ inactive panels -‐-‐> <div role="tabpanel" aria-‐hidden="true" aria-‐expanded="false" aria-‐labelledby="tab1" id="panel1" class="panel">
![Page 245: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/245.jpg)
OK, that was intense, but you don’t have to do
all of it
![Page 246: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/246.jpg)
Moving forward
https://www.flickr.com/photos/kakissel/5484265811
![Page 247: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/247.jpg)
Don’t be overwhelmed. Look for quick
wins.
![Page 248: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/248.jpg)
You’ll be surprised what you can do
without too many tears.
![Page 249: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/249.jpg)
Test with keyboard-only and make changes as needed. (Make sure you also check for visible focus).
1
![Page 250: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/250.jpg)
/* avoid this! */ :focus { outline: none; }
![Page 251: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/251.jpg)
Test with accessibility checking tools and make changes as needed.2
![Page 252: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/252.jpg)
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/
![Page 253: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/253.jpg)
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/
![Page 254: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/254.jpg)
Test with one or more screen readers and make changes as needed.3
![Page 255: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/255.jpg)
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
![Page 256: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/256.jpg)
Get expert assistance and conduct a formal accessibility audit of your website or web application and action as needed.
4
![Page 257: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/257.jpg)
When is the best time to focus on
accessibility?
![Page 258: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/258.jpg)
The best time to focus on accessibility is right at the beginning of development
process, when creating the individual components in
your pattern library.
![Page 259: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/259.jpg)
Get busy & have fun!
![Page 260: Building accessible web components without tears](https://reader035.fdocuments.net/reader035/viewer/2022081521/5877c04d1a28ab39588b4605/html5/thumbnails/260.jpg)
Russ Weakley Max Design
Site: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley