https://github.com/alebelcor/effective-a11y

🤝 Hands-on Web accessibility
https://github.com/alebelcor/effective-a11y

a11y accessibility inclusive-design user-experience web-accessibility

Last synced: about 1 month ago
JSON representation

🤝 Hands-on Web accessibility

Host: GitHub
URL: https://github.com/alebelcor/effective-a11y
Owner: alebelcor
Created: 2019-10-04T20:10:33.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2020-01-13T03:02:21.000Z (over 5 years ago)
Last Synced: 2024-10-24T08:30:47.782Z (6 months ago)
Topics: a11y, accessibility, inclusive-design, user-experience, web-accessibility
Homepage:
Size: 93.8 KB
Stars: 0
Watchers: 3
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: readme.md

Awesome Lists containing this project

README

# Effective a11y

> Hands-on Web accessibility.

## Table of contents

* [HTML](#html)
* [Combining adjacent image and text links for the same resource](#combining-adjacent-image-and-text-links-for-the-same-resource)
* [Creating a logical tab order through links, form controls, and objects](#creating-a-logical-tab-order-through-links-form-controls-and-objects)
* [Providing text alternatives for the `` elements of image maps](#providing-text-alternatives-for-the-area-elements-of-image-maps)
* [Providing a title using the `` element](#providing-a-title-using-the-title-element)
* [Providing definitions for abbreviations by using the `` element](#providing-definitions-for-abbreviations-by-using-the-abbr-element)
* [Providing link text that describes the purpose of a link for anchor elements](#providing-link-text-that-describes-the-purpose-of-a-link-for-anchor-elements)
* [Providing submit buttons](#providing-submit-buttons)
* [Supplementing link text with the `title` attribute](#supplementing-link-text-with-the-title-attribute)
* [Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline](#using-a-unicode-right-to-left-mark-rlm-or-left-to-right-mark-lrm-to-mix-text-direction-inline)
* [:warning:Providing text alternatives on `` elements](#providing-text-alternatives-on-applet-elements)
* [Using `alt` attributes on images used as submit buttons](#using-alt-attributes-on-images-used-as-submit-buttons)
* [Using `alt` attributes on `` elements](#using-alt-attributes-on-img-elements)
* [Using `` elements to associate data table captions with data tables](#using-caption-elements-to-associate-data-table-captions-with-data-tables)
* [Using description lists](#using-description-lists)
* [Using `

` to `

` to identify headings](#using-h1-to-h6-to-identify-headings)
* [Using `id` and `headers` attributes to associate data cells with header cells in data tables](#using-id-and-headers-attributes-to-associate-data-cells-with-header-cells-in-data-tables)
* [Using `` elements to associate text labels with form controls](#using-label-elements-to-associate-text-labels-with-form-controls)
* [Using `longdesc`](#using-longdesc)
* [Using `` with ``](#using-noembed-with-embed)
* [Using `
`, `
` and `
` for lists or groups of links](#using-ol-ul-and-dl-for-lists-or-groups-of-links)
* [Using semantic markup to mark emphasized or special text](#using-semantic-markup-to-mark-emphasized-or-special-text)
* [Using table markup to present tabular information](#using-table-markup-to-present-tabular-information)
* [Using the body of the `` element](#using-the-body-of-the-object-element)
* [Using the `` element to identify the defining instance of a word](#using-the-dfn-element-to-identify-the-defining-instance-of-a-word)
* [Using the `dir` attribute on an inline element to resolve problems with nested directional runs](#using-the-dir-attribute-on-an-inline-element-to-resolve-problems-with-nested-directional-runs)
* [Using the `lang` attribute on the `` element](#using-the-lang-attribute-on-the-html-element)
* [Using the `lang` attribute to identify changes in the human language](#using-the-lang-attribute-to-identify-changes-in-the-human-language)
* [Using the `` element and navigation tools](#using-the-link-element-and-navigation-tools)
* [:warning:Using the `` element to link to a glossary](#using-the-link-element-to-link-to-a-glossary)
* [Using the `` element](#using-the-ruby-element)
* [Using the `scope` attribute to associate header cells and data cells in data tables](#using-the-scope-attribute-to-associate-header-cells-and-data-cells-in-data-tables)
* [:warning:Using the `title` attribute of the `` and `` elements](#using-the-title-attribute-of-the-frame-and-iframe-elements)
* [Using the `title` attribute to identify form controls when the `` element cannot be used](#using-the-title-attribute-to-identify-form-controls-when-the-label-element-cannot-be-used)
* [Using null `alt` text and no `title` attribute on `` elements for images that Assistive Technology should ignore](#using-null-alt-text-and-no-title-attribute-on-img-elements-for-images-that-assistive-technology-should-ignore)
* [Providing heading elements at the beginning of each section of content](#providing-heading-elements-at-the-beginning-of-each-section-of-content)
* [:warning:Using `` elements to group blocks of repeated material](#using-frame-elements-to-group-blocks-of-repeated-material)
* [Providing a description for groups of form controls using `` and `` elements](#providing-a-description-for-groups-of-form-controls-using-fieldset-and-legend-elements)
* [:warning:Using the `summary` attribute of the `` element to give an overview of data tables](#using-the-summary-attribute-of-the-table-element-to-give-an-overview-of-data-tables)
* [Ensuring that opening and closing tags are used according to specification](#ensuring-that-opening-and-closing-tags-are-used-according-to-specification)
* [:warning:Ensuring that Web pages are well-formed](#ensuring-that-Web-pages-are-well-formed)
* [Using meta refresh to create an instant client-side redirect](#using-meta-refresh-to-create-an-instant-client-side-redirect)
* [Identifying the purpose of a link using link text combined with its enclosing list item](#identifying-the-purpose-of-a-link-using-link-text-combined-with-its-enclosing-list-item)
* [Identifying the purpose of a link using link text combined with its enclosing paragraph](#identifying-the-purpose-of-a-link-using-link-text-combined-with-its-enclosing-paragraph)
* [Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells](#identifying-the-purpose-of-a-link-in-a-data-table-using-the-link-text-combined-with-its-enclosing-table-cell-and-associated-table-header-cells)
* [Identifying the purpose of a link using link text combined with the preceding heading element](#identifying-the-purpose-of-a-link-using-link-text-combined-with-the-preceding-heading-element)
* [Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested](#identifying-the-purpose-of-a-link-in-a-nested-list-using-link-text-combined-with-the-parent-list-item-under-which-the-list-is-nested)
* [Using the `target` attribute to open a new window on user request and indicating this in link text](#using-the-target-attribute-to-open-a-new-window-on-user-request-and-indicating-this-in-link-text)
* [Using a button with a `` element to perform an action](#using-a-button-with-a-select-element-to-perform-an-action)
* [Using `` to group `` elements inside a ``](#using-optgroup-to-group-option-elements-inside-a-select)
* [Providing text alternatives for ASCII art, emoticons, and leetspeak](#providing-text-alternatives-for-ascii-art-emoticons-and-leetspeak)
* [Using HTML according to spec](#using-html-according-to-spec)
* [:warning:Using the `title` attribute to provide context-sensitive help](#using-the-title-attribute-to-provide-context-sensitive-help)
* [Indicating required form controls using `` or ``](#indicating-required-form-controls-using-label-or-legend)
* [Using HTML form controls and links](#using-html-form-controls-and-links)
* [Ensuring that `id` attributes are unique on a Web page](#ensuring-that-id-attributes-are-unique-on-a-web-page)
* [Ensuring that elements do not contain duplicate attributes](#ensuring-that-elements-do-not-contain-duplicate-attributes)
* [Using the `` element to provide captions](#using-the-track-element-to-provide-captions)
* [:warning:Using the `` element to provide audio descriptions](#using-the-track-element-to-provide-audio-descriptions)
* [Grouping related links using the `` element](#grouping-related-links-using-the-nav-element)
* [Using `autocomplete` attributes](#using-autocomplete-attributes)
* [CSS](#css)
* [Positioning content based on structural markup](#positioning-content-based-on-structural-markup)
* [Using CSS to hide a portion of the link text](#using-css-to-hide-a-portion-of-the-link-text)
* [Using CSS `letter-spacing` to control spacing within a word](#using-css-letter-spacing-to-control-spacing-within-a-word)
* [Using CSS to include decorative images](#using-css-to-include-decorative-images)
* [Using percent for font sizes](#using-percent-for-font-sizes)
* [Using named font sizes](#using-named-font-sizes)
* [Using `em` units for font sizes](#using-em-units-for-font-sizes)
* [Using CSS to change the presentation of a user interface component when it receives focus](#using-css-to-change-the-presentation-of-a-user-interface-component-when-it-receives-focus)
* [Scaling form elements which contain text](#scaling-form-elements-which-contain-text)
* [Using CSS margin and padding rules instead of spacer images for layout design](#using-css-margin-and-padding-rules-instead-of-spacer-images-for-layout-design)
* [Specifying alignment either to the left or right in CSS](#specifying-alignment-either-to-the-left-or-right-in-css)
* [Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized](#using-relative-measurements-to-set-column-widths-so-that-lines-can-average-80-characters-or-less-when-the-browser-is-resized)
* [Specifying line spacing in CSS](#specifying-line-spacing-in-css)
* [Using CSS to control visual presentation of text](#using-css-to-control-visual-presentation-of-text)
* [Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content](#specifying-text-and-background-colors-of-secondary-content-such-as-banners-features-and-navigation-in-css-while-not-specifying-text-and-background-colors-of-the-main-content)
* [Using percentage values in CSS for container sizes](#using-percentage-values-in-css-for-container-sizes)
* [Specifying borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors](#specifying-borders-and-layout-in-css-to-delineate-areas-of-a-web-page-while-not-specifying-text-and-text-background-colors)
* [Making the DOM order match the visual order](#making-the-dom-order-match-the-visual-order)
* [Specifying the size of text containers using `em` units](#specifying-the-size-of-text-containers-using-em-units)
* [Using a style switcher to provide a conforming alternate version](#using-a-style-switcher-to-provide-a-conforming-alternate-version)
* [Using CSS to replace text with images of text and providing user interface controls to switch](#using-css-to-replace-text-with-images-of-text-and-providing-user-interface-controls-to-switch)
* [Using CSS Flexbox to reflow content](#using-css-flexbox-to-reflow-content)
* [Using media queries and grid CSS to reflow columns](#using-media-queries-and-grid-css-to-reflow-columns)
* [Allowing for Reflow with Long URLs and Strings of Text](#allowing-for-reflow-with-long-urls-and-strings-of-text)
* [:warning:Using media queries to un-fixing sticky headers / footers](#using-media-queries-to-un-fixing-sticky-headers--footers)
* [Allowing for text spacing without wrapping](#allowing-for-text-spacing-without-wrapping)
* [Using CSS `max-width` and `height` to fit images](#using-css-max-width-and-height-to-fit-images)
* [Using CSS `width`, `max-width` and flexbox to fit labels and inputs](#using-css-width-max-width-and-flexbox-to-fit-labels-and-inputs)
* [Using the CSS reduce-motion query to prevent motion](#using-the-css-reduce-motion-query-to-prevent-motion)
* [Creating a two-color focus indicator to ensure sufficient contrast with all components](#creating-a-two-color-focus-indicator-to-ensure-sufficient-contrast-with-all-components)
* [ARIA](#aria)
* [Using the `aria-describedby` property to provide a descriptive label for user interface controls](using-the-aria-describedby-property-to-provide-a-descriptive-label-for-user-interface-controls)
* [Identifying a required field with the `aria-required` property](#identifying-a-required-field-with-the-aria-required-property)
* [Using a WAI-ARIA `role` to expose the role of a user interface component](#using-a-wai-aria-role-to-expose-the-role-of-a-user-interface-component)
* [Using WAI-ARIA state and property attributes to expose the state of a user interface component](#using-wai-aria-state-and-property-attributes-to-expose-the-state-of-a-user-interface-component)
* [:warning:Using `aria-label` to provide labels for objects](#using-aria-label-to-provide-labels-for-objects)
* [Using `aria-labelledby` for link purpose](#using-aria-labelledby-for-link-purpose)
* [Using `aria-label` for link purpose](#using-aria-label-for-link-purpose)
* [Using `aria-labelledby` to concatenate a label from several text nodes](#using-aria-labelledby-to-concatenate-a-label-from-several-text-nodes)
* [Using `aria-labelledby` to provide a text alternative for non-text content](#using-aria-labelledby-to-provide-a-text-alternative-for-non-text-content)
* [Using ARIA landmarks to identify regions of a page](#using-aria-landmarks-to-identify-regions-of-a-page)
* [Using `role="heading"` to identify headings](#using-roleheading-to-identify-headings)
* [Using `aria-labelledby` to name regions and landmarks](#using-aria-labelledby-to-name-regions-and-landmarks)
* [Using `aria-label` to provide an invisible label where a visible label cannot be used](#using-aria-label-to-provide-an-invisible-label-where-a-visible-label-cannot-be-used)

## HTML

### [Combining adjacent image and text links for the same resource](https://www.w3.org/WAI/WCAG21/Techniques/html/H2)

It's better to combine adjacent image and text links into a single `` element.

Provided the `` element contained in the `` element would:

* Have an empty `alt` attribute when the `` text would duplicate the information conveyed
* Have a valid `alt` attribute value when it would complement the `` text

### [Creating a logical tab order through links, form controls, and objects](https://www.w3.org/WAI/WCAG21/Techniques/html/H4)

The `tabindex` attribute may be used to alter the tab order when the default is insufficient. For example on forms, or when a search field is the first thing you want users to tab into.

### [Providing text alternatives for the `` elements of image maps](https://www.w3.org/WAI/WCAG21/Techniques/html/H24)

The `alt` attribute may be used on an `` element to provide text alternatives on regions of an image map.

### [Providing a title using the `` element](https://www.w3.org/WAI/WCAG21/Techniques/html/H25)

All HTML pages, including frames, must have a `` element in the `` with a simple phrase defining the purpose of the page.

### [Providing definitions for abbreviations by using the `` element](https://www.w3.org/WAI/WCAG21/Techniques/html/H28)

Use the `` element for any abbreviations, acronyms, and initialisms.

### [Providing link text that describes the purpose of a link for anchor elements](https://www.w3.org/WAI/WCAG21/Techniques/html/H30)

Provide descriptive text as the content of the `` element.

If the only content of a link is an image, the text alternative for the image is used instead.

When the content of a link contains both text and one or more images, if the text is sufficient to describe the purpose of the link, the images may have an empty text alternative. When the images convey information beyond the purpose of the link, they must also have appropriate `alt` text.

### [Providing submit buttons](https://www.w3.org/WAI/WCAG21/Techniques/html/H32)

Provide a way to submit form data by having one of these:

* `Submit`
* ``
* ``

### [Supplementing link text with the `title` attribute](https://www.w3.org/WAI/WCAG21/Techniques/html/H33)

Use the `title` attribute on the `` element to provide additional text describing the link. It's used to clarify or further describe the purpose of the link.

Information the user should know, before following a link, should be provided in the link text.

### [Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline](https://www.w3.org/WAI/WCAG21/Techniques/html/H34)

To bulletproof the correct handling of bidirectional text in HTML (for legacy or non-conformant browsers) you can add a Unicode control character to indicate the base direction of the surrounding text.

* `‎` or `‎` for the left-to-right mark
* `‏` or `‏` for the right-to-left mark

For example, assuming a base language of English (left-to-right), we'll use a phrase in Arabic (right-to-left) mid-sentence:

```html
As the proverb says "اصبر تنل‏‎". Do not despair

```

### [Providing text alternatives on `` elements](https://www.w3.org/WAI/WCAG21/Techniques/html/H35)

:warning: Note: `` is obsolete. Use `` or `` instead.

The `alt` attribute may be used on an `` element to label it. Provide text alternatives to it in the body of the element.

### [Using `alt` attributes on images used as submit buttons](https://www.w3.org/WAI/WCAG21/Techniques/html/H36)

For ``, the `alt` attribute of the `` element is used to provide a functional label that indicates the button's function, not the image description.

### [Using `alt` attributes on `` elements](https://www.w3.org/WAI/WCAG21/Techniques/html/H37)

When using the `` element, specify a short text alternative with the `alt` attribute.

When an image contains words that are important to understanding the content, the `alt` text should include those words.

The text alternative does not necessarily describe the visual characteristics of the image itself but must convey the same meaning as the image.

### [Using `` elements to associate data table captions with data tables](https://www.w3.org/WAI/WCAG21/Techniques/html/H39)

The `` represents the title of its parent ``. It's a table identifier and acts like a title or heading for the table.

Using it allows screen readers to navigate directly to the caption for a table if one is present.

### [Using description lists](https://www.w3.org/WAI/WCAG21/Techniques/html/H40)

Provide description of names or terms using `
`, `
`, and `

`. Multiple terms can be associated with a single description, as can a single term with multiple descriptions.

The `title` attribute can be used to provide additional information about the description list.

### [Using `
` to `
` to identify headings](https://www.w3.org/WAI/WCAG21/Techniques/html/H42)

Use heading markup to provide semantic code for headings in the content. It will allow assistive technologies to present the heading status of text to a user. A screen reader can recognize the code and announce the text as a heading with its level. Screen readers users are also able to navigate heading markup more quickly to find content of interest.

### [Using `id` and `headers` attributes to associate data cells with header cells in data tables](https://www.w3.org/WAI/WCAG21/Techniques/html/H43)

Use only when data cells are associated with more than one row and/or one column header.

Add a `headers` attribute to each ``. Its value should be the `id` value(s) of the associated header cell(s) (separated by spaces, if multiple).

Example

```html

Budget
Groceries
Remaining

Veggies
Fruit
Meat

$50
$10
$5
$20
$15

```

### [Using `` elements to associate text labels with form controls](https://www.w3.org/WAI/WCAG21/Techniques/html/H44)

Use the `` element to explicitly associate a form control with a label. It's attached to a specific form control though its `for` attribute, which must be the same as the value of the `id` attribute of the form control.

Elements that use explicitly associated labels

* ``
* ``
* ``
* ``
* ``
* ``
* ``

Elements that do not use `<label>`

* ``: Use `value` attribute instead
* ``: Use `value` attribute instead
* ``: Use `value` attribute instead
* ``: Use `value` attribute instead
* ``: Use `alt` attribute instead
* ``: Use element content instead

### [Using `longdesc`](https://www.w3.org/WAI/WCAG21/Techniques/html/H45)

Provide information in a resource designated by the `longdesc` attribute when a short text alternative does not adequately convey the function or information provided in the image.

The `longdesc` attribute is a URI. And can be either a reference to a separate resource, or within the same page.

Example

```html

...

...

```

### [Using `` with ``](https://www.w3.org/WAI/WCAG21/Techniques/html/H46)

Provide alternative content for the `` element in a `` element.

`` is rendered only if the `` is not supported. It is a good idea to include it as a child element of ``, instead of positioning it anywhere else on the page, so that it functions as a text alternative associated with the `` element it describes.

### [Using `
`, `
` and `
` for lists or groups of links](https://www.w3.org/WAI/WCAG21/Techniques/html/H48)

Create lists of related items using list elements appropriate for their purposes.

* The `
` element is used when the list is ordered
* The `
` element is used when the list is unordered
* Definition lists (`
`) are used to group terms with their definitions

Avoid making lists using (visually formatting) markup like ``, `•`, and `
`, as that is more difficult to navigate.

### [Using semantic markup to mark emphasized or special text](https://www.w3.org/WAI/WCAG21/Techniques/html/H49)

Use semantic markup to mark emphasized or special text. It provides structure to the document, and browsers can use it to make it perceivable to the user.

`` to represent stress emphasis of its contents
* `` to represent strong importance, seriousness, or urgency for its contents
* `
` to represent a section that is quoted from another source
* `` to represent the title of a work (e.g. a book, a song, a film, etc.)
* `` to represent some phrasing content quoted from another source
* `^{` to represent a superscript

* `_{` to represent a subscript

### [Using table markup to present tabular information](https://www.w3.org/WAI/WCAG21/Techniques/html/H51)

Use ``, ``, ``, and `` to present tabular information

### [Using the body of the `` element](https://www.w3.org/WAI/WCAG21/Techniques/html/H53)

The body of the `` element can be used to provide a complete text alternative for the object, or may contain additional non-text content with text alternatives.

### [Using the `` element to identify the defining instance of a word](https://www.w3.org/WAI/WCAG21/Techniques/html/H54)

The `` element is used to indicate the defining instance of the enclosed term. It marks the occurrence of the term where the term is defined.

### [Using the `dir` attribute on an inline element to resolve problems with nested directional runs](https://www.w3.org/WAI/WCAG21/Techniques/html/H56)

The `dir` attribute is a global attribute that specifies the element's text directionality.

Its values can be:

* `ltr` to indicate left-to-right text

* `rtl` to indicate right-to-left text

* `auto` to indicate direction should be determined programmatically

### [Using the `lang` attribute on the `` element](https://www.w3.org/WAI/WCAG21/Techniques/html/H57)

Identify the default language of a document by providing the `lang` global attribute on the `` element.

### [Using the `lang` attribute to identify changes in the human language](https://www.w3.org/WAI/WCAG21/Techniques/html/H58)

Identify any changes in language on a page by using the `lang` global attribute. Its values are defined [here](https://tools.ietf.org/html/bcp47) consisting of a primary code followed by an optional subcode.

For example: `en` for English, and `en-GB` for British English.

### [Using the `` element and navigation tools](https://www.w3.org/WAI/WCAG21/Techniques/html/H59)

The `` element can provide metadata about the position of an HTML page within a set of Web pages or can assist in locating content with a set of Web pages.

The value of its `rel` attribute represents the relationship between the document containing the hyperlink and the destination resource.

Several values of [`rel`](https://html.spec.whatwg.org/multipage/links.html#linkTypes) are useful.

For example:

* `next` to indicate the next document in the series is the referenced document

* `prev` to indicate the previous document in the series is the referenced document

### [Using the `` element to link to a glossary](https://www.w3.org/WAI/WCAG21/Techniques/html/H60)

:warning: Note: `rel="glossary"` is a valid link type in [HTML 4.01](https://www.w3.org/TR/html401/types.html#h-6.12). But it's not part of the predefined list in the [latest HTML standard](https://html.spec.whatwg.org/multipage/links.html#linkTypes).

Use a `` element with `rel="glossary"` to provide a mechanism for locating a glossary on a separate page.

### [Using the `` element](https://www.w3.org/WAI/WCAG21/Techniques/html/H62)

Use [the `` element](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-ruby-element) to provide information about the pronunciation and meaning of a run of text where meaning is determined by pronunciation.

Example

```html

Charlize Theron

(

shar-LEEZ THERR-ən

)

```

### [Using the `scope` attribute to associate header cells and data cells in data tables](https://www.w3.org/WAI/WCAG21/Techniques/html/H63)

The `scope` attribute may be used to clarify the scope of any cell used as a header. The `scope` identifies whether the cell is a header for a row, column, or group of rows or columns. The values `row`, `col`, `rowgroup`, and `colgroup` identify these possible scopes respectively.

For simple tables that have the headers in the first row or column then it is sufficient to simply use the `` elements without `scope`.

Example

```html}}

Name
Email
Phone

John Doe
[email protected]
1234567890

Jane Doe
[email protected]
9876543210

```

### [Using the `title` attribute of the `` and `` elements](https://www.w3.org/WAI/WCAG21/Techniques/html/H64)

:warning: Note: ``, ``, and `` are obsolete. Use `` and CSS instead, or use server-side includes to generate complete pages with the various invariant parts merged in.

Provide a label for a frame so users can determine which frame to enter and explore in detail.

This is different than the `` element. The attribute facilitates navigation among frames and the element clarifies the user's current location.

### [Using the `title` attribute to identify form controls when the `` element cannot be used](https://www.w3.org/WAI/WCAG21/Techniques/html/H65)

Use the `title` attribute to provide an accessible name for form controls when the visual design does not include text on the screen that can be associated with the control as a label.

Example

```html

```

### [Using null `alt` text and no `title` attribute on `` elements for images that Assistive Technology should ignore](https://www.w3.org/WAI/WCAG21/Techniques/html/H67)

`` elements can be safely ignored by Assistive Technology if no `title` attribute is used and the alternative text is set to null (e.g. `alt=""`).

### [Providing heading elements at the beginning of each section of content](https://www.w3.org/WAI/WCAG21/Techniques/html/H69)

Use section headings to convey the structure of the content. Avoid skipping levels in the sequence of headings.

### [Using `` elements to group blocks of repeated material](https://www.w3.org/WAI/WCAG21/Techniques/html/H70)

:warning: Note: ``, ``, and `` are obsolete. Use `` and CSS instead, or use server-side includes to generate complete pages with the various invariant parts merged in.

Use frames to organize elements to provide a mechanism for easily bypassing blocks of repeated content.

If the site uses framesets, organize the blocks of content into separate frames. Make certain that the repeated blocks of content appear in the same `` within the `` of each Web page. In addition, each `` element must have a `title` attribute to describe the content of the frame.

### [Providing a description for groups of form controls using `` and `` elements](https://www.w3.org/WAI/WCAG21/Techniques/html/H71)

Form controls can be grouped by enclosing them within the `` element. All controls within a given `` are then related.

The first element inside the `` must be a `` element, which provides a label or description for the group.

This is most important for related radio buttons and checkboxes, or where a group of controls within a larger form requires an additional heading to provide a description specific to that particular group.

### [Using the `summary` attribute of the `` element to give an overview of data tables](https://www.w3.org/WAI/WCAG21/Techniques/html/H73)

:warning: Note: `summary` on `` is obsolete. Use [these techniques](https://html.spec.whatwg.org/multipage/tables.html#table-descriptions-techniques) instead.

Provide a brief overview of how data has been organized into a table or a brief explanation of how to navigate the table.

### [Ensuring that opening and closing tags are used according to specification](https://www.w3.org/WAI/WCAG21/Techniques/html/H74)

Provide closing tags for all elements that require them.

Ensure there are no closing tags for all elements that forbid them.

Ensure opening and closing tags of all elements are correctly nested.

### [Ensuring that Web pages are well-formed](https://www.w3.org/WAI/WCAG21/Techniques/html/H75)

:warning: Note: Only applies if you're using [the XML syntax](https://html.spec.whatwg.org/multipage/xhtml.html#the-xhtml-syntax) for writing HTML.

Avoid key errors that are known to cause problems by checking document well-formedness with an XML parser.

### [Using meta refresh to create an instant client-side redirect](https://www.w3.org/WAI/WCAG21/Techniques/html/H76)

:information_source: Note: Redirects are preferably implemented on the server side.

Enable redirects on the client side without confusing the user.

Example

```html

```

### [Identifying the purpose of a link using link text combined with its enclosing list item](https://www.w3.org/WAI/WCAG21/Techniques/html/H77)

The `
` enclosing the `` provides context for an otherwise unclear link when the `
` is the nearest enclosing block-level ancestor element.

Example

```html

Our biggest discounts of the year:
The Winter Sale.

...

```

### [Identifying the purpose of a link using link text combined with its enclosing paragraph](https://www.w3.org/WAI/WCAG21/Techniques/html/H78)

Same as ["Identifying the purpose of a link using link text combined with its enclosing list item"](#identifying-the-purpose-of-a-link-using-link-text-combined-with-its-enclosing-list-item). Except `
` provides the context.

### [Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells](https://www.w3.org/WAI/WCAG21/Techniques/html/H79)

The table header cell(s) associated to the `
` enclosing the `` provides context for an otherwise unclear link when the `` is the nearest enclosing block-level ancestor element.

### [Identifying the purpose of a link using link text combined with the preceding heading element](https://www.w3.org/WAI/WCAG21/Techniques/html/H80)

Whenever possible, provide link text that identifies the purpose of the link without needing additional context.

The preceding heading to the `` provides context for an otherwise unclear link.

### [Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested](https://www.w3.org/WAI/WCAG21/Techniques/html/H81)

Whenever possible, provide link text that identifies the purpose of the link without needing additional context.

Same as ["Identifying the purpose of a link using link text combined with its enclosing list item"](#identifying-the-purpose-of-a-link-using-link-text-combined-with-its-enclosing-list-item). Except the links are in a nested list inside an `
`.

### [Using the `target` attribute to open a new window on user request and indicating this in link text](https://www.w3.org/WAI/WCAG21/Techniques/html/H83)

On links that open new windows, provide both a `target="_blank"` attribute value and information indicating that such link will open in a new window in the link text.

### [Using a button with a `` element to perform an action](https://www.w3.org/WAI/WCAG21/Techniques/html/H84)

Avoid having an action occur as a side effect of choosing a value for the `` element.

Instead allow the user to control when an action is performed by selecting a button to perform the action.

### [Using `` to group `` elements inside a ``](https://www.w3.org/WAI/WCAG21/Techniques/html/H85)

Group options together with the `` element, with the related `` elements inside that element. Label the group with the `label` attribute so users will know what to expect inside the group.

The `` element should be directly inside the `` element, and the `` elements directly inside the ``.

### [Providing text alternatives for ASCII art, emoticons, and leetspeak](https://www.w3.org/WAI/WCAG21/Techniques/html/H86)

Provide text alternatives immediately before or after all ASCII art, emoticons and/or Leetspeak.

It is also suggested that there be a link to skip over the ASCII art (although this is not required).

Example

```html
:-) (smile)

:-)
```

### [Using HTML according to spec](https://www.w3.org/WAI/WCAG21/Techniques/html/H88)

Use only features that are defined in the specification, in the manner prescribed by the specification, while making sure the content can be parsed.

### [Using the `title` attribute to provide context-sensitive help](https://www.w3.org/WAI/WCAG21/Techniques/html/H89)

:warning: Note: Current browsers and Assistive Technologies do not always provide the information contained in the `title` attribute to users. Avoid using this technique in isolation until the `title` attribute has wide-spread support.

Provide context sensitive help for users as they enter data in forms by providing the help information in a `title` attribute. The help may include format information or examples of input.

### [Indicating required form controls using `` or ``](https://www.w3.org/WAI/WCAG21/Techniques/html/H90)

Provide a symbol or text indicating that the control is required by using the `` element, or the `` for groups of controls associated via ``.

Example

```html
First name (required):

Last name :

Please enter the following (required):

First name

Last name

```

### [Using HTML form controls and links](https://www.w3.org/WAI/WCAG21/Techniques/html/H91)

For each link and form element, check that the name, value, and state are specified as indicated [here](https://www.w3.org/WAI/WCAG21/Techniques/html/H91#H91_mappings).

### [Ensuring that `id` attributes are unique on a Web page](https://www.w3.org/WAI/WCAG21/Techniques/html/H93)

All `id` attribute values must be unique on the web page to avoid key errors that are known to cause problems for Assistive Technologies.

### [Ensuring that elements do not contain duplicate attributes](https://www.w3.org/WAI/WCAG21/Techniques/html/H94)

Check that no attribute occurs more than once on any element to avoid key errors that are known to cause problems for Assistive Technologies.

### [Using the `` element to provide captions](https://www.w3.org/WAI/WCAG21/Techniques/html/H95)

Use [the `` element](https://html.spec.whatwg.org/multipage/media.html#the-track-element) to specify a captions timed text track for a `` element.

### [Using the `` element to provide audio descriptions](https://www.w3.org/WAI/WCAG21/Techniques/html/H96)

:warning: Note: As of February 2019 there is no native support in browsers for this technique. Except via JavaScript polyfills.

Use [the `` element](https://html.spec.whatwg.org/multipage/media.html#the-track-element) to specify a descriptions timed text track for a `` element.

### [Grouping related links using the `` element](https://www.w3.org/WAI/WCAG21/Techniques/html/H97)

Use a `` to make groups of links easier to locate and skip past by users of Assistive Technology.

When the `` element is employed more than once on a page, distinguish the navigation groups by using an `aria-label` or `aria-labelledby` attribute.

### [Using `autocomplete` attributes](https://www.w3.org/WAI/WCAG21/Techniques/html/H98)

Use [the `autocomplete` attribute](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute) to hint the browser how to help users fill forms based on earlier user input.

## CSS

### [Positioning content based on structural markup](https://www.w3.org/WAI/WCAG21/Techniques/css/C6)

Visual appearance may be enhanced via style sheets while still maintaining a meaningful presentation when style sheets are not applied.

### [Using CSS to hide a portion of the link text](https://www.w3.org/WAI/WCAG21/Techniques/css/C7)

Supplement the link text by adding additional text that describes the unique function of the link and styling the additional text so that it is not rendered on the screen by browsers that support CSS.

Avoid `visibility: hidden;` and `display: none;` since those hide text from Assistive Technology.

Example

```css
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(100%);
white-space: nowrap;
}
```

```html

×
Close

```

### [Using CSS `letter-spacing` to control spacing within a word](https://www.w3.org/WAI/WCAG21/Techniques/css/C8)

visual appearance of spacing in text may be enhanced via style sheets while still maintaining meaningful text sequencing.

The CSS `letter-spacing` property helps developers control the amount of white space between characters. It's recommended over adding blank characters since they can change the meaning and pronunciation of a word.

### [Using CSS to include decorative images](https://www.w3.org/WAI/WCAG21/Techniques/css/C9)

Add purely decorative images and images used for visual formatting to Web content without requiring additional markup within the content by using CSS properties like:

`background`
* `background-image`
* `content` with the `::before` and `::after` pseudo-elements
* `list-style-image`

This is not appropriate for images that are meant to convey information or provide functionality.

### [Using percent for font sizes](https://www.w3.org/WAI/WCAG21/Techniques/css/C12)

Specify text font size proportionally so that browser can scale content effectively.

If a `font-size` is specified for the `` element, all other elements inherit that value, unless overridden by a more specific selector.

### [Using named font sizes](https://www.w3.org/WAI/WCAG21/Techniques/css/C13)

Specify a named font size that expresses the relative font size desired.

[These values](https://www.w3.org/TR/css-fonts-3/#font-size-prop) provide hints so that the browser can choose a `font-size` relative to the inherited `font-size`:

* `xx-small`
* `x-small`
* `small`
* `medium`
* `large`
* `x-large`
* `xx-large`
* `larger`
* `smaller`

### [Using `em` units for font sizes](https://www.w3.org/WAI/WCAG21/Techniques/css/C14)

Specify text font size in `em` units so that browser can scale content effectively. The `em` is a property of the font, it scales as the font changes size.

If a `font-size` is specified for the `` element, all other elements inherit that value, unless overridden by a more specific selector.

### [Using CSS to change the presentation of a user interface component when it receives focus](https://www.w3.org/WAI/WCAG21/Techniques/css/C15)

Highlighting an element that has focus or is hovered over can provide information such as the fact that the element is interactive or the scope of the interactive element.

The dynamic pseudo-classes `:hover`, `:active`, and `:focus` can be used for this.

### [Scaling form elements which contain text](https://www.w3.org/WAI/WCAG21/Techniques/css/C17)

Ensure text-based form controls resize when text size is changed in the browser by using relative units.

### [Using CSS margin and padding rules instead of spacer images for layout design](https://www.w3.org/WAI/WCAG21/Techniques/css/C18)

Avoid using spacer images (e.g. 1x1 pixel transparent GIFs) for layout control, indenting or creating space. Use CSS margin and padding instead.

### [Specifying alignment either to the left or right in CSS](https://www.w3.org/WAI/WCAG21/Techniques/css/C19)

Use the CSS `text-align` property to align blocks of text either left or right.

### [Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized](https://www.w3.org/WAI/WCAG21/Techniques/css/C20)

Ensure that CSS is used in a way that allows users to view content in such a way that line length can average 80 characters or less.

### [Specifying line spacing in CSS](https://www.w3.org/WAI/WCAG21/Techniques/css/C21)

Provide line spacing between 1.5 to 2 to allow people with cognitive disabilities that have trouble tracking lines of text.

Example

```css
p {
line-height: 1.5; /* or 150% /
}
```

### [Using CSS to control visual presentation of text](https://www.w3.org/WAI/WCAG21/Techniques/css/C22)

The following CSS properties are useful to style text and avoid the need for text in images:

`font-family`: specifies a prioritized list of one or more font family names
* `text-align`: sets the horizontal alignment of a block element or table-cell box
* `font-size`: sets the size of the font
* `font-style`: sets whether a font should be styled with a normal, italic, or oblique face
* `font-weight`: sets the weight (or boldness) of the font
* `color`: sets the foreground color value of an element's text and text decorations
* `line-height`: sets the height of a line box
* `text-transform`: specifies how to capitalize an element's text
* `letter-spacing`: sets the spacing behavior between text characters
* `background-image`: sets one or more background images on an element
* `::first-line`: pseudo-element that applies styles to the first line of a block-level element
* `::first-letter`: pseudo-element that applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables)
* `::before` and `::after`: pseudo-elements used to insert decorative non-text content before or after blocks of text

### [Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content](https://www.w3.org/WAI/WCAG21/Techniques/css/C23)

Some Web pages use colors to identify different groupings. The objective is to allow users to select specific color combinations for the text and background of the main content while retaining visual clues to the groupings and organization of the web page. When a user overrides the foreground and background colors of all the text on a page, visual clues to the grouping and organization of the Web page may be lost, making it much more difficult to understand and use.

When an author does not specify the colors of the text and background of the main content, it is possible to change the colors of those regions in the browser without the need to override the colors with a user style sheet. Specifying the text and background colors of secondary content means that the browser will not override those colors.

### [Using percentage values in CSS for container sizes](https://www.w3.org/WAI/WCAG21/Techniques/css/C24)

Specify the width of text containers using percent values to enable users to increase the size of text without having to scroll horizontally to read that text.

### [Specifying borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors](https://www.w3.org/WAI/WCAG21/Techniques/css/C25)

Specify borders and layout using CSS and leave text and background colors to render according to the user's browser and/or operating system settings.

### [Making the DOM order match the visual order](https://www.w3.org/WAI/WCAG21/Techniques/css/C27)

Ensure the order of content in the source code is the same as the visual presentation of the content. When the source order matches the visual order, everyone will read the content and interact with it in the same (correct) order.

### [Specifying the size of text containers using `em` units](https://www.w3.org/WAI/WCAG21/Techniques/css/C28)

Specify the width and/or height of containers, that contain text or that will accept text input, in `em` units to allow browsers that support text resizing to resize the text containers in line with changes in text size settings.

### [Using a style switcher to provide a conforming alternate version](https://www.w3.org/WAI/WCAG21/Techniques/css/C29)

When some aspect of the default presentation of a Web page does not meet a Success Criterion, it is possible to meet that requirement using the "Alternate Version" clause in the conformance requirements (Conformance Requirement 1). For some requirements, invoking a style switcher via a link or control on the page that can adjust the presentation so that all aspects of the page conform at the level claimed allows authors to avoid having to provide multiple versions of the same information.

### [Using CSS to replace text with images of text and providing user interface controls to switch](https://www.w3.org/WAI/WCAG21/Techniques/css/C30)

CSS can be used to replace structured HTML text with images of text, in a technique commonly referred to as ["CSS image replacement"](https://en.wikipedia.org/wiki/CSS_image_replacement).

### [Using CSS Flexbox to reflow content](https://www.w3.org/WAI/WCAG21/Techniques/css/C30)

Use layout techniques that adapt to the available viewport space, like Flexbox, to present content without introducing a horizontal scroll bar at a width equivalent to 320 CSS pixels or a vertical scroll bar at a height equivalent to 256 CSS pixels.

### [Using media queries and grid CSS to reflow columns](https://www.w3.org/WAI/WCAG21/Techniques/css/C32)

Same as ["Using CSS Flexbox to reflow content"](#using-css-flexbox-to-reflow-content). But with CSS Grid and Media Queries.

### [Allowing for Reflow with Long URLs and Strings of Text](https://www.w3.org/WAI/WCAG21/Techniques/css/C33)

Using a human readable text link, rather than a long URL, is better for usability and accessibility.

Having said that, you may use CSS properties `overflow-wrap` and `word-wrap` to help wrap the text in a long URL.

### [Using media queries to un-fixing sticky headers / footers](https://www.w3.org/WAI/WCAG21/Techniques/css/C34)

:warning: Note: Keyboard users tabbing backwards, on a page with a sticky header, to reach interactive elements higher up will often mean that the focus becomes invisible once it moves behind the sticky header.

Present content with sticky headers and footers when there is enough space by using `min-height`, `max-height` and `min-width` media queries techniques that adapt to the available space of the viewport.

### [Allowing for text spacing without wrapping](https://www.w3.org/WAI/WCAG21/Techniques/css/C35)

Content needs to allow spacing changes without loss of content or functionality by allowing the elements containing the text to expand as needed.

Where text is not intended to wrap, authors should either size containers to a have a value greater than the default width of the text, or allow the containers to expand in the direction of text.

If elements must use a fixed width, a safe value is 20% wider than the default maximum width.

### [Allowing for text spacing override](https://www.w3.org/WAI/WCAG21/Techniques/css/C36)

Content needs to allow spacing changes without loss of content or functionality, so text containers must either have room for the text to expand or the container must be able to expand.

In English languages, if authors do not set the CSS `height` property, it can help ensure paragraphs expand.

### [Using CSS `max-width` and `height` to fit images](https://www.w3.org/WAI/WCAG21/Techniques/css/C37)

The basic principles of fitting images are to:

1. Define the `max-width` property for images, and;
1. Define the `height` property for images, so they enlarge or shrink in the available space and respond to zoom levels.

### [Using CSS `width`, `max-width` and flexbox to fit labels and inputs](https://www.w3.org/WAI/WCAG21/Techniques/css/C38)

When space is limited in the viewport for the label and input to sit next to each other horizontally, they may be changed to a vertical alignment by setting `width`, `max-width` and Flexbox to adapt to the available space.

### [Using the CSS reduce-motion query to prevent motion](https://www.w3.org/WAI/WCAG21/Techniques/css/C39)

Allow users to prevent animation (e.g. "parallax scrolling") from being displayed on Web pages, via the use of the `prefers-reduced-motion` media query.

Example

```css
@media (prefers-reduced-motion: reduce) {
/* disable motion here */
}
```

### [Creating a two-color focus indicator to ensure sufficient contrast with all components](https://www.w3.org/WAI/WCAG21/Techniques/css/C40)

Create a two-color focus indicator that has sufficient contrast against any background color with the `text-shadow` and `outline` CSS properties with the `:focus` CSS pseudo-class.

Example

```css
.element:focus {
box-shadow: 0 0 0 1px white;
outline: dotted;
}
```

### [Using the `aria-describedby` property to provide a descriptive label for user interface controls](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA1)

The [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute) property may be used to attach descriptive information to one or more elements through the use of an id reference list. The id reference list contains one or more unique element ids.

### [Identifying a required field with the `aria-required` property](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA2)

The [`aria-required`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute) property indicates that user input is required before submission and can have values of `true` or `false`.

### [Using a WAI-ARIA `role` to expose the role of a user interface component](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA4)

The WAI-ARIA specification provides an informative description of each [`role`](https://www.w3.org/TR/wai-aria/#role_definitions), how it relates to other roles, and the states and properties for each role. When rich internet applications define new user interface widgets, exposing the roles enables users to understand the widget and how to interact with it.

### [Using WAI-ARIA state and property attributes to expose the state of a user interface component](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA5)

The WAI-ARIA specification provides [a normative description of each attribute](https://www.w3.org/TR/wai-aria/#states_and_properties), and the role of the user interface elements that they support. When rich internet applications define new user interface widgets, exposing the state and property attributes enables users to understand the widget and how to interact with it.

### [Using `aria-label` to provide labels for objects](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA6)

:warning: Note: `aria-label` may be disregarded in situations where `aria-labelledby` is used for the same object.

:warning: Note: `aria-label` will override any native naming such as `alt` on `` or a `` associated with a form field using the `for` attribute

The `aria-label` attribute provides the text label for an object, such as a button. When a screen reader encounters the object, the `aria-label` text is read so that the user will know what it is.

### [Using `aria-labelledby` for link purpose](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA7)

When applied on links, `aria-labelledby` can be used to identify the purpose of a link that may be readily apparent for sighted users, but less obvious for screen reader users.

The specified behavior of `aria-labelledby` is that the associated label text is announced instead of the link text (not in addition to the link text). When the link text itself should be included in the label text, the ID of the link should be referenced as well in the string of IDs forming the value of the `aria-labelledby` attribute.

### [Using `aria-label` for link purpose](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA8)

Describe the purpose of a link using the `aria-label` attribute. The `aria-label` attribute provides a way to place a descriptive text label on an object, such as a link, when there are no elements visible on the page that describe the object. If descriptive elements are visible on the page, the `aria-labelledby` attribute should be used instead of `aria-label`.

### [Using `aria-labelledby` to concatenate a label from several text nodes](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA9)

One particular use of `aria-labelledby` is for text inputs in situations where a meaningful label should consist of more than one label string.

Authors assign unique ids to the label strings to be concatenated as the label for the input element. The value of the `aria-labelledby` attribute is then a space-separated list of all ids in the order in which the label strings referenced should be read by screen readers.

### [Using `aria-labelledby` to provide a text alternative for non-text content](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA10)

The `aria-labelledby` attribute associates an element with text that is visible elsewhere on the page by using an ID reference value that matches the ID attribute of the labeling element.

### [Using ARIA landmarks to identify regions of a page](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA11)

Use [landmark roles](https://www.w3.org/TR/wai-aria/#landmark_roles) (or "landmarks") to programmatically identify sections of a page and help Assistive Technology users orient themselves to a page and help them navigate easily to various sections of a page.

### [Using `role="heading"` to identify headings](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA12)

Provide a way for Assistive Technologies to identify a piece of content as a heading by applying `role="heading"` to an element. If there is more than one heading on the page and the heading hierarchy is defined through the visual presentation, the `aria-level` attribute should be used to indicate the hierarchical level of the heading. However, when possible, use native heading mark-up instead.

### [Using `aria-labelledby` to name regions and landmarks](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA13)

Use the `aria-labelledby` attribute to provide a way to associate an section of the page marked up as a region or landmarks with text that is on the page that labels it.

### [Using `aria-label` to provide an invisible label where a visible label cannot be used](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA14)

Elements can be given the attribute `aria-label` to provide an accessible name for situations when there is no visible label due to a chosen design approach or layout but the context and visual appearance of the control make its purpose clear.

## Disclaimer

This document is a summarized list of informative techniques for accessible Web content.

It is best used alongside "[How to Meet WCAG 2.1](https://www.w3.org/WAI/WCAG21/quickref/)" and "[Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/2018/REC-WCAG21-20180605/)" for meeting the success criteria established in the guidelines. For more on techniques [click here](https://www.w3.org/WAI/WCAG21/Understanding/understanding-techniques.html).

## Credit

Original W3C document: [Techniques for WCAG 2.1](https://www.w3.org/WAI/WCAG21/Techniques)

Copyright © 2017-2018 [W3C](https://www.w3.org/)® ([MIT](https://www.csail.mit.edu/), [ERCIM](https://www.ercim.eu/), [Keio](https://www.keio.ac.jp/), [Beihang](http://ev.buaa.edu.cn/)). W3C [liability](https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer), [trademark](https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks) and [document use](https://www.w3.org/Consortium/Legal/copyright-documents) rules apply.

` to `

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/alebelcor/effective-a11y

Awesome Lists containing this project

README

` to `