The A11Y Project

Myth: ARIA Has Perfect Support

2020-05-13T00:00:00+00:00

Accessible Rich Internet Applications (ARIA) is an extension of HTML. It is a technology that adds roles, states, and properties that are designed to help with the accessibility of websites and web apps.

Background

ARIA works by supplementing, adding, removing, or overriding information the browser uses to communicate with assistive technology. For example, adding aria-hidden="true" to a HTML element will tell the browser not to report the element, or any of its children to assistive technology.

aria-hidden="true" can be useful for situations where you want to remove something that might normally get reported, such as a SVG icon inside a button. If the button already has a text label, removing the icon helps make sure that the experience is easy to understand by removing unnecessary information that would otherwise be exposed by the decorative icon:

<button type="button">
  <svg aria-hidden="true" focusable="false">
    <!-- SVG code -->
  </svg>
  Save
</button>

ARIA can also be used for interactive controls such as an accordions, tabs, and modals. A thoughtful, skilled application of ARIA can help communicate things like if an accordion panel is in an expanded state, which tab’s corresponding tab panel is currently visible, or what is and is not modal content.

Nearly all ARIA should be inserted and updated dynamically via JavaScript. Very little of it is “hard coded” into the HTML it is manipulating.

There are many ways to add ARIA to your website or web app using JavaScript. You can use “vanilla” JavaScript, or specialized frameworks such as Ember, Angular, React, Vue, Svelte, etc. ARIA is compatible with all these frameworks because it is a standard they observe.

Compatibility issues

All web technology has compatibility issues. Compatibility issues are created when there is an interaction between:

The kind of operating system,
The version of the operating system,
The kind of browser running on the operating system,
The version of browser running on the operating system,
Any modifications a person has made to any of the preceding.

Compatibility issues means there might be discrepancies in how web technology is understood and shown to the person using it. In many cases, it won’t be shown at all.

ARIA is a web technology. In addition to the issues listed previously, it can also have compatibility issues that come from:

The kind of assistive technology being used,
The version of the assistive technology being used.
Any modifications a person has made.

Just because you write code that uses ARIA does not mean the ARIA declarations will work as intended. This is the same as expecting modern JavaScript to work on an older browser such as Internet Explorer 11.

This problem is further complicated in situations where parts of your website or web app use ARIA that relies on different parts of your website or web app that also use ARIA. It can also be affected by newer ARIA features interacting with older features.

Another thing to keep in mind is that many people who use assistive technology specifically use older versions of it. This helps to ensure compatibility issues are kept to a minimum.

Unlike many other other forms of compatibility issues, assistive technology-related compatibility can completely lock a person out of a digital experience, instead of just annoying them.

What you can do about it

Before you write any code

Check if a complicated interaction can be broken down into simpler parts.
Observe the First Rule of ARIA: If there is an existing, relevant HTML element, use that instead.
Familiarize yourself with the other four rules of ARIA.

When writing code

If you have to write ARIA, check its known support.
Use an automated accessibility analysis tool such as WAVE, Axe, or ARC to check for common implementation issues. Be sure to run the analysis with all relevant states (expanded, collapsed, disabled, etc.) triggered.

After you write code

Verify that the ARIA you wrote works as intended with a few different kinds of assistive technology.
Verify that the ARIA you wrote makes sense to daily assistive technology users.

Should you avoid ARIA all together?

No. When used responsibly, ARIA helps people who use assistive technology understand the same experiences people browsing without assistive technology do.

ARIA should be the last tool you pull out of your toolbox, not your first.

Operating System and Browser Accessibility Display Modes

2020-01-23T00:00:00+00:00

Most computers, laptops, tablets, smartphones, and web browsers have specialized tools to help people read and take action on the content they display. Some of these tools are display modes, which are pre-defined visual configurations you can tell your device to use.

Five such modes are Dark Mode, Increased Contrast Mode, Inverted Colors Mode, Reduced Motion Mode, and High Contrast Mode. Following is an explanation of each of these mode, who can benefit from it, how to enable it on your device or browser (if supported), and how to work with it in code.

Dark Mode

The User Interfaces (UI) that make up most Operating Systems (OSes) traditionally use lighter colors like white and light grays. Dark Mode is a toggle that instructs this UI to use darker colors, typically black and dark grays.

It is helpful for:

People who want to reduce eye strain in a low or no light environment,
and/or who have certain low vision or photosensitive conditions.

An example of a situation where Dark Mode could be useful is checking your phone in bed with the lights off.

What it affects

Dark Mode will update all UI of the OS that supports it. Most apps developed by the company that creates the operating system will also support Dark Mode. Third party apps, websites, and web apps support Dark Mode only if the people who write the necessary code to enable it.

daverupert.com has support for Dark Mode.

How to enable it

Assumes the latest version of each Operating System or browser.

Android

Go to Settings.
Go to Display.
Set the Dark Theme toggle to the on position.

iOS

Go to Settings.
Go to Display and Brightness.
Select the Dark option for Appearance.

macOS

Go to System Preferences.
Go to General.
Select the Dark option for Appearance.

