Accessibility

Web pages and applications should be accessible to all users,
including those with visual, motor, hearing, and cognitive impairments.
Using HTML, CSS, JavaScript, you'll be asked to show you can integrate
accessibility best practices into your web pages and applications by:

Using a logical tab order for tabbed navigation
Using skip navigation links to bypass navbars and asides
Avoiding hidden content on the page that impedes tab navigation
Using heading tags that provide a logical page structure
Using text alternatives to visual content, such as alt, <label>, aria-label, and aria-labelledby
Applying color contrast to all elements and following accessibility best practices
Sending timely alerts for urgent messages using aria-live
Using semantic markup to keep content and presentation separate when appropriate

Focus

Focus determines where keyboard events go in the page at any given moment.
Ensuring that you design your page with a logical tab order is an important step.
There's generally no need to focus something if the user can't interact with it.

Keyboard Accessible: Make all functionality available from a keyboard

Keyboard
Meaningful Sequence
airline site mockup page

using only keyboard input, when you successfully complete the form with
no input errors and activate the Search button, the form will simply clear
and reset.
reading and navigation order, as determined by code order, should be
logical and intuitive.
should prevent the panel from gaining focus when it's off screen, and only
allow it to be focused when the user can interact with it.
- document.activeElement from the console to figure out which element
  is currently focused.
- Once you know which off screen element is being focused, you can set it
  to display: none or visibility: hidden, and then set it back
  to display: block or visibility: visible before showing it to the user.
use the tabindex HTML attribute to explicitly set an element's (restrict it
to custom interactive controls) tab position
The element can be focused by pressing the Tab key, and the element can
be focused by calling its focus() method
- tabindex="0": Inserts an element into the natural tab order.
- tabindex="-1": Removes an element from the natural tab order, but the
  element can still be focused by calling its focus() method
- Using a tabindex greater than 0 is considered an anti-pattern.
- Managing focus at the page level
  - identify the selected content area, give it a tabindex of -1 so that it
    doesn't appear in the natural tab order, and call its focus method
- Managing focus in components
- Modals and keyboard traps
  - keyboard focus should never be locked or trapped at one particular page element.

Accessible Rich Internet Applications (ARIA) Authoring Practices guide
No Keyboard Trap
Sample codebase

Semantics Build-in

GUI affordances are thus specifically designed to be unambiguous:
buttons, check boxes, and scroll bars are meant to convey their usage with
as little training as possible.

This non-visual exposure of an affordance's use is called its semantics.

screen reader tells you some information about each interface element.

The element's role or type, if it is specified (it should be).
The element's name, if it has one (it should).
The element's value, if it has one (it may or may not).
The element's state, e.g., whether it is enabled or disabled (if applicable).

Just as the rendering engine uses the native code to construct a
visual interface, the screen reader uses the metadata in the DOM
nodes to construct an accessible version

Blind people use VoiceOver
ChromeVox lite demo page

The accessibility tree is what most assistive technologies interact with.

making sure that the important elements in the page have the correct
accessible roles, states, and properties, and that we specify
accessible names and descriptions.
Using a native element also has the benefit of taking care of keyboard interactions for us
screen readers will announce an element's role, name, state, and value
providing text alternatives for any non-text content is
the very first item on the WebAIM checklist.

To associate a label with an element, either

// Place the input element inside a label element
<label>
  <input type="checkbox">Receive promotional offers?
</label>

// Use the label's for attribute and refer to the element's id
<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>

Text Alternatives for Images

alt allows you to specify a simple string to be used
any time the image isn't available
alt differs from title, or any type of caption, in
that it is only used if the image is not available.
all images should have an alt attribute, but they need not all have text.
Important images should have descriptive alt text that succinctly describes
what the image is, while decorative images should have empty alt attributes
— that is, alt="".

Navigating content

An appropriate heading structure is more important than ever.[DOM order mater]
the heading levels are nested to indicate parent-child relationships among content blocks.

ARIA (Accessible Rich Internet Applications)

Using ARIA attributes, can give the element the missing information
so the screen reader can properly interpret it.

ARIA doesn't augment any of the element's inherent behavior; it won't make
the element focusable or give it keyboard event listeners.

ARIA can add extra label and description text that is only exposed to
assistive technology APIs
ARIA can express semantic relationships between elements that extend
the standard parent/child connection
ARIA can make parts of the page "live", so they immediately inform
assistive technology when they change.

ARIA in HTML
ARIA Authoring Practices document
ARIA guideline
aria-label allows us to specify a string to be used as the accessible label.
This overrides any other native labeling mechanism.
aria-labelledby allows us to specify the ID of another element in the DOM
as an element's label.
aria-labelledby overrides all other name sources for an element(like aria-label and label)

Relationships Attributes:
- aria-owns
- aria-activedescendant
- aria-labelledby
- aria-describedby
- aria-controls
- aria-posinset
- aria-setsize

Hide Content

Do not use this CSS if you want the content to be read by a screen reader:
visibility: hidden
display: none
width:0px, height:0px or other 0 pixel sizing techniques

Visually hiding content that will be read by a screen reader:
text-indent: -10000px;
hidden

.hidden {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

<div class="hidden">This text is hidden.</div>

<label for="password">Password *</label>
<input id="password" type="password" aria-describedby="pw-help">
<div id="pw-help" hidden>password must be more than 8 digits</div>

Techniques for hiding text