�ݺ�ߣ

WCAG
ARIA
ADA
508
AUDIT
More Than Just Autocomplete
SC 1.3.5

WCAG 2.1
#A11yTo Conf 2018
Jared Smith - Associate Director of WebAIM

Requirements for WCAG 2.x
? Backwards Compatibility
? Maintain the POUR Principles
? Continue to use the A/AA/AAA Severity
model.
? Define a clear conformance model
? Harmonization of Success Criteria
? Meet identified Milestone Dates
? February 2017: First Public Working Draft for
WCAG 2.1
? January 2018: Candidate Recommendation for
WCAG 2.1
? June 2018: WCAG 2.1 Recommendation
https://www.w3.org/WAI/GL/wiki/WCAG_2.1_Requirements_Draft
#A11yTo Conf 2018

The Paperwork (W3C Process)
To publish a Candidate Recommendation,
in addition to meeting the general
requirements for advancement a Working
Group:
? MUST show that the specification has met all
Working Group requirements, or explain why
the requirements have changed or been
deferred,
? MUST document changes to dependencies
during the development of the specification,
? MUST document how adequate
implementation experience will be
demonstrated,
? MUST specify the deadline for comments,
which MUST be at least four weeks after publication, and SHOULD be longer for
complex documents,
? MUST show that the specification has received wide review, and
? MAY identify features in the document as "at risk". These features MAY be removed
before advancement to Proposed Recommendation without a requirement to
publish a new Candidate Recommendation.
BLAH
BLAH
BLAH
#A11yTo Conf 2018

WCAG 2.1 Exit Criteria
? At least 5 conforming Web sites are available, of which:
? At least four conform at level AA
? At least one conforms at level AAA;
? At least one conforming site relies on one platform (Operating system, user agent, assistive
technology) with touch screen and small screen support.
? At least two implementations exist for each success criterion added in WCAG 2.1
(Success Criteria from WCAG 2.0 do not need new implementations);
? Accessibility support documentation is provided such that:
? Evidence of successful implementation is available for SC added to WCAG 2.1.
? Documentation is provided for at least four platforms (operating system/user agent/assistive
technology combinations).
? All Sufficient Techniques listed in Understanding WCAG 2.1 at the end of the
Candidate Recommendation period contain test procedures;
? The Working Group has responded formally to all issues raised against this
document related to any implementation efforts during the Candidate
Recommendation period.
#A11yTo Conf 2018