Windows

Go to Settings.
Go to Personalization.
Go to Colors.
Select the Dark option for Choose your default app mode.

How to target it in code

You can use the prefers-color-scheme media feature to to target Dark Mode in CSS. In the following example, we set our web page to default to black text on a white background, but update to be white text on a black background when Dark Mode is enabled:

body {
  background-color: #ffffff;
  color: #000000;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000000;
    color: #ffffff;
  }
}

Filtered Display Mode

These modes are used to adjust the colors that come out of a device’s display. There are two types of Filtered Display Mode: Night Mode and Filtered Colors Mode.

Night Mode

One mode is commonly known as Night Mode. It swaps the intense blue light frequencies with warmer, dimmer colors when activated.

Some people report that removing these frequencies at night helps them sleep because the blue light frequencies mimic the light of the sun. Other people find the colors more relaxing and cause less strain on their eyes. However, it is important to note that the scientific benefits of this kind of mode are still being researched.

It may be helpful for:

People who want to reduce eye strain,
and/or who have difficulty sleeping.

An example of a situation where Night Mode could be useful is writing late at night.

What it affects

Night Mode will update all UI of the OS that supports it.

How to enable it

Assumes the latest version of each Operating System or browser.

Android

Go to Settings.
Go to Display.
Set the Night Light toggle to the on position.

iOS

Go to Settings.
Go to Display and Brightness.
Go to Night Shift.
Set the Manually Enable Until Tomorrow toggle to the on position.

macOS

Go to System Preferences.
Go to Displays.
Go to the Night Shift tab.
Check the Turn on until tomorrow checkbox.

Windows

Go to Settings.
Go to System.
Go to Display.
Set the Night Light toggle to the on position.

Other alternatives

f.lux is a third party program available for Windows, Linux, iOS, macOS, and Android.

Filtered Colors Mode

Filtered Colors Mode changes the colors output by the device’s display. Colors can be shifted to use different palettes or removed entirely.

It is helpful for:

People who are colorblind,
and/or who have difficulty reading text on the display,
and/or who want to reduce eye strain.

An example of a situation where Night Mode could be useful is writing late at night.

What it affects

Filtered Colors Mode will update all UI of the OS that supports it.

iOS with and without grayscale Filtered Colors Mode activated.

How to enable it

Assumes the latest version of each Operating System or browser.

Android

Go to Settings.
Go to Accessibility.
Go to Color Correction.
Set the Use color correction toggle to the on position.
Select a color filter option from the list that appears.

iOS

Go to Settings.
Go to Accessibility.
Go to Display & Text Size.
Go to Color Filters.
Set the Color Filters toggle to the on position.
Select a color filter option from the list that appears.

macOS

Go to System Preferences.
Go to Accessibility.
Go to Display.
Go to the Color Filters tab.
Check the Enable Color Filters checkbox.
Select a color filter option from the select box.

Windows

Go to Settings.
Go to Ease of Access.
Go to Color Filters.
Set the Turn on color filters toggle to the on position.
Select a color filter option from the select box.

Increased Contrast Mode

This mode is only available on macOS and iOS. It will increase the difference in color values between the gray colors used for the OS visuals, as well as drawing more obvious borders between different UI elements.

This is helpful for:

People experiencing low vision conditions,
and/or who have lower quality displays,
and/or people who may need the difference between different parts of the OS visuals to be more obvious.

An example of one of these conditions could be vision-related issues caused by Glaucoma. Here, the increased contrast and borders may help a person who has blurry central vision and a loss of peripheral vision understand the boundaries of different parts of the interface.

What it affects

Increased Contrast Mode will update all UI elements for macOS and iOS. Most apps developed by Apple will also support this mode. Third party apps that use Apple’s interface library will also support this mode, but custom, nonstandard UI elements will not be supported. Websites and web apps do not support this mode.

Preview.app comparing regular and Increased Contrast Mode.

How to enable it

Assumes the latest version of each Operating System or browser.

iOS

Go to Settings.
Go to Accessibility.
Go to Display & Text Size.
Set the Increase Contrast toggle to the on position.

macOS

Go to System Preferences.
Go to Accessibility.
Go to Display.
Check Increase contrast.

Inverted Colors Mode

When Inverted Colors Mode is activated, the color of every pixel on the screen is reversed. Black becomes white, red becomes turquoise, green becomes purple, etc.

Because it affects all content displayed on the screen, Inverted Colors Mode can be very helpful in situations where a light-colored interface does not provide Dark Mode support. Here, Inverted Colors Mode can force a bright UI into kind of jury-rigged Dark Mode. Keep in mind that the opposite also applies: A dark UI will turn light if Inverted Colors Mode is active.

This is helpful for:

People who want to reduce eye strain in a low or no light environment,
and/or who have certain low vision or photosensitive conditions.

An example of one of these conditions could be someone avoiding triggering a migraine by using Inverted Colors Mode to turn a brightly-colored application they need to use for work dark.

What it affects

Inverted Colors Mode affects all content displayed on the screen: Operating System UI, first and third party apps, and web content.

