{"id":13341454,"url":"https://github.com/alebelcor/effective-a11y","last_synced_at":"2026-01-24T11:26:10.182Z","repository":{"id":145741022,"uuid":"212894818","full_name":"alebelcor/effective-a11y","owner":"alebelcor","description":"🤝 Hands-on Web accessibility","archived":false,"fork":false,"pushed_at":"2020-01-13T03:02:21.000Z","size":96,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-24T08:30:47.782Z","etag":null,"topics":["a11y","accessibility","inclusive-design","user-experience","web-accessibility"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alebelcor.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-04T20:10:33.000Z","updated_at":"2023-07-18T09:10:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"91c81f70-d91e-4fad-b774-f7febdc5a5f4","html_url":"https://github.com/alebelcor/effective-a11y","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alebelcor%2Feffective-a11y","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alebelcor%2Feffective-a11y/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alebelcor%2Feffective-a11y/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alebelcor%2Feffective-a11y/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alebelcor","download_url":"https://codeload.github.com/alebelcor/effective-a11y/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243115347,"owners_count":20238744,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","accessibility","inclusive-design","user-experience","web-accessibility"],"created_at":"2024-07-29T19:25:26.282Z","updated_at":"2026-01-24T11:26:10.150Z","avatar_url":"https://github.com/alebelcor.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Effective a11y\n\n\u003e Hands-on Web accessibility.\n\n## Table of contents\n\n* [HTML](#html)\n  * [Combining adjacent image and text links for the same resource](#combining-adjacent-image-and-text-links-for-the-same-resource)\n  * [Creating a logical tab order through links, form controls, and objects](#creating-a-logical-tab-order-through-links-form-controls-and-objects)\n  * [Providing text alternatives for the `\u003carea\u003e` elements of image maps](#providing-text-alternatives-for-the-area-elements-of-image-maps)\n  * [Providing a title using the `\u003ctitle\u003e` element](#providing-a-title-using-the-title-element)\n  * [Providing definitions for abbreviations by using the `\u003cabbr\u003e` element](#providing-definitions-for-abbreviations-by-using-the-abbr-element)\n  * [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)\n  * [Providing submit buttons](#providing-submit-buttons)\n  * [Supplementing link text with the `title` attribute](#supplementing-link-text-with-the-title-attribute)\n  * [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)\n  * [:warning:Providing text alternatives on `\u003capplet\u003e` elements](#providing-text-alternatives-on-applet-elements)\n  * [Using `alt` attributes on images used as submit buttons](#using-alt-attributes-on-images-used-as-submit-buttons)\n  * [Using `alt` attributes on `\u003cimg\u003e` elements](#using-alt-attributes-on-img-elements)\n  * [Using `\u003ccaption\u003e` elements to associate data table captions with data tables](#using-caption-elements-to-associate-data-table-captions-with-data-tables)\n  * [Using description lists](#using-description-lists)\n  * [Using `\u003ch1\u003e` to `\u003ch6\u003e` to identify headings](#using-h1-to-h6-to-identify-headings)\n  * [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)\n  * [Using `\u003clabel\u003e` elements to associate text labels with form controls](#using-label-elements-to-associate-text-labels-with-form-controls)\n  * [Using `longdesc`](#using-longdesc)\n  * [Using `\u003cnoembed\u003e` with `\u003cembed\u003e`](#using-noembed-with-embed)\n  * [Using `\u003col\u003e`, `\u003cul\u003e` and `\u003cdl\u003e` for lists or groups of links](#using-ol-ul-and-dl-for-lists-or-groups-of-links)\n  * [Using semantic markup to mark emphasized or special text](#using-semantic-markup-to-mark-emphasized-or-special-text)\n  * [Using table markup to present tabular information](#using-table-markup-to-present-tabular-information)\n  * [Using the body of the `\u003cobject\u003e` element](#using-the-body-of-the-object-element)\n  * [Using the `\u003cdfn\u003e` element to identify the defining instance of a word](#using-the-dfn-element-to-identify-the-defining-instance-of-a-word)\n  * [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)\n  * [Using the `lang` attribute on the `\u003chtml\u003e` element](#using-the-lang-attribute-on-the-html-element)\n  * [Using the `lang` attribute to identify changes in the human language](#using-the-lang-attribute-to-identify-changes-in-the-human-language)\n  * [Using the `\u003clink\u003e` element and navigation tools](#using-the-link-element-and-navigation-tools)\n  * [:warning:Using the `\u003clink\u003e` element to link to a glossary](#using-the-link-element-to-link-to-a-glossary)\n  * [Using the `\u003cruby\u003e` element](#using-the-ruby-element)\n  * [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)\n  * [:warning:Using the `title` attribute of the `\u003cframe\u003e` and `\u003ciframe\u003e` elements](#using-the-title-attribute-of-the-frame-and-iframe-elements)\n  * [Using the `title` attribute to identify form controls when the `\u003clabel\u003e` element cannot be used](#using-the-title-attribute-to-identify-form-controls-when-the-label-element-cannot-be-used)\n  * [Using null `alt` text and no `title` attribute on `\u003cimg\u003e` 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)\n  * [Providing heading elements at the beginning of each section of content](#providing-heading-elements-at-the-beginning-of-each-section-of-content)\n  * [:warning:Using `\u003cframe\u003e` elements to group blocks of repeated material](#using-frame-elements-to-group-blocks-of-repeated-material)\n  * [Providing a description for groups of form controls using `\u003cfieldset\u003e` and `\u003clegend\u003e` elements](#providing-a-description-for-groups-of-form-controls-using-fieldset-and-legend-elements)\n  * [:warning:Using the `summary` attribute of the `\u003ctable\u003e` element to give an overview of data tables](#using-the-summary-attribute-of-the-table-element-to-give-an-overview-of-data-tables)\n  * [Ensuring that opening and closing tags are used according to specification](#ensuring-that-opening-and-closing-tags-are-used-according-to-specification)\n  * [:warning:Ensuring that Web pages are well-formed](#ensuring-that-Web-pages-are-well-formed)\n  * [Using meta refresh to create an instant client-side redirect](#using-meta-refresh-to-create-an-instant-client-side-redirect)\n  * [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)\n  * [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)\n  * [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)\n  * [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)\n  * [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)\n  * [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)\n  * [Using a button with a `\u003cselect\u003e` element to perform an action](#using-a-button-with-a-select-element-to-perform-an-action)\n  * [Using `\u003coptgroup\u003e` to group `\u003coption\u003e` elements inside a `\u003cselect\u003e`](#using-optgroup-to-group-option-elements-inside-a-select)\n  * [Providing text alternatives for ASCII art, emoticons, and leetspeak](#providing-text-alternatives-for-ascii-art-emoticons-and-leetspeak)\n  * [Using HTML according to spec](#using-html-according-to-spec)\n  * [:warning:Using the `title` attribute to provide context-sensitive help](#using-the-title-attribute-to-provide-context-sensitive-help)\n  * [Indicating required form controls using `\u003clabel\u003e` or `\u003clegend\u003e`](#indicating-required-form-controls-using-label-or-legend)\n  * [Using HTML form controls and links](#using-html-form-controls-and-links)\n  * [Ensuring that `id` attributes are unique on a Web page](#ensuring-that-id-attributes-are-unique-on-a-web-page)\n  * [Ensuring that elements do not contain duplicate attributes](#ensuring-that-elements-do-not-contain-duplicate-attributes)\n  * [Using the `\u003ctrack\u003e` element to provide captions](#using-the-track-element-to-provide-captions)\n  * [:warning:Using the `\u003ctrack\u003e` element to provide audio descriptions](#using-the-track-element-to-provide-audio-descriptions)\n  * [Grouping related links using the `\u003cnav\u003e` element](#grouping-related-links-using-the-nav-element)\n  * [Using `autocomplete` attributes](#using-autocomplete-attributes)\n* [CSS](#css)\n  * [Positioning content based on structural markup](#positioning-content-based-on-structural-markup)\n  * [Using CSS to hide a portion of the link text](#using-css-to-hide-a-portion-of-the-link-text)\n  * [Using CSS `letter-spacing` to control spacing within a word](#using-css-letter-spacing-to-control-spacing-within-a-word)\n  * [Using CSS to include decorative images](#using-css-to-include-decorative-images)\n  * [Using percent for font sizes](#using-percent-for-font-sizes)\n  * [Using named font sizes](#using-named-font-sizes)\n  * [Using `em` units for font sizes](#using-em-units-for-font-sizes)\n  * [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)\n  * [Scaling form elements which contain text](#scaling-form-elements-which-contain-text)\n  * [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)\n  * [Specifying alignment either to the left or right in CSS](#specifying-alignment-either-to-the-left-or-right-in-css)\n  * [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)\n  * [Specifying line spacing in CSS](#specifying-line-spacing-in-css)\n  * [Using CSS to control visual presentation of text](#using-css-to-control-visual-presentation-of-text)\n  * [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)\n  * [Using percentage values in CSS for container sizes](#using-percentage-values-in-css-for-container-sizes)\n  * [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)\n  * [Making the DOM order match the visual order](#making-the-dom-order-match-the-visual-order)\n  * [Specifying the size of text containers using `em` units](#specifying-the-size-of-text-containers-using-em-units)\n  * [Using a style switcher to provide a conforming alternate version](#using-a-style-switcher-to-provide-a-conforming-alternate-version)\n  * [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)\n  * [Using CSS Flexbox to reflow content](#using-css-flexbox-to-reflow-content)\n  * [Using media queries and grid CSS to reflow columns](#using-media-queries-and-grid-css-to-reflow-columns)\n  * [Allowing for Reflow with Long URLs and Strings of Text](#allowing-for-reflow-with-long-urls-and-strings-of-text)\n  * [:warning:Using media queries to un-fixing sticky headers / footers](#using-media-queries-to-un-fixing-sticky-headers--footers)\n  * [Allowing for text spacing without wrapping](#allowing-for-text-spacing-without-wrapping)\n  * [Using CSS `max-width` and `height` to fit images](#using-css-max-width-and-height-to-fit-images)\n  * [Using CSS `width`, `max-width` and flexbox to fit labels and inputs](#using-css-width-max-width-and-flexbox-to-fit-labels-and-inputs)\n  * [Using the CSS reduce-motion query to prevent motion](#using-the-css-reduce-motion-query-to-prevent-motion)\n  * [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)\n* [ARIA](#aria)\n  * [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)\n  * [Identifying a required field with the `aria-required` property](#identifying-a-required-field-with-the-aria-required-property)\n  * [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)\n  * [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)\n  * [:warning:Using `aria-label` to provide labels for objects](#using-aria-label-to-provide-labels-for-objects)\n  * [Using `aria-labelledby` for link purpose](#using-aria-labelledby-for-link-purpose)\n  * [Using `aria-label` for link purpose](#using-aria-label-for-link-purpose)\n  * [Using `aria-labelledby` to concatenate a label from several text nodes](#using-aria-labelledby-to-concatenate-a-label-from-several-text-nodes)\n  * [Using `aria-labelledby` to provide a text alternative for non-text content](#using-aria-labelledby-to-provide-a-text-alternative-for-non-text-content)\n  * [Using ARIA landmarks to identify regions of a page](#using-aria-landmarks-to-identify-regions-of-a-page)\n  * [Using `role=\"heading\"` to identify headings](#using-roleheading-to-identify-headings)\n  * [Using `aria-labelledby` to name regions and landmarks](#using-aria-labelledby-to-name-regions-and-landmarks)\n  * [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)\n\n## HTML\n\n### [Combining adjacent image and text links for the same resource](https://www.w3.org/WAI/WCAG21/Techniques/html/H2)\n\nIt's better to combine adjacent image and text links into a single `\u003ca\u003e` element.\n\nProvided the `\u003cimg\u003e` element contained in the `\u003ca\u003e` element would:\n\n* Have an empty `alt` attribute when the `\u003ca\u003e` text would duplicate the information conveyed\n* Have a valid `alt` attribute value when it would complement the `\u003ca\u003e` text\n\n### [Creating a logical tab order through links, form controls, and objects](https://www.w3.org/WAI/WCAG21/Techniques/html/H4)\n\nThe `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.\n\n### [Providing text alternatives for the `\u003carea\u003e` elements of image maps](https://www.w3.org/WAI/WCAG21/Techniques/html/H24)\n\nThe `alt` attribute may be used on an `\u003carea\u003e` element to provide text alternatives on regions of an image map.\n\n### [Providing a title using the `\u003ctitle\u003e` element](https://www.w3.org/WAI/WCAG21/Techniques/html/H25)\n\nAll HTML pages, including frames, must have a `\u003ctitle\u003e` element in the `\u003chead\u003e` with a simple phrase defining the purpose of the page.\n\n### [Providing definitions for abbreviations by using the `\u003cabbr\u003e` element](https://www.w3.org/WAI/WCAG21/Techniques/html/H28)\n\nUse the `\u003cabbr\u003e` element for any abbreviations, acronyms, and initialisms.\n\n### [Providing link text that describes the purpose of a link for anchor elements](https://www.w3.org/WAI/WCAG21/Techniques/html/H30)\n\nProvide descriptive text as the content of the `\u003ca\u003e` element.\n\nIf the only content of a link is an image, the text alternative for the image is used instead.\n\nWhen 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.\n\n### [Providing submit buttons](https://www.w3.org/WAI/WCAG21/Techniques/html/H32)\n\nProvide a way to submit form data by having one of these:\n\n* `\u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e`\n* `\u003cinput type=\"submit\"\u003e`\n* `\u003cinput type=\"image\"\u003e`\n\n### [Supplementing link text with the `title` attribute](https://www.w3.org/WAI/WCAG21/Techniques/html/H33)\n\nUse the `title` attribute on the `\u003ca\u003e` element to provide additional text describing the link. It's used to clarify or further describe the purpose of the link.\n\nInformation the user should know, before following a link, should be provided in the link text.\n\n### [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)\n\nTo 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.\n\n* `\u0026lrm;` or `\u0026#x200e;` for the left-to-right mark\n* `\u0026rlm;` or `\u0026#x200f;` for the right-to-left mark\n\nFor example, assuming a base language of English (left-to-right), we'll use a phrase in Arabic (right-to-left) mid-sentence:\n\n```html\n\u003cp\u003eAs the proverb says \"\u003cspan lang=\"ar\"\u003eاصبر تنل‏\u003c/span\u003e\u0026lrm;\". Do not despair\u003c/p\u003e\n```\n\n### [Providing text alternatives on `\u003capplet\u003e` elements](https://www.w3.org/WAI/WCAG21/Techniques/html/H35)\n\n:warning: **Note**: `\u003capplet\u003e` is obsolete. Use `\u003cembed\u003e` or `\u003cobject\u003e` instead.\n\nThe `alt` attribute may be used on an `\u003capplet\u003e` element to label it. Provide text alternatives to it in the body of the element.\n\n### [Using `alt` attributes on images used as submit buttons](https://www.w3.org/WAI/WCAG21/Techniques/html/H36)\n\nFor `\u003cinput type=\"image\"\u003e`, the `alt` attribute of the `\u003cinput\u003e` element is used to provide a functional label that indicates the button's function, not the image description.\n\n### [Using `alt` attributes on `\u003cimg\u003e` elements](https://www.w3.org/WAI/WCAG21/Techniques/html/H37)\n\nWhen using the `\u003cimg\u003e` element, specify a short text alternative with the `alt` attribute.\n\nWhen an image contains words that are important to understanding the content, the `alt` text should include those words.\n\nThe text alternative does not necessarily describe the visual characteristics of the image itself but must convey the same meaning as the image.\n\n### [Using `\u003ccaption\u003e` elements to associate data table captions with data tables](https://www.w3.org/WAI/WCAG21/Techniques/html/H39)\n\nThe `\u003ccaption\u003e` represents the title of its parent `\u003ctable\u003e`. It's a table identifier and acts like a title or heading for the table.\n\nUsing it allows screen readers to navigate directly to the caption for a table if one is present.\n\n### [Using description lists](https://www.w3.org/WAI/WCAG21/Techniques/html/H40)\n\nProvide description of names or terms using `\u003cdl\u003e`, `\u003cdt\u003e`, and `\u003cdd\u003e`. Multiple terms can be associated with a single description, as can a single term with multiple descriptions.\n\nThe `title` attribute can be used to provide additional information about the description list.\n\n### [Using `\u003ch1\u003e` to `\u003ch6\u003e` to identify headings](https://www.w3.org/WAI/WCAG21/Techniques/html/H42)\n\nUse 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.\n\n### [Using `id` and `headers` attributes to associate data cells with header cells in data tables](https://www.w3.org/WAI/WCAG21/Techniques/html/H43)\n\nUse only when data cells are associated with more than one row and/or one column header.\n\nAdd a `headers` attribute to each `\u003ctd\u003e`. Its value should be the `id` value(s) of the associated header cell(s) (separated by spaces, if multiple).\n\n\u003cdetails\u003e\u003csummary\u003eExample\u003c/summary\u003e\n\n```html\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth id=\"b\" rowspan=\"2\"\u003eBudget\u003c/th\u003e\n      \u003cth id=\"g\" colspan=\"3\"\u003eGroceries\u003c/th\u003e\n      \u003cth id=\"r\" rowspan=\"2\"\u003eRemaining\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003cth id=\"v\" headers=\"g\"\u003eVeggies\u003c/th\u003e\n      \u003cth id=\"f\" headers=\"g\"\u003eFruit\u003c/th\u003e\n      \u003cth id=\"m\" headers=\"g\"\u003eMeat\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd headers=\"b\"\u003e$50\u003c/td\u003e\n      \u003ctd headers=\"g v\"\u003e$10\u003c/td\u003e\n      \u003ctd headers=\"g f\"\u003e$5\u003c/td\u003e\n      \u003ctd headers=\"g m\"\u003e$20\u003c/td\u003e\n      \u003ctd headers=\"r\"\u003e$15\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n```\n\n\u003c/details\u003e\n\n### [Using `\u003clabel\u003e` elements to associate text labels with form controls](https://www.w3.org/WAI/WCAG21/Techniques/html/H44)\n\nUse the `\u003clabel\u003e` 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.\n\n\u003cdetails\u003e\u003csummary\u003eElements that use explicitly associated labels\u003c/summary\u003e\n\n* `\u003cinput type=\"text\"\u003e`\n* `\u003cinput type=\"checkbox\"\u003e`\n* `\u003cinput type=\"radio\"\u003e`\n* `\u003cinput type=\"file\"\u003e`\n* `\u003cinput type=\"password\"\u003e`\n* `\u003ctextarea\u003e`\n* `\u003cselect\u003e`\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eElements that do not use \u003ccode\u003e\u0026lt;label\u0026gt;\u003c/code\u003e\u003c/summary\u003e\n\n* `\u003cinput type=\"submit\"\u003e`: Use `value` attribute instead\n* `\u003cinput type=\"reset\"\u003e`: Use `value` attribute instead\n* `\u003cinput type=\"hidden\"\u003e`: Use `value` attribute instead\n* `\u003cinput type=\"button\"\u003e`: Use `value` attribute instead\n* `\u003cinput type=\"image\"\u003e`: Use `alt` attribute instead\n* `\u003cbutton\u003e`: Use element content instead\n\n\u003c/details\u003e\n\n### [Using `longdesc`](https://www.w3.org/WAI/WCAG21/Techniques/html/H45)\n\nProvide 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.\n\nThe `longdesc` attribute is a URI. And can be either a reference to a separate resource, or within the same page.\n\n\u003cdetails\u003e\u003csummary\u003eExample\u003c/summary\u003e\n\n```html\n\u003c!-- Long description in a separate resource --\u003e\n\u003cimg src=\"graph.jpg\" alt=\"A complex graph\" longdesc=\"graph-description.html\"\u003e\n\n\u003c!-- Long description within the same page --\u003e\n\u003cimg src=\"graph.jpg\" alt=\"A complex graph\" longdesc=\"data.html#graph-description\"\u003e\n...\n\u003cdiv id=\"graph-description\"\u003e\n  \u003cp\u003e...\u003c/p\u003e\n\u003c/div\u003e\n```\n\n\u003c/details\u003e\n\n### [Using `\u003cnoembed\u003e` with `\u003cembed\u003e`](https://www.w3.org/WAI/WCAG21/Techniques/html/H46)\n\nProvide alternative content for the `\u003cembed\u003e` element in a `\u003cnoembed\u003e` element.\n\n`\u003cnoembed\u003e` is rendered only if the `\u003cembed\u003e` is not supported. It is a good idea to include it as a child element of `\u003cembed\u003e`, instead of positioning it anywhere else on the page, so that it functions as a text alternative associated with the `\u003cembed\u003e` element it describes.\n\n### [Using `\u003col\u003e`, `\u003cul\u003e` and `\u003cdl\u003e` for lists or groups of links](https://www.w3.org/WAI/WCAG21/Techniques/html/H48)\n\nCreate lists of related items using list elements appropriate for their purposes.\n\n* The `\u003col\u003e` element is used when the list is ordered\n* The `\u003cul\u003e` element is used when the list is unordered\n* Definition lists (`\u003cdl\u003e`) are used to group terms with their definitions\n\nAvoid making lists using (visually formatting) markup like `*`, `•`, and `\u003cbr\u003e`, as that is more difficult to navigate.\n\n### [Using semantic markup to mark emphasized or special text](https://www.w3.org/WAI/WCAG21/Techniques/html/H49)\n\nUse 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.\n\n* `\u003cem\u003e` to represent stress emphasis of its contents\n* `\u003cstrong\u003e` to represent strong importance, seriousness, or urgency for its contents\n* `\u003cblockquote\u003e` to represent a section that is quoted from another source\n* `\u003ccite\u003e` to represent the title of a work (e.g. a book, a song, a film, etc.)\n* `\u003cq\u003e` to represent some phrasing content quoted from another source\n* `\u003csup\u003e` to represent a superscript\n* `\u003csub\u003e` to represent a subscript\n\n### [Using table markup to present tabular information](https://www.w3.org/WAI/WCAG21/Techniques/html/H51)\n\nUse `\u003ctable\u003e`, `\u003ctr\u003e`, `\u003cth\u003e`, and `\u003ctd\u003e` to present tabular information\n\n### [Using the body of the `\u003cobject\u003e` element](https://www.w3.org/WAI/WCAG21/Techniques/html/H53)\n\nThe body of the `\u003cobject\u003e` element can be used to provide a complete text alternative for the object, or may contain additional non-text content with text alternatives.\n\n### [Using the `\u003cdfn\u003e` element to identify the defining instance of a word](https://www.w3.org/WAI/WCAG21/Techniques/html/H54)\n\nThe `\u003cdfn\u003e` element is used to indicate the defining instance of the enclosed term. It marks the occurrence of the term where the term is defined.\n\n### [Using the `dir` attribute on an inline element to resolve problems with nested directional runs](https://www.w3.org/WAI/WCAG21/Techniques/html/H56)\n\nThe `dir` attribute is a global attribute that specifies the element's text directionality.\n\nIts values can be:\n\n* `ltr` to indicate left-to-right text\n* `rtl` to indicate right-to-left text\n* `auto` to indicate direction should be determined programmatically\n\n### [Using the `lang` attribute on the `\u003chtml\u003e` element](https://www.w3.org/WAI/WCAG21/Techniques/html/H57)\n\nIdentify the default language of a document by providing the `lang` global attribute on the `\u003chtml\u003e` element.\n\n### [Using the `lang` attribute to identify changes in the human language](https://www.w3.org/WAI/WCAG21/Techniques/html/H58)\n\nIdentify 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.\n\nFor example: `en` for English, and `en-GB` for British English.\n\n### [Using the `\u003clink\u003e` element and navigation tools](https://www.w3.org/WAI/WCAG21/Techniques/html/H59)\n\nThe `\u003clink\u003e` 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.\n\nThe value of its `rel` attribute represents the relationship between the document containing the hyperlink and the destination resource.\n\nSeveral values of [`rel`](https://html.spec.whatwg.org/multipage/links.html#linkTypes) are useful.\n\nFor example:\n\n* `next` to indicate the next document in the series is the referenced document\n* `prev` to indicate the previous document in the series is the referenced document\n\n### [Using the `\u003clink\u003e` element to link to a glossary](https://www.w3.org/WAI/WCAG21/Techniques/html/H60)\n\n: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).\n\nUse a `\u003clink\u003e` element with `rel=\"glossary\"` to provide a mechanism for locating a glossary on a separate page.\n\n### [Using the `\u003cruby\u003e` element](https://www.w3.org/WAI/WCAG21/Techniques/html/H62)\n\nUse [the `\u003cruby\u003e` 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.\n\n\u003cdetails\u003e\u003csummary\u003eExample\u003c/summary\u003e\n\n```html\n\u003cp\u003e\n  \u003cruby\u003e\n    \u003crb\u003eCharlize Theron\u003c/rb\u003e\n    \u003crp\u003e(\u003c/rp\u003e\n      \u003crt\u003eshar-LEEZ THERR-ən\u003c/tr\u003e\n    \u003crp\u003e)\u003c/rp\u003e\n  \u003c/ruby\u003e\n\u003c/p\u003e\n```\n\n\u003c/details\u003e\n\n### [Using the `scope` attribute to associate header cells and data cells in data tables](https://www.w3.org/WAI/WCAG21/Techniques/html/H63)\n\nThe `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.\n\nFor simple tables that have the headers in the first row or column then it is sufficient to simply use the `\u003cth\u003e` elements without `scope`.\n\n\u003cdetails\u003e\u003csummary\u003eExample\u003c/summary\u003e\n\n```html\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"col\"\u003eName\u003c/th\u003e\n      \u003cth scope=\"col\"\u003eEmail\u003c/th\u003e\n      \u003cth scope=\"col\"\u003ePhone\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"row\"\u003eJohn Doe\u003c/th\u003e\n      \u003ctd\u003ejohn@doe.com\u003c/td\u003e\n      \u003ctd\u003e1234567890\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"row\"\u003eJane Doe\u003c/th\u003e\n      \u003ctd\u003ejane@doe.com\u003c/td\u003e\n      \u003ctd\u003e9876543210\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n```\n\n\u003c/details\u003e\n\n### [Using the `title` attribute of the `\u003cframe\u003e` and `\u003ciframe\u003e` elements](https://www.w3.org/WAI/WCAG21/Techniques/html/H64)\n\n:warning: **Note**: `\u003cframe\u003e`, `\u003cframeset\u003e`, and `\u003cnoframes\u003e` are obsolete. Use `\u003ciframe\u003e` and CSS instead, or use server-side includes to generate complete pages with the various invariant parts merged in.\n\nProvide a label for a frame so users can determine which frame to enter and explore in detail.\n\nThis is different than the `\u003ctitle\u003e` element. The attribute facilitates navigation among frames and the element clarifies the user's current location.\n\n### [Using the `title` attribute to identify form controls when the `\u003clabel\u003e` element cannot be used](https://www.w3.org/WAI/WCAG21/Techniques/html/H65)\n\nUse 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.\n\n\u003cdetails\u003e\u003csummary\u003eExample\u003c/summary\u003e\n\n```html\n\u003cinput type=\"text\" title=\"Area code\" size=\"3\" value=\"\"\u003e\n\u003cinput type=\"text\" title=\"First three digits of phone number\" size=\"3\" value=\"\"\u003e\n\u003cinput type=\"text\" title=\"Last four digits of phone number\" size=\"4\" value=\"\"\u003e\n```\n\n\u003c/details\u003e\n\n### [Using null `alt` text and no `title` attribute on `\u003cimg\u003e` elements for images that Assistive Technology should ignore](https://www.w3.org/WAI/WCAG21/Techniques/html/H67)\n\n`\u003cimg\u003e` 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=\"\"`).\n\n### [Providing heading elements at the beginning of each section of content](https://www.w3.org/WAI/WCAG21/Techniques/html/H69)\n\nUse section headings to convey the structure of the content. Avoid skipping levels in the sequence of headings.\n\n### [Using `\u003cframe\u003e` elements to group blocks of repeated material](https://www.w3.org/WAI/WCAG21/Techniques/html/H70)\n\n:warning: **Note**: `\u003cframe\u003e`, `\u003cframeset\u003e`, and `\u003cnoframes\u003e` are obsolete. Use `\u003ciframe\u003e` and CSS instead, or use server-side includes to generate complete pages with the various invariant parts merged in.\n\nUse frames to organize elements to provide a mechanism for easily bypassing blocks of repeated content.\n\nIf the site uses framesets, organize the blocks of content into separate frames. Make certain that the repeated blocks of content appear in the same `\u003cframe\u003e` within the `\u003cframeset\u003e` of each Web page. In addition, each `\u003cframe\u003e` element must have a `title` attribute to describe the content of the frame.\n\n### [Providing a description for groups of form controls using `\u003cfieldset\u003e` and `\u003clegend\u003e` elements](https://www.w3.org/WAI/WCAG21/Techniques/html/H71)\n\nForm controls can be grouped by enclosing them within the `\u003cfieldset\u003e` element. All controls within a given `\u003cfieldset\u003e` are then related.\n\nThe first element inside the `\u003cfieldset\u003e` must be a `\u003clegend\u003e` element, which provides a label or description for the group.\n\nThis 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.\n\n### [Using the `summary` attribute of the `\u003ctable\u003e` element to give an overview of data tables](https://www.w3.org/WAI/WCAG21/Techniques/html/H73)\n\n:warning: **Note**: `summary` on `\u003ctable\u003e` is obsolete. Use [these techniques](https://html.spec.whatwg.org/multipage/tables.html#table-descriptions-techniques) instead.\n\nProvide a brief overview of how data has been organized into a table or a brief explanation of how to navigate the table.\n\n### [Ensuring that opening and closing tags are used according to specification](https://www.w3.org/WAI/WCAG21/Techniques/html/H74)\n\nProvide closing tags for all elements that require them.\n\nEnsure there are no closing tags for all elements that forbid them.\n\nEnsure opening and closing tags of all elements are correctly nested.\n\n### [Ensuring that Web pages are well-formed](https://www.w3.org/WAI/WCAG21/Techniques/html/H75)\n\n: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.\n\nAvoid key errors that are known to cause problems by checking document well-formedness with an XML parser.\n\n### [Using meta refresh to create an instant client-side redirect](https://www.w3.org/WAI/WCAG21/Techniques/html/H76)\n\n:information_source: **Note**: Redirects are preferably implemented on the server side.\n\nEnable redirects on the client side without confusing the user.\n\n\u003cdetails\u003e\u003csummary\u003eExample\u003c/summary\u003e\n\n```html\n\u003chead\u003e\n  \u003c!-- Immediate (0 seconds) redirect to another URI (example.com) --\u003e\n  \u003cmeta http-equiv=\"refresh\" content=\"0; url=https://example.com\"\u003e\n\u003c/head\u003e\n```\n\n\u003c/details\u003e\n\n### [Identifying the purpose of a link using link text combined with its enclosing list item](https://www.w3.org/WAI/WCAG21/Techniques/html/H77)\n\nThe `\u003cli\u003e` enclosing the `\u003ca\u003e` provides context for an otherwise unclear link when the `\u003cli\u003e` is the nearest enclosing block-level ancestor element.\n\n\u003cdetails\u003e\u003csummary\u003eExample\u003c/summary\u003e\n\n```html\n\u003cul\u003e\n  \u003cli\u003e\n    Our biggest discounts of the year:\n    \u003ca href=\"/winter-sale\"\u003eThe Winter Sale\u003c/a\u003e.\n  \u003c/li\u003e\n  ...\n\u003c/ul\u003e\n```\n\n\u003c/details\u003e\n\n### [Identifying the purpose of a link using link text combined with its enclosing paragraph](https://www.w3.org/WAI/WCAG21/Techniques/html/H78)\n\nSame 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 `\u003cp\u003e` provides the context.\n\n### [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)\n\nThe table header cell(s) associated to the `\u003ctd\u003e` enclosing the `\u003ca\u003e` provides context for an otherwise unclear link when the `\u003ctd\u003e` is the nearest enclosing block-level ancestor element.\n\n### [Identifying the purpose of a link using link text combined with the preceding heading element](https://www.w3.org/WAI/WCAG21/Techniques/html/H80)\n\nWhenever possible, provide link text that identifies the purpose of the link without needing additional context.\n\nThe preceding heading to the `\u003ca\u003e` provides context for an otherwise unclear link.\n\n### [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)\n\nWhenever possible, provide link text that identifies the purpose of the link without needing additional context.\n\nSame 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 `\u003cli\u003e`.\n\n### [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)\n\nOn 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.\n\n### [Using a button with a `\u003cselect\u003e` element to perform an action](https://www.w3.org/WAI/WCAG21/Techniques/html/H84)\n\nAvoid having an action occur as a side effect of choosing a value for the `\u003cselect\u003e` element.\n\nInstead allow the user to control when an action is performed by selecting a button to perform the action.\n\n### [Using `\u003coptgroup\u003e` to group `\u003coption\u003e` elements inside a `\u003cselect\u003e`](https://www.w3.org/WAI/WCAG21/Techniques/html/H85)\n\nGroup options together with the `\u003coptgroup\u003e` element, with the related `\u003coption\u003e` elements inside that element. Label the group with the `label` attribute so users will know what to expect inside the group.\n\nThe `\u003coptgroup\u003e` element should be directly inside the `\u003cselect\u003e` element, and the `\u003coption\u003e` elements directly inside the `\u003coptgroup\u003e`.\n\n### [Providing text alternatives for ASCII art, emoticons, and leetspeak](https://www.w3.org/WAI/WCAG21/Techniques/html/H86)\n\nProvide text alternatives immediately before or after all ASCII art, emoticons and/or Leetspeak.\n\nIt is also suggested that there be a link to skip over the ASCII art (although this is not required).\n\n\u003cdetails\u003e\u003csummary\u003eExample\u003c/summary\u003e\n\n```html\n:-) (smile)\n\n\u003cabbr title=\"smile\"\u003e:-)\u003c/abbr\u003e\n```\n\n\u003c/details\u003e\n\n### [Using HTML according to spec](https://www.w3.org/WAI/WCAG21/Techniques/html/H88)\n\nUse only features that are defined in the specification, in the manner prescribed by the specification, while making sure the content can be parsed.\n\n### [Using the `title` attribute to provide context-sensitive help](https://www.w3.org/WAI/WCAG21/Techniques/html/H89)\n\n: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.\n\nProvide 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.\n\n### [Indicating required form controls using `\u003clabel\u003e` or `\u003clegend\u003e`](https://www.w3.org/WAI/WCAG21/Techniques/html/H90)\n\nProvide a symbol or text indicating that the control is required by using the `\u003clabel\u003e` element, or the `\u003clegend\u003e` for groups of controls associated via `\u003cfieldset\u003e`.\n\n\u003cdetails\u003e\u003csummary\u003eExample\u003c/summary\u003e\n\n```html\n\u003clabel for=\"firstname\"\u003eFirst name (required):\u003c/label\u003e\n\u003cinput type=\"text\" name=\"firstname\" id=\"firstname\"\u003e\n\n\u003clabel for=\"lastname\"\u003eLast name \u003cabbr title=\"required\"\u003e*\u003c/abbr\u003e:\u003c/label\u003e\n\u003cinput type=\"text\" name=\"lastname\" id=\"lastname\"\u003e\n\n\u003cfieldset\u003e\n  \u003clegend\u003ePlease enter the following (required):\u003c/legend\u003e\n\n  \u003clabel for=\"firstname\"\u003eFirst name\u003c/label\u003e\n  \u003cinput type=\"text\" name=\"firstname\" id=\"firstname\"\u003e\n\n  \u003clabel for=\"lastname\"\u003eLast name\u003c/label\u003e\n  \u003cinput type=\"text\" name=\"lastname\" id=\"lastname\"\u003e\n\u003c/fieldset\u003e\n```\n\n\u003c/details\u003e\n\n### [Using HTML form controls and links](https://www.w3.org/WAI/WCAG21/Techniques/html/H91)\n\nFor 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).\n\n### [Ensuring that `id` attributes are unique on a Web page](https://www.w3.org/WAI/WCAG21/Techniques/html/H93)\n\nAll `id` attribute values must be unique on the web page to avoid key errors that are known to cause problems for Assistive Technologies.\n\n### [Ensuring that elements do not contain duplicate attributes](https://www.w3.org/WAI/WCAG21/Techniques/html/H94)\n\nCheck that no attribute occurs more than once on any element to avoid key errors that are known to cause problems for Assistive Technologies.\n\n### [Using the `\u003ctrack\u003e` element to provide captions](https://www.w3.org/WAI/WCAG21/Techniques/html/H95)\n\nUse [the `\u003ctrack\u003e` element](https://html.spec.whatwg.org/multipage/media.html#the-track-element) to specify a captions timed text track for a `\u003cvideo\u003e` element.\n\n### [Using the `\u003ctrack\u003e` element to provide audio descriptions](https://www.w3.org/WAI/WCAG21/Techniques/html/H96)\n\n:warning: **Note**: As of February 2019 there is no native support in browsers for this technique. Except via JavaScript polyfills.\n\nUse [the `\u003ctrack\u003e` element](https://html.spec.whatwg.org/multipage/media.html#the-track-element) to specify a descriptions timed text track for a `\u003cvideo\u003e` element.\n\n### [Grouping related links using the `\u003cnav\u003e` element](https://www.w3.org/WAI/WCAG21/Techniques/html/H97)\n\nUse a `\u003cnav\u003e` to make groups of links easier to locate and skip past by users of Assistive Technology.\n\nWhen the `\u003cnav\u003e` element is employed more than once on a page, distinguish the navigation groups by using an `aria-label` or `aria-labelledby` attribute.\n\n### [Using `autocomplete` attributes](https://www.w3.org/WAI/WCAG21/Techniques/html/H98)\n\nUse [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.\n\n## CSS\n\n### [Positioning content based on structural markup](https://www.w3.org/WAI/WCAG21/Techniques/css/C6)\n\nVisual appearance may be enhanced via style sheets while still maintaining a meaningful presentation when style sheets are not applied.\n\n### [Using CSS to hide a portion of the link text](https://www.w3.org/WAI/WCAG21/Techniques/css/C7)\n\nSupplement 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.\n\nAvoid `visibility: hidden;` and `display: none;` since those hide text from Assistive Technology.\n\n\u003cdetails\u003e\u003csummary\u003eExample\u003c/summary\u003e\n\n```css\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(1px, 1px, 1px, 1px);\n  clip-path: inset(100%);\n  white-space: nowrap;\n}\n```\n\n```html\n\u003cbutton type=\"button\"\u003e\n  \u003cspan aria-hidden=\"true\"\u003e\u0026times;\u003c/span\u003e\n  \u003cspan class=\"sr-only\"\u003eClose\u003c/span\u003e\n\u003c/button\u003e\n```\n\n\u003c/details\u003e\n\n### [Using CSS `letter-spacing` to control spacing within a word](https://www.w3.org/WAI/WCAG21/Techniques/css/C8)\n\nvisual appearance of spacing in text may be enhanced via style sheets while still maintaining meaningful text sequencing.\n\nThe 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.\n\n### [Using CSS to include decorative images](https://www.w3.org/WAI/WCAG21/Techniques/css/C9)\n\nAdd purely decorative images and images used for visual formatting to Web content without requiring additional markup within the content by using CSS properties like:\n\n* `background`\n* `background-image`\n* `content` with the `::before` and `::after` pseudo-elements\n* `list-style-image`\n\nThis is not appropriate for images that are meant to convey information or provide functionality.\n\n### [Using percent for font sizes](https://www.w3.org/WAI/WCAG21/Techniques/css/C12)\n\nSpecify text font size proportionally so that browser can scale content effectively.\n\nIf a `font-size` is specified for the `\u003cbody\u003e` element, all other elements inherit that value, unless overridden by a more specific selector.\n\n### [Using named font sizes](https://www.w3.org/WAI/WCAG21/Techniques/css/C13)\n\nSpecify a named font size that expresses the relative font size desired.\n\n[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`:\n\n* `xx-small`\n* `x-small`\n* `small`\n* `medium`\n* `large`\n* `x-large`\n* `xx-large`\n* `larger`\n* `smaller`\n\n### [Using `em` units for font sizes](https://www.w3.org/WAI/WCAG21/Techniques/css/C14)\n\nSpecify 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.\n\nIf a `font-size` is specified for the `\u003cbody\u003e` element, all other elements inherit that value, unless overridden by a more specific selector.\n\n### [Using CSS to change the presentation of a user interface component when it receives focus](https://www.w3.org/WAI/WCAG21/Techniques/css/C15)\n\nHighlighting 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.\n\nThe dynamic pseudo-classes `:hover`, `:active`, and `:focus` can be used for this.\n\n### [Scaling form elements which contain text](https://www.w3.org/WAI/WCAG21/Techniques/css/C17)\n\nEnsure text-based form controls resize when text size is changed in the browser by using relative units.\n\n### [Using CSS margin and padding rules instead of spacer images for layout design](https://www.w3.org/WAI/WCAG21/Techniques/css/C18)\n\nAvoid using spacer images (e.g. 1x1 pixel transparent GIFs) for layout control, indenting or creating space. Use CSS margin and padding instead.\n\n### [Specifying alignment either to the left or right in CSS](https://www.w3.org/WAI/WCAG21/Techniques/css/C19)\n\nUse the CSS `text-align` property to align blocks of text either left or right.\n\n### [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)\n\nEnsure 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.\n\n### [Specifying line spacing in CSS](https://www.w3.org/WAI/WCAG21/Techniques/css/C21)\n\nProvide line spacing between 1.5 to 2 to allow people with cognitive disabilities that have trouble tracking lines of text.\n\n\u003cdetails\u003e\u003csummary\u003eExample\u003c/summary\u003e\n\n```css\np {\n  line-height: 1.5; /* or 150% */\n}\n```\n\n\u003c/details\u003e\n\n### [Using CSS to control visual presentation of text](https://www.w3.org/WAI/WCAG21/Techniques/css/C22)\n\nThe following CSS properties are useful to style text and avoid the need for text in images:\n\n* `font-family`: specifies a prioritized list of one or more font family names\n* `text-align`: sets the horizontal alignment of a block element or table-cell box\n* `font-size`: sets the size of the font\n* `font-style`: sets whether a font should be styled with a normal, italic, or oblique face\n* `font-weight`: sets the weight (or boldness) of the font\n* `color`: sets the foreground color value of an element's text and text decorations\n* `line-height`: sets the height of a line box\n* `text-transform`: specifies how to capitalize an element's text\n* `letter-spacing`: sets the spacing behavior between text characters\n* `background-image`: sets one or more background images on an element\n* `::first-line`: pseudo-element that applies styles to the first line of a block-level element\n* `::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)\n* `::before` and `::after`: pseudo-elements used to insert decorative non-text content before or after blocks of text\n\n### [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)\n\nSome 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.\n\nWhen 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.\n\n### [Using percentage values in CSS for container sizes](https://www.w3.org/WAI/WCAG21/Techniques/css/C24)\n\nSpecify 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.\n\n### [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)\n\nSpecify borders and layout using CSS and leave text and background colors to render according to the user's browser and/or operating system settings.\n\n### [Making the DOM order match the visual order](https://www.w3.org/WAI/WCAG21/Techniques/css/C27)\n\nEnsure 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.\n\n### [Specifying the size of text containers using `em` units](https://www.w3.org/WAI/WCAG21/Techniques/css/C28)\n\nSpecify 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.\n\n### [Using a style switcher to provide a conforming alternate version](https://www.w3.org/WAI/WCAG21/Techniques/css/C29)\n\nWhen 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.\n\n### [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)\n\nCSS 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).\n\n### [Using CSS Flexbox to reflow content](https://www.w3.org/WAI/WCAG21/Techniques/css/C30)\n\nUse 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.\n\n### [Using media queries and grid CSS to reflow columns](https://www.w3.org/WAI/WCAG21/Techniques/css/C32)\n\nSame as [\"Using CSS Flexbox to reflow content\"](#using-css-flexbox-to-reflow-content). But with CSS Grid and Media Queries.\n\n### [Allowing for Reflow with Long URLs and Strings of Text](https://www.w3.org/WAI/WCAG21/Techniques/css/C33)\n\nUsing a human readable text link, rather than a long URL, is better for usability and accessibility.\n\nHaving said that, you may use CSS properties `overflow-wrap` and `word-wrap` to help wrap the text in a long URL.\n\n### [Using media queries to un-fixing sticky headers / footers](https://www.w3.org/WAI/WCAG21/Techniques/css/C34)\n\n: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.\n\nPresent 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.\n\n### [Allowing for text spacing without wrapping](https://www.w3.org/WAI/WCAG21/Techniques/css/C35)\n\nContent needs to allow spacing changes without loss of content or functionality by allowing the elements containing the text to expand as needed.\n\nWhere 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.\n\nIf elements must use a fixed width, a safe value is 20% wider than the default maximum width.\n\n### [Allowing for text spacing override](https://www.w3.org/WAI/WCAG21/Techniques/css/C36)\n\nContent 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.\n\nIn English languages, if authors do not set the CSS `height` property, it can help ensure paragraphs expand.\n\n### [Using CSS `max-width` and `height` to fit images](https://www.w3.org/WAI/WCAG21/Techniques/css/C37)\n\nThe basic principles of fitting images are to:\n\n1. Define the `max-width` property for images, and;\n1. Define the `height` property for images, so they enlarge or shrink in the available space and respond to zoom levels.\n\n### [Using CSS `width`, `max-width` and flexbox to fit labels and inputs](https://www.w3.org/WAI/WCAG21/Techniques/css/C38)\n\nWhen 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.\n\n### [Using the CSS reduce-motion query to prevent motion](https://www.w3.org/WAI/WCAG21/Techniques/css/C39)\n\nAllow users to prevent animation (e.g. \"parallax scrolling\") from being displayed on Web pages, via the use of the `prefers-reduced-motion` media query.\n\n\u003cdetails\u003e\u003csummary\u003eExample\u003c/summary\u003e\n\n```css\n@media (prefers-reduced-motion: reduce) {\n  /* disable motion here */\n}\n```\n\n\u003c/details\u003e\n\n### [Creating a two-color focus indicator to ensure sufficient contrast with all components](https://www.w3.org/WAI/WCAG21/Techniques/css/C40)\n\nCreate 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.\n\n\u003cdetails\u003e\u003csummary\u003eExample\u003c/summary\u003e\n\n```css\n.element:focus {\n  box-shadow: 0 0 0 1px white;\n  outline: dotted;\n}\n```\n\n\u003c/details\u003e\n\n### [Using the `aria-describedby` property to provide a descriptive label for user interface controls](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA1)\n\nThe [`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.\n\n### [Identifying a required field with the `aria-required` property](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA2)\n\nThe [`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`.\n\n### [Using a WAI-ARIA `role` to expose the role of a user interface component](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA4)\n\nThe 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.\n\n### [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)\n\nThe 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.\n\n### [Using `aria-label` to provide labels for objects](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA6)\n\n:warning: **Note**: `aria-label` may be disregarded in situations where `aria-labelledby` is used for the same object.\n\n:warning: **Note**: `aria-label` will override any native naming such as `alt` on `\u003cimg\u003e` or a `\u003clabel\u003e` associated with a form field using the `for` attribute\n\nThe `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.\n\n### [Using `aria-labelledby` for link purpose](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA7)\n\nWhen 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.\n\nThe 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.\n\n### [Using `aria-label` for link purpose](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA8)\n\nDescribe 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`.\n\n### [Using `aria-labelledby` to concatenate a label from several text nodes](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA9)\n\nOne particular use of `aria-labelledby` is for text inputs in situations where a meaningful label should consist of more than one label string.\n\nAuthors 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.\n\n### [Using `aria-labelledby` to provide a text alternative for non-text content](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA10)\n\nThe `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.\n\n### [Using ARIA landmarks to identify regions of a page](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA11)\n\nUse [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.\n\n### [Using `role=\"heading\"` to identify headings](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA12)\n\nProvide 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.\n\n### [Using `aria-labelledby` to name regions and landmarks](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA13)\n\nUse 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.\n\n### [Using `aria-label` to provide an invisible label where a visible label cannot be used](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA14)\n\nElements 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.\n\n## Disclaimer\n\nThis document is a summarized list of informative techniques for accessible Web content.\n\nIt 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).\n\n## Credit\n\nOriginal W3C document: [Techniques for WCAG 2.1](https://www.w3.org/WAI/WCAG21/Techniques)\n\nCopyright © 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falebelcor%2Feffective-a11y","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falebelcor%2Feffective-a11y","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falebelcor%2Feffective-a11y/lists"}