Accessibility

WebAIM's WCAG 2.0 Checklist 1.4.4

Resize Text - The page is readable and functional when the text size is doubled

WebAIM's WCAG 2.0 Checklist 2.4.10

Section Headings: Beyond providing an overall document structure, individual sections of content are designated using headings, where appropriate.

setAttribute

Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.

WebAIM's WCAG 2.0 Checklist 1.1

Text Alternatives: provide text alternatives for any non-text content

Focus

The control on the computer screen that receives input from the keyboard and from the clipboard when you paste

<label for="">

The id of a labelable form-related element in the same document as the label element. The first such element in the document with an ID matching the value of the for attribute is the labeled control for this label element.

WebAIM's WCAG 2.0 Checklist 1.4.1

Use of Color - Color is not used as the sole method of conveying content or distinguishing visual elements - color along is not used to distinguish links from surrounding text unless the luminescence contrast between the link and the surrounding text is at least 3:1 and an additional differentiation (e.g., it becomes underlined) is provided when a link is hovered over or receives focus

tristate

Value representing true or false, with an intermediate "mixed" value. The default value for this value type is false unless otherwise specified

WACG

Web Content Accessibility Guidelines 2.0

aria-labelledby value

a space-separated list of element IDs

aria-owns

an element, which is separate in the DOM, should be treated as a child of the current element, or rearrange existing child elements into a different order

focusOptions

an object with the preventScroll property

aria-live="assertive"

assistive technologies will immediately notify the user, and could potentially clear the speech queue of previous updates.

aria-live="polite"

assistive technologies will notify users of updates but generally do not interrupt the current task, and updates take low priority

implicitly focusable

automatically in the tab order and built-in keyboard event handling

aria-labelledby

contains the element IDs of labels in objects such as input elements, widgets, and groups. The attribute establishes relationships between objects and their labels. Assistive technology, such as screen readers, use this attribute to catalog the objects in a document so that users can navigate between them. Without an element ID, the assistive technology cannot catalog the object.

aria-pressed="true"

element is pressed

aria-relevant="additions"

element nodes are added to the accessibility tree within a live region

HTML.focus() syntax

element.focus(); element.focus(focusOption);

HTMLElement.focus() mousedown event handler

event.preventDefault() must be called to keep the focus from leaving the HTMLElement

tabindex="0"

in the natural tab order can be programmatically focused

aria-pressed="mixed"

indicates a mixed mode value for a tri-state toggle button

aria-expanded

indicates state of a collapsible element

HTMLElement.focus()

method sets focus on the specified element, if it can be focused.

tabindex="-1"

not in the natural tab order can be programmatically focused with focus() method

text alternative

only used when there's no need for visual labels

activeElement

read-only property of the Document and ShadowRoot interfaces returns the Element within the DOM or shadow DOM tree that currently has focus. This property is inherited from the DocumentOrShadowRoot mixin.

<label>

represents a caption for an item in a user interface

tree widget

role="" is set to tree for <ul> and treeitem for <li> along with aria-expanded elements to express the navigate

aria-posinset

short for position inset, can be used to specify the position of the element in the set

role

shorthand for a particular UI pattern

implicit semantic meaning

standard native HTML elements that are automatically recognized by browsers and were predictably on a variety of platforms

aria-label value

string

skip links

technique to implement a hidden link that allows keyboard and switch device users to jump straight to page content instead of tabbing through all navigation

aria-relevant="text"

text content or a text alternative is added to any descendant in the accessibility tree of the live region

aria-relevant="removals"

text content, a text alternative, or an element node within the live region is removed from the accessibility tree

aria-pressed="undefined" (default)

the element does not support being pressed

aria-state="false"

the element supports being pressed but is not currently pressed

Three states of aria-checked

true, false, mixed

Assistive technology

umbrella term for a broad range of devices, software and tools that help any person with a disability complete a task.

Visible labels

used by all users to associate meaning with an element

aria-checked="";

used for checkable interactive controls. If an element uses role="checkbox" it is required for that element to also have a aria-checked attribute that exposes the checkbox's state to assistive technology.

aria-controls

used to associate a control with the regions that it controls. Regions are identified just like an id in a div, and multiple regions can be associated with a control using a space, e.g. aria-controls="myRegionID1 myRegionsID2".

aria-label

used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use aria-labelledby instead.

aria-describedby

used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them. This is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need.

aria-setsize

used to specify the actual size of a set

roving focus

works by setting tabindex="-1" for all child and tabindex="0" on the next item

max number for tabindex

0, bad practice to do higher

How to create a custom focus indicator

:focus, outline, :hover, ::before

setAttribute value parameter

A DOMString containing the value to assign to the attribute. Any non-string value specified is converted automatically into a string.

setAttribute name parameter