Safari will automatically invert images when Inverted Color Mode is activate.

How to enable it

Assumes the latest version of each Operating System or browser.

Android

Go to Settings.
Go to System.
Go to Accessibility.
Set the Color Inversion toggle to the on position.

iOS

Go to Settings.
Go to Accessibility.
Go to Display & Text Size.
Set the Smart Invert or Classic Invert toggle to the on position.

macOS

Go to System Preferences.
Go to Accessibility.
Go to Display.
Check Invert colors.

Windows

Go to Settings.
Go to Ease of Access.
Go to Magnifier.
Set the Invert colors toggle to the on position.
Set the Magnifier toggle to the on position.

How to target it in code

You can use the inverted-colors media feature to target Inverted Colors Mode in CSS. In the following example, we invert images and video when Inverted Colors Mode is active. This keeps them looking the way they were intended, while allowing the rest of the UI to change:

@media (inverted-colors: inverted) {
  img,
  video {
    filter: invert(100%);
  }
}

Reader Mode

This mode is a feature found in most web browsers. When activated, it takes the content identified as the primary content of a web page and converts it into a format that is easier to read.

Part of this easier reading experience involves removing most, if not all the surrounding content. This includes things like headers, footers, sidebars, comments, etc.

Many Reader Modes also allow the person using it to configure how this content is presented, including preferences for things like background color, text color, font, line height, and line spacing.

This is helpful for:

People who have certain low vision or photosensitive conditions,
and/or people who have motor disabilities,
and/or who have a cognitive disability,
and/or who want a pleasant reading experience.

An example of one of these conditions could be someone who has Attention-Deficit/Hyperactivity Disorder (ADHD) using Reader Mode to remove distracting animated sidebar features from a news article.

What it affects

Reader Mode is only available in certain web browsers, and may not work on every web page you visit. Each version has its own set of specialized checks it uses to determine what the main content of the page is, and if it can be presented.

Firefox’s Reader Mode applied to a blog post.

How to enable it

Assumes the latest version of each Operating System or browser.

Android Chrome

Install a reading app.

Desktop Chrome

Install a reader view extension.

Edge

In the browser’s Address Bar, activate the Enter Immersive Reader button.

Firefox

In the browser’s Address Bar, activate the Toggle reader view button.

Internet Explorer 11 (Windows 8.1 and up)

In the browser’s Address Bar, activate the Read button.

iOS Safari

In the browser’s Address Bar, activate the Text Resizing button.
Select the Show Reader View option.

macOS Safari

In the browser’s Address Bar, activate the Show Reader View button.

How to target it in code

You can use a combination of HTML elements and attributes, as well as Schema.org microdata to semantically describe the main content of your page. Front end developer Mandy Michael explains this in more detail in her article, Building websites for Safari Reader Mode and other reading apps.

Reduced Motion Mode

With this mode, a person can express a preference for animation to be slowed down, or removed entirely.

It is helpful for:

People who have certain photosensitive conditions,
and/or who have a cognitive or vestibular disability,
and/or who want a distraction-free reading experience.

An example of one of these conditions could be someone avoiding animations that trigger vertigo.

What it affects

Reduced Motion mode affect all OS animations that support it. Most apps developed by the company that creates the operating system will also support Reduced Motion mode. Third party apps, websites, and web apps support this mode only if the people who make it elect to use the special code required to enable it.

How to enable it

Assumes the latest version of each Operating System or browser.

Android

Go to Settings.
Go to System.
Go to Accessibility.
Set the Remove animations toggle to the on position.

iOS

Go to Settings.
Go to Accessibility.
Go to Motion.
Set the Reduce Motion toggle to the on position.

macOS

Go to System Preferences.
Go to Accessibility.
Go to Display.
Check Reduce motion.

Windows

Go to Settings.
Go to Ease of Access.
Go to Display.
Set the Show animations in Windows toggle to the on position.

Web browsers

It is also possible to force most browser-based animations to stop playing via installing specialized browser extensions or JavaScript bookmarklets. Front end developer Scott Vinkle’s Togglific is one such way to go about doing this.

How to target it in code

You can use the prefers-reduced-motion media feature to to target Reduced Motion Mode in CSS. In the following example, we remove CSS animation when Reduced Motion Mode is active:

.my-animated-component {
  animation-duration: 250ms;
  animation-iteration-count: infinite;
  animation-name: jump-and-bounce;
}

@media (prefers-reduced-motion: reduce) {
  .my-animated-component {
    animation: none;
  }
}

High Contrast Mode

This mode prioritizes legibility of content above all else. When activated, it maximizes the contrast between OS content and the background it is placed on top of, even at the expense of the appearance of the UI. High Contrast Mode comes with preset color themes, and also allows you to create your own. This allows someone to select combinations of colors that work best for them.

It is helpful for:

People who have low vision or photosensitive conditions,
and/or who are using their device in an environment with very bright light and glare.

An example of one of these conditions could be someone with cataracts who wants to stay up to date on social media.

High Contrast Mode #1 theme.

What it affects