Severity Levels: A, AA, AAA
? whether the Success Criterion is essential
(in other words, if the Success Criterion isn��t
met, then even assistive technology can��t
make content accessible)
? whether it is possible to satisfy the Success
Criterion for all Web sites and types of content
that the Success Criteria would apply to
(e.g., different topics, types of content, types
of Web technology)
? whether the Success Criterion requires skills that
could reasonably be achieved by the content creators (that is, the knowledge and
skill to meet the Success Criteria could be acquired in a week's training or less)
? whether the Success Criterion would impose limits on the "look & feel" and/or
function of the Web page. (limits on function, presentation, freedom of expression,
design or aesthetic that the Success Criteria might place on authors)
? whether there are no workarounds if the Success Criterion is not met
#A11yTo Conf 2018

Descriptive vs. Prescriptive
? Success Criteria describe a required condition or
outcome.
? Success Criteria must be measurable and testable
? Success Criteria should avoid being overly prescriptive.
? Example:
Success Criterion 1.1.1 Non-text Content
(Level A)
All non-text content that is presented to the user has a text
alternative that serves the equivalent purpose, except for the
situations listed below.
? Techniques: alt=, aria-label=, aria-labelledby=
#A11yTo Conf 2018

Taking A Closer Look
The anatomy of a
new Success
Criterion
#A11yTo Conf 2018

Support Personalization
? Critical need for users with
cognitive issues
? Personalization involves
tailoring aspects of the
user experience to meet
the preferences or needs
of the user.
? COGA TF (AG WG)
? Personalization TF
(APA WG)
#A11yTo Conf 2018

Original Proposed Success Criteria from COGA TF
Enable Personalization:
Contextual information and author settable properties of
regions and elements are programmatically determinable,
so that personalization is available.
? Suggestion for Priority Level (A)
(source: https://github.com/w3c/wcag21/issues/5 submitted Sept. 8, 2016)
#A11yTo Conf 2018

A, AA, AAA
? whether the Success Criterion is essential (in other words, if
the Success Criterion isn't met, then even assistive
technology can't make content accessible)
? whether it is possible to satisfy the Success Criterion for all
Web sites and types of content that the Success Criteria
would apply to (e.g., different topics, types of content, types
of Web technology)
? whether the Success Criterion requires skills that
could reasonably be achieved by the content creators (that
is, the knowledge and skill to meet the Success Criteria could
be acquired in a week's training or less)
? whether the Success Criterion would impose limits on the
"look & feel" and/or function of the Web page. (limits on
function, presentation, freedom of expression, design or
aesthetic that the Success Criteria might place on authors)
? whether there are no workarounds if the Success Criterion is
not met
#A11yTo Conf 2018

Crawling before running
AA Success Criteria
? Limited (constrained) list
of functions and inputs
? Use existing technologies
AAA Success Criteria
? Use Personalization
Semantics
Create 2 S.C. �C one at AA, and on at AAA
of functions and
#A11yTo Conf 2018

Success Criterion 1.3.4 Identify Common Purpose
NOW: Success Criterion 1.3.5 Identify Input Purpose (AA)
In content implemented using markup languages, for each user interface
component that serves a purpose identified in the common purposes for user
interface components, that that purpose can be programmatically determined.
(Buttons & Controls, Link Types, and Inputs)
Success Criterion 1.3.5: Contextual Information
NOW: Success Criterion 1.3.6 Identify Purpose (AAA)
In content implemented using markup languages, contextual information
for controls, symbols, and regions can be programmatically determined
using a publicly available vocabulary.
#A11yTo Conf 2018

Programmatically Determined
(Programmatically Determinable)
determined by software from
author-supplied data
provided in a way that different user agents,
including assistive technologies,
can extract and present this
information to users in different
modalities
#A11yTo Conf 2018

Identify Common Purpose (1.3.4)
Breaking down the technical need:
? A publicly published metadata schema
? A means of attaching metadata values at the element
level
? Demonstrating the value of attaching the metadata
#A11yTo Conf 2018

?Non-existent or incomplete taxonomies
?Limited/unsupported mechanism(s) for
attaching the metadata
?No existing tools or implementations in the wild
?Creating a new taxonomy or attribute was out
of scope for our Working Group.
Hitting a Brick Wall
#A11yTo Conf 2018

?Good Bye Controls
?Good Bye Buttons and Link Types
#A11yTo Conf 2018

? Taxonomy (ies)
? Personalization Semantics Content
Module 1.0
(https://w3c.github.io/personalization-
semantics/content/index.html)
? Personalization Help and Support 1.0
semantics/help/index.html)
? Personalization Tools 1.0
semantics/tools/index.html)
? Personalization Semantics Explainer 1.0
(https://www.w3.org/TR/personalization
-semantics-1.0/)
Personalization Task Force
#A11yTo Conf 2018

? Method / Mechanism?
? RDFa
? HTML Microdata
? ARIA-* Attributes
? AUI-* Attributes
? Single Attribute
? Single Attribute (alternative
(CSS-style) notation)
? Value Pairs
? Native Host language Features
? JavaScript Object
? Dataset(s)
Personalization Task Force
#A11yTo Conf 2018
https://github.com/w3c/personalization-semantics/wiki/
Comparison-of-ways-to-use-vocabulary-in-content

Publicly Published Schema �C HTML5 Autofill
Tokens
Autofilling form controls:
the autocomplete attribute
��User agents sometimes have
features for helping users fill
forms in, for example
prefilling the user��s address based on
earlier user input.��
The autocomplete content attribute can be used to
hint to the user agent how to, or indeed whether to,
provide such a feature.
(source: https://www.w3.org/TR/html51/sec-forms.html#sec-autofill)
#A11yTo Conf 2018

? Existing Fixed tokens
(the taxonomy)
? Supported attribute
? Limitations:
? <input type=��text��> only
? 1 exception: ��address��
applies to <textarea>
(supports multi-line)
Quick Review of @autocomplete
#A11yTo Conf 2018
WCAG 2.1, Section 7: Input Purposes for User Interface Components
https://www.w3.org/TR/WCAG21/#input-purposes

Security Concerns?
? Off-screen inputs
? autofill expectation
mantle = what input is
expected from users
? autofill anchor mantle
= describes the meaning
of the given value
? A bug? TBD
��When an input element��s type attribute is in the Hidden state, the rules in this section
apply. The input element represents a value that is not intended to be examined or
manipulated by the user.��
Quick Review of @autocomplete
#A11yTo Conf 2018
https://www.w3.org/TR/html52/sec-forms.html#sec-autofill

Attaching the Metadata - Using Autocomplete
<fieldset>
<legend> �तٛ��...</legend>
<p>
<label> ס��:
<input name="�तٛ��" autocomplete="street-address"> </label>
<p>
<label> ��ƥ�:
<input name="��ƥ�" autocomplete="address-level2"> </label>
<p>
<label> �]�㷬��:
<input name="�]�㷬��" autocomplete="postal-code"> </label>
</fieldset>
#A11yTo Conf 2018

Attaching the Metadata - Using Autocomplete
<fieldset>
<legend>Ship the blue gift to...</legend>
<p>
<label> Address:
<input name="address" autocomplete="street-address"> </label>
<p>
<label> City:
<input name="city" autocomplete="address-level2"> </label>
<p>
<label> Postal Code:
<input name="postal-code" autocomplete="postal-code"> </label>
</fieldset>
#A11yTo Conf 2018

Ability to implement & show value
Fixed strings of predictable text are useful
? CSS selectors:
[autocomplete=��fixed term��] {
/* style it */
}
? Can also be used with client-side scripting:
element.getAttribute(attributename)- Javascript
$("[attribute=value]")- jQuery
#A11yTo Conf 2018

Now what?
Tooling!
#A11yTo Conf 2018

Extensions for SC 1.3.4
? Adds icons to form inputs with @autocomplete
? Limited set of form inputs (Proof of concept)
? Confirm which inputs are included in the form
#A11yTo Conf 2018

A developer��s challenge �C and there will be a
prize!
Calling all hackers, tinkerers, and experimenters��

John Foliot
Principal Accessibility Strategist
John.foliot@deque.com
Thank You
#A11yTo Conf 2018

�ݺ�ߣ

1.3.5 more than autocomplete

More Related Content

1.3.5 more than autocomplete