WCAG 2.1 has become a candidate recommendation and adoption within Government of the new accessibility standards is improving. Several of the new techniques can be used today to start building in greater support in your web content.

1. iLearn Community of Practice
What's new in WCAG 2.1
techniques to begin using today

2. About me
Digital accessibility specialist at Department of
Jobs and Small business
– Web accessibility strategy
– Replacing CAPTCHA
– Build specifications for web apps

3. WCAG 2.1
Became a candidate recommendation last year,
extends WCAG 2.0

4. WCAG 2.1 Govt adoption
DTA have adopted it, although no specific
guidance currently exists
– Use some of the techniques now to make your
content more accessible

5. What's new in WCAG 2.1
Provides extra guidance on:
• mobile devices
• colours
• Input controls

6. WCAG 2.1 criteria
New success criteria:
• 5 single A
• 7 double A

7. Criteria to begin using today
1.3.4 Orientation
1.3.5 Identify input purpose
1.4.10 Reflow
2.5.3 Label in name
4.1.3 Status messages
AA
AA
AA
A
AA

8. Orientation 1.3.4
If you're already using responsive features,
you've passed this criterion
AA

9. Orientation 1.3.4 exceptions
Content which depends on the orientation

10. 1.3.5 identify input purpose
Provide meta data for browsers to use and prefill
AA

11. Describing the type of data is easy
<input type="date">
Birthday (dd/mm/yy)

12. Describing the context is hard
is it your birthday, their birthday, whose
birthday?

13. HTML5 autocomplete attribute
Provides extra context, which can save the data
into the browser and prepopulate fields

14. HTML5 autocomplete attribute
If your users have to enter their name, provide
this in the autocomplete field
<input autocomplete="name">

15. How it helps users
Provides the potential for browsers and AT to
present the information in different modes
– autocomplete allows prepopulation

16. List of values
The autocomplete field only accepts
predefined values including:
name
honorific-title
given-name
additional-name
<input autocomplete="name">
*https://www.w3.org/TR/html52/sec-forms.html#element-attrdef-autocompleteelements-autocomplete

17. 1.4.10 reflow
For people who need to enlarge text and read it
in a single column
AA

18. Reflow is crucial
For low vision users enlarging text which results
in scrolling vertically and horizontally is
frustrating

19. Reflow requirement
When the browser is zoomed to 400% content
reflows in one direction only
– Vertical scrolling only

20. Reflow exceptions
• Complex data tables
• Toolbars
• Images

21. 2.5.3 Label in Name
Ensure visual labels are the same as
programmatic labels
A

22. Why use?
Helps ensure users who rely on visible text can
access onscreen controls programmatically
Visual name == Programmatic name

23. How is the name created?
Accessible name is created by:
1. the visible text
2.aria-label attribute of the control
3. associated label

24. 1. Visible text
<button>Click</button>
Accessible name = Click

25. 2. aria-label
<button aria-
label="stop">Click</button>
Accessible name = Stop

26. 3. Associated label
<label for="control">Name</label>
<input type="text" id="control">
Accessible name = Name

27. Keep it simple
Choose the simplest option for a visible label
<label for="control">Name</label>
<input type="text" id="control">
or
<button>Click</button>

28. 4.1.3 Status Messages
Important changes are announced without requiring
focus or unnecessary interruption

29. Why use?
Vison impaired users may unaware of important
updates

30. When to use
For status messages only, not every update
• Providing validation summary
• Successful save/Error in saving
• Timeout is approaching

31. How to implement
Triggers screen reader to announce the update
<div role="status">
5 results returned.
</div>
Content to announce

32. In summary
WCAG 2.1 offers more techniques for making your
content accessible
• Use responsive web techniques
• Use status messages if page updates partially

33. Reach out to me
ross.mullen@jobs.gov.au
@MrRossMullen