CS代写 Accessibility Part 2

Accessibility Part 2
Presented by

2. Operable

Copyright By PowCoder代写 加微信 powcoder

Components and navigation must be operable (the interface cannot require interaction that a user cannot perform).

Page Navigation
Not everyone who interacts with a webpage will prefer to use a mouse or a touch device. It’s important that all page actions support keyboard interactions:
Arrow keys and Space to jump down the page
Tab and Shift+Tab to jump between interactive elements Enter and Arrow keys to interact with the element
Buttons need to support click and tap as well as the Enter and Space key.
Select dropdowns need to support arrow keys to change the selected item and support Enter and Escape.

Don’t set keyboard traps
Tabbing from the top of the page should hit every interactive element and after the last interactive element, it should cycle to the top. This also means showing the focus outline on every element, at least for keyboard users.
{
e.preventDefault()
}}>Trap
Unreachable

Let’s look at some interactive elements

Forms and form elements should be marked up correctly
Use standard HTML elements (buttons, inputs, textareas) over messing around with div’s to achieve a particular style. Using standard HTML markup makes it a lot easier for browsers to support operability and for people to understand. It’s also important to add appropriate attributes. This will be expanded upon in the next lecture or skip ahead and read the spec on MDN (e.g. inputs).

If there’s repeated content, use a skip link to bypass it.
.skipLink {
position: absolute;
z-index: 100;
display: block;
background: white;
overflow: hidden;
white-space: nowrap;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
width: 1px;
margin: -1px;
.skipLink:focus, .skipLink:active {
overflow: initial;
white-space: initial;
clip: initial;
height: initial;
width: initial;
margin: initial;
Skip over
carousel

Introducing ARIA
HTML is quite limited as it was never designed with web applications in mind and so, was never built for more complex UIs.
ARIA is a series of additional attributes to supplement HTML. It is not intended to replace HTML and it should be used sparingly and thoughtfully on top of HTML tags and roles.
Read more about ARIA attributes here.

With ARIA, you can add labels for icon-only buttons
aria-label=”Show menu”

You can add state for custom components that have no native HTML equivalent.
Many attributes are only valid on particular roles.
role=”switch”
aria-checked={true}
Accept cookies

You can define modal takeovers. This only adds markup: in many cases, you need to add JS to implement it.