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.

• Semantic markup is used to designate headings
• heading structure as a technique for bypassing blocks of content

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