High Contrast Mode support is a little bit complicated. It is only available for Windows (versions 7 and up). It affects all UI elements of Windows, as well as apps developed by Microsoft. It will also work for most third party apps.

For web content, High Contrast Mode will only work with Internet Explorer (versions 10 and 11) and Edge (any version) for Windows 7, 8, and 8.1. For Windows 10, High Contrast Mode will work with web content on Internet Explorer and non-Chromium versions of Edge (versions 44.19041 and earlier).

Most websites will have at least partial support for High Contrast Mode, with support depending on how they are coded.

How to enable it

Assumes the latest version of each Operating System or browser.

Windows

Go to Settings.
Go to Ease of Access.
Go to High Contrast.
Select a theme from the Choose a theme dropdown and then activate the Apply button.

How to target it in code

High Contrast Mode will automatically be applied to web content described semantically in HTML. For example, paragraphs of text described using the p element will automatically update when High Contrast Mode is activated. It will also update the same way if you use the a element for links, the button element for actions, the input element for form controls, etc.

In situations where the HTML cannot be modified, High Contrast Mode styling can be tweaked. For Internet Explorer versions 10 and 11, you can use the the -ms-high-contrast media feature in CSS. In these situations, you should use a specialized subset of CSS2 system color keywords, as High Contrast Mode theme colors are dynamic.

Edge does not fully support -ms-high-contrast. Instead, new Chromium-based versions of Edge support the forced-colors media query. Because of this, it is important to test using both Internet Explorer and Edge to make sure your High Contrast Mode styling work looks the way it is intended to.

Multiple modes

It is possible to have more than one display mode active at the same time. For example, a device could be set to have Reduced Motion Mode, Increased Contrast Mode, and Dark Mode all working in coordination. This is by design, as it lets a person make their device work in a way that is easy and comfortable for them to operate.

Quick tip: Creating valid and accessible links

2019-02-15T00:00:00+00:00

The anchor element is often cited as the main building block of the World Wide Web. It is used to create a link to other pages, to anchors within the same page, to other resources (such as a PDF) or to an email address. How can we make sure they are accessible to everyone?

Start with valid HTML

To be a valid link it must have:

an href attribute - the location of the anchor, page or resource
link content - text describing where the link is going, this could be plain text or the alt attribute of an image
opening and closing tags

Write helpful link text

Common unhelpful link texts are ‘click here’, ‘read more’ and ‘link’. These are problematic because when a person using a screen reader is navigating using links alone these will be read out of context. Where would you expect any of those three links to go if you heard them? It’s impossible to know.

Think about restructuring your sentence to remove ‘click here’ or ‘link’ and then surround the meaningful part with the link:

<!-- bad -->
To see our documentation <a href="/README.md">click here</a>.

<!-- better -->
We have made our <a href="/README.md">documentation</a> available.

‘Read more’ can be fixed by including what we will be reading more about:

<!-- bad -->
<a href="/full-article">Read more</a>.

<!-- better -->
<a href="/full-article">Read more - Accessible Landmarks</a>

What about the `title` attribute?

The title attribute is not exposed by all browsers in an accessible way meaning that people using keyboards and touch-only devices will likely never see that information.

“If you want to hide content from mobile and tablet users as well as assistive tech users and keyboard only users, use the title attribute.” - Using the HTML title attribute - The Paciello Group

It is therefore not recommended to use the title attribute on <a> elements. If you do use it don’t double up on the accessible name of the link, this can produce unnecessary duplicate announcements to some screen readers.

Focus state and keyboard

Some developers/designers see the focus outline of links as ugly and remove them. People navigating using the keyboard require this focus state to keep track of where they are. Best practice is to never remove focus outlines but there are accessible solutions to styling, which are set out in the Quick tip: Never remove CSS outlines.

By default an <a> element with an href can be activated by the Enter key. Be mindful to not override this functionality if attaching other custom scripting. Additionally, it is not expected for the Space key to activate links.

When should you use a `button` instead?

If you have an <a> element that has:

an empty or no href attribute
scripting attached via the onclick attribute or listeners

This will probably be triggering an action on the same page, such as opening a menu or toggling content and as such is a much better candidate for the <button> element.

Quick test: Resize text

2018-11-26T00:00:00+00:00

Resize text and make sure everything on the page works. Repeat until you get to 200% zoom. Seems simple? It is.

Essential abilities

Sight: This method tests the visual appearance of content on the page
Interact with content via a pointer: This method tests mouse interactions

If you know of a method that doesn’t require either of these abilities, please update this Quick Test.

Background

People with low vision may need to increase the size of text in order to use the page.

When someone resizes text, any of the following can break the page:

text on the page is no longer readable
content is lost or truncated
interactive elements overlapping each other

The importance is that relative length units (em, rem, %, vw) are used for text.

How to test

Testing is pretty straight forward.

Initial test in multiple browsers
Resize text
Confirm relative font usage
Choose a browser to do further testing in
Resize text
Check everything

Choosing a browser

Testing text-resize needs initial testing in multiple browsers to confirm that relative units are used correctly in order to conform with WCAG Resize Text (Success Criterion 1.4.4).

