Accessibility documentation index
This document provides a list of links to all accessibility articles on the Mozilla Developer Network.
Found 103 pages:
# | Page | Tags and summary |
---|---|---|
1 | Accessibility | Accessibility, Landing |
Accessibility (often abbreviated to A11y—as in "a" then 11 characters then "y") in Web development means enabling as many people as possible to use Web sites, even when those people's abilities are limited in some way. | ||
2 | Accessibility and Spacial Patterns | Accessibility, Braille, patterns, photosensitive seizures |
NASA conducted research on the perception of color, and found that luminance contrast mattered greatly as to how they were perceived. The two images below are from NASA research, specifically, from the article, "Designing With Blue" | ||
3 | Accessibility: What users can do to browse more safely | color, epilepsy, photosensitivity, prefers-reduced-motion, reflex epilepsy, saturation, seizure disorders, seizures, user settings, web animation |
This article discusses making web content accessible for those with vestibular disorders, and those who support them, by taking advantage of personalization and accessibility settings built into the operating systems. Taking advantage of personalization settings can help prevent exposure to content leading to seizures and / or other physical reactions. | ||
4 | Accessible dynamic content | Accessibility |
This content has been moved to An overview of accessible web applications and widgets. | ||
5 | An overview of accessible web applications and widgets | ARIA, Accessibility, Guide, Web apps, Widget |
Most JavaScript libraries offer a library of client-side widgets that mimic the behavior of familiar desktop interfaces. Sliders, menu bars, file list views, and more can be built with a combination of JavaScript, CSS, and HTML. Since the HTML4 specification doesn't provide built-in tags that semantically describe these kinds of widgets, developers typically resort to using generic elements such as <div> and <span>. While this results in a widget that looks like its desktop counterpart, there usually isn't enough semantic information in the markup to be usable by an assistive technology. | ||
6 | Architecture | Accessibility, Developing Mozilla |
The implementation of text and embedded objects in Mozilla is clever but confusing. Here is a bit of history and an explanation. | ||
7 | ARIA | ARIA, Accessibility, HTML |
Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities. | ||
8 | ARIA annotations | ARIA, Accessibility, WAI-ARIA, annotations, comments, details, suggestions |
WAI-ARIA version 1.3 sees the addition of a set of new features, collectively known as ARIA annotations, which allow the creation of accessible annotations inside web documents. Typical use cases include edit suggestions (i.e. an addition and/or deletion in an editable document), and comments (e.g. an editorial comment related to a part of a document under review). | ||
9 | ARIA guides | ARIA |
Accessible Rich Internet Applications (ARIA) defines ways to make the Web more accessible to people with disabilities. A few guidelines to follow that ensure better accessibility, like using drag and drop for placement of the widgets. | ||
10 | ARIA live regions | ARIA, Accessibility, ariaLive |
Using JavaScript, it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction. While these changes are usually visually apparent to users who can see the page, they may not be obvious to users of assistive technologies. ARIA live regions fill this gap and provide a way to programmatically expose dynamic content changes in a way that can be announced by assistive technologies. | ||
11 | ARIA Screen Reader Implementors Guide | ARIA, Accessibility |
This is just a guide. Live region markup is a complex area which is somewhat open to interpretation. The following is intended to provide implementation guidance that respects screen readers developers' need to try different things. The intention is to strike a balance between providing useful guidance on how to use the markup's intended meaning while supporting live regions as an area for screen readers to innovate and compete. | ||
12 | Using ARIA: Roles, states, and properties | ARIA, Accessibility, Overview, Reference |
ARIA defines semantics that can be applied to elements, with these divided into roles (defining a type of user interface element) and states and properties that are supported by a role. Authors must assign an ARIA role and the appropriate states and properties to an element during its life-cycle, unless the element already has appropriate ARIA semantics (via use of an appropriate HTML element). Addition of ARIA semantics only exposes extra information to a browser's accessibility API, and does not affect a page's DOM. | ||
13 | ARIA Technique Template | Accessibility |
TBD: Add support information for common UA and AT product combinations | ||
14 | Using the alert role | ARIA, Accessibility, Advanced, CSS, Example, HTML, NeedsContent, alert, alert role, alerts, assistive technology, role configuration, wcag1.2.1, wcag3.3.1 |
This technique demonstrates how to use the alert role and describes the effect it has on browsers and assistive technology. |
||
15 | Using the alertdialog role | ARIA, Accessibility, CodingScripting, HTML, NeedsContent, Role, Web Development, agent, alertdialog, alerts, modal, user, userAgent |
This technique demonstrates how to use the |
||
16 | Using the aria-activedescendant attribute | Attribute, Document Object Model, NeedsContent, Property, Widget, aria-activedescendant |
This article describes the aria-activedescendant property. | ||
17 | Using the aria-describedby attribute | ARIA, Accessibility, Attribute |
The aria-describedby attribute is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them. This is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need. |
||
18 | Using the aria-hidden attribute | ARIA, Accessibility, Attribute, CodingScripting, HTML, JavaScript, NeedsContent, Role, agent, alert, user, userAgent |
Adding
According to the fourth rule of ARIA, Using |
||
19 | Using the aria-invalid attribute | ARIA, Accessibility, Attribute, CodingScripting, HTML, JavaScript, NeedsContent, Role, agent, alert, user, userAgent |
This technique demonstrates how to use the |
||
20 | Using the aria-label attribute | ARIA, Accessibility, CodingScripting, HTML, NeedsContent, Reference, Référence(2), agent, aria-label, user, userAgent |
The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use aria-labelledby instead. |
||
21 | Using the aria-labelledby attribute | ARIA, Accessibility, broken link |
The aria-labelledby attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion. |
||
22 | Using the aria-orientation attribute | ARIA, Accessibility, Attribute |
The aria-orientation attribute is used to indicate whether an element is oriented horizontally or vertically. | ||
23 | Using the aria-relevant attribute | ARIA, Accessibility, Attribute, NeedsExample, ariaLive |
The aria-relevant attribute is an optional value used to describe what types of changes have occurred to an aria-live region, and which are relevant and should be announced. Any change that is not relevant acts in the same manner it would if the aria-live attribute were set to off . |
||
24 | Using the aria-required attribute | ARIA, Accessibility, NeedsContent |
The aria-required attribute is used to indicate that user input is required on an element before a form can be submitted. This attribute can be used with any typical HTML form element; it is not limited to elements that have an ARIA role assigned. |
||
25 | Using the aria-valuemax attribute | ARIA, Accessibility |
The aria-valuemax attribute is used to define the maximum value allowed for a range widget such as a slider, spinbutton or progressbar. | ||
26 | Using the aria-valuemin attribute | ARIA, Accessibility, NeedsContent |
The aria-valuemin attribute is used to define the minimum value allowed for a range widget such as a slider, spinbutton or progressbar. If the aria-valuenow has a known maximum and minimum, the author SHOULD provide properties for aria-valuemax and aria-valuemin .The value of aria-valuemin MUST be less than or equal to the value of aria-valuemax . |
||
27 | Using the aria-valuenow attribute | ARIA, Accessibility, NeedsContent |
The aria-valuenow attribute is used to define the current value for a range widget such as a slider, spinbutton or progressbar. If the current value is not known, the author should not set the aria-valuenow attribute. If the aria-valuenow has a known minimum and maximum value, authors should set the aria-valuemin and aria-valuemax attributes. |
||
28 | Using the aria-valuetext attribute | ARIA, Accessibility, Attribute |
The aria-valuetext attribute is used to define the human readable text alternative of aria-valuenow for a range widget such as progressbar, spinbutton or slider. |
||
29 | Using the article role | ARIA, Accessible, NeedsContent |
The article role is used to identify a section of a page that forms an independent part of a document, page or site. Examples of an article include web log posts, newspaper or magazine articles and use-submitted comments. It is independent in that its contents could stand alone, for example in syndication. | ||
30 | Using the group role | ARIA, Accessibility, NeedsContent |
This technique demonstrates how to use the group role and describes the effect it has on browsers and assistive technology. | ||
31 | Using the link role | ARIA, Accessibility |
This technique demonstrates how to use the link role and describes the effect it has on browsers and assistive technology. | ||
32 | Using the log role | ARIA, Accessibility, NeedsContent |
This technique demonstrates how to use the log role and describes the effect it has on browsers and assistive technology. |
||
33 | Using the presentation role | ARIA, NeedsContent, Section 508, WAI-ARIA, WCAG |
This technique demonstrates how to use the presentation role and describes the effect it has on browsers and assistive technology. |
||
34 | Using the progressbar role | ARIA, Accessibility, NeedsContent, NeedsExample |
This technique demonstrates how to use the progressbar role and describes the effect it has on browsers and assistive technology. |
||
35 | Using the radio role | NeedsContent |
This technique demonstrates how to use the radio role and describes the effect it has on browsers and assistive technology. | ||
36 | Using the slider role | ARIA, Accessibility, NeedsContent |
This technique demonstrates how to use the slider role and describes the effect it has on browsers and assistive technology. | ||
37 | Using the status role | ARIA, Accessibility, NeedsContent |
This technique demonstrates how to use the status role and describes the effect it has on browsers and assistive technology. | ||
38 | Using the toolbar role | NeedsContent |
This technique demonstrates how to use the toolbar role and describes the effect it has on browsers and assistive technology. | ||
39 | x-ms-aria-flowfrom | ARIA, Microsoft, Non-standard |
The x-ms-aria-flowfrom property specifies the id of the previous element in an alternative reading order, allowing assistive technology to override the general default of reading in document source order. The property serves to define element relationships utilizing ARIA relationship attributes and the aria-flowto property. |
||
40 | ARIA Test Cases | ARIA, Accessibility |
For each example we test the "Expected" results with assistive technologies, for each browser that AT supports WAI-ARIA in. Where a failure occurs we will test the browser for API incorrectness, using tools such as MSAA Inspect. This must be done in order to determine where to file a bug (browser or AT). | ||
41 | Forms | ARIA, Accessibility |
The following pages provide various techniques for improving the accessibility of web forms: | ||
42 | Alerts | ARIA, Accessibility, Forms, Web |
You have a form — a contact form, for example — that you want to put some accessible error checking into. Examples of common problems include e-mail addresses which are not valid, or a name field which does not contain at least a first name or a surname. | ||
43 | Basic form hints | ARIA, Accessibility, Forms |
When implementing forms using traditional HTML form-related elements, it is important to provide labels for controls, and explicitly associate a label with its control. | ||
44 | Multipart labels: Using ARIA for labels with embedded fields inside them | ARIA, Accessibility, Ben Millard, Firefox, Guide, HELP, HTML, HTML 4, JAWS, NeedsContent, aria-labelledby, label, solution, trouble shoot, troubleshoot |
The solution is in an ARIA attribute called aria-labelledby. Its parameter is a string that consists of the IDs of the HTML elements you want to concatenate into a single accessible name. | ||
45 | How to file ARIA-related bugs | ARIA, Bugzilla |
The state of ARIA technology has always depended on the community. If you notice an implementation issue, please take a little time and let the developers know. Here's where to file bugs: | ||
46 | WAI-ARIA Roles | ARIA, ARIA Roles, Accessibility, Reference, Roles |
This page lists reference pages covering all the WAI-ARIA roles discussed on MDN. For a full list of roles, see Using ARIA: Roles, States, and Properties | ||
47 | ARIA: alert role | ARIA, ARIA Role, ARIA alert, ARIA widget, Reference |
The alert role can be used to tell the user an element has been dynamically updated. Screen readers will instantly start reading out the updated content when the role is added. If the user is expected to close the alert, then the alertdialog role should be used instead. | ||
48 | ARIA: application role | ARIA, ARIA Role, ARIA widget, Reference, Role application |
The application role indicates to assistive technologies that an element and all of its children should be treated similar to a desktop application, and no traditional HTML interpretation techniques should be used. This role should only be used to define very dynamic and desktop-like web applications. |
||
49 | ARIA: timer role | ARIA, ARIA Role, ARIA widget, Reference, Role Timer |
The timer role indicates to assistive technologies that an element is a numerical counter listing the amount of elapsed time from a starting point or the remaining time until an end point. | ||
50 | ARIA: article role | ARIA, ARIA Role, ARIA article role, Article, Article role, Reference |
The article role indicates a section of a page that could easily stand on its own on a page, in a document, or on a website. It is usually set on related content items such as comments, forum posts, newspaper articles or other items grouped together on one page. |
||
51 | ARIA: banner role | ARIA, Accessibility, NeedsContent |
A banner role represents general and informative content frequently placed at the beginning of the page. This usually includes a logo, company name, search icon, photo related to the page, or slogan. |
||
52 | ARIA: button role | ARIA, ARIA Role, ARIA button, Accessibility, Button Role, Reference |
The button role should be used for clickable elements that trigger a response when activated by the user. Adding role="button" will make an element appear as a button control to a screen reader. This role can be used in combination with the aria-pressed attribute to create toggle buttons. |
||
53 | ARIA: cell role | ARIA, HTML, cell, table |
The cell value of the ARIA role attribute identifies an element as being a cell in a tabular container that does not contain column or row header information. To be supported, the cell must be nested in an element with the role of row . |
||
54 | ARIA: checkbox role | ARIA, Accessibility, NeedsContent, Role |
The checkbox role is used for checkable interactive controls. Elements containing role="checkbox" must also include the aria-checked attribute to expose the checkbox's state to assistive technology. |
||
55 | ARIA: Comment role | ARIA, ARIA Role, Comment, Reference, annotations |
The comment landmark role semantically denotes a comment/reaction to some content on the page, or to a previous comment. |
||
56 | ARIA: Complementary role | ARIA, ARIA Role, Reference, role-complementary |
The complementary landmark role is used to designate a supporting section that relates to the main content, yet can stand alone when separated. These sections are frequently presented as sidebars or call-out boxes. If possible, use the HTML <aside> element instead. |
||
57 | ARIA: contentinfo role | ARIA, ARIA Role, Reference, role-contentinfo |
The contentinfo landmark role is used to identify information repeated at the end of every page of a website, including copyright information, navigation links, and privacy statements. This section is commonly called a footer. |
||
58 | ARIA: dialog role | ARIA, Accessibility, NeedsContent, Web Development |
The dialog role is used to mark up an HTML based application dialog or window that separates content or UI from the rest of the web application or page. Dialogs are generally placed on top of the rest of the page content using an overlay. Dialogs can be either non-modal (it's still possible to interact with content outside of the dialog) or modal (only the content in the dialog can be interacted with). |
||
59 | ARIA: document role | ARIA, ARIA Role, Document, Reference |
Generally used in complex composite widgets or applications, the document role can inform assistive technologies to switch context to a reading mode: The document role tells assistive technologies with reading or browse modes to use the document mode to read the content contained within this element. |
||
60 | ARIA: feed role | ARIA, ARIA Role, Reference, feed |
A feed is a dynamic scrollable list of articles in which articles are added to or removed from either end of the list as the user scrolls. A feed enables screen readers to use the browse mode reading cursor to both read and scroll through a stream of rich content that may continue scrolling infinitely by loading more content as the user reads. |
||
61 | ARIA: figure role | ARIA, ARIA Role, ARIA figure, Accessibility, Reference, Role, figure |
The ARIA figure role can be used to identify a figure inside page content where appropriate semantics do not already exist. A figure is generally considered to be one or more images, code snippets, or other content that puts across information in a different way to a regular flow of text. |
||
62 | ARIA: form role | ARIA, ARIA Role, ARIA figure, Accessibility, Reference, Role, form |
The form landmark role can be used to identify a group of elements on a page that provide equivalent functionality to an HTML form. |
||
63 | ARIA: grid role | ARIA, HTML |
The grid role is for a widget that contains one or more rows of cells. The position of each cell is significant and can be focused using keyboard input. | ||
64 | ARIA: gridcell role | ARIA, HTML |
The gridcell role is used to make a cell in a grid or treegrid. It is intended to mimic the functionality of the HTML td element for table-style grouping of information. |
||
65 | ARIA: heading role | ARIA, ARIA Role, ARIA heading, Reference |
The heading role defines this element as a heading to a page or section. To give the page more structure, a level should also be provided to indicate relationships between sections. | ||
66 | ARIA: List role | ARIA, ARIA Role, ARIA list, Accessibility, Reference, Role, list |
The ARIA list role can be used to identify a list of items. It is normally used in conjunction with the listitem role, which is used to identify a list item contained inside the list. |
||
67 | ARIA: listbox role | ARIA, Accessibility, NeedsContent |
The listbox role is used for lists from which a user may select one or more items which are static and, unlike HTML <select> elements, may contain images. |
||
68 | ARIA: Listitem role | ARIA, ARIA Role, ARIA listitem, Accessibility, Reference, Role, listitem |
The ARIA listitem role can be used to identify an item inside a list of items. It is normally used in conjunction with the list role, which is used to identify a list container. |
||
69 | ARIA: Main role | ARIA, ARIA Role, Reference, role-main |
The main landmark role is used to indicate the primary content of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application. |
||
70 | ARIA: Mark role | ARIA, ARIA Role, Reference, annotations, mark |
The mark landmark role semantically denotes HTML elements containing text that is marked/highlighted for reference purposes. This is semantically equivalent to the HTML <mark> element. If possible, you should use this element instead. |
||
71 | ARIA: Navigation Role | ARIA, ARIA Role, Reference, role-navigation |
The navigation landmark role is used to identify major groups of links used for navigating through a website or page content. |
||
72 | ARIA: Region role | ARIA, ARIA Role, Accessibility, Reference, landmark role, role-region |
The region landmark role is used to identify an area in the document that the author has identified as significant. It is used to provide a generic landmark for people to be able to navigate to easily when none of the other landmark roles are appropriate. |
||
73 | ARIA: img role | ARIA, ARIA Img, ARIA Role, Accessibility, Reference, Role, figure |
The ARIA img role can be used to identify multiple elements inside page content that should be considered as a single image. These elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner. |
||
74 | ARIA: row role | ARIA, ARIA Role, ARIA Row, ARIA Row Role, Accessibility, Reference, Row Role |
An element with role="row" is a row of cells within a tabular structure. A row contains one or more cells, grid cells or column headers, and possibly a row header, within a grid , table or treegrid , and optionally within a rowgroup . |
||
75 | ARIA: rowgroup role | ARIA, HTML, Roles, rowgroup, table |
An element with role="rowgroup" is a group of rows within a tabular structure. A rowgroup contains one or more rows of cells, grid cells, column headers, or row headers within a grid , table or treegrid . |
||
76 | ARIA: search role | ARIA, ARIA Role, Reference, role-search |
The search landmark role is used to identify a section of the page used to search the page, site, or collection of sites. |
||
77 | ARIA: Suggestion role | ARIA, ARIA Role, Reference, annotations, suggestion |
The suggestion landmark role semantically denotes a single proposed change to an editable document. This should be used on an element that wraps an element with an insertion role, and one with a deletion role. |
||
78 | ARIA: switch role | ARIA, ARIA Role, Accessibility, On/Off, Reference, Switch, a11y, toggle |
The ARIA switch role is functionally identical to the checkbox role, except that instead of representing "checked" and "unchecked" states, which are fairly generic in meaning, the switch role represents the states "on" and "off." |
||
79 | ARIA: tab role | ARIA, ARIA Role, ARIA Tab, ARIA widget, Reference |
The ARIA tab role indicates an interactive element inside a tablist that, when activated, displays its associated tabpanel . |
||
80 | ARIA: table role | ARIA, ARIA Role, ARIA Table, ARIA Table Role, Accessibility, Reference, Table Role |
The table value of the ARIA role attribute identifies the element containing the role as having a non-interactive table structure containing data arranged in rows and columns, similar to the native <table> HTML element. |
||
81 | ARIA: tabpanel role | ARIA, ARIA Role, ARIA Tab, ARIA Tabpanel, ARIA widget, Reference |
The ARIA tabpanel role indicates | ||
82 | ARIA: textbox role | ARIA, Accessibility, NeedsContent |
The textbox role is used to identify an element that allows the input of free-form text. |
||
83 | Web applications and ARIA FAQ | ARIA, Accessibility, Guide |
WAI-ARIA is the Accessible Rich Internet Applications specification from the Web Accessibility Initiative at the W3C. ARIA provides a means to make web applications and widgets more accessible to a diverse range of users, including those who use assistive technologies such as screen readers or magnifiers. | ||
84 | Widgets | Accessibility, JavaScript, Landing, NeedsUpdate |
Here's a look at working examples and best practices in building accessible JavaScript widgets. | ||
85 | Cognitive accessibility | Accessibility, Best practices, Forms, WCAG, cognitive accessibility |
Cognitive accessibility covers accessibility considerations for people with cognition and learning disabilities. This document introduces cognitive accessibility and improving accessibility of the web for people with cognitive and learning differences. | ||
86 | Community | Accessibility |
This document provides links to mailing lists, newsgroups, forums, and other communities related to Accessibility. | ||
87 | Accessibility FAQ | Accessibility, FAQ |
Mozilla Accessibility Project | ||
88 | HTML To MSAA | Accessibility |
The table below shows how Gecko maps HTML elements to MSAA. This table reflects mapping rules for specific elements only, it doesn't reflect any general rules applicable to all elements. For example, if name column has n/a value then it means specific elements doesn't provide own rules to calculate name but name can be computed from ARIA markup or @title attribute. | ||
89 | Implementing a Microsoft Active Accessibility (MSAA) Server | Accessibility, MSAA, Microsoft, Server |
This document is for developers working to support MSAA in an application in order to make it accessible with 3rd party assistive technologies, as well as for hackers wishing to be involved in Mozilla's MSAA support specifically. | ||
90 | Accessibility Information for Web Authors | Accessibility, Authoring |
These guidelines must be followed by U.S. websites. Other organizations such as schools are starting to follow these guidelines as well. | ||
91 | Keyboard-navigable JavaScript widgets | Accessibility, DOM, NeedsUpdate |
Web applications often use JavaScript to mimic desktop widgets such as menus, tree views, rich text fields, and tab panels. These widgets are typically composed of div and span elements that do not, by nature, offer the same keyboard functionality that their desktop counterparts do. This document describes techniques to make JavaScript widgets accessible with the keyboard. |
||
92 | Mobile accessibility checklist | Accessibility, Firefox OS, Guidelines, Mobile, checklist |
This document provides a concise checklist of accessibility requirements for mobile app developers. It is intended to continuously evolve as more patterns arise. |
||
93 | Web accessibility for seizures and physical reactions | Media Queries, PEAT, Photosensitive Epilepsy Analysis Tool, The Harding Test, color, epilepsy, musicogenic seizures, photosensitivity, prefers-reduced-motion, reflex epilepsy, saturation, seizure disorders, seizures, web animation |
This article introduces concepts behind making web content accessible for those with vestibular disorders, and how to measure and prevent content leading to seizures and / or other physical reactions. | ||
94 | Web Accessibility: Understanding Colors and Luminance | CSS, RGB Color model, accessibility, blue, chroma, color, colorspace, contrast, displays, epilepsy, green, hue, legibility, luminance, photic seizure, photosensitivity, readability, red, sRGB, saturation, seizure disorders, vision |
When designing visual and readable content with the aim of accessibility for all sighted users, it is important to have an understanding of light, color, and perception. This page specifically discusses: | ||
95 | Understanding the Web Content Accessibility Guidelines | WCAG, Web Content Accessibility Guidelines |
This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 or 2.1 (or just WCAG, for the purposes of this writing). | ||
96 | Keyboard | Accessibility, keyboard |
If an element can be focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option). | ||
97 | Operable | Accessibility, Focus, Navigation, Principle 2, Timing, WCAG, Web Content Accessibility Guidelines, headings, keyboard, keyboard trap, labels, operable, seizures |
This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Operable principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Operable states that user interface components and navigation must be operable. | ||
98 | Perceivable | Accessibility, Principle 1, WCAG, Web Content Accessibility Guidelines, contrast, different presentation, text alternatives, time-based media |
This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses. | ||
99 | Color contrast | Accessibility, WCAG, contrast, perceivable |
The color contrast between background and foreground content (that is, usually text) should be great enough to ensure legibility. | ||
100 | Use of color | Accessibility, WCAG, color, perceivable |
While color contrast is often primarily an aesthetic choice, the use of color on a website pertains to using color to communicate information. WCAG guideline 1.4.1 on the use of color requires that "color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element." | ||
101 | Robust | Accessibility, HTML, Parsing, Principle 4, Robust, Role, Validation, WAI-ARIA, WCAG, Web Content Accessibility Guidelines, value |
This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Robust principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Robust states that content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. This can generally be achieved by following web standards and testing rigorously. | ||
102 | Text labels and names | Accessibility, WCAG, text labels |
There are many situations in which a control, dialog, or other website feature should be given a descriptive name or label to allow users of assistive technologies to understand what its purpose is and how to operate it correctly. | ||
103 | Understandable | Accessibility, HELP, Language, Navigation, Principle 3, Text, Understandable, WCAG, Web Content Accessibility Guidelines, abbreviations, consistency, error messages, form validation, labels, slang |
This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Understandable principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Understandable states that information and the operation of user interface must be understandable. | ||