This document provides a list of links to all accessibility articles on the Mozilla Developer Network.
Found 105 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 | 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. It supplements HTML so that interactions and widgets commonly used in applications can be passed to assistive technologies | ||
3 | 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. | ||
4 | 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). | ||
5 | 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). | ||
6 | 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. | ||
7 | 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. | ||
8 | Forms | ARIA, Accessibility |
The following pages provide various techniques for improving the accessibility of web forms: | ||
9 | 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. | ||
10 | 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. | ||
11 | 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. | ||
12 | 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: | ||
13 | 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. | ||
14 | ARIA Technique Template | Accessibility |
No summary! | ||
15 | Using the alert role | ARIA, Accessibility, Advanced, CSS, Example, HTML, NeedsContent, alert, alert role, alertrole, alerts, assitive technology, role configuration, wcag1.2.1, wcag3.3.1 |
The alert role is used to communicate an important and usually time-sensitive message to the user. When this role is added to an element, the browser will send out an accessible alert event to assistive technology products which can then notify the user about it. The alert role is most useful for information that requires the user's immediate attention, for example: | ||
16 | Using the alertdialog role | ARIA, Accessibility, CodingScripting, HTML, NeedsContent, Role(2), Web Development, agent, alertdialog, alerts, modal, user, userAgent |
The alertdialog role is used to notify the user of urgent information that demands the user's immediate attention. As the name implies, alertdialog is a type of dialog. This means that most of the instructions provided in the 'using the dialog role' technique are applicable to the alertdialog role as well: |
||
17 | Using the aria-activedescendant attribute | Attribute, Document Object Model, NeedsContent, Property, Widget, aria-activedescendant |
This article describes the aria-activedescendant property. | ||
18 | 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. |
||
19 | Using the aria-hidden attribute | ARIA, Accessibility, Attribute, CodingScripting, HTML, JavaScript, NeedsContent, Role(2), agent, alert, user, userAgent |
This technique demonstrates how to use the aria-hidden attribute. The aria-hidden attribute can either expose or hide non-interactive content from the accessibility API. |
||
20 | Using the aria-invalid attribute | ARIA, Accessibility, Attribute, CodingScripting, HTML, JavaScript, NeedsContent, Role(2), agent, alert, user, userAgent |
The aria-invalid attribute is used to indicate that the value entered into an input field does not conform to the format expected by the application.This may include formats such as email addresses or telephone numbers. aria-invalid can also be used to indicate that a required field has not been filled in.The attribute should be programmatically set as a result of a validation process. |
||
21 | 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. |
||
22 | 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.This idea is similar to how the "for" attribute is used to link a LABEL to an INPUT.Assistive technology, such as screen readers, use this attribute to catalog the objects in a document so that users can navigate between them. Without an element ID, the assistive technology cannot catalog the object. |
||
23 | Using the aria-orientation attribute | ARIA, Accessibility, Attribute |
The aria-orientation attribute is used to indicate whether an element is oriented horizontally or vertically. | ||
24 | Using the aria-relevant attribute | ARIA, Accessibility, NeedsExample, ariaLive, attri |
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 . |
||
25 | 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. |
||
26 | 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. | ||
27 | 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 . |
||
28 | 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. |
||
29 | 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. |
||
30 | 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. | ||
31 | 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. | ||
32 | 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. | ||
33 | 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. |
||
34 | 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. |
||
35 | 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. |
||
36 | 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. | ||
37 | 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. | ||
38 | 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. | ||
39 | 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. | ||
40 | 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. |
||
41 | WAI-ARIA Roles | ARIA, ARIA Roles, Accessibility, Reference, R么les |
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 | ||
42 | 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. |
||
43 | 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. |
||
44 | ARIA: List role | ARIA, ARIA Role, ARIA list, Accessibility, Reference, R么le, 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. |
||
45 | ARIA: Listitem role | ARIA, ARIA Role, ARIA listitem, Accessibility, Reference, R么le, 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. |
||
46 | 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. |
||
47 | 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. |
||
48 | 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. |
||
49 | 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. |
||
50 | 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. |
||
51 | 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. | ||
52 | 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. |
||
53 | 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. |
||
54 | 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. |
||
55 | 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. |
||
56 | 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 . |
||
57 | ARIA: checkbox role | ARIA, Accessibility, NeedsContent, Role(2), R么le |
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. |
||
58 | 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. |
||
59 | 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). |
||
60 | 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. |
||
61 | 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. |
||
62 | ARIA: figure role | ARIA, ARIA Role, ARIA figure, Accessibility, Reference, R么le, 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. |
||
63 | ARIA: form role | ARIA, ARIA Role, ARIA figure, Accessibility, Reference, R么le, 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. |
||
64 | 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. | ||
65 | 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. |
||
66 | 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. | ||
67 | ARIA: img role | ARIA, ARIA Img, ARIA Role, Accessibility, Reference, R么le, 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. |
||
68 | 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. |
||
69 | 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 . |
||
70 | ARIA: rowgroup role | ARIA, HTML, R么les, 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 . |
||
71 | 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. |
||
72 | 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." |
||
73 | 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. |
||
74 | 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. |
||
75 | ARIA: tabpanel role | ARIA, ARIA Role, ARIA Tab, ARIA Tabpanel, ARIA widget, Reference |
The ARIA tabpanel role indicates | ||
76 | ARIA: textbox role | ARIA, Accessibility, NeedsContent |
The textbox role is used to identify an element that allows the input of free-form text. |
||
77 | 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 the amount of elapsed time from a starting point or the remaining time until an end point. | ||
78 | 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. | ||
79 | widgets | Accessibility |
This page was auto-generated because a user created a sub-page to this page. | ||
80 | overview | Accessibility, JavaScript, Landing, NeedsUpdate |
Here's a look at working examples and best practices in building accessible JavaScript widgets. | ||
81 | Accessibility FAQ | Accessibility, FAQ |
Mozilla Accessibility Project | ||
82 | Accessibility Information for Web Authors | Accessibility, Authoring |
DHTML Accessibility Roadmap: a peek into how DHTML will be made accessible in the future. This document gives a plan which is being developed by IBM, Mozilla and WAI Protocols and Formats Working Group (PFWG) to address the issue of Accessible DHTML. | ||
83 | 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" | ||
84 | Accessibility documentation index | Accessibility, Index |
This document provides a list of links to all accessibility articles on the Mozilla Developer Network. | ||
85 | 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. | ||
86 | Accessible dynamic content | Accessibility |
This content has been moved to An overview of accessible web applications and widgets. | ||
87 | 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 and . 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. |
||
88 | 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. | ||
89 | 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. | ||
90 | Community | Accessibility |
This document provides links to mailing lists, newsgroups, forums, and other communities related to Accessbility. | ||
91 | 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. | ||
92 | 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. | ||
93 | 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. |
||
94 | 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. | ||
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(2), 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 to be able to understand and 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. | ||
104 | Web Accessibility: Understanding Colors and Luminance | Accessibility, Photosensitve Epilepsy Analysis Tool, color, epilepsy, photosensitivity, reflex epilepsy, saturation, seizure disorders, seizures |
Understaning color, luminance, and saturation is important in meeting WCAG 2 accessibility guidelines in terms of ensuring enough color contrast for sighted users with color blindness or reduced vision and preventing seizures and other physical reactions in people with vestibular disorders. | ||
105 | Web accessibility for seizures and physical reactions | Media Queries, PEAT, Photosensitve 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 accessibile for those with vestibular disorders, and how to measure and prevent content leading to seizures and / or other physical reactions. | ||