Testing text-resizing can fail in Chrome but pass in Firefox since text-zoom in Firefox resizes regardless of usage of relative units. Suggested setup is to use Chrome and Firefox in initial testing.

Firefox is an easy browser for testing further:

It makes resizing text really easy
It informs you of the current zoom level
It’s available on all popular Operating Systems

Safari and Chrome work, but not as well:

Ability to resize text is not obvious
Does not display the current zoom level
Safari is only available on macOS

Edge won’t work:

Edge only supports text-only resize in Reading view

Resizing text in Firefox

Go to View > Zoom and select Zoom Text Only
Zoom to 200%
- Ctrl + +
- Ctrl + Scroll Up

Resizing text in Chrome

Copy chrome://settings/fonts to the address bar and then return on your keyboard
Increase the font size to 32px (default is 16px)

Checking everything

After doubling the size of text, verify the following:

All content on the page should still be readable
- Text shouldn’t be too cut off
- Text needed for understanding shouldn’t be truncated
- Text shouldn’t overlap too much
Interactions still work
- Buttons, links, and inputs are still usable with mouse, touch, or similar

Thorough check

Some people might not need to zoom text up to 200%. And there might be a level of zoom below 200% where content doesn’t work.

To do a more thorough job, you should check the page at each of the zoom steps the browser makes to see if there are any odd breakpoints.

Exceptions

Images of text won’t resize
Captions over videos likely won’t resize
Using the incorrect html lang code will result in no text-zoom

Can I zoom everything instead of resizing text only?

Without going too deep into the Success Criterion, it does not require you to use text-only zoom. But I think it’s still a good idea to make sure that pages work well with text-only zoom since some people may want only the text to be bigger.

Practically speaking, I don’t think many people know that text-only resizing is available. And that’s assuming they’re using a browser that supports it. I’d expect most folks that want larger text would use regular browser zooming more often than text-only zooming.

There is even a Success Technique (G142) that says you can pass the Success Criterion by zooming everything.

Quick test: Large touch targets

2018-11-21T00:00:00+00:00

A touch target is the total area a person can click or tap on to activate an interactive element such as a link, input, or button.

Background

Ensuring that interactive elements have sufficiently large touch targets helps people with motor control issues use your website or application. Providing a too-small touch target may make it difficult or impossible for some people to be able to reliably reach the area required to activate the element. Think of it like trying to thread a needle.

The Web Content Accessibility Guidelines (WCAG) specify a minimum size of 44 by 44 CSS pixels for all interactive elements. The exceptions are:

If the interactive element’s functionality can be activated by another element of acceptable size on the same page.
If the interactive element is rendered inline within a block of text, such as a link.
If the interactive element’s size is controlled by the browser or operating system’s UI.
If the interactive element has a design whose presentation requires a certain size or shape.

Only the inline element exception case typically applies to web design. Even then, a recommended larger body type size will help both increase inline touch target size and help accommodate people with low vision.

Small touch targets such as icon buttons can use padding to expand their interactive area without increasing the visible size:

It is also recommended that you add space between large interactive elements, to help prevent people from accidentally clicking or tapping the wrong one.

How to test

To determine the CSS pixel size of an interactive element, use a browser’s Inspector feature to check it’s computed value.

Two common methods to open a browser’s Inspector panel are typing Command/Control + Option + i on your keyboard, or by right clicking on an element on your page and choosing the Inspect option.

If you right click on the interactive element you want to test, it will automatically be highlighted when you choose the Inspect option in the right click menu. For most browsers, this method of selecting an element will also display its CSS pixel height and width:

The inspector also has a Computed panel. It will display the selected element’s height and width values, as well as an alphabetical list of the other computed CSS properties. This can be good for checking how the browser ultimately renders your site’s CSS.

ARIA properties

2018-07-30T00:00:00+00:00

ARIA 1.1 defines multiple “properties” that can be applied to elements. Unlike ARIA states, most properties are likely to stay static when a page is loaded instead of changing with user interaction. Properties are inserted into elements as follows: <element aria-property="value"></element> . Example:

<button aria-haspopup="true"> Options. </button>

A screenreader will announce this button with ‘Options, button menu’ or something similar.

There are 38 properties that can be used in ARIA. They fall into 4 categories as defined by the W3C. The categories are:

Widget Attributes: Properties that give information about user input elements.
Live Region Attributes: Properties that are specific to regions that will update while the page is being viewed.
Drag-and-Drop Attributes: Properties of drag-and-drop input elements.
Relationship Attributes: Properties that give information about elements' relationships to other elements.

Note: ARIA is constantly being updated by the W3C. Read the latest working draft.

The properties are given below, along with their category, brief description, and allowed value lists or type of input allowed.

Property (links to WAI-ARIA 1.1 specs)	Category	Description	Allowed Values (default values bolded)
aria-activedescendant	Relationship attributes	Currently active descendant of a composite widget	String - ID of descendant
aria-atomic	Live region attributes	Indicates whether assistive technologies will present the entire element (or only parts of it) when the element is changed	false, true
aria-autocomplete	Widget attributes	Defines if and how autocomplete suggestions are shown	none, both, inline, list
aria-colcount	Relationship attributes	Defines the total number of columns in a table, grid, or treegrid	integer
aria-colindex	Relationship attributes	Defines an element’s column index or position with respect to the total number of columns within a table, grid, or treegrid	integer
aria-colspan	Relationship attributes	Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid	integer
aria-controls	Relationship attributes	Element(s) controlled by current element	String/list - ID(s) of element(s)
aria-describedby	Relationship attributes	Element(s) that describe the current element	String/list - ID(s) of element(s)
aria-details	Relationship attributes	Identifies the element that provides a detailed, extended description for the object	String/list - ID(s) of element(s)
aria-dropeffect	Drag-and-drop attributes	* DEPRECATED * Defines what functions can be performed when a dragged object is released on the target	none, copy, execute, link, move, popup
aria-errormessage	Widget attributes	Identifies the element that provides an error message for the object	ID reference
aria-flowto	Relationship attributes	Next element(s) in alternate reading order	String/list - ID(s) of element(s)
aria-haspopup	Widget attributes	The element can trigger a popup context menu	false, true
aria-keyshortcuts	Widget attributes	Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element	String
aria-label	Widget attributes	Defines a label for the element (only used when label text not visible on screen)	String
aria-labelledby	Relationship attributes	Element(s) that label the current element	String/list - ID(s) of element(s)
aria-level	Widget attributes	Gives hierarchical level of the element within a structure such as a tree or nested items	Integer greater than or equal to 1
aria-live	Live region attributes	Indicates an element will be updated and gives the type of updates the user can expect	off, assertive, polite
aria-modal	Widget attributes	Indicates whether an element is modal when displayed	false, *true
aria-multiline	Widget attributes	Text box accepts multiple lines of input, not just a single line	false, true
aria-multiselectable	Widget attributes	User can select more than one item in a list	false, true
aria-orientation	Widget attributes	Defines the element orientation	horizontal, vertical
aria-owns	Relationship attributes	Element(s) that are owned by the current element (and not denoted as such by the DOM)	String/list - ID(s) of element(s)
aria-placeholder	Widget attributes	Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value	String
aria-posinset	Relationship attributes	Element’s position in a set of items	Integer
aria-readonly	Widget attributes	Element is not editable but is still readable	false, true
aria-relevant	Live region attributes	Defines what constitutes a update requiring notification in a live region	additions text, additions, all, removals, text
aria-required	Widget attributes	User input is required	false, true
aria-roledescription	Widget attributes	Defines a human-readable description for the role of an element
aria-rowcount	Relationship attributes	Defines the total number of rows in a table, grid, or treegrid	integer
aria-rowindex	Relationship attributes	Defines an element’s row index or position with respect to the total number of rows within a table, grid, or treegrid	integer
aria-rowspan	Relationship attributes	Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid	integer
aria-setsize	Relationship attributes	Number of items in current set	integer
aria-sort	Widget attributes	Gives the direction that items are sorted in a table or grid column	none, ascending, descending, other
aria-valuemax	Widget attributes	Maximum allowed value for a range selector	Number
aria-valuemin	Widget attributes	Minimum allowed value for a range selector	Number
aria-valuenow	Widget attributes	Current value for a range selector	Number (between aria-valuemin and aria-valuemax)
aria-valuetext	Widget attributes	Human readable text alternative to a value for a range selector	String

ARIA states

2018-07-30T00:00:00+00:00

ARIA 1.1 defines multiple “states” that can be applied to elements. States are likely to change as the user interacts with the page. States are inserted into elements as follows: <element aria-state="value"></element> . Example:

<span aria-busy="true">This element is currently being updated. </span>

There are 10 states that can be used in ARIA. They fall into 3 categories as defined by the W3C. The categories are:

Widget attributes: States that give information about user input elements.
Live region attributes: States that are specific to regions that will update while the page is being viewed.
Drag-and-drop attributes: States of drag-and-drop input elements.

Note: ARIA is constantly being updated by the W3C. Read the latest working draft.

The states are given below, along with their category, brief description, and allowed value lists. Many states allow for either true or false, and when “undefined” is chosen it means the state is not applicable to the current element.

State (links to WAI-ARIA 1.1 specs)	Category	Description	Allowed Values (default values bolded)
aria-busy	Live region attributes	The element is currently being updated	false, true
aria-checked	Widget attributes	The input item is checked	undefined, false, mixed, true
aria-current	Widget attributes	Indicates the element that represents the current item within a container or set of related elements	page, step, location, date, time, true, false
aria-disabled	Widget attributes	The element is visible but not interactive	false, true
aria-expanded	Widget attributes	The element is expanded	undefined, false, true
aria-grabbed	Drag-and-Drop attributes	Deprecated The element is selected for dragging	undefined, false, true
aria-hidden	Widget attributes	The element is invisible to all users (including assistive technologies)	false, true
aria-invalid	Widget attributes	The element contains a value that doesn’t match the expected format	false, grammar, spelling, true
aria-pressed	Widget attributes	The button is pressed	undefined, false, mixed, true
aria-selected	Widget attributes	The element is selected	undefined, false, true

Quick tip: Browser Keyboard Navigation in macOS

2017-12-29T00:00:00+00:00

By default, Apple computers have an operating system (OS) level setting that limits the Tab key to “Text boxes and lists only”. This can be confusing, if not frustrating, for those unaware of this setting and expect keyboard focus to be similar to navigating on a Windows machine.

In order to allow for full keyboard navigation of all focusable interactive elements in macOS Safari and Firefox, you’ll need to make sure the following keyboard settings are adjusted.

“All Controls” in macOS

Enable “All Controls” in macOS Settings

In the macOS settings, the “All Controls” setting must be enabled for all focusable interactive elements (for instance, links) to be keyboard accessible via the Tab key alone. Enable this feature by going to:

System Preferences
Keyboard
Shortcuts (tab)
macOS Catalina: Select “Use keyboard navigation to move focus between controls” (check box). macOS pre-Catalina: Select “All controls” (radio button). Alternatively, in any macOS version, press Control + F7 (if you’re on a laptop you may also need to press the fn key).

After updating this setting you will need to quit and restart your browsers to have the update take effect.

Enable All Controls via Terminal

Run the following command in Terminal to enable keyboard control at the macOS level. This command can be helpful if your organization uses a config script for new employee machines!

defaults write NSGlobalDomain AppleKeyboardUIMode -int 3

Highlight each item in Safari

Additionally for Safari, you can enable the “highlighting of each item” setting in order to use the Tab key to navigate page controls. Enable this feature by going to Safari’s:

Preferences
Advanced (tab)
Check “Press Tab to highlight each item on a webpage” (checkbox)

With these changed settings in place you should now be able to use the Tab key to navigate around web pages as expected.

Highlight each item in Chrome

Just like in Safari, a similar setting is available in Chrome. Verify that this feature is enabled by going to Chrome’s:

Settings
Appearance
Check “Pressing Tab on a webpage highlights links, as well as form fields” (switch)

Highlight each item in Firefox

Unlike Safari and Chrome, Firefox does not have an option in the settings page for enabling full keyboard control. Firefox respects the “Use keyboard navigation to move focus between controls” or “All Controls” setting in macOS.

Troubleshooting Firefox

In several older versions of Firefox, the browser may still not send focus to links using the tab key despite “Use keyboard navigation to move focus between controls” being set. If this occurs, please update to the latest version of Firefox.

If it is not possible to install the latest version of Firefox, there is a way to enable keyboard focus of links using advanced configuration options.

Note: When accessibility.tabfocus is set, some forms created with non-semantic HTML elements can behave oddly. For example, the GitHub Gist code editor. If non-semantic HTML elements are inexplicably inaccessible, try resetting this option.

To enable:

Open a new tab and go to “about:config”
Right Click and select New > Integer
Enter the preference name “accessibility.tabfocus”. Click OK.
Enter the number “7”. Click OK.

To reset:

Open a new tab and go to “about:config”
Find the accessibility.tabfocus preference row. (tip: use search field at top of page)
Right Click on the row and select Reset
Restart Firefox

Understanding color blindness

2017-10-18T00:00:00+00:00

Color blindness is a common genetic condition in which some peoples’ eyes can’t tell the difference between certain colors. That’s not to say these people see the world in greyscale— just that many colors seem identical to one another. Total color blindness is very rare in humans.

Color vision deficiencies (typically grouped together as “color blindness”) are not rare. Some form of color blindness affects at least one in twenty people. Wikipedia has a helpful table, based on a journal article from biomedcentral.com. There are several different forms of color blindness. The most common, red-green color blindness, affects around one in twelve men.

Color blindness is less profound than many impairments, but people with color vision problems often face restrictions on certain activities, which vary around the world. For example, Romania prohibits residents who are color blind from driving. The USA doesn’t consider color blindness a disability because of workplace discrimination purposes.

Though there are multiple types of color blindness, they are the same in principle. For more information, check out Wikipedia’s article on color blindness, which has some excellent descriptions.

What does this mean for accessibility on the web?

To make sure your site is readable for individuals with color blindness, avoid relying on color alone to communicate.

These guidelines are compliant with the WCAG; guideline 1.4.1 covers making content distinguishable using color.

In practice, you can achieve this by choosing colors that are easily distinguished from one another, and by adding secondary visualizations for icons and tasks. For example, say you’re using red and green buttons to represent tasks a user has outstanding. It might seem logical to show items that need attention in red, and those that are good in green. One small change, such as overlaying a check mark icon over the “good” or “completed” items, will help communicate which items are approved and those that need attention.

There are cases where this isn’t possible. The periodic table, for example, often color-codes the chemical symbols of the elements. When working with tables or other standardised layouts, adding more text or symbols might not be practical.

Available tools

There are a number of online tools to help those without color blindness visualize how accessible their designs are:

These tools are free, simple to use, and can quickly help you make color-accessible choices.

Terminology

OpticianCertification.org maintains a list of eye-related terminology, including links to additional resources.

Quick tip: a11y and a brief numeronyms primer

2017-08-26T00:00:00+00:00

You may have seen “a11y” used as a hash tag on Twitter, or used in a comment, article, used in a comment thread, or written in an article. Since you’re reading this right now, you’ve likely seen it in the name of a certain website about accessibility. ahem… But if you’re unfamiliar with the term “numeronym”, you may not have realized that a11y isn’t just a hash tag, nor is it a hip way to spell ally. Rather a11y is a shorthand for accessibility.

How numeronyms work

Unlike abbreviations like FYI (for your information), and PC (personal computer), or acronyms like HTML (hypertext markup language), and JAWS (Job Access With Speech), numeronyms are number-based words. And while you may not be familiar with the term “numeronym” itself, you’ve likely used them throughout your life.

For instance, “9-1-1” is synonymous with “help”, “24/7” means “24 hours a day, 7 days a week”, and Y2K is for “year 2000” or “the year 2000 problem.” These are all examples of numeronyms.

As illustrated by the previous numeronyms, sometimes they’re used to replace entire words with numbers, or they use a combination of letters and numbers to combine words. In the case of a11y, Adrian Roselli explains:

Tip: “a11y” is a numeronym for accessibility. Keep first & last letter, between them put the count of letters removed — in this case eleven.
— Adrian Roselli 🗯 (@aardrian) November 22, 2016

Other numeronyms

The following is a short list of numeronyms you may have seen, or even used, but didn’t know what they were called.

i11l: international
i18n: internationalization
l10n: localization
n7m: Numeronym
v12n: Virtualization
W3: World Wide Web
W12t: Web Development
W3C: World Wide Web Consortium

While numeronyms have been around for quite some time, they’re not always immediately understandable. As a defining trait of accessibility is about being inclusive, one should keep the following in mind when using a11y:

If you can say or write “accessibility”, do so! A11y (often pronounced “A-one-one-Y”, “A-eleven-Y”, and liberally as “ally”) is meant as shorthand for “accessibility”. So whenever possible, say “accessibility”, even if written as a11y. The best place to use the numeronym are platforms like Twitter where space is limited and every character counts.
A numeronym will be easier to understand the more it is used in context with its true spelling. So if writing, or giving a presentation, be sure to make your audience aware a11y = accessibility as soon as it’s introduced. Sure, people will likely be able to piece it together over time, but no reason not to make it immediately clear.
Typefaces can exacerbate the a11y/ally confusion if 1 looks like a lower-case l. Much like “I11l” (a series of Ls?) and “I10n” (lion?). These are other numeronyms that may not be visually optimal with certain typefaces.
Spell checkers and auto-correctors may not know what a11y is and may try to autocorrect it, while mobile keyboards will require switching between alpha and numeric keys to type it out. All minor obstacles, but things to keep in mind when typing it out. Don’t want an accidental auto correct or incorrect key press to further muddy the waters.

With all that said, I wouldn’t lose any sleep over mispronouncing a11y, or using it as a hash tag without prefacing it with “when I say a11y, I mean accessibility.” As mentioned, using “#a11y” to increase awareness on platforms like Twitter, is a good thing!

There are a lot of projects and sites out that that use “a11y” in their name. Obviously there’s The A11Y Project, but also Pa11y, Tota11y, and A11ycasts, among many others. All of these different projects don’t overtly say “accessibility” in their names, but they make it immediately clear that accessibility is their focus, thus indirectly connecting the numeronym to the concept.

As long as we do our best to make people aware of what numeronyms stand for, and use them appropriately, then their usage and accepted understanding will only grow.

The A11Y Project

Myth: ARIA Has Perfect Support

Background

Compatibility issues

What you can do about it

Before you write any code

When writing code

After you write code

Should you avoid ARIA all together?

Operating System and Browser Accessibility Display Modes

Dark Mode

What it affects

How to enable it

Android

iOS

macOS

Windows

How to target it in code

Filtered Display Mode

Night Mode

What it affects

How to enable it

Android

iOS

macOS

Windows

Other alternatives

Filtered Colors Mode

What it affects

How to enable it

Android

iOS

macOS

Windows

Increased Contrast Mode

What it affects

How to enable it

iOS

macOS

Inverted Colors Mode

What it affects

How to enable it

Android

iOS

macOS

Windows

How to target it in code

Reader Mode

What it affects

How to enable it

Android Chrome

Desktop Chrome

Edge

Firefox

Internet Explorer 11 (Windows 8.1 and up)

iOS Safari

macOS Safari

How to target it in code

Reduced Motion Mode

What it affects

How to enable it

Android

iOS

macOS

Windows

Web browsers

How to target it in code

High Contrast Mode

What it affects

How to enable it

Windows

How to target it in code

Multiple modes

Quick tip: Creating valid and accessible links

Start with valid HTML

Write helpful link text

What about the title attribute?

Focus state and keyboard

When should you use a button instead?

Quick test: Resize text

What about the `title` attribute?

When should you use a `button` instead?