vasiliy seleznev - improve your code to make the world a better place

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