Copyright © 2016 Magento, Inc.; All Rights Reserved. Magento® and its respective logos are trademarks, service marks, registered trademarks, or registered service marks of Magento, Inc. and its affiliates. Other trademarks or service marks contained in this presentation are the property of the respective companies with which they are associated. This presentation is for informational and discussion purposes only and should not be construed as a commitment of Magento, Inc. or of any of its affiliates. While we attempt to ensure the accuracy, completeness and adequacy of this presentation, neither Magento, Inc. nor any of its affiliates are responsible for any errors or will be liable for the use of, or reliance upon, this presentation or any of the information contained in it. Unauthorized use, disclosure or dissemination of this information is expressly prohibited.
Magento 2
Snr Development ManagerVasiliy Seleznev
Improve your code to make the World a better place
Magento 2 Accessibility
Allows people with disabilities to shop on the Web
who.int/disabilities/world_report/2011/report/en/
stakeholders.ofcom.org.uk/binaries/research/telecoms-research/disabled/Disabled_consumers_report.pdf
stakeholders.ofcom.org.uk/binaries/research/telecoms-research/disabled/Disabled_consumers_report.pdf
stakeholders.ofcom.org.uk/binaries/research/telecoms-research/disabled/Disabled_consumers_report.pdf
WCAG 2.0 AA CompliantIS
and will be officially certified
5% Conversion Rate Increase
Potential Legal Issues (especially when going international)
Moral aspect – make the World a better place for everyone
Why do we care about Accessibility?
Tabindexglobal attribute, integer indicating if the element can take input focus, if it should participate to sequential keyboard navigation.
Usage:
‘Skip to Content’ enables the
users to skip non-essential
content and navigate to main
content.
Values: int.
Tabindex
Inside a widget we prevent the user
to navigate through every link that
points to the same location.
For example, Product Name and
Product Image point to the same
location but only Product Name
participates to sequential keyboard
navigation.
Tabindex
Elements that do not participate
in sequential keyboard
navigation do so with tabindex
attribute.
Aria-requiredis used to indicate that user input is required on an element before a form can be submitted.
Usage:
Input field that must have
content from user has
aria-required attribute to
make the screen reader
announce required field.
Values: bool. Default: false
Aria-required
Inputs for Product Color Swatches,
Product Sizes and
User Rating widget have aria-
required.
A screen reader will announce
required field.
Aria-haspopupindicates whether this element may display a pop-up window (menu or flyout) when clicked.
Usage:
Categories menu has aria-popup
attribute that notifies a screen
reader whether its items have a
popup.
Values: bool. Default: false
Aria-haspopup
Storefront Catalog search
widget has aria-popup attribute
that notifies a screen reader
whether it has a popup.
Role
Usage:
allows the author to annotate markup languages with machine-extractable semantic information about the purpose of an element.
Values: list of wai-roles
‘Add to Wish’ List and ‘Add to Compare’
buttons have native semantics of the link
and it is overridden by role “button”.
Menu item with native semantics of the
link is overridden by role “menuitem”.
Native semantics of the unordered list is
overridden by role “menu”
Role
Aria-labelis used to define a string that labels the current element. Used in cases where a text label is not visible on the screen.
Usage:
‘Add to Wish’ List and ‘Add to Compare’
buttons have no textual presentation but
have aria-label attributes with names of
those buttons.
Values: string
Aria-label
Product preview widget has arrows
without visible text labels and has
aria-label attribute that labels them
for a screen reader.
Aria-labelledbyattribute contains the element IDs of labels in objects such as input elements, widgets, and groups. The attribute establishes relationships between objects and their labels.
Usage:
Contents of ‘Sign in’ form
marked by aria-labelleby
attribute to set relationship
between the caption and
the form.
Values: list of element IDs (space-separated)
Aria-valuenowattribute defines the current value for a range element
element may start with a given value, which can be decreased until a min or max value, defined by these properties, is reached.
aria-valueminaria-valuemax
Usage:
During Magento installation
the progress bar has the
attributes to notify the user
about current progress.
also
Values: decimal number
Aria-controlsIdentifies the element (or elements) whose contents or presence are controlled by the current element.
Usage:
Tabs are connected to the
correspondent content and
linked by aria-controls
attribute.
Values: ID reference
Aria-expandedindicates whether the element, or another grouping element it controls, is currently expanded or collapsed (a portion of a tree, collapsible regions).
Usage:
Dropdown Menu and
Collapsible block notify the
user about whether its
content is expanded or
collapsed
Values: bool. Default: undefined
Aria-hiddenindicates that the element and all of its descendants are not visible or perceivable to any user
Usage:
Account dropdown and Categories
menu notify the user about the state of
its descendants.
Values: bool. Default: false
Aria-invalidindicates the entered value does not conform to the format expected by the application.
Usage:
Inputs for Product Color Swatches and
Product Sizes initialy have aria-invalid set
to true unless uses selects a color.
Values: token, bool. Default: false
Aria-busy
Usage:
indicates whether an element, and its subtree, are currently being updated.
Loaders have the attribute to notify
the user.
Values: bool. Default: undefined
We encourage community and partners to build accessible extensions and themes
• ARIA in HTML. W3C Working Draft 10 March 2016 - https://www.w3.org/TR/html-aria/
• Using WAI-ARIA in HTML. W3C Editor's Draft 04 May 2016- http://rawgit.com/w3c/aria-in-html/master/index.html
• WHO: World report on disability - http://who.int/disabilities/world_report/2011/report/en/
• Ofcom: Disabled consumers’ ownership of communications services-
http://stakeholders.ofcom.org.uk/binaries/research/telecoms-research/disabled/Disabled_consumers_report.pdf
Sources
Q&AMagento 2 Accessibility