A DOMString specifying the name of the attribute whose value is to be set. The attribute name is automatically converted to all lower-case when setAttribute() is called on an HTML element in an HTML document.

aria-atomic="false" (default)

Assistive technologies will present only the changed node or nodes.

aria-atomic="true"

Assistive technologies will present the entire changed region as a whole, including the author-defined label if one exists.

preventScroll

Boolean value: If false, the method will scroll the element into the visible area of the browser window. If true, the method will NOT scroll the element into the visible area of the browser window.

WebAIM's WCAG 2.0 Checklist 2.4.1

Bypass Blocks: - A link is provided to skip navigation and other page elements that are repeated across web pages. - If a page has a proper heading structure, this may be considered sufficient technique instead of a "skip to main content" link. Note that navigating by headings is not yet supported in all browsers. - If a page uses frames and the frames are appropriately titled, this is a sufficient technique for bypassing individual frames.

WebAIM's WCAG 2.0 Checklist 1.4.6

Contrast (Enhanced) - Text and images of text have a contrast ratio of at least 7:1 - Large text (over 18 point or 14 point bold) has a contrast ratio of at least 4.5:1

WebAIM's WCAG 2.0 Checklist 1.4.3

Contrast (Minimum) - Text and iamges of text have a contrast ratio of at least 4.5:1 - Large text (over 18 point or 14 point bold) has a contrast ratio of at least 3:1

<label> accessibility concerns

Don't place interactive elements such as anchors or buttons inside of a label. Doing so will make it difficult for people to activate the form input associated with the label.

setAttribute syntax

Element.setAttribute(name, value);

Landmarks

Elements that help find the semantics of a region of the page rather than of a single interactive element

aria-relevant="all"

Equivalent to the combination of all values, "additions removals text"

aria-relevant="additions text"

Equivalent to the combination of values, "addition text"

What do ARIA attributes always need to have?

Explicit values

WebAIM's WCAG 2.0 Checklist 2.4.7

Focus Visible: - It is visually apparent which page element has the current keyboard focus (i.e., as you tab through the page, you can see where you are)

WebAIM's WCAG 2.0 Checklist 2.4.6

Headings and Labels - Page headings and labels for form and interactive controls are informative. Avoid duplicating heading (e.g. "More Details") or label text (e.g., "First Name") unless the structure provides adequate differentiation between them.

aria-live

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

aria-live="off" (default)

Indicates that updates to the region should not be presented to the user unless the used is currently focused on that region.

aria-pressed (state)

Indicates the current "pressed" state of toggle buttons

aria-relevant

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified

aria-atomic

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

WebAIM's WCAG 2.0 Checklist 1.3.1

Info and relationships - Semantic markup is used to designate headings, lists, emphasized or special text, etc. Semantic markup is used appropriately. - Tables are used for tabular data. Where necessary, data cells are associated with their headers. Data table captions and summaries are used where appropriate. - Text labels are associated with form input elements. Related form elements are grouped with fieldset/legend.

What elements should have a tab index?

Interactive elements such as button, dropdown menu, text input

WebAIM's WCAG 2.0 Checklist 2.1.1

Keyboard (Level A) All page functionality is available using the keyboard, unless the functionality cannot be accomplished in any known way using a keyboard (e.g., free hand drawing). Page-specified shortcut keys and accesskeys (accesskey should typically be avoided) do not conflict with existing browser and screen reader shortcuts.

WebAIM's WCAG 2.0 Checklist 2.4.9

Link Purpose (Link Only) - The purpose of each link (or form image button or image map hotspot) can be determined from the link text alone. - There are no links (or form image buttons) with the same text that go to different locations.

WebAIM's WCAG 2.0 Checklist 1.3.2

Meaningful Sequence: The reading and navigation order (determined by code order) is logical and intuitive

How should tab order be adjusted past tabindex?

Move it up in the DOM

WebAIM's WCAG 2.0 Checklist 4.1.2

Name, Role, Value (Level A) Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

WebAIM's WCAG 2.0 Checklist 2.4

Navigable: Provide ways to help users navigate, find content, and determine where they are

WebAIM's WCAG 2.0 Checklist 1.1.1

Non-text Content (Level A) All images, form image buttons, and image map hot spots have appropriate, equivalent alternative text. Images that do not convey content, are decorative, or contain content that is already conveyed in text are given null alt text (alt="") or implemented as CSS backgrounds. All linked images have descriptive alternative text. Equivalent alternatives to complex images are provided in context or on a separate (linked and/or referenced via longdesc) page. Form buttons have a descriptive value. Form inputs have associated text labels. Embedded multimedia is identified via accessible text. Frames are appropriately titled.

WebAIM's WCAG 2.0 Checklist 2

Operable

WebAIM's WCAG 2.0 Checklist 2.4.2

Page Titled - The web page has a descriptive and informative page title.

POUR

Perceivable Operable Understandable Robust