Accessibility Inspector - Firefox Developer Tools
the accessibility inspector provides a means to access important information exposed to assistive technologies on the current page via the accessibility tree, allowing you to check what's missing or otherwise needs attention.
... this article takes you through the main features of the accessibility inspector and how to use it.
... a (very) brief guide to accessibility accessibility is the practice of making your websites usable by as many people as possible.
...And 37 more matches

XUL accessibility guidelines - Archive of obsolete content
introduction welcome to the xul accessibility guidelines.
...accessibility is not difficult, but does require a basic understanding of the different types of disabilities, commonly used assistive technologies, and special accessibility features built into the xul languages.
... most of all, accessibility requires a conscious effort on your part, and a desire to include everyone.
...And 31 more matches

HTML: A good basis for accessibility - Learn web development
previous overview: accessibility next a great deal of web content can be made accessible just by making sure the correct hypertext markup language elements are used for the correct purpose at all times.
... this article looks in detail at how html can be used to ensure maximum accessibility.
... prerequisites: basic computer literacy, a basic understanding of html (see introduction to html), and an understanding of what accessibility is.
...And 28 more matches

HTML: A good basis for accessibility - Learn web development
previous overview: accessibility next a great deal of web content can be made accessible just by making sure the correct hypertext markup language elements are used for the correct purpose at all times.
... this article looks in detail at how html can be used to ensure maximum accessibility.
... prerequisites: basic computer literacy, a basic understanding of html (see introduction to html), and an understanding of what accessibility is.
...And 28 more matches

CSS and JavaScript accessibility best practices - Learn web development
previous overview: accessibility next css and javascript, when used properly, also have the potential to allow for accessible web experiences ...
... or they can significantly harm accessibility if misused.
... prerequisites: basic computer literacy, a basic understanding of html, css, and javascript, and understanding of what accessibility is.
...And 19 more matches

Accessibility API cross-reference
this cross-reference helps us see the difference between today's accessibility api's.
... all accessibility apis to date define a list of possible object roles, or general types, such as button, menu item, text, etc.
... an interesting problem is that mozilla, safari/khtml, opera, staroffice and other apps are cross-platform, but there is currently no cross-platform accessibility api.
...And 17 more matches

Accessibility
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.
...accessibility means developing content to be as accessible as possible no matter an individual's physical and cognitive abilities and no matter how they access the web.
...when the web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability." (w3c - accessibility) key tutorials the mdn accessibility learning area contains modern, up-to-date tutorials covering accessibility essentials: what is accessibility?
...And 15 more matches

Accessibility and Mozilla
accessibility is the idea that software (among other things) should be designed to be usable and, as much as possible, convenient to use for people with disabilities.
...these articles provide mozilla-specific details about accessibility.
... accessibility api cross-referencethis cross-reference helps us see the difference between today's accessibility api's.
...And 14 more matches

Accessibility - Learn web development
to help you achieve this, this module will cover general best practices (which are demonstrated throughout the html, css, and javascript topics), cross browser testing, and some tips on enforcing accessibility from the start.
... we'll cover accessibility in special detail.
...web accessibility involves ensuring that content remains accessible, regardless of who and how the web is accessed.
...And 12 more matches

Gecko info for Windows accessibility vendors
the base of our support for these products is msaa (microsoft active accessibility), external readonly dom support, and the keyboard api/user interface.
... microsoft active accessibility (msaa) an api devised by microsoft so that accessibility aids can track what's going on inside the user interface of any software package that supports it.
...gecko is the core architecture that we are adding accessibility to, in order to support basic accessibility in all applications that are based on it.
...And 12 more matches

Mobile accessibility - Learn web development
previous overview: accessibility next with web access on mobile devices being so popular and renowned platforms such as ios and android having full-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms.
... this article looks at mobile-specific accessibility considerations.
... objective: to understand what problems exist with accessibility on mobile devices, and how to overcome them.
...And 11 more matches

Accessibility Features in Firefox
basic screen reader accessibility is available via the fire vox extension.
... the accessibility extension may be installed on top of firefox, allowing keyboard access to document structure.
...this will show the html source for only the selected text, which is useful for understanding accessibility problems in some web sites.
...And 9 more matches

Embedding API for Accessibility
please contact the mozilla accessibility community.
... mozilla needs to move in the direction of accessibility.
... here is the w3c's definition of accessibility for a user agent like mozilla.
...And 8 more matches

Software accessibility: Where are we today?
the accessibility of computer software has seen drastic improvements over the past two decades.
...in answer to this problem, many small accessibility hardware and software vendors created products and software which helped people who could not perform one of the four basic tasks to use common computer applications.
... a major limitation - the lack of context the solutions developed by these accessibility vendors have greatly increased the employment and personal fulfillment opportunities of hundreds of thousands of persons with disabilities, and the importance of their work cannot be diminished.
...And 8 more matches

XForms Accessibility
intoduction this article provides a quick guide to how accessibility is handled in gecko for xforms..
...implementation of accessible objects for xforms elements is based on top of the existing object hierarchy introduced in the mozilla accessibility module.
...note, xforms accessibility is implemented only on trunk.
...And 8 more matches

What is accessibility? - Learn web development
this article introduces the basic concepts behind web accessibility.
... objective: learn what accessibility is and why it matters.
...in this article we give general accessibility principles and explain a few rules.
...And 7 more matches

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
we'll also look at solving some accessibility focus issues, and more besides.
... objective: learn some advanced svelte techniques involving solving reactivity issues, keyboard accessibility problems to do with component lifecycle, and more.
... we'll focus on some accessibility issues involving focus management.
...And 7 more matches

Using the aria-hidden attribute - Accessibility
the aria-hidden attribute can either expose or hide non-interactive content from the accessibility api.
... description adding aria-hidden="true" to an element removes that element and all of its children from the accessibility tree.
... aria-hidden="true" will remove the entire element from the accessibility api.
...And 6 more matches

Test your skills: CSS and JavaScript accessibility - Learn web development
this aim of this skill test is to assess whether you've understood our css and javascript accessibility best practices article.
... css accessibility 1 in the first task you are presented with a list of links.
... however, their accessibility is pretty bad — there is no way to really tell that they are links, or to tell which one the user is focussed on.
...And 4 more matches

Test your skills: HTML accessibility - Learn web development
this aim of this skill test is to assess whether you've understood our html: a good basis for accessibility article.
... html accessibility 1 in this task we will test your understanding of text semantics, and why they are good for accessibility.
... html accessibility 2 in the second task, you have a form containing three input fields.
...And 4 more matches

Accessibility Information for Core Gecko Developers
html accessibility dynamic web content is not accessible because it uses vanilla <div>s and <span>s combined with javascript rather than declarative markup to describe the behavior of custom widgets such as menus and tree views.
...this document shows several interactive desktop-style widgets that are accessible by keyboards and assistive technologies, and outlines a plan being developed by ibm, mozilla, and the wai protocols and formats working group (pfwg) to address the issue of dhtml accessibility.
... mozilla accessibility architecture this document explains how we implement the cross-platform accessibility layer in mozilla.
...And 4 more matches

Web applications and ARIA FAQ - Accessibility
wai-aria is the accessible rich internet applications specification from the web accessibility initiative at the w3c.
...user interface library (yui) for more information about javascript toolkit accessibility: steve faulkner's wai-aria implementation in javascript ui libraries can you show me an example of aria in action?
... several inspecting and debugging tools exist to help you test aria in action: object inspector on windows accessibility inspector on os x accprobe on linux firebug's dom inspector the accessibility inspector for firebug the audits tab in chrome devtools there are several free or open source screen readers that can be used to do hands-on testing with aria.
...And 4 more matches

ARIA - Accessibility
for instance, native elements have built-in keyboard accessibility, roles and states.
...however, the accessibility gains it provides far outweigh any technical invalidity.
... improving form accessibility aria is not just for dynamic content!
...And 4 more matches

Assessment: Accessibility troubleshooting - Learn web development
previous overview: accessibility in the assessment for this module, we present to you a simple site with a number of accessibility issues that you need to diagnose and fix.
... objective: to test basic knowledge of accessibility fundamentals.
...as it stands, it has a number of accessibility issues — your task is to explore the existing site and fix them to the best of your abilities, answering the questions given below.
...And 3 more matches

Information for External Developers Dealing with Accessibility
implementing an msaa server, a practical guide a document for developers who need to support microsoft active accessibility (msaa) in a desktop application, in order to make it accessible with 3rd party assistive technologies, containing practical tips and the details of mozilla's implementation.
... accessibility api cross reference should be helpful at anyone looking at implementing accessibility api support for a product on multiple platforms.
... accessible toolkit checklist a list of what needs to be done for accessibility when building new toolkits, widget by widget.
...And 3 more matches

CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
the biggest downside however was that it tied our design to the mark-up, often creating accessibility issues as it did so.
...is it possible that we could create an accessibility issue through our use of grids?
... the specification includes a section that covers reordering and accessibility.
...And 3 more matches

XUL accessibility tool - Archive of obsolete content
general information the xul accessibility tool is a firefox extension designed by aaron andersen of webaim as part of a mozilla foundation accessibility minigrant in the spring of 2007.
... it is designed to test (insofar as automated testing is possible) the guidelines and requirement for creating accessible xul as set forth in the xul accessibility guidelines, and to report on any problems found in tested documents.
... while not meant to be a comprehensive test suite (meaning that passing all included tests does not guarantee that an application is free of accessibility bugs or issues), many of the most common accessibility mistakes will be found and reported.
...And 2 more matches

Accessibility in React - Learn web development
previous overview: client-side javascript frameworks next in our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in react, which can improve usability and reduce confusion for both keyboard-only and screenreader users.
... objective: to learn about implementing keyboard accessibility in react.
... let's add the tabindex attribute — written as tabindex in jsx — to the heading above our list of tasks, along with our headingref: <h2 id="list-heading" tabindex="-1" ref={listheadingref}> {headingtext} </h2> note: the tabindex attribute is great for accessibility edge-cases, but you should take great care to not overuse it.
...And 2 more matches

Accessibility tree (AOM) - MDN Web Docs Glossary: Definitions of Web-related terms
the accessibility tree, or accessibility object model (aom), contains accessibility-related information for most html elements.
...browsers then create an accessibility tree based on the dom tree, which is used by platform-specific accessibility apis for assistive technologies, such as screen readers.
... there are four things in an accessibility tree object: name how can we refer to this thing?
... additionally, the accessibility tree often contains information on what can be done with an element: a link can be followed, a text input can be typed into, etc.

Accessibility information for UI designers and developers
when you design user interfaces with accessibility in mind, they will work for more people.
... use default controls controls that are built into browsers come with a lot of accessibility for free.
... see also: heading elements join the mozilla accessibility community live chat both end users and developers are invited for discussion on the live irc channel at irc.mozilla.org/#accessibility.
... purpose newsgroup mailing list google group developer discussion mozilla.dev.accessibility subscribe/unsubscribe google group end user support mozilla.support.accessibility subscribe/unsubscribe google group ...

ARIA annotations - Accessibility
aria annotation roles and objects are currently exposed in: firefox from version 75 onwards, on windows and linux (on macos, we are first waiting for apple to define what safari will expose as apple-dialect attributes to voiceover, and will then follow suit.) chrome from version 81 onwards, currently behind the #enable-accessibility-expose-aria-annotations flag (go to chrome://flags to enable this.) unfortunately, you won’t be able to use any of these yet, as screenreader support is currently not there.
... for the moment, you can see the annotations data being exposed with tools like firefox accessibility inspector.
... associating annotated elements with their details there are a number of different ways in which you can associate ui features with text labels or descriptions for accessibility purposes.
... bits of semantic information: <div id="detail-id"> <h2>a heading</h2> <p>an extended text description of some kind…</p> <p><time datetime="...">a timestamp</time></p> </div> <div aria-details="detail-id"> <!-- some kind of ui feature that needs an accessible description --> </div> this difference really becomes apparent when you get to how the content is actually interpreted in the accessibility layer, and read out by screenreaders.

Operable - Accessibility
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.
... see ui controls and building keyboard accessibility back in 2.1.2 no keyboard trap (a) when entering a section of functionality using the keyboard, you should be able to get out of that section again using *only* the keyboard.
... see ui controls and building keyboard accessibility back in 2.1.4 character key shortcuts (a) added in 2.1 if a single character key shortcut exists, then at least one of the following is true: single character key shortcuts can be turned off, remapped or are only active when the relevant user interface component is in focus.
... see using native keyboard accessibility.

Perceivable - Accessibility
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.
... a text description may work, or an accessible data table (see html table advanced features and accessibility).
... the whole of html: a good basis for accessibility is packed with information about this, but you should particularly refer to good semantics, ui controls, and text alternatives.
... again, refer to html: a good basis for accessibility.

Accessibility - MDN Web Docs Glossary: Definitions of Web-related terms
web accessibility (a11y) refers to best practices for keeping a website usable despite physical and technical restrictions.
... web accessibility is formally defined and discussed at the w3c through the web accessibility initiative (wai).
... learn more general knowledge accessibility resources at mdn web accessibility on wikipedia learn web accessibility learn accessibility on mdn web accessibility in mind technical reference the aria documentation on mdn the web accessibility initiative homepage the wai-aria recommendation ...

HTML table advanced features and accessibility - Learn web development
previous overview: tables next in the second article in this module, we look at some more advanced features of html tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users.
... objective: to learn about more advanced html table features, and the accessibility of tables.
... previous overview: tables next in this module html table basics html table advanced features and accessibility structuring planet data ...

Hit regions and accessibility - Web APIs
canvas content is not exposed to accessibility tools like semantic html is.
...a good example at html5accessibility.com demonstrates how this can be done: <canvas> <h2>shapes</h2> <p>a rectangle with a black border.
...the hit region api allows you to define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools.

Using the log role - Accessibility
possible effects on user agents and assistive technology when the log role is added to an element, or such an element becomes visible, the user agent should do the following: expose the element as having a log role in the operating system's accessibility api.
... fire an accessible log event using the operating system's accessibility api if it supports it.
... <div id="chatarea" role="log"> <ul id="chatregion" aria-live="polite" aria-atomic="false"> <li>please choose a user name to begin using ajax chat.</li> </ul> <ul id="userlistregion" aria-live="off" aria-relevant="additions removals text"> </ul> </div> working examples: http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/ notes using the log role on an element implies that element has aria-live="polite".

ARIA: textbox role - Accessibility
t should be a sample value or a brief description of the expected format.this information should not be used as a substitute for a label: a label is focusable, permanent, indicates what kind of information is expected, and increases the hit area for setting focus on the control, whereas placeholder text is only temporary hint about the expected value, which if implemented incorrectly can decrease accessibility.
... possible effects on user agents and assistive technology when the textbox role is added to an element, or such an element becomes visible, the user agent should do the following: expose the element as having a textbox role in the operating system's accessibility api.
... fire an accessible textbox event using the operating system's accessibility api if it supports it.

Mozilla Plugin Accessibility
plugins in gecko-based browsers have a lot of accessibility issues.
...many plugins lack accessibility api support most plugins that work with mozilla do not yet support accessibility apis.

MathML Accessibility in Mozilla
in bug 1175269 and bug 1001641, we relied on the webkit's nsaccessibility mathml tree to expose the main constructions.
...note that voiceover is proprietary so we do not have control on improvements to mathml accessibility in voiceover.

XUL Accessibility
introduction this article shows how xul control elements are mapped to accessibility api.
...text attribute append the accessible value searching specific element in neighbour of the element search inside the element subtree go up through parents (max level is 5) and search inside theirs subtrees if the element is anonymous then search in whole anonymous subtree, here the attribute anonid is used instead of id attribute accessible properties this section describes common rules how accessibility properties are formed for xul elements.

Accessibility API Implementation Details
we provide for them the support of these products on windows, linux/unix and os x platforms.at developmentthe accessibility of computer software has seen drastic improvements over the past two decades.
... xforms accessibilitythis article provides a quick guide to how accessibility is handled in gecko for xforms.xul accessibilitythis article shows how xul control elements are mapped to accessibility api.

nsIAccessibilityService
accessible/public/nsiaccessibilityservice.idlscriptable please add a summary to this article.
...cessible addnativerootaccessible(in voidptr aatkaccessible); void removenativerootaccessible(in nsiaccessible arootaccessible); void invalidatesubtreefor(in nsipresshell apresshell, in nsicontent achangedcontent, in pruint32 aevent); methods removenativerootaccessible() void removenativerootaccessible( in nsiaccessible arootaccessible ); invalidatesubtreefor() invalidate the accessibility cache associated with apresshell, for accessibles that were generated for acontainercontent and it's subtree.

Using the alert role - Accessibility
possible effects on user agents and assistive technology when the alert role is added to an element, or such an element becomes visible, the user agent should do the following: expose the element as having an alert role in the operating system's accessibility api.
... fire an accessible alert event using the operating system's accessibility api if it supports it.

Using the alertdialog role - Accessibility
possible effects on user agents and assistive technology when the alertdialog role is used, the user agent should do the following: expose the element as a dialog in the operating system's accessibility api.
... fire an accessible alert event using the operating system's accessibility api if it supports it.

Using the group role - Accessibility
possible effects on user agents and assistive technology when the group role is added to an element, or such an element becomes visible, the user agent should do the following: expose the element as having a group role in the operating system's accessibility api.
... fire an accessible group event using the operating system's accessibility api if it supports it.

Using the link role - Accessibility
possible effects on user agents and assistive technology when the link role is added to an element, or such an element becomes visible, the user agent should do the following: expose the element as having a link role in the operating system's accessibility api.
... fire an accessible link event using the operating system's accessibility api if it supports it.

Using the status role - Accessibility
possible effects on user agents and assistive technology when the status role is added to an element, or such an element becomes visible, the user agent should do the following: expose the element as having a status role in the operating system's accessibility api.
... fire an accessible status event using the operating system's accessibility api if it supports it.

How to file ARIA-related bugs - Accessibility
tbd: add proper accessibility markup to table genre software where to file notes screen readers freedom scientific jaws jaws technical support form gw micro window eyes window-eyes comments, questions, and feedback (email) non visual desktop access (nvda) file nvda bugs discuss nvda issues browsers apple safari file webkit.org bugs google chrome file chromium bugs microsoft internet...
... explorer file ie bugs microsoft edge file ms edge bugs view existing ms edge aria bugs mozilla firefox file firefox bugs use component: disability access apis opera file opera bugs use [aria] in the summary field js libraries dojo toolkit file dojo bug put accessibility in the component field yahoo user interface file yui bugs file against specific component in category combobox and include aria in summary field ...

ARIA: figure role - Accessibility
if you don't have control over the html semantics, you can improve the accessibility of html by adding these roles and properties with javascript.
... layers of awesome and their relative priority order — music, cats, nature, and ice cream"> <pre><code> let awesome = ['music', 'cats', 'nature', 'ice cream']; </code></pre> <p id="figure-1">figure 1: the four layers of awesome.</p> </div> best practices only use role="figure" if you have to — for example if you don't have control over your html but are able to improve accessibility dynamically after the fact with javascript.

ARIA: switch role - Accessibility
possible effects on user agents and assistive technology when the switch role is added to an element, the user agent handles it like this: the element is exposed to the system's accessibility infrastructure as having the switch role.
... when the aria-checked attribute's value changes, an accessible event is fired using the system's accessibility api if one is available and it supports the switch role.

ARIA: heading role - Accessibility
p>text</p> <div role="heading" aria-level="3">chapter 1.1</div> <p>more text in a sub section.</p> ...</div> however, instead, you should do: <div id="container"> <h1>the main page heading</h1> <p>this article is about showing a page structure.</p> <h2>introduction</h2> <p>an introductory text.</p> <h2>chapter 1</h2> <p>text</p> <h3>chapter 1.1</h3> <p>more text in a sub section.</p> ...</div> accessibility concerns if you must use the heading role and aria-level attribute, do not go over level 6 so that you are consistent with html.
...the heading role and aria-level attribute should only be used to retrofit accessibility on legacy code that you cannot make major changes to.

Basic form hints - Accessibility
wai-aria, the accessible rich internet applications specification from the w3c's web accessibility initiative, provides the aria-labelledby attribute for these cases.
... for more guidance on using aria for forms accessibility, see the wai-aria authoring practices document.

Architecture - Accessibility
however in accessibility hierarchies such as atk and iaccessible2, text is not exposed in leaf nodes as it is in a w3c dom.
...there are also details on the general implementation of mozilla accessibility architecture (needs updating).

Robust - Accessibility
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.
... see html: a good basis for accessibility and wai-aria basics.

Text labels and names - Accessibility
figures with optional captions should be labeled for best accessibility, include a <figcaption> within a <figure> element, even though doing so is technically optional.
...for best accessibility and future maintenance, redesign any pages that use frames to use css to achieve a similar layout.

Understandable - Accessibility
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.
...also see building keyboard accessibility back in for some useful implementation ideas.

accessibility.tabfocus
the preference accessibility.tabfocus controls what elements receive focus when the user presses the tab key.

ARIA guides - Accessibility
a few guidelines to follow that ensure better accessibility, like using drag and drop for placement of the widgets.

ARIA Screen Reader Implementors Guide - Accessibility
allow global settings to turn off the presentation of live changes, present all live changes, use markup, or be "smart" (use heuristics) details for processing via platform accessibility apis we hope browser manufacturers will work to provide consistent implementations.

Using the aria-label attribute - Accessibility
<button aria-label="close" onclick="mydialog.close()">x</button> notes the most common accessibility api mapping for a label is the accessible name property.

Using the aria-labelledby attribute - Accessibility
</div> notes the most common accessibility api mapping for a label is the accessible name property used by aria roles all elements of the base markup related aria techniques using the aria-label attribute using the aria-describedby attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-labelledby ...

Using the aria-relevant attribute - Accessibility
values a space-delimited list of one or more of the following values: additions element nodes added to the accessibility tree within the live region; should be considered relevant.

Using ARIA: Roles, states, and properties - Accessibility
addition of aria semantics only exposes extra information to a browser's accessibility api, and does not affect a page's dom.

ARIA Test Cases - Accessibility
or copy-paste: http://oaa-accessibility.org/examples/ for each example we test the "expected" results with assistive technologies, for each browser that at supports wai-aria in.

ARIA: tabpanel role - Accessibility
<div role="tablist"> <div role="tab" aria-selected="true" aria-controls="tabpanel-id" id="tab-id" tabindex="0">tab label</div> accessibility concerns optionally, warn of any potential accessibility concerns that exist with using this property, and how to work around them.

ARIA: timer role - Accessibility
<div id="clock" role="timer" aria-live="polite" aria-atomic="true"></div> accessibility concerns improperly using the timer role can unintentionally xxx specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of 'timer' in that specification.

ARIA: alert role - Accessibility
<button type="button" onclick="triggeralert">trigger alert</button> <p class="alert">the alert will trigger when the button is pressed.</p> function triggeralert() { var alertel = document.queryselector('.alert'); alertel.addattribute("role", "alert"); } accessibility concerns the alert role should read out content that has changed, or bring the user's attention to it immediately, so it should not be used for static content or used regularly.

ARIA: application role - Accessibility
examples some prominent web applications that use the application role properly are: google docs, sheets and slides ckeditor and tinymce wysiwyg web editors, like the one used on the mozilla developer network some parts of gmail accessibility concerns improperly using the application role can unintentionally take away access from information on a web page, so be very mindful of using it.

ARIA: article role - Accessibility
user agents translate this to the appropriate accessibility information just like the article role.

ARIA: banner role - Accessibility
identifying the page's banner in this way will help improve the site's accessibility.

ARIA: cell role - Accessibility
you can add aria roles to ensure accessibility should the native semantics of the table be removed, such as with css.

ARIA: Comment role - Accessibility
i think the cowbell could distract from the solo.</p> <p><time datetime="2019-03-30t21:02">march 30 2019, 21:02</time></p> </div> </div> accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document.

ARIA: Complementary role - Accessibility
feels</a></li> <li><a href="#">stop searching for the perfect lunch containers because i've found them</a></li> <li><a href="#">the time has come to finally decide what we should be calling these foods</a></li> <li><a href="#">17 really good posts we saw on tumblr this week</a></li> <li><a href="#">10 parent hacks we know work because we tried them</a></li> </ul> </div> accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document.

ARIA: contentinfo role - Accessibility
content is available under <a href="#">these licenses</a>.</p> </div> </body> accessibility concerns use sparingly landmark roles are intended to identify larger overall sections of the document.

ARIA: form role - Accessibility
</form> accessibility concerns use sparingly landmark roles are intended to identify larger overall sections of the document.

ARIA: grid role - Accessibility
= false); break; case "pagedown": var i = maxrow; var result; do { result = moveto(i, event.target.dataset.col); i--; } while (result == false); break; case "enter": alert(event.target.textcontent); break; } event.preventdefault(); }); more examples data grid examples layout grids examples w3c/wai tutorial: tables accessibility concerns even if the keyboard use is properly implemented, some users might not be aware that they have to use the arrow keys.

ARIA: gridcell role - Accessibility
<div role="gridcell">9.9</div> <div role="gridcell">778.6</div> <div role="gridcell">67</div> </div> </div> <div role="rowgroup"> <div role="row"> <div role="gridcell">saturn</div> <div role="gridcell">120,536</div> <div role="gridcell">10.7</div> <div role="gridcell">1433.5</div> <div role="gridcell">62</div> </div> </div> </div> accessibility concerns support for gridcell and certain gridcell-related aria roles and properties have poor support with assistive technologies.

ARIA: List role - Accessibility
examples aria lists — some useful examples and thoughts by scott o'hara best practices only use role="list" and role="listitem" if you have to — for example if you don't have control over your html but are able to improve accessibility dynamically after the fact with javascript.

ARIA: Listitem role - Accessibility
examples aria lists — some useful examples and thoughts by scott o'hara best practices only use role="list" and role="listitem" if you have to — for example if you don't have control over your html but are able to improve accessibility dynamically after the fact with javascript.

ARIA: Main role - Accessibility
example <body> <!-- primary navigation --> <div role="main"> <h1>the the first indochina war</h1> <!-- article content --> </div> <!-- sidebar and footer --> </body> accessibility concerns use only one main role per document the main landmark role should only be used once per document.

ARIA: Mark role - Accessibility
accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document.

ARIA: Navigation Role - Accessibility
examples <div role="navigation" aria-label="customer service"> <ul> <li><a href="#">help</a></li> <li><a href="#">order tracking</li> <li><a href="#">shipping &amp; delivery</a></li> <li><a href="#">returns</a></li> <li><a href="#">contact us</a></li> <li><a href="#">find a store</a></li> </ul> </div> accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document.

ARIA: Region role - Accessibility
examples <div role="region" aria-labelledby="region-heading"> <h2 id="region-heading">this heading's <code>id</code> attribute helps this region have an accessible name</h2> <!-- region content --> </div> accessibility concerns use sparingly!

ARIA: row role - Accessibility
you can add these aria roles to ensure accessibility should the native semantics of the table be removed, such as with css.

ARIA: rowgroup role - Accessibility
you can add these aria roles to ensure accessibility should the native semantics of the table be removed, such as with css.

ARIA: search role - Accessibility
examples <form id="search" role="search"> <label for="search-input">search this site</label> <input type="search" id="search-input" name="search" spellcheck="false"> <input value="submit" type="submit"> </form> accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document.

ARIA: Suggestion role - Accessibility
</p> <div id="comment-source">suggested by chris, <time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></div> browsers tend to provide a default black strikethrough for deletions, and a black underline for insertions, but you’ll probably want to use accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document.

ARIA: table role - Accessibility
you can add these aria roles to ensure accessibility should the native semantics of the table be removed, such as with css.

ARIA: button role - Accessibility
utton(element) { var audio = document.getelementbyid('audio'); // check to see if the button is pressed var pressed = (element.getattribute("aria-pressed") === "true"); // change aria-pressed to the opposite state element.setattribute("aria-pressed", !pressed); // toggle the play state of the audio file if(pressed) { audio.pause(); } else { audio.play(); } } result accessibility concerns buttons are interactive controls and thus focusable.

ARIA: checkbox role - Accessibility
ia-checked="false"]::before { content: "[ ]"; } javascript function changecheckbox(event) { let item = document.getelementbyid('chkpref'); switch(item.getattribute('aria-checked')) { case "true": item.setattribute('aria-checked', "false"); break; case "false": item.setattribute('aria-checked', "true"); break; } } accessibility concerns when the checkbox role is added to an element, the user agent should do the following: expose the element as having a checkbox role in the operating system's accessibility api.

ARIA: dialog role - Accessibility
possible effects on user agents and assistive technology when the dialog role is used, the user agent should do the following: expose the element as a dialog in the operating system's accessibility api.

ARIA: listbox role - Accessibility
(note: "labelled", with two l's, is the correct spelling based on the accessibility api conventions.) aria-roledescription a human-readable string value which more clearly identifies the role of the listbox.

WAI-ARIA Roles - Accessibility
please claim the role you want to work on by adding your name after the role's name: (old pages are linked from https://developer.mozilla.org/docs/web/accessibility/aria/aria_techniques).

Multipart labels: Using ARIA for labels with embedded fields inside them - Accessibility
with firefox 3, your blind users will automatically get better accessibility from the new attribute, but the users of older browsers are not left in the dark this way.

Forms - Accessibility
the following pages provide various techniques for improving the accessibility of web forms: basic form hints: adding hints and descriptions for invalid or required fields alerts: using alerts to provide client-side validation error messages multi-part labels: enabling complex form labels with a control inside each label see also the yahoo!

overview - Accessibility
ia toggle button and tri-state checkbox examples (from "the paciello group blog") aria example checkbox widgets from the university of illinois menu using wai-aria roles and states with the yui menu control slider from the paciello group blog: aria slider, part one, part two, part threet (example) creating an accessible, internationalized dojo rating widget tabs enhancing tabview accessibility with wai-aria roles and states, from the yui blog enhancing the jquery ui tabs accordingly to wcag 2.0 and aria tab panel example here on codetalks lightbox wcag 2.0 and aria-conformant lightbox application http://majx-js.digissime.net/js/popin/ form validation wcag 2.0 and aria-conformant live form validation tables german tutorial on creating an accessible form simple grid ex...

An overview of accessible web applications and widgets - Accessibility
aria attributes are interpreted automatically by the browser and translated to the operating system's native accessibility apis.

Community - Accessibility
mozilla accessibility newsgroup wai interest group discussion list unix accessibility project (reference) sun mozilla accessibility task force contribute/get involved webaim discussion list ...

Color contrast - Accessibility
you can also check color contrast on the fly using firefox's developer tools — see our accessibility inspector guide, and in particular the section check for accessibility issues.

Using Media Queries for Accessibility - CSS: Cascading Style Sheets
example this example has an annoying animation unless you turn on reduce motion in your accessibility preferences.

Index - Learn web development
2 accessibility aria, accessibility, articles, beginner, css, codingscripting, html, javascript, landing, learn, module learning some html, css, and javascript is useful if you want to become a web developer.
...to help you achieve this, this module will cover general best practices (which are demonstrated throughout the html, css, and javascript topics), cross browser testing, and some tips on enforcing accessibility from the start.
... we'll cover accessibility in special detail.
...And 27 more matches

WAI-ARIA basics - Learn web development
previous overview: accessibility next following on from the previous article, sometimes making complex ui controls that involve unsemantic html and dynamic javascript-updated content can be difficult.
... objective: to gain familiarity with wai-aria, and how it can be used to provide useful additional semantics to enhance accessibility where required.
... a whole new set of problems as web apps started to get more complex and dynamic, a new set of accessibility features and problems started to appear.
...And 20 more matches

Index
163 iaccessibleapplication interfaces, xpcom, xpcom interface reference this interface provides the at with the information it needs to differentiate this application from other applications, from other versions of this application, or from other versions of this application running on different versions of an accessibility bridge or accessibility toolkit.
... 232 nsiaccessnode accessibility, interfaces, interfaces:scriptable, xpcom, xpcom interface reference the nsiaccessnode implementations are instantiated lazily.
... 248 nsiaccessibilityservice accessibility, interfaces, interfaces:scriptable, needscontent, xpcom api reference, xpcom interface reference no summary!
...And 18 more matches

Links and Resources
here are some useful links for those interested in web accessibility as well as open source accessibility.
... guidelines & standards information and resources on section 508 - legal policy for us government purchases requiring software accessibility.
... wai - web accessibility initiative web content accessibility guidelines (wcag) 1.0 the first set of official guidelines from the w3c web accessibility initiative (wai).
...And 17 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
6 aria accessibility, glossary aria (accessible rich internet applications) is a w3c specification for adding semantics and other metadata to html to cater to users of assistive technology.
... 9 atag atag, accessibility, authoring tool accessibility guidelines, glossary atag (authoring tool accessibility guidelines) is a w3c recommendation for building accessible-authoring tools that produce accessible contents.
... 11 accessibility accessibility, glossary web accessibility (a11y) refers to best practices for keeping a website usable despite physical and technical restrictions.
...And 12 more matches

Mozilla’s UAAG evaluation report
the uaag document contains a very rich set of accessibility guidelines, that broadly define how accessibility should be implemented by any user agent, i.e.
...the uaag is not the basis for any government accessibility regulations at this time.
...there may be accessibility and customizability features not listed here.
...And 12 more matches

AT APIs Support
gecko is the core architecture that we are adding accessibility to, in order to support basic accessibility in all applications that are based on it.
... on windows platform mfcembed testing client - this is a very simple package, great for testing basic html accessibility with your products and the gecko rendering engine (please contact us for a copy).
...however it's preferable to grab the current build of firefox or any other gecko-based product to be up to dated: firefox recent builds thunderbird recent builds seamonkey recent builds determining if accessibility is enabled in a firefox accessibility is enabled on windows and linux platforms by default.
...And 11 more matches

Building accessible custom components in XUL - Archive of obsolete content
introduction dhtml accessibility is a new technology which enables developers to construct accessible controls within (x)html pages.
...by implementing dhtml accessibility techniques, web developers can declare that generic html elements are really acting as specific gui controls (such as a treeitem within a treeview).
... firefox 1.5 is the first browser to support dhtml accessibility; it maps the declarations within the html page to the underlying accessibility architecture so that assistive technologies can "read" a web page and know how to present these complex controls to the end user.
...And 10 more matches

Index - Archive of obsolete content
751 accessibility/xul accessibility reference accessibility, xul this table is designed to show how to expose text properly for various xul element types.
... 1152 building accessible custom components in xul accessibility, dhtml, xul dhtml accessibility is a new technology which enables developers to construct accessible controls within (x)html pages.
... 1813 xul accessibility guidelines accessibility, xul welcome to the xul accessibility guidelines.
...And 9 more matches

Accessible multimedia - Learn web development
previous overview: accessibility next another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users.
... prerequisites: basic computer literacy, a basic understanding of html, css, and javascript, an understanding of what accessibility is.
... objective: to understand the accessibility issues behind multimedia, and how to overcome them.
...And 8 more matches

CSUN Firefox Materials
firefox's "www for everyone" philosophy is also a great accessibility story.
...basic screen reader accessibility is available via gnopernicus or the fire vox extension.
... the accessibility extension may be installed on top of firefox, allowing keyboard access to document structure.
...And 8 more matches

Accessible Toolkit Checklist
please contact the mozilla accessibility community with questions or feedback.
... the approaches there are two basic kinds of toolkits, which each provide different challenges when implementing accessibility: native widget toolkits , like eclipse and wxwidgets, already have some accessibility built-in.
...also, assistive technologies already understand native widgets so it is only necessary to implement microsoft active accessibility (msaa) api support for custom controls.
...And 7 more matches

Starting our Svelte Todo list app - Learn web development
accessibility features of the todo list you may notice some unusual attributes here.
... this seems like a good time to talk about how svelte deals with accessibility; let's do that now.
... svelte accessibility support svelte has a special emphasis on accessibility.
...And 6 more matches

Mozilla's Section 508 Compliance
the united states federal rehabilitation act's section 508 is a new standard for defining accessibility requirements for software and other electronic and information technology.
... the following is provided for informational purposes only and is not a legally binding voluntary product accessibility template (vpat).
... (b) applications shall not disrupt or disable activated features of other products that are identified as accessibility features, where those features are developed and documented according to industry standards.
...And 6 more matches

Index - Web APIs
526 drawing text canvas, graphics, intermediate, tutorial the canvas rendering context provides two methods to render text: 527 finale canvas, graphics, tutorial there are a variety of demos and further explanations about canvas on these sites: 528 hit regions and accessibility canvas, graphics, tutorial the content inside the <canvas> ...
...a good example at html5accessibility.com demonstrates how this can be done: 529 optimizing canvas advanced, canvas, graphics, html, html5, tutorial this article provides suggestions for optimizing your use of the canvas element to ensure that your graphics perform well.
... 559 canvasrenderingcontext2d.drawfocusifneeded() api, accessibility, canvas, canvasrenderingcontext2d, method, reference the canvasrenderingcontext2d.drawfocusifneeded() method of the canvas 2d api draws a focus ring around the current or given path, if the specified element is focused.
...And 6 more matches

Index - Archive of obsolete content
4 accessibility/xul accessibility reference accessibility, xul this table is designed to show how to expose text properly for various xul element types.
... 421 building accessible custom components in xul accessibility, dhtml, xul dhtml accessibility is a new technology which enables developers to construct accessible controls within (x)html pages.
... 1082 xul accessibility guidelines accessibility, xul welcome to the xul accessibility guidelines.
...And 5 more matches

2006-11-10 - Archive of obsolete content
summary: mozilla.dev.accessibility - oct 28-nov 10, 2006 announcements acm transactions on accessible computing "transactions on accessible computing (taccess) is a quarterly journal that publishes refereed articles addressing issues of computing as it impacts the lives of people with disabilities." read more...
... w4a 2007 first call for papers the fourth international cross-disciplinary cofnerence on web accessibility (w4a 2007) co-located with the sixteenth international world wide web conference (www2007), in banff, canada.
... discussions firefox: an open source accessibility success story aaron leventhal of ibm recently published a new article praising firefox accessibility.
...And 4 more matches

Information for Assistive Technology Vendors
information for assistive technology vendors accessibility features in mozilla & call for testers!
... mozilla now has enough accessibility support that we're reading for early adopters and testers to start giving it a try.
... gecko info for windows accessibility vendors mozilla supports msaa (microsoft active accessibility) in html and in our user interface (based on xul technology).
...And 4 more matches

Information for users
> help contents f1 > accessibility features) which describe any special features and keyboard shortcuts designed to help users with disabilities.
... please check the accessibility help topic for more information.
... firefox accessibility features this page defines most of the accessibility features possible in firefox.
...And 4 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
required for accessibility autocomplete all hint for form autofill feature autofocus all automatically focus the form control when the page is loaded capture file media capture input method in file upload controls checked radio, checkbox whether the command or control is checked dirname text, search name of form field to use for sending the element'...
... use careful consideration for accessibility when applying the autofocus attribute.
...the visible explanation is required for accessibility.
...And 4 more matches

Preferences - Archive of obsolete content
using them is as easy as: // get the "accessibility." branch var prefs = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice).getbranch("accessibility."); // prefs is an nsiprefbranch.
...var value = prefs.getboolpref("typeaheadfind"); // get a pref (accessibility.typeaheadfind) prefs.setboolpref("typeaheadfind", !value); // set a pref (accessibility.typeaheadfind) complex types as noted in the previous section, each entry in the preferences database (prefs.js) must have a string, an integer, or a boolean value.
...for example, most accessibility preferences in mozilla start with "accessibility." this means that all existing preferences can be imagined as if they were in a tree, like this: + | +-- accessibility | | | +-- typeaheadfind | | | | | +-- autostart (accessibility.typeaheadfind.autostart) | | | | | +-- enablesound (accessibility.typeaheadfind.enable...
...And 3 more matches

The Business Benefits of Web Standards - Archive of obsolete content
introduction and context doing more with less seems to be the mission impossible for web designers: addressing more customers, a broader audience, more diversity in terms of browsers, more accessibility, users asking for more speed, while spending less to maintain or redesign a web site.
... mandated accessibility being accessible is mandatory in many countries for government agencies (us, uk, canada), and --in some countries like australia-- for every organization.
... coding with standards (particularly css for positioning, and strict html) makes accessibility an easier goal to achieve, as standards have been created with accessibility in mind.
...And 3 more matches

Introduction to client-side frameworks - Learn web development
however, if your priorities don't carefully guard performance and accessibility, frameworks will amplify your fragility, your bloat, and your inaccessibility.
... accessibility on a framework-driven web let's build on what we said in the previous section, and talk a bit more about accessibility.
... in some cases, framework applications create accessibility barriers that do not exist for traditional websites.
...And 3 more matches

L10n testing with xcode
navigate to the newly opened ios simulator window many strings are accessibility strings and are only revieled when a user hovers their finger over the button.
... to view these strings, you'll need to start the accessibility inspector within the ios simulator by doing the following.
... navigate to the settings app, open it, and go to general > accessibility.
...And 3 more matches

Window.open() - Web APIs
tip: for accessibility reasons, it is strongly recommended to set this feature always on scrollbars if this feature is on, the new secondary window will show horizontal and/or vertical scrollbar(s) if the document doesn't fit into the window's viewport.
... tip: for accessibility reasons, it is strongly encouraged to set this feature always on window functionality features noopener if this feature is set, the newly-opened window will open as normal, except that it will not have access back to the originating window (via window.opener — it returns null).
...we recommend to always set the resizability and scrollbars presence (if needed) to yes to insure accessibility to content and usability of windows.
...And 3 more matches

Common questions - Learn web development
design and accessibility this section lists questions related to aesthetics, page structure, accessibility techniques, etc.
... what is accessibility?
... this article introduces the basic concepts behind web accessibility.
...And 2 more matches

Getting started with Ember - Learn web development
a note on todomvc and accessibility the todomvc project has a few issues in terms of adhering to accessible/default web practices.
... there are a couple of github issues open about this on the todomvc family of projects: add keyboard access to demos re-enable outline on focusable elements ember has a strong commitment to being accessible by default and there is an entire section of the ember guides on accessibility on what it means for website / app design.
...this goes some way towards fixing one of the major accessibility disadvantages of the default todomvc app.
...And 2 more matches

Understanding client-side JavaScript frameworks - Learn web development
we want you to go forward and learn about frameworks in a pragmatic way that doesn't forget about web platform fundamental best practices such as accessibility.
...accessibility in react in our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in react, which can improve usability and reduce confusion for both keyboard-only and screen reader users.
...the last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility.
...And 2 more matches

Strategies for carrying out testing - Learn web development
you should definitely include accessibility as a grade a testing requirement (we'll cover exactly what you should test in our handling common accessibility problems article) plus you might have other considerations.
...accessibility passing common tests.
... your main work machine can also be a place to install other tools for specific purposes, such as accessibility auditing tools, screen readers, and emulators/virtual machines.
...And 2 more matches

nsIAccessibleRetrieval
accessible/public/nsiaccessibleretrieval.idlscriptable an interface for in-process accessibility clients wishing to get an nsiaccessible or nsiaccessnode for a given dom node.
...create a new accessible of the appropriate type if necessary, or use one from the accessibility cache if it already exists.
...create a new accessible of the appropriate type if necessary, or use one from the accessibility cache if it already exists.
...And 2 more matches

display - CSS: Cascading Style Sheets
due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what's inside.
... see the accessibility concerns section below for more details.
... relationship of flexbox to other layout methods backwards compatibility of flexbox typical use cases of flexbox display: grid basic concepts of grid layout relationship to other layout methods line-based placement grid template areas layout using named grid lines auto-placement in grid layout box alignment in grid layout grids, logical values and writing modes css grid layout and accessibility css grid layout and progressive enhancement realizing common layouts using grids accessibility concerns display: none using a display value of none on an element will remove it from the accessibility tree.
...And 2 more matches

2006-10-06 - Archive of obsolete content
summary: mozilla.dev.accessibility - oct 6, 2006 announcements legal precedent set for web accessibility us federal court rules that retailers may be sued if its website is inaccsessible.
... discussions w3c sets road map for web app accessibility the w3c introduced its wai-aria (web accessibility initiative for accessible rich internet applications) roadmap--a set of guidelines for developers to make accessible web content.
... this set of documents tackles some of the difficulties that ajax has been causing with regards to accessibility.
...other links of interest: roadmap for accessible rich internet applications (wai-aria roadmap) roles for accessible rich internet applications (wai-aria roles) states and properties module for accessible rich internet applications (wai-aria states and properties) making ajax work with screen readers meetings accessibility hackfest 2006 - october 10-12 in cambridge, ma (more details) participants include the mozilla foundation, ibm, sun and novell to name a few.

Working with Svelte stores - Learn web development
in our case, just adding a role="alert" to the <div> container will do the trick, like this: <div role="alert" on:click={() => visible = false}> in general, testing your applications using screen readers is a good idea, not only to discover accessibility issues but also to get used to how visually impaired people use the web.
... to learn more about detecting and fixing accessibility issues check out our handling common accessibility problems article.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Focus management with Vue refs - Learn web development
the last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility.
... inside app.vue, update your <h2> as follows: <h2 id="list-summary" ref="listsummary" tabindex="-1">{{listsummary}}</h2> note: tabindex is a really powerful tool for handling certian accessibility problems.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Index
these new databases provide more accessibility and performance: o cert9.db for certificates o key4.db for keys o pkcs11.txt, which is listing of all of the pkcs #11 modules contained in a new subdirectory in the security databases directory because the sqlite databases are designed to be shared, these are the shared database type.
...these new databases provide more accessibility and performance: o cert9.db for certificates o key4.db for keys o pkcs11.txt, which is listing of all of the pkcs #11 modules contained in a new subdirectory in the security databases directory because the sqlite databases are designed to be shared, these are the shared database type.
...these new databases provide more accessibility and performance: o cert9.db for certificates o key4.db for keys o pkcs11.txt, which is listing of all of the pkcs #11 modules contained in a new subdirectory in the security databases directory because the sqlite databases are designed to be shared, these are the shared database type.
...these new databases provide more accessibility and performance: o cert9.db for certificates o key4.db for keys o pkcs11.txt, which is listing of all of the pkcs #11 modules contained in a new subdirectory in the security databases directory because the sqlite databases are designed to be shared, these are the shared database type.

prefers-reduced-motion - CSS: Cascading Style Sheets
in macos: system preferences > accessibility > display > reduce motion.
... in ios: settings > general > accessibility > reduce motion.
... in android 9+: settings > accessibility > remove animations.
...if reduce motion is enabled in your accessibility preferences, the animation is toned down to a simple dissolve without vestibular motion triggers.

Ordering Flex Items - CSS: Cascading Style Sheets
we will also consider the implications of reordering items from an accessibility point of view.
...the specification continues with a warning not to use reordering to fix issues in your source: “authors must not use order or the *-reverse values of flex-flow/flex-direction as a substitute for correct source ordering, as that can ruin the accessibility of the document.” note: for some years firefox had a bug whereby it would attempt to follow the visual order and not the source order, making it behave differently to other browsers.
... the order property and accessibility use of the order property has exactly the same implications for accessibility as changing the direction with flex-direction.
...to read more about this disconnect of visual order and logical order and some of the potential problems it raises for accessibility, see the following resources.

position - CSS: Cascading Style Sheets
accessibility concerns ensure that elements positioned with an absolute or fixed value do not obscure other content when the page is zoomed to increase text size.
... mdn understanding wcag, guideline 1.4 explanations visual presentation: understanding sc 1.4.8 | understanding wcag 2.0 performance & accessibility scrolling elements containing fixed or sticky content can cause performance and accessibility issues.
...depending on the content needing to be repainted, the browser performance, and the device's processing speed, the browser may not be able to manage repaints at 60 fps, causing accessibility concerns for people with sensitivities and jank for everyone.
... one solution is to add will-change: transform to the positioned elements to render the element in its own layer, improving repaint speed and therefore improving performance and accessibility.

<button>: The Button element - HTML: Hypertext Markup Language
example <button name="button">press me</button> accessibility concerns icon buttons buttons that only show an icon to represent do not have an accessible name.
... accessible names provide information for assistive technology, such as screen readers, to access when they parse the document and generate an accessibility tree.
... assistive technology then uses the accessibility tree to navigate and manipulate page content.
...in order to meet current web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for large text.

<img>: The Image Embed element - HTML: Hypertext Markup Language
the alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility — screen readers read this description out to their users so they know what the image means.
... examples alternative text the following example embeds an image into the page and includes alternative text for accessibility.
... accessibility concerns authoring meaningful alternate descriptions an alt attribute's value should clearly and concisely describe the image's content.
... an alt decision tree • images • wai web accessibility tutorials alt-texts: the ultimate guide — axess lab how to design great alt text: an introduction | deque mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w3c understanding wcag 2.0 the title attribute the title attribute is not an acceptable substitute for the alt attribute.

<table>: The Table element - HTML: Hypertext Markup Language
<th>lime</th> <th>lemon</th> <th>orange</th> </tr> <tr> <td>green</td> <td>yellow</td> <td>orange</td> </tr> </table> <p>simple table with caption</p> <table> <caption>awesome caption</caption> <tr> <td>awesome data</td> </tr> </table> table { border-collapse: collapse; border-spacing: 0px; } table, th, td { padding: 5px; border: 1px solid black; } accessibility concerns captions by supplying a <caption> element whose value clearly and concisely describes the table's purpose, it helps the people decide if they need to read the rest of the table content or skip over it.
... mdn adding a caption to your table with <caption> caption & summary • tables • w3c wai web accessibility tutorials scoping rows and columns the scope attribute on header elements is redundant in simple contexts, because scope is inferred.
... mdn tables for visually impaired users tables with two headers • tables • w3c wai web accessibility tutorials tables with irregular headers • tables • w3c wai web accessibility tutorials h63: using the scope attribute to associate header cells and data cells in data tables | w3c techniques for wcag 2.0 complicated tables assistive technology such as screen readers may have difficulty parsing tables that are so complex that header cells can’t be associated in a strictly horizontal or ...
... mdn tables for visually impaired users tables with multi-level headers • tables • w3c wai web accessibility tutorials h43: using id and headers attributes to associate data cells with header cells in data tables | techniques for w3c wcag 2.0 specifications specification status comment html living standardthe definition of 'table element' in that specification.

Populating the page: how browsers work - Web Performance
building the accessibility tree the browser also builds an accessibility tree that assistive devices use to parse and interpret content.
... the accessibility object model (aom) is like a semantic version of the dom.
... the browser updates the accessibility tree when the dom is updated.
... the accessibility tree is not modifiable by assistive technologies themselves.

Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
accessibility no organization can afford to overlook or ignore accessibility standards.
... within the web environment, the accessibility standards are closely tied to html, xml, xhtml, and other w3c standards.
... by integrating and supporting the accessibility guidelines, an organization can offer their product lines or services to a larger and more diverse user base.

Styling Abbreviations and Acronyms - Archive of obsolete content
summary: the html elements abbr and acronym are useful accessibility aids, but their styling can come as a surprise to authors.
...this is to be encouraged, and according to guideline 4 of the web content accessibility guidelines, both elements should be given a title attribute to improve "readability of the web for all people, including those with learning disabilities, cognitive disabilities, or people who are deaf." the problem authors have discovered that any abbr or acronym that has a title attribute is rendered with a dotted underline, per the following rule in resource://gre-resources/html.css abbr[title], acronym[title] { text-decoration: dotted underline; } the solution if authors wish to remove the under...
... related links web content accessibility guidelines 1.0 original document information author(s): eric a.

From object to iframe — other embedding technologies - Learn web development
they have since fallen out of fashion due to many problems, including accessibility, security, file size, and more; these days most mobile devices don't support such plugins anymore, and desktop support is on the way out.
... </a> </p> </object> pdfs were a necessary stepping stone between paper and digital, but they pose many accessibility challenges and can be hard to read on small screens.
... give yourself a break from the extra accessibility headaches that come with flash and other plugins.

HTML table basics - Learn web development
you can find more details and an example at page layouts in our accessibility learning module.
...the main reasons are as follows: layout tables reduce accessibility for visually impaired users: screenreaders, used by blind people, interpret the tags that exist in an html page and read out the contents to the user.
... overview: tables next in this module html table basics html table advanced features and accessibility structuring planet data ...

The "why" of web performance - Learn web development
in a sense, web performance can be considered a subset of web accessibility.
... with performance as with accessibility, you consider what device a site visitor is using to access the site and the device connection speed.
... conclusion web performance is important for accessibility and also for other website metrics that serve the goals of an organization or business.

Getting started with React - Learn web development
accurate page titles are important for accessibility!
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

React interactivity: Events and state - Learn web development
this is bad for accessibility, and makes it impossible for react to tell future tasks apart with the key prop.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

React resources - Learn web development
because reach router is better for accessibility, it's a good place to start.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Beginning our React todo list - Learn web development
accessibility features you may notice some unusual attributes here.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Vue conditional rendering: editing existing todos - Learn web development
the last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo for...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Setting up your own test automation environment - Learn web development
you can use any url to point to your resource, including a file:// url to test a local document: driver.get('file:///users/chrismills/git/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html'); or driver.get('http://localhost:8888/fake-div-buttons.html'); but it is better to use a remote server location so the code is more flexible — when you start using a remote server to run your tests (see later on), your code will break if you try to use local paths.
... add this line to the bottom of quick_test.js now: driver.get('http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html'); interacting with the document now we've got a document to test, we need to interact with it in some way, which usually involves first selecting a specific element to test something about.
... previous overview: cross browser testing in this module introduction to cross browser testing strategies for carrying out testing handling common html and css problems handling common javascript problems handling common accessibility problems implementing feature detection introduction to automated testing setting up your own test automation environment ...

AT Development
introduction software accessibility: where are we today?
... the accessibility of computer software has seen drastic improvements over the past two decades.
... accessibility architecture how the accessibility hierarchy is implemented in mozilla (some issues aren't addressed by previous guide).

nsIAccessible
« gecko at interfaces page summary the nsiaccessible interface is a cross-platform interface that supports platform-specific accessibility apis like msaa and atk.
... contains the sum of what's needed to support iaccessible as well as atk's generic accessibility objects.
... can also be used by in-process accessibility clients to get information about objects in the accessible tree.

Working with Multiple Versions of Interfaces
to do this i used the accessibility framework: hwnd gethwnd(nsidomnode *node){ hwnd self = null; nsresult rv; nscomptr<nsiaccessibleretrieval> refp; refp = do_createinstance( "@mozilla.org/accessibleretrieval;1", &rv); if (ns_failed(rv)){ return self; } //line 6.
...to include both retrieval interfaces (and remember the old iid without having to cut and paste) i followed the kind advice of mike shaver and did: #define nsiaccessibleretrieval nsiaccessibleretrieval_old #include "accessibility/nsiaccessibleretrieval_old.h" static const nsiid ns_iaccessibleretrieval_iid_old = ns_iaccessibleretrieval_iid; #undef nsiaccessibleretrieval #undef __gen_nsiaccessibleretrieval_h__ #include "accessibility/nsiaccessibleretrieval.h" and following the identical principle for the document interface: #define nsiaccessibledocument nsiaccessibledocument_old #include "accessibility/nsiaccessibledocume...
...nt_old.h" static const nsiid ns_iaccessibledocument_iid_old = ns_iaccessibledocument_iid; #undef nsiaccessibledocument #undef __gen_nsiaccessibledocument_h__ #include "accessibility/nsiaccessibledocument.h" i even silenced my friend the compiler by enclosing both incantations within a compiler pragma: #pragma warning(push) #pragma warning(disable : 4005) ...

Index - Firefox Developer Tools
3 accessibility inspector accessibility, accessibility inspector, devtools, guide, tools the accessibility inspector provides a means to access important information exposed to assistive technologies on the current page via the accessibility tree, allowing you to check what's missing or otherwise needs attention.
... this article takes you through the main features of the accessibility inspector and how to use it.
... 4 color vision simulation accessibility, accessibility inspector, color blindness, devtools, guide, simulation, tools the simulator in the accessibility inspector in firefox developer tools lets you see what a web page would look like to users with various forms of color vision deficiency (better known as "color blindness"), as well as contrast sensitivity loss.

CanvasRenderingContext2D.addHitRegion() - Web APIs
parentid the id of the parent region for cursor fallback and navigation by accessibility tools.
... label a text label for accessibility tools to use as a description of the region, if there is no control.
... role an aria role for accessibility tools to determine how to represent this region, if there is no control.

content - CSS: Cascading Style Sheets
accessibility concerns css-generated content is not included in the dom.
... because of this, it will not be represented in the accessibility tree and certain assistive technology/browser combinations will not announce it.
... accessibility support for css generated content – tink explanation of wcag, guideline 1.3 – mdn understanding success criterion 1.3.1 | w3c understanding wcag 2.0 formal definition initial valuenormalapplies to::before and ::after pseudo-elementsinheritednocomputed valueon elements, always computes to normal.

<display-box> - CSS: Cascading Style Sheets
due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what's inside.
... see the accessibility concerns section below for more details.
... accessibility concerns current implementations in most browsers will remove from the accessibility tree any element with a display value of contents.

Event reference
checkboxstatechange xul the state of a checkbox has been changed either by a user action or by a script (useful for accessibility).
... radiostatechange xul the state of a radio has been changed either by a user action or by a script (useful for accessibility).
... valuechange xul the value of an element has changed (a progress bar, for example; useful for accessibility).

<h1>–<h6>: The HTML Section Heading elements - HTML: Hypertext Markup Language
<h1>heading elements</h1> <h2>summary</h2> <p>some text here...</p> <h2>examples</h2> <h3>example 1</h3> <p>some text here...</p> <h3>example 2</h3> <p>some text here...</p> <h2>see also</h2> <p>some text here...</p> here is the result of this code: accessibility concerns navigation a common navigation technique for users of screen reading software is jumping from heading to heading to quickly determine the content of the page.
... headings • page structure • wai web accessibility tutorials mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.1 | w3c understanding wcag 2.0 mdn understanding wcag, guideline 2.4 explanations understanding success criterion 2.4.1 | w3c understanding wcag 2.0 understanding success criterion 2.4.6 | w3c understanding wcag 2.0 understanding success criterion 2.4.10 | w3c understanding wcag 2.0 labeling s...
... using the aria-labelledby attribute labeling regions • page structure • w3c wai web accessibility tutorials specifications specification status comment html living standardthe definition of '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>' in that specification.

<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
</canvas> javascript then in the javascript code, call htmlcanvaselement.getcontext() to get a drawing context and start drawing onto the canvas: const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 100, 100); result accessibility concerns alternative content the <canvas> element on its own is just a bitmap and does not provide information about any drawn objects.
... canvas content is not exposed to accessibility tools as semantic html is.
... mdn hit regions and accessability canvas accessibility use cases canvas element accessibility issues html5 canvas accessibility in firefox 13 – by steve faulkner best practices for interactive canvas elements specifications specification status comment html living standardthe definition of '<canvas>' in that specification.

tabindex - HTML: Hypertext Markup Language
accessibility concerns avoid using the tabindex attribute in conjunction with non-interactive content to make something intended to be interactive focusable by keyboard input.
... interactive components authored using non-interactive elements are not be listed in the accessibility tree.
...these elements have built-in roles and states that communicate status to the accessibility that would otherwise have to be managed by aria.

Adding sidebars - Archive of obsolete content
forcing sidebars to have a fixed size can cause accessibility and usability problems.
...using custom-made elements are likely to cause accessibility and functional problems.

Adding windows and dialogs - Archive of obsolete content
it's also a useful accessibility feature, because screen readers will read the caption right before reading any text in its contents.
... focus and tabbing moving through all input controls in a window using only the keyboard is an accessibility requirement.

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
wired news redesign in a nutshell driven by xhtml 1.0 transitional and css; allows centralized control over layout and appearance for thousands of pages; simple markup allows for rapid changes to templates; average page weight dropped by almost half; page layout accomplished with simple css positioning; vastly increased accessibility without special coding or user agent detection.
...as a very welcome side benefit, we also believe the accessibility of wired news will dramatically improve without the clutter of nested layout tables.

New Skin Notes - Archive of obsolete content
skin designed specifically with accessibility in mind.
...also see about improving accessibility of default skin.

Building XULRunner with Python - Archive of obsolete content
this page describes how to build and use xulrunner with the python extension on windows and while generally useful it is written based on experiences with accessibility projects.
...you should also read the the developer documentation on source code and building as wells as pyxpcom xulrunner with python promises to be a good platform for accessibility projects and both jambu alternative input and the iaccessible2 test tool are using it.

ATAG - MDN Web Docs Glossary: Definitions of Web-related terms
atag (authoring tool accessibility guidelines) is a w3c recommendation for building accessible-authoring tools that produce accessible contents.
... learn more general knowledge atag as part of the web accessibility initiative on wikipedia technical reference authoring tool accessibility guidelines (atag) overview the atag 2.0 recommendation ...

Screen reader - MDN Web Docs Glossary: Definitions of Web-related terms
in terms of web accessibility, most user agents provide an accessibility object model and screen readers interact with dedicated accessibility apis, using various operating system features and employing hooking techniques.
...to access voiceover, go to system preferences > accessibility > voiceover.

WAI - MDN Web Docs Glossary: Definitions of Web-related terms
wai or web accessibility initiative is an effort by the world wide web consortium (w3c) to improve accessibility for people with various challenges, who may need a nonstandard browser or devices.
... learn more general knowledge wai website web accessibility initiative on wikipedia ...

WCAG - MDN Web Docs Glossary: Definitions of Web-related terms
web content accessibility guidelines (wcag) are a recommendation published by the web accessibility initiative group at the w3c.
... learn more general knowledge wcag on wikipedia technical knowledge accessibility information on mdn the wcag 2.0 recommendation at the w3c ...

Practical positioning examples - Learn web development
</aside> to start with here we've got a <label> element and an <input> element — <label> elements are normally used to associate a text label with a form element for accessibility purposes (allowing a screen user to see what description goes with what form element).
...in addition, the effect is not great in terms of accessibility; the label is not focusable by default, and the non-semantic use of the form elements could cause issues with screen readers.

Supporting older browsers - Learn web development
accessibility and people using assistive technology should always be considered, but for some sites that may be even more critical.
... in my experience, developers are often very worried about the experience of 1% of users in an old version of internet explorer, while not considering at all the far greater number who have accessibility needs.

Getting started with CSS - Learn web development
note: you will often see mention of accessibility in these lessons and across mdn.
... when we talk about accessibility we are referring to the requirement for our webpages to be understandable and usable by everyone.

How can we design for all types of users? - Learn web development
prerequisites: you should first read what is accessibility?, since we don't cover accessibility in detail here.
...relative units are friendlier to accessibility because they respect the settings on the user's system.

Basic native form controls - Learn web development
previous overview: forms next in the previous article, we marked up a functional web form example, introducing some form controls and common structural elements, and focusing on accessibility best practices.
... for maximum usability/accessibility, you are advised to surround each list of related items in a <fieldset>, with a <legend> providing an overall description of the list.

How to build custom form controls - Learn web development
.select .optlist.hidden { /* this is a simple way to hide the list in an accessible way; we will talk more about accessibility in the end */ max-height: 0; visibility: hidden; } note: we could also have used transform: scale(1, 0) to give the optionlist no height and full width.
... as seen previously, we already use a native select control as a fallback for accessibility reasons; we can simply synchronize its value with that of our custom control: // this function updates the displayed value and synchronizes it with the native control.

Styling web forms - Learn web development
on the legend in this manner, we used the following css (other declarations removed for brevity): fieldset { position: relative; } legend { position: absolute; bottom: 0; right: 0; } the <fieldset> needs to be positioned too, so that the <legend> is positioned relative to it (otherwise the <legend> would be positioned relative to the <body>.) the <legend> element is very important for accessibility — it will be spoken by assistive technologies as part of the label of each form element inside the fieldset — but using a technique like the one above is fine.
...and backgrounds, and redefine their padding and margin: input, textarea { font : 1.4em/1.5em "handwriting", cursive, sans-serif; border : none; padding : 0 10px; margin : 0; width : 80%; background : none; } when one of these fields gains focus, we highlight them with a light grey, transparent, background (it is always important to have focus style, for usability and keyboard accessibility): input:focus, textarea:focus { background : rgba(0,0,0,.1); border-radius: 5px; } now that our text fields are complete, we need to adjust the display of the single and multiple line text fields to match, since they won't typically look the same using the defaults.

Front-end web developer - Learn web development
subjects covered the subjects covered are: basic setup and learning how to learn web standards and best practices (such as accessibility and cross-browser compatibility) html, the language that gives web content structure and meaning css, the language used to style web pages javascript, the scripting language used to create dynamic functionality on the web tooling that is used to facilitate modern client-side web development.
... modules cross-browser testing (25–30 hour read/exercises) accessibility (20–25 hour read/exercises) modern tooling time to complete: 55–90 hours prerequisites it is a good idea to know html, css, and javascript before working through this section, as the tools discussed work alongside many of these technologies.

HTML basics - Learn web development
find out more about accessibility in our accessibility learning module.
...don't use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as seo.

Add a hitmap on top of an image - Learn web development
formerly, image maps were a popular navigation device, but it’s important to thoroughly consider their performance and accessibility ramifications.
... text links (perhaps styled with css) are preferable to image maps for several reasons: text links are lightweight, maintainable, often more seo-friendly, and support accessibility needs (e.g., screen readers, text-only browsers, translation services).

Use JavaScript within a webpage - Learn web development
<script> window.addeventlistener('load', function () { console.log('this function is executed once the page is fully loaded'); }); </script> that's convenient when you just need a small bit of javascript, but if you keep javascript in separate files you'll find it easier to focus on your work write self-sufficient html write structured javascript applications use scripting accessibly accessibility is a major issue in any software development.
... learn more <script> <noscript> james edwards' introduction to using javascript accessibly accessibility guidelines from w3c ...

HTML text fundamentals - Learn web development
elements like this, which only affect presentation and not semantics, are known as presentational elements and should no longer be used, because as we've seen before, semantics is so important to accessibility, seo, etc.
...however, it always remains critical to keep an accessibility mindset.

Images in HTML - Learn web development
our example, we could do this: <img src="images/dinosaur.jpg" alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" width="400" height="341" title="a t-rex on display in the manchester university museum"> this gives us a tooltip on mouse hover, just like link titles: however, this is not recommended — title has a number of accessibility problems, mainly based around the fact that screen reader support is very unpredictable and most browsers won't show it unless you are hovering with a mouse (so e.g.
... note: from an accessibility viewpoint, captions and alt text have distinct roles.

Web performance - Learn web development
the rest of our beginner's learning material tried to stick to web best practices such as performance and accessibility as much as possible, however, it is good to focus specifically on such topics too, and make sure you are familiar with them.
... the "why" of web performance this article discusses why web performance is important for accessibility, user experience and your business goals.

Ember Interactivity: Footer functionality, conditional rendering - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Ember interactivity: Events, classes and state - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Ember resources and troubleshooting - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Routing in Ember - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Ember app structure and componentization - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Framework main features - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Componentizing our React app - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

React interactivity: Editing, filtering, conditional rendering - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

TypeScript support in Svelte - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Componentizing our Svelte app - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Deployment and next steps - Learn web development
previous overview: client-side javascript frameworks in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Getting started with Svelte - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Dynamic behavior in Svelte: working with variables and props - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Using Vue computed properties - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Creating our first Vue component - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Getting started with Vue - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Adding a new todo form: Vue events, methods, and models - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Rendering a list of Vue components - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Vue resources - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Styling Vue components with CSS - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue c...
...els styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Introduction to automated testing - Learn web development
automation makes things easy throughout this module we have detailed loads of different ways in which you can test your websites and apps, and explained the sort of scope your cross-browser testing efforts should have in terms of what browsers to test, accessibility considerations, and more.
... previous overview: cross browser testing next in this module introduction to cross browser testing strategies for carrying out testing handling common html and css problems handling common javascript problems handling common accessibility problems implementing feature detection introduction to automated testing setting up your own test automation environment ...

Introduction to cross browser testing - Learn web development
do some lo-fi accessibility testing, such as trying to use your site with only the keyboard, or using your site via a screen reader to see if it is navigable.
... overview: cross browser testing next in this module introduction to cross browser testing strategies for carrying out testing handling common html and css problems handling common javascript problems handling common accessibility problems implementing feature detection introduction to automated testing setting up your own test automation environment ...

Information for Governments and Other Organizations Evaluating Mozilla
mozilla's section 508 compliance section 508 is a set of accessibility requirements that help us federal agencies decide what software applications they can use.
... mozilla's w3c user agent guidelines evaluation report w3c's wai is advancing another important set of accessibility standards called uaag.

PR_Access
determines the accessibility of a file.
... syntax #include <prio.h> prstatus pr_access( const char *name, praccesshow how); parameters the function has the following parameters: name the pathname of the file whose accessibility is to be determined.

IAccessibleText
a change of the selection() is notified to the accessibility event listeners with an ::ia2_event_text_selection_changed event.
... when the new caret position differs from the old one (which, of course, is the standard case) this is notified to the accessibility event listeners with an ::ia2_event_text_caret_moved event.

nsIAccessNode
accessible/public/nsiaccessnode.idlscriptable an interface used by in-process accessibility clients to get style, window, markup and other information about a dom node.
... when accessibility is active in gecko, every dom node can have one nsiaccessnode.

nsIAccessibleDocument
accessible/public/nsiaccessibledocument.idlscriptable an interface for in-process accessibility clients that wish to retrieve information about a document.
... when accessibility is turned on in gecko, there is an nsiaccessibledocument for each document whether it is xul, html or whatever.

nsIAccessibleEvent
accessible/public/nsiaccessibleevent.idlscriptable an interface for accessibility events listened to by in-process accessibility clients, which can be used to find out how to get accessibility and dom interfaces for the event and its target.
... example to listen to in-process accessibility invents, make your object an nsiobserver, and listen for accessible-event by using code something like this: nscomptr<nsiobserverservice> observerservice = do_getservice("@mozilla.org/observer-service;1", &rv); if (ns_succeeded(rv)) { rv = observerservice->addobserver(this, "accessible-event", pr_true); } ...

Using the Web Audio API - Web APIs
also, for accessibility, it's nice to expose that track in the dom.
... these special requirements are in place essentially because unexpected sounds can be annoying and intrusive, and can cause accessibility problems.

::placeholder - CSS: Cascading Style Sheets
syntax ::placeholder accessibility concerns color contrast contrast ratio placeholder text typically has a lighter color treatment to indicate that it is a suggestion for what kind of input will be valid, and is not actual input of any kind.
...in order to meet current web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings.

::selection - CSS: Cascading Style Sheets
this paragraph.</p> css ::-moz-selection { color: gold; background-color: red; } p::-moz-selection { color: white; background-color: blue; } /* make selected text gold on a red background */ ::selection { color: gold; background-color: red; } /* make selected text in a paragraph white on a blue background */ p::selection { color: white; background-color: blue; } result accessibility concerns don't override selected text styles for purely aesthetic reasons — users can customize them to suit their needs.
...to meet current web content accessibility guidelines (wcag), text content must have a contrast ratio of 4.5:1, or 3:1 for larger text such as headings.

:empty - CSS: Cascading Style Sheets
--></p> </div> css body { display: flex; justify-content: space-around; } .box { background: pink; height: 80px; width: 80px; } .box:empty { background: lime; } result accessibility concerns assistive technology such as screen readers cannot parse interactive content that is empty.
...accessible names expose the interactive control to the accessibility tree, an api that communicates information useful for assistive technologies.

Pagination - CSS: Cascading Style Sheets
.pagination { list-style: none; margin: 0; padding: 0; display: flex; column-gap: 2px; } accessibility concerns we want to ensure that a person using a screenreader understands what this navigation does, and where they will go when clicking a link.
... the "see also" section at the end of this document has links to related accessibility topics.

background-color - CSS: Cascading Style Sheets
accessibility concerns it is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page.
...in order to meet current web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings.

color - CSS: Cascading Style Sheets
accessibility concerns it is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.
...in order to meet current web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings.

image() - CSS: Cascading Style Sheets
accessibility concerns browsers do not provide any special information on background images to assistive technology.
... mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w3c understanding wcag 2.0 this feature can help improve accessibility by providing a fallback color when an image fails to load.

max() - CSS: Cascading Style Sheets
this ensure it is legible and ensures accessibility <h1>this text is always legible, but doesn't change size</h1> <h1 class="responsive">this text is always legible, and is responsive, to a point</h1> think of the max() function as finding the minimum value allowed for a property.
... accessibility concerns when max() is used for controlling text size, make sure the text is always large enough to read.

opacity - CSS: Cascading Style Sheets
for example: background: rgba(0, 0, 0, 0.4); accessibility concerns if text opacity is adjusted, it is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.
...in order to meet current web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings.

outline-color - CSS: Cascading Style Sheets
accessibility concerns custom focus styles commonly involve making adjustments to the outline property.
...in order to meet current web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings.

scrollbar-width - CSS: Cascading Style Sheets
accessibility concerns use this property with caution — setting scrollbar-width to thin or none can make content hard or impossible to scroll if the author does not provide an alternative scrolling mechanism.
... wcag criterion 2.1.1 (keyboard) has been in place for a long time to advise on basic keyboard accessibility, and this should include scrolling of content areas.

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
see color and accessibility for a brief explanation of why this matters.
... color and accessibility there are several ways color can be an accessibility problem.

HTML attribute: pattern - HTML: Hypertext Markup Language
additionally, assistive technology may read the title aloud when the control gains focus, but this should not be relied upon for accessibility.
...iv> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position: relative; } p { font-size: 80%; color: #999; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } this renders like so: accessibility concerns when a control has a pattern attribute, the title attribute, if used, must describe the pattern.

<input type="search"> - HTML: Hypertext Markup Language
look at the following example: <form> <div> <input type="search" id="mysearch" name="q" placeholder="search the site..."> <button>search</button> </div> </form> you can see how the placeholder is rendered below: search form labels and accessibility one problem with search forms is their accessibility; a common design practice is not to provide a label for the search field (although there might be a magnifying glass icon or similar), as the purpose of a search form is normally fairly obvious for sighted users due to placement (this example shows a typical pattern).
... note: see signposts/landmarks for more information about such accessibility features.

accesskey - HTML: Hypertext Markup Language
alt + key alt + shift + key n/a edge n/a control + option + key control + option + shift + key google chrome alt + shift + key safari n/a opera 15+ alt + key control + alt + key opera 12 shift + esc opens a contents list which are accessible by accesskey, then, can choose an item by pressing key accessibility concerns in addition to poor browser support, there are numerous concerns with the accesskey attribute: an accesskey value can conflict with a system or browser keyboard shortcut, or assistive technology functionality.
... webaim: keyboard accessibility - accesskey specifications specification status comment html 5.2the definition of 'accesskey' in that specification.

title - HTML: Hypertext Markup Language
html <div title="cooltip"> <p>hovering here will show “cooltip”.</p> <p title="">hovering here will show nothing.</p> </div> result accessibility concerns use of the title attribute is highly problematic for: people using touch-only devices people navigating with keyboards people navigating with assistive technology such as screen readers or magnifiers people experiencing fine motor control impairment people with cognitive concerns this is due to inconsistent browser support, compounded by the additional assistive technology pars...
...semantics, structure, and apis of html documents using the html title attribute – updated | the paciello group tooltips & toggletips - inclusive components the trials and tribulations of the title attribute - 24 accessibility specifications specification status comment html living standardthe definition of 'title' in that specification.

Performance fundamentals - Web Performance
make events immediate as old-school, accessibility-aware web developers we love click events since they also support keyboard input.
...if you test for touch support first, you don’t sacrifice accessibility, either.

panel - Archive of obsolete content
only turn this off if necessary, to prevent accessibility issue.

widget - Archive of obsolete content
parameters options : object required options: name type label string a string description of the widget used for accessibility, title bars, and error reporting.

Dialogs and Prompts - Archive of obsolete content
this will: handle a few keyboard events (enter/esc and more), which is good for keyboard accessibility.

Finding window handles - Archive of obsolete content
another technique is to use the accessibility framework, see for example http://developer.mozilla.org/en/docs..._of_interfaces another way to find a window handle...

Code snippets - Archive of obsolete content
window handles can be used for ipc and accessibility purposes.

Introduction - Archive of obsolete content
xulrunner xulrunner includes the gecko rendering engine, the necko networking library, and several other components that provide os-independent file management, accessibility, and localization, among others.

Mozilla Documentation Roadmap - Archive of obsolete content
it encompasses firefox, other mozilla products, javascript, css, xul, web and extension development guidelines, accessibility, usability, best practices...

The Box Model - Archive of obsolete content
using the former allows the ui to scale proportionately depending on font size settings, which are often changed by users with accessibility limitations.

The Essentials of an Extension - Archive of obsolete content
they are also the only way to navigate a menu for people with accessibility problems, such as partial or total blindness, or physical disabilities that make using a mouse very difficult or impossible.

User Notifications and Alerts - Archive of obsolete content
however, these solutions are prone to be buggy and have accessibility issues.

Index of archived content - Archive of obsolete content
ml data islands in mozilla using content preferences visualizing an audio spectrum working with bfcache cert_override.txt mozilla release faq newsgroup summaries format mozilla.dev.apps.firefox-2006-09-29 mozilla.dev.apps.firefox-2006-10-06 mozilla-dev-accessibility 2006-10-06 2006-11-10 2006-11-22 mozilla-dev-apps-calendar 2006-09-29 2006-10-06 mozilla-dev-apps-firefox 2006-09-29 2006-10-06 2006-10-13 2006-10-20 200...

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
though the inner-browsing model is mostly appropriate for web applications, it also can be used to improve accessibility to information in traditional web pages.

List of Mozilla-Based Applications - Archive of obsolete content
l device uses gre or xulrunner longman dictionary of contemporary english cd-rom lotus notes / sametime groupware the latest version of ibm lotus notes and sametime can embed xul applications lucidor e-book reader lx-office accounting tool looks like it makes at least some use of xul maavis simple ui & communications for accessibility framework designed for elderly people with dementia but other applications mac os x operating system makes use of some mpl files such as libsecurity_asn1 maemo browser browser for maemo internet tablet development name is microb magooclient business process management tool uses mozilla rhino mantra security tool mccoy sec...

Source code directories overview - Archive of obsolete content
accessible contains code to support microsoft active accessibility and sun's atk accessibility api for linux.

Creating a Help Content Pack - Archive of obsolete content
the index file one important note on the index file is that there is no automatically generated set of top-level letters (e.g., a for accessibility and automation or b for book and border).

Static Analysis for Windows Code under Linux - Archive of obsolete content
ac_add_options --enable-debug ac_add_options --disable-optimize ac_add_options --disable-tests ac_add_options --disable-embedding-tests ac_add_options --disable-installer ac_add_options --disable-accessibility ac_add_options --disable-vista-sdk-requirements ac_add_options --disable-updater #change this to where your libidl-config file locate.

accessible - Archive of obsolete content
« xul reference home accessible type: nsiaccessible returns the accessibility object for the element.

CheckboxStateChange - Archive of obsolete content
this event is used mainly for an accessibility purpose.

RadioStateChange - Archive of obsolete content
this event is used mainly for an accessibility purpose.

ValueChange - Archive of obsolete content
this event is used mainly for an accessibility purpose.

XUL Events - Archive of obsolete content
accessibility events these events are used to notify the accessibility system of changes to an element.

accessible - Archive of obsolete content
« xul reference accessible type: nsiaccessible returns the accessibility object for the element.

accessibleType - Archive of obsolete content
« xul reference accessibletype type: integer a value indicating the type of accessibility object for the element.

textbox (Toolkit autocomplete) - Archive of obsolete content
properties accessibletype type: integer a value indicating the type of accessibility object for the element.

Textbox (XPFE autocomplete) - Archive of obsolete content
properties accessible type: nsiaccessible returns the accessibility object for the element.

Adding Labels and Images - Archive of obsolete content
this association is also important for accessibility, so that screen readers read aloud the label for the control as the user tabs to it.

browser - Archive of obsolete content
properties accessibletype type: integer a value indicating the type of accessibility object for the element.

button - Archive of obsolete content
accessibletype type: integer a value indicating the type of accessibility object for the element.

checkbox - Archive of obsolete content
accessibletype type: integer a value indicating the type of accessibility object for the element.

colorpicker - Archive of obsolete content
properties accessibletype type: integer a value indicating the type of accessibility object for the element.

description - Archive of obsolete content
properties accessibletype type: integer a value indicating the type of accessibility object for the element.

dropmarker - Archive of obsolete content
, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.

editor - Archive of obsolete content
properties accessibletype type: integer a value indicating the type of accessibility object for the element.

groupbox - Archive of obsolete content
, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.

iframe - Archive of obsolete content
, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.

image - Archive of obsolete content
properties accessibletype type: integer a value indicating the type of accessibility object for the element.

label - Archive of obsolete content
accessibletype type: integer a value indicating the type of accessibility object for the element.

listbox - Archive of obsolete content
properties accessibletype type: integer a value indicating the type of accessibility object for the element.

listhead - Archive of obsolete content
, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.

listheader - Archive of obsolete content
, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.

listitem - Archive of obsolete content
accessible type: nsiaccessible returns the accessibility object for the element.

menu - Archive of obsolete content
properties accessibletype type: integer a value indicating the type of accessibility object for the element.

menubar - Archive of obsolete content
properties accessibletype type: integer a value indicating the type of accessibility object for the element.

menuitem - Archive of obsolete content
properties accessibletype type: integer a value indicating the type of accessibility object for the element.

menulist - Archive of obsolete content
properties accessibletype type: integer a value indicating the type of accessibility object for the element.

menupopup - Archive of obsolete content
properties accessibletype type: integer a value indicating the type of accessibility object for the element.

menuseparator - Archive of obsolete content
properties accessibletype type: integer a value indicating the type of accessibility object for the element.

notification - Archive of obsolete content
properties accessibletype type: integer a value indicating the type of accessibility object for the element.

panel - Archive of obsolete content
properties accessibletype type: integer a value indicating the type of accessibility object for the element.

progressmeter - Archive of obsolete content
, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.

radio - Archive of obsolete content
accessibletype type: integer a value indicating the type of accessibility object for the element.

radiogroup - Archive of obsolete content
properties accessibletype type: integer a value indicating the type of accessibility object for the element.

richlistbox - Archive of obsolete content
properties accessibletype type: integer a value indicating the type of accessibility object for the element.

richlistitem - Archive of obsolete content
properties accessible type: nsiaccessible returns the accessibility object for the element.

statusbar - Archive of obsolete content
ft, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.

tab - Archive of obsolete content
accessibletype type: integer a value indicating the type of accessibility object for the element.

tabbox - Archive of obsolete content
properties accessibletype type: integer a value indicating the type of accessibility object for the element.

tabpanels - Archive of obsolete content
sertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible type: nsiaccessible returns the accessibility object for the element.

tabs - Archive of obsolete content
properties accessibletype type: integer a value indicating the type of accessibility object for the element.

textbox - Archive of obsolete content
properties accessibletype type: integer a value indicating the type of accessibility object for the element.

toolbar - Archive of obsolete content
properties accessibletype type: integer a value indicating the type of accessibility object for the element.

toolbarbutton - Archive of obsolete content
accessibletype type: integer a value indicating the type of accessibility object for the element.

toolbargrippy - Archive of obsolete content
nsertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible type: nsiaccessible returns the accessibility object for the element.

toolbarseparator - Archive of obsolete content
ft, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.

toolbarspacer - Archive of obsolete content
, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.

toolbarspring - Archive of obsolete content
ft, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.

toolbox - Archive of obsolete content
sertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible type: nsiaccessible returns the accessibility object for the element.

tooltip - Archive of obsolete content
for more details, including examples, please see popup positioning properties accessibletype type: integer a value indicating the type of accessibility object for the element.

tree - Archive of obsolete content
properties accessibletype type: integer a value indicating the type of accessibility object for the element.

treecol - Archive of obsolete content
properties accessibletype type: integer a value indicating the type of accessibility object for the element.

treecols - Archive of obsolete content
, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.

What XULRunner Provides - Archive of obsolete content
eady implemented or planned: gecko features xpcom networking gecko rendering engine dom editing and transaction support (no ui) cryptography xbl (xbl2 planned) xul svg xslt xml extras (xmlhttprequest, domparser, etc.) web services (soap) auto-update support (not yet complete) type ahead find toolbar history implementation (the places implementation in the 1.9 cycle) accessibility support ipc services for communication between gecko-based apps (not yet complete) storage/sqlite interfaces user interface features the following user interface is supplied by xulrunner, and may be overridden by embedders under certain circumstances: apis and user interface for installing, uninstalling, and upgrading xul applications.

Mozprofile - Archive of obsolete content
example: from mozprofile import firefoxprofile # create new profile to pass to mozmill/mozrunner profile = firefoxprofile(addons=["adblock.xpi"]) setting preferences preferences can be set in several ways: using the api: you can pass preferences in to the profile class's constructor: obj = firefoxprofile(preferences=[("accessibility.typeaheadfind.flashbar", 0)]) using a json blob file: mozprofile --preferences myprefs.json using a .ini file: mozprofile --preferences myprefs.ini via the command line: mozprofile --pref key:value --pref key:value [...] when setting preferences from an .ini file or the --pref switch, the value will be interpolated as an integer or a boolean (true/false) if possible.

Gecko Compatibility Handbook - Archive of obsolete content
adhering to web standards simplifies cross-browser web development and enables accessibility.

2006-11-22 - Archive of obsolete content
summary: mozilla.dev.accessibility - nov 17-nov 22, 2006 announcements mozilla osk project grant aaron leventhal (on behalf of michael curran) mentiond that there is now an nvda email list you can join if you wish to keep up to date with the latest changes, or if you wish to discuss new features or talk with other nvda users.

2006-12-01 - Archive of obsolete content
lightning, broken accessibility discussions refering several accessibility issues regarding interface of the sunbird client and the lightning plug-in for thunderbird.

Newsgroup summaries - Archive of obsolete content
formatmozilla.dev.apps.firefox-2006-09-29mozilla.dev.apps.firefox-2006-10-06mozilla.dev.apps.calendarmozilla.dev.tech.js-enginemozilla-dev-accessibilitymozilla-dev-apps-calendarmozilla-dev-apps-firefoxmozilla-dev-apps-thunderbirdmozilla-dev-buildsmozilla-dev-embeddingmozilla-dev-extensionsmozilla-dev-i18nmozilla-dev-l10nmozilla-dev-planningmozilla-dev-platformmozilla-dev-qualitymozilla-dev-securitymozilla-dev-tech-js-enginemozilla-dev-tech-layoutmozilla-dev-tech-xpcommozilla-dev-tech-xul ...

Implementing game control mechanisms - Game development
desktop mouse and keyboard controls — when playing on a desktop/laptop computer, providing keyboard and mouse controls is essential to provide an acceptable level of accessibility for the game.

Progressive Enhancement - MDN Web Docs Glossary: Definitions of Web-related terms
special notice should be taken of accessibility.

Web standards - MDN Web Docs Glossary: Definitions of Web-related terms
this non-exhaustive list gives you an idea of which standards websites and network systems must conform to: ietf (internet engineering task force): internet standards (std), which among other things govern set-up and use of uris, http, and mime w3c: specifications for markup language (e.g., html), style definitions (i.e., css), dom, accessibility iana (internet assigned numbers authority): name and number registries ecma intl.: scripting standards, most prominently for javascript iso (international organization for standardization): standards governing a diverse array of aspects, including character encodings, website management, and user-interface design learn more general knowledge web standards on wikipedia ...

MDN Web Docs Glossary: Definitions of Web-related terms
glossary of terms a abstraction accessibility accessibility tree (aom) adobe flash ajax algorithm alignment container alignment subject alpha (alpha channel) alpn api apple safari application context argument aria arpa arpanet array ascii asynchronous atag attribute b bandwidth base64 baseline beacon bézier...

Test your skills: WAI-ARIA - Learn web development
wai-aria 2 in our second wai-aria task, we present a simple search form, and we want you to add in a couple of wai-aria features to improve its accessibility: how can you allow the search form to be called out as a separate landmark on the page by screenreaders, to make it easily findable?

Backgrounds and borders - Learn web development
accessibility considerations with backgrounds when placing text on top of a background image or color, you should take care that you have enough contrast for the text to be legible for your visitors.

Responsive design - Learn web development
users should be allowed to zoom as much or as little as they need to; preventing this causes accessibility problems.

Styling links - Learn web development
the outline is a useful accessibility aid, so think carefully before turning it off; you should at least double up the styles given to the link hover state on the focus state too.

Advanced form styling - Learn web development
the following libraries aren't just about forms, but they have very interesting features for dealing with html forms: jquery ui offers customizable widgets such as date pickers (with special attention given to accessibility).

Client-side form validation - Learn web development
it isn't only good user experience, it is required by wcag accessibility guidelines.

Your first form - Learn web development
for usability and accessibility, we include an explicit label for each form control.

The web and web standards - Learn web development
accessibility means making your websites usable by as many different kinds of people as possible (related concepts are diversity and inclusion, and inclusive design).

Define terms with HTML - Learn web development
improve accessibility <dfn> marks the keyword defined, and indicates that the current paragraph defines the keyword.

Document and website structure - Learn web development
many web designers consider the navigation bar to be part of the header rather than an individual component, but that's not a requirement; in fact, some also argue that having the two separate is better for accessibility, as screen readers can read the two features better if they are separate.

Test your skills: Advanced HTML text - Learn web development
advanced html text 2 in this task we want you to add some semantics to the provided html as follows: turn the second paragraph into a block-level quote, and semantically indicate that the quote is taken from accessibility.

Video and audio content - Learn web development
this kind of technology worked ok, but it had a number of problems, including not working well with html/css features, security issues, and accessibility issues.

Assessment: Structuring planet data - Learn web development
previous overview: tables in this module html table basics html table advanced features and accessibility structuring planet data ...

HTML Tables - Learn web development
html table advanced features and accessibility this module looks at some more advanced features of html tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users.

Web performance resources - Learn web development
lighthouse can give you a detailed breakdown of many aspects of your site including performance, seo and accessibility.

Implementing feature detection - Learn web development
previous overview: cross browser testing next in this module introduction to cross browser testing strategies for carrying out testing handling common html and css problems handling common javascript problems handling common accessibility problems implementing feature detection introduction to automated testing setting up your own test automation environment ...

Handling common HTML and CSS problems - Learn web development
previous overview: cross browser testing next in this module introduction to cross browser testing strategies for carrying out testing handling common html and css problems handling common javascript problems handling common accessibility problems implementing feature detection introduction to automated testing setting up your own test automation environment ...

Handling common JavaScript problems - Learn web development
previous overview: cross browser testing next in this module introduction to cross browser testing strategies for carrying out testing handling common html and css problems handling common javascript problems handling common accessibility problems implementing feature detection introduction to automated testing setting up your own test automation environment ...

Cross browser testing - Learn web development
handling common accessibility problems next we turn our attention to accessibility, providing information on common problems, how to do simple testing, and how to make use of auditing/automation tools for finding accessibility issues.

Client-side tooling overview - Learn web development
also well-worth looking at is webhint, a configurable, open-source linter for the web that surfaces best practices including approaches to accessibility, performance, cross-browser compatibility via mdn's browser compatibility data, security, testing for pwas, and more.

Learn web development
accessibility — make the web usable by everyone accessibility is the practice of making web content available to as many people as possible regardless of disability, device, locale, or other differentiating factors.

Reviewer Checklist
accessibility for html pages, images should have the alt attribute set when appropriate.

Experimental features in Firefox
the hit region api allows you define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools.

Gecko Keypress Event
note that replacing the original (non-ascii) characters on these keys means that there are some accessibility issues for non-latin keyboard layout users as many non-ascii characters will not be available for shortcuts.

Localization content best practices
for example accessibility (a11y) strings: in this case space is less important than clarity, since these strings are not displayed in the ui but used by tools like screen readers.

Mozilla MathML Project
mathml in mozilla developer network mathml accessibility in mozilla sample mathml documents screenshots mathml start page - with translations in different languages ( arabic, chinese, hebrew, thai) mathml basics - document tailored to display correctly with just the symbol font that is pre-installed by default on most os configurations.

Using the viewport meta tag to control layout on mobile browsers
usage of user-scalable=no can cause accessibility issues to users with visual impairments such as low vision.

Preference reference
accessibility.tabfocusthe preference accessibility.tabfocus controls what elements receive focus when the user presses the tab key.browser.altclicksavethe preference browser.altclicksave controls whether clicking a link while holding the alt key starts the download of that link.browser.dom.window.dump.enabledthis setting enables the dump function, which sends messages to the system console.

NSS tools : certutil
these new databases provide more accessibility and performance: * cert9.db for certificates * key4.db for keys * pkcs11.txt, which is listing of all of the pkcs #11 modules contained in a new subdirectory in the security databases directory because the sqlite databases are designed to be shared, these are the shared database type.

NSS tools : modutil
these new databases provide more accessibility and performance: o cert9.db for certificates o key4.db for keys o pkcs11.txt, which is listing of all of the pkcs #11 modules contained in a new subdirectory in the security databases directory because the sqlite databases are designed to be shared, these are the shared database type.

NSS tools : pk12util
these new databases provide more accessibility and performance: o cert9.db for certificates o key4.db for keys o pkcs11.txt, which is listing of all of the pkcs #11 modules contained in a new subdirectory in the security databases directory because the sqlite databases are designed to be shared, these are the shared database type.

certutil
these new databases provide more accessibility and performance: o cert9.db for certificates o key4.db for keys o pkcs11.txt, which is listing of all of the pkcs #11 modules contained in a new subdirectory in the security databases directory because the sqlite databases are designed to be shared, these are the shared database type.

NSS tools : modutil
these new databases provide more accessibility and performance: o cert9.db for certificates o key4.db for keys o pkcs11.txt, which is listing of all of the pkcs #11 modules contained in a new subdirectory in the security databases directory because the sqlite databases are designed to be shared, these are the shared database type.

NSS tools : pk12util
these new databases provide more accessibility and performance: o cert9.db for certificates o key4.db for keys o pkcs11.txt, which is listing of all of the pkcs #11 modules contained in a new subdirectory in the security databases directory because the sqlite databases are designed to be shared, these are the shared database type.

NSS tools : signver
these new databases provide more accessibility and performance: o cert9.db for certificates o key4.db for keys o pkcs11.txt, which is listing of all of the pkcs #11 modules contained in a new subdirectory in the security databases directory because the sqlite databases are designed to be shared, these are the shared database type.

Installing Pork
g clone http://hg.mozilla.org/rewriting-and-analysis/elsa ./configure make building mozilla with mcpp to build mozilla with mcpp to generate annotated .ii files, use the following configure command: ac_cv_visibility_hidden=no cc="gcc34 -save-temps -wp,-w0,-k" cxx="g++ -save-temps -wp,-w0,-k" cppflags=-dns_disable_literal_template $srcdir/configure --enable-debug --disable-optimize --disable-accessibility --enable-application=browser --disable-crashreporter building will probably require disabling warnings_as_errors: make warnings_as_errors= "-wp,-w0,-k" are options that get passed to mcpp.

Gecko object attributes
applied to: any role xml-roles if a dynamic content accessibility role string is used, it is exposed here.

Gecko events
« at apis support page this page offers a list of accessibility-related events supported by gecko.

ROLE_ALERT
mapped to at-spi: role_alert atk: atk_role_alert msaa/ia2: role_system_alert ua: nsaccessibilitywindowrole events event_alert - fires when the widget is shown.

ROLE_CELL
interfaces nsiaccessible nsisupports nsiaccessibletext nsiaccessiblehypertext nsiaccessibleeditabletext nsiaccessiblehyperlink nsiaccessibleselectable nsiaccessiblevalue nsiaccessnode mapped to at-spi: atk_role_table_cell atk: atk_role_list_item ua: nsaccessibilitygrouprole msaa/ia2: role_system_cell used by aria: gridcell xul: <listcell/> html: <td> ...

ROLE_COLUMNHEADER
interfaces nsiaccessnode nsiaccessible mapped to at-spi: role_table atk: atk_role_column_header ua: nsaccessibilitygrouprole msaa/ia2: role_system_columnheader used by aria: colheader xul: <listheader/> html: <th> ...

ROLE_GRAPHIC
interfaces nsiaccessible nsiaccessnode nsiaccessibleimage nsiaccessiblehyperlink mapped to at-spi: atk: atk_role_image ua: nsaccessibilityimagerole msaa/ia2: role_system_graphic used by aria: img xul: <image/> html: <img> ...

ROLE_MENUITEM
mapped to at-spi: role_menu_item atk: atk_role_menu_item ua: nsaccessibilitymenuitemrole msaa/ ia2: role_system_menuitem used by aria: menuitem xul: <menuitem/> ...

ROLE_OUTLINEITEM
interfaces nsiaccessibletreecache nsiaccessible nsiaccessibleselectable nsiaccessnode mapped to at-spi: role_list_item atk: atk_role_list_item ua: nsaccessibilityrowrole (use outlinerow as subrole) msaa/ia2: role_system_outlineitem used by aria: treeitem html: ??

ROLE_ROW
interfaces nsiaccessible nsisupports nsiaccessiblehyperlink nsiaccessibleselectable mapped to at-spi: role_list_item atk: atk_role_list_item ua: nsaccessibilityrowrole msaa/ia2: role_system_row used by aria: row html: <tr> xul:<listitem/> ...

ROLE_TABLE
mapped to at-spi: role_table atk: atk_role_table ua: nsaccessibilitygrouprole msaa/ia2: role_system_table used by aria: grid html: <table> xul: <listbox/> ...

Gecko states
a speech-based accessibility aid does not announce information when an object with this state has the focus because the object automatically announces information.

Life After XUL: Building Firefox Interfaces with HTML
problems / solutions: accessibility localization caching for working offline / pre-caching for snappy first run visual performance / jank security privacy operations tooling build process third-party library use and management ...

IAccessibleApplication
1.0 66 introduced gecko 1.9 inherits from: iunknown last changed in gecko 1.9 (firefox 3) this interface provides the at with the information it needs to differentiate this application from other applications, from other versions of this application, or from other versions of this application running on different versions of an accessibility bridge or accessibility toolkit.

nsIAccessibleImage
accessible/public/nsiaccessibleimage.idlscriptable this interface allows in-process accessibility clients to retrieve information about an image.

nsIAccessibleSelectable
accessible/public/nsiaccessibleselectable.idlscriptable an interface for the accessibility module and in-process accessibility clients for dealing with getting and changing the selection of accessible nodes.

nsIAccessibleStates
a speech-based accessibility aid does not announce information when an object with this state has the focus because the object automatically announces information.

nsIDOMChromeWindow
if some xul applications create a dialog like window which has a default button but it's not created by the dialog/wizard element, the applications should call this method for the accessibility and the usability on windows at onload event.

nsIDOMWindowUtils
query_content_flag_selection_accessibility 0x0080 one of values of aadditionalflags of sendquerycontentevent().

nsISelectionController
ion_none 0 selection_normal 1 selection_spellcheck 2 selection_ime_rawinput 4 selection_ime_selectedrawtext 8 selection_ime_convertedtext 16 selection_ime_selectedconvertedtext 32 selection_accessibility 64 for accessibility api usage.

nsIXULRuntime
to get an instance, use: var xulruntime = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulruntime); method overview void invalidatecachesonrestart(); attributes attribute type description accessibilityenabled boolean if true, the accessibility service is running.

XPCOM Interface Reference
ndlermozistorageresultsetmozistoragerowmozistorageservicemozistoragestatementmozistoragestatementcallbackmozistoragestatementparamsmozistoragestatementrowmozistoragestatementwrappermozistoragevacuumparticipantmozistoragevaluearraymozitxttohtmlconvmozithirdpartyutilmozivisitinfomozivisitinfocallbackmozivisitstatuscallbacknsiabcardnsiaboutmodulensiabstractworkernsiaccelerometerupdatensiaccessnodensiaccessibilityservicensiaccessiblensiaccessiblecaretmoveeventnsiaccessiblecoordinatetypensiaccessibledocumentnsiaccessibleeditabletextnsiaccessibleeventnsiaccessiblehyperlinknsiaccessiblehypertextnsiaccessibleimagensiaccessibleprovidernsiaccessiblerelationnsiaccessibleretrievalnsiaccessiblerolensiaccessiblescrolltypensiaccessibleselectablensiaccessiblestatechangeeventnsiaccessiblestatesnsiaccessibletablensiacce...

XPCOM Interface Reference by grouping
ndow2 nsidomwindowinternal nsidomwindowutils nsidynamiccontainer nsieditor event nsidomevent nsidomeventgroup nsidomeventlistener nsidomeventtarget nsidommousescrollevent nsidommoztouchevent nsidomorientationevent nsidomprogressevent nsidomsimplegestureevent nsidragdrophandler nsidragservice nsidragsession html nsiaccessibilityservice nsiaccessiblecoordinatetype nsiaccessibledocument nsiaccessibleeditabletext nsiaccessibleevent nsiaccessiblehyperlink nsiaccessiblehypertext nsiaccessibleimage nsiaccessibleprovider nsiaccessibleretrieval nsiaccessiblerole nsiaccessiblescrolltype nsiaccessibleselectable nsiaccessiblestates nsiaccessibletable nsiaccessibletext ...

Mozilla technologies
accessibility api implementation detailsthese pages contain documentation on mozilla specific implementation details of assistive technology apis.animated png graphicsapng is an extension of the portable network graphics (png) format, adding support for animated images.

Mozilla
accessibility and mozilla accessibility is the idea that software (among other things) should be designed to be usable and, as much as possible, convenient to use for people with disabilities.

Color vision simulation - Firefox Developer Tools
the simulator in the accessibility inspector in firefox developer tools lets you see what a web page would look like to users with various forms of color vision deficiency (better known as "color blindness"), as well as contrast sensitivity loss.

Browser Toolbox - Firefox Developer Tools
altogether you will have access to the following developer tools: debugger (note: if you want to debug a specific add-on that is restartless or sdk-based then try the add-on debugger.) console style editor performance network monitor page inspector accessibility inspector you can debug chrome: and about: pages using the normal debugger, just as if they were ordinary content pages.

DevTools API - Firefox Developer Tools
an accessibility label for the panel.

Examine and edit HTML - Firefox Developer Tools
subtree modification attribute modification node removal use in console show dom properties show accessibility properties change pseudo-class hover active focus focus-within visited screenshot node scroll into view copy inner html outer html css selector css path xpath image data-url attribute paste inner html outer html before after as first child as last child expand all collapse all open link in new tab * open file i...

Inspect and select colors - Firefox Developer Tools
if you click on the color sample, you'll see a color picker popup, enabling you to change the color: if the color is a foreground color, the color picker tells you whether its contrast with the background color meets accessibility guidelines.

Validators - Firefox Developer Tools
accessibility services lynx viewer checks a web page using lynx visualization and allows validation of accessibility features original document information last updated date: august 16th, 2002 copyright © 2001-2003 netscape.

The JavaScript input interpreter - Firefox Developer Tools
note: syntax highlighting is not visible in your browser if accessibility features have been enabled.

Firefox Developer Tools
accessibility inspector provides a means to access the page's accessibility tree, allowing you to check what's missing or otherwise needs attention.

Animation - Web APIs
accessibility concerns blinking and flashing animation can be problematic for people with cognitive concerns such as attention deficit hyperactivity disorder (adhd).

Canvas tutorial - Web APIs
in this tutorial basic usage drawing shapes applying styles and colors drawing text using images transformations compositing and clipping basic animations advanced animations pixel manipulation hit regions and accessibility optimizing the canvas finale ...

Canvas API - Web APIs
the zim framework provides conveniences, components, and controls for coding creativity on the canvas — includes accessibility and hundreds of colorful tutorials.

Element: click event - Web APIs
the interval is also likely to be affected by user preferences; for example, accessibility options may extend this interval to make it easier to perform multiple clicks with adaptive interfaces.

Element - Web APIs
element.computedname read only returns a domstring containing the label exposed to accessibility.

GlobalEventHandlers.onfocus - Web APIs
for onfocus to fire on non-input elements, they must be given the tabindex attribute (see building keyboard accessibility back in for more details).

HTMLImageElement.alt - Web APIs
perhaps the most important reason to use the alt tag is to support accessibility, as the alt text may be used by screen readers and other assistive technologies to help differently-abled users make full use of your content.

HTMLImageElement.isMap - Web APIs
note: for accessibility reasons, you should generally avoid using server-side image maps, as they require the use of a mouse.

HTMLTableCellElement - Web APIs
this is used to offer a shorter term for use by screen readers in particular, and is a valuable accessibility tool.

KeyboardEvent.code - Web APIs
if the input device isn't a physical keyboard, but is instead a virtual keyboard or accessibility device, the returned value will be set by the browser to match as closely as possible to what would happen with a physical keyboard, to maximize compatibility between physical and virtual input devices.

Payment Request API - Web APIs
accessibility: as the browser controls the input elements of the payment sheet, it can assure consistent keyboard and screen reader accessibility on every website without developers needing to do anything.

Permissions - Web APIs
safari ios no support nosamsung internet android full support 8.0accessibility-events permissionchrome full support 62edge full support 79firefox ?

Using the Web Animations API - Web APIs
getting information out of animations imagine other ways we could use playbackrate, such as improving accessibility for users with vestibular disorders by letting them slow down animations across an entire site.

Web Audio API best practices - Web APIs
as long as you consider security, performance, and accessibility, you can adapt to your own style.

Web Audio API - Web APIs
as long as you consider security, performance, and accessibility, you can adapt to your own style.

Using the Web Speech API - Web APIs
the web speech api provides two distinct areas of functionality — speech recognition, and speech synthesis (also known as text to speech, or tts) — which open up interesting new possibilities for accessibility, and control mechanisms.

:focus-visible - CSS: Cascading Style Sheets
accessibility concerns low vision make sure the visual focus indicator can be seen by people with low vision.

:focus - CSS: Cascading Style Sheets
syntax :focus examples html <input class="red-input" value="i'll be red when focused."><br> <input class="blue-input" value="i'll be blue when focused."> css .red-input:focus { background: yellow; color: red; } .blue-input:focus { background: yellow; color: blue; } result accessibility concerns make sure the visual focus indicator can be seen by people with low vision.

:invalid - CSS: Cascading Style Sheets
block; margin: 1px; padding: 1px; } .field { margin: 1px; padding: 1px; } input:invalid { background-color: #ffdddd; } form:invalid { border: 5px solid #ffdddd; } input:valid { background-color: #ddffdd; } form:valid { border: 5px solid #ddffdd; } input:required { border-color: #800000; border-width: 3px; } input:required:invalid { border-color: #c00000; } result accessibility concerns the color red is commonly used to indicate invalid input.

:optional - CSS: Cascading Style Sheets
accessibility concerns if a form contains optional <input>s, required inputs should be indicated using the required attribute.

:required - CSS: Cascading Style Sheets
accessibility concerns mandatory <input>s should have the required attribute applied to them.

:valid - CSS: Cascading Style Sheets
accessibility concerns the color green is commonly used to indicate valid input.

speak-as - CSS: Cascading Style Sheets
accessibility concerns assistive technology support is very limited for the speak-as property.

font-stretch - CSS: Cascading Style Sheets
accessibility concerns people with dyslexia and other cognitive conditions may have difficulty reading fonts that are too condensed, especially if the font has a low contrast color ratio.

font-weight - CSS: Cascading Style Sheets
accessibility concerns people experiencing low vision conditions may have difficulty reading text set with a font-weight value of 100 (thin/hairline) or 200 (extra light), especially if the font has a low contrast color ratio.

-ms-high-contrast - CSS: Cascading Style Sheets
@media screen and (-ms-high-contrast: active) { /* all high contrast styling rules */ } @media screen and (-ms-high-contrast: black-on-white) { div { background-image: url('image-bw.png'); } } @media screen and (-ms-high-contrast: white-on-black) { div { background-image: url('image-wb.png'); } } accessibility concerns theming high contrast mode's theme colors come from a limited subset of deprecated css2 system colors.

@media - CSS: Cascading Style Sheets
width width of the viewport including width of scrollbar accessibility concerns to best accommodate people who adjust a site's text size, use ems when you need a <length> for your media queries.

user-zoom - CSS: Cascading Style Sheets
accessibility concerns disabling zooming capabilities prevents people experiencing low vision conditions from being able to read and understand page content.

viewport-fit - CSS: Cascading Style Sheets
accessibility concerns when using the viewport-fit descriptor, one must keep in mind that not all device displays are rectangular, and should therefore make use of the safe area inset variables.

CSS Display - CSS: Cascading Style Sheets
relationship of flexbox to other layout methods backwards compatibility of flexbox typical use cases of flexbox display: grid basic concepts of grid layout relationship to other layout methods line-based placement grid template areas layout using named grid lines auto-placement in grid layout box alignment in grid layout grids, logical values and writing modes css grid layout and accessibility css grid layout and progressive enhancement realizing common layouts using grids specifications specification status comment css display module level 3the definition of 'display' in that specification.

Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
warning: current implementations in most browsers will remove any element with display: contents from the accessibility tree (but descendants will remain).

Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
we will take a look at the potential accessibility issues of grid layout in a later guide, but you should take care when creating this disconnect between the visual order and display order.

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
here i am keeping everything in source order, trying to avoid any disconnect between the source and display as described in the guide grid layout and accessibility.

CSS Grid Layout - CSS: Cascading Style Sheets
nes grid tracks grid cell grid area gutters grid axis grid row grid column guides basic concepts of grid layout relationship of grid layout to other layout methods layout using line-based placement grid template areas layout using named grid lines auto-placement in css grid layout box alignment in css grid layout css grid, logical values and writing modes css grid layout and accessibility css grid and progressive enhancement realising common layouts using css grid subgrid external resources css grid and ie11 (polyfill) examples from jen simmons grid by example - a collection of usage examples and video tutorials codrops grid reference firefox devtools css grid inspector css grid playground grid garden - a game for learning css grid specifications specifi...

CSS Scrollbars - CSS: Cascading Style Sheets
accessibility concerns when you customize scrollbars, consider they have enough contrast and that their hit area is large enough for people who use touch input.

Breadcrumb Navigation - CSS: Cascading Style Sheets
accessibility concerns i have used the aria-label and aria-current attributes to help users understand what this navigation is and where the current page is in the structure.

Card - CSS: Cascading Style Sheets
accessibility concerns depending on the content of your card there may be things you could, or should do to enhance accessibility.

Cookbook template - CSS: Cascading Style Sheets
accessibility concerns include this is there are any specific things to watch out for in regard to accessibility.

Grid wrapper - CSS: Cascading Style Sheets
accessibility concerns although grid enables us to position items anwhere (within reason), it is important when placing items using css grid that your underlying markup follows a logical order (see css grid layout and accessibility for more details).

Media queries - CSS: Cascading Style Sheets
using media queries for accessibility learn how media queries can help users understand your website better.

Viewport concepts - CSS: Cascading Style Sheets
there are other properties, including maximum-scale, minimum-scale, and user-scalable, which control whether users can zoom the page in or out, but the default values are the best for accessibility and user experience, so these can be omitted.

animation - CSS: Cascading Style Sheets
accessibility concerns blinking and flashing animation can be problematic for people with cognitive concerns such as attention deficit hyperactivity disorder (adhd).

background-image - CSS: Cascading Style Sheets
accessibility concerns browsers do not provide any special information on background images to assistive technology.

background - CSS: Cascading Style Sheets
accessibility concerns browsers do not provide any special information on background images to assistive technology.

border-image - CSS: Cascading Style Sheets
accessibility concerns assistive technology cannot parse border images.

calc() - CSS: Cascading Style Sheets
formal syntax calc( <calc-sum> )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) accessibility concerns when calc() is used for controlling text size, be sure that one of the values includes a relative length unit, for example: h1 { font-size: calc(1.5rem + 3vw); } this ensures that text size will scale if the page is zoomed.

clamp() - CSS: Cascading Style Sheets
max() allows you set a minimum value, which in cases like this is useful for accessibility purposes.

<color> - CSS: Cascading Style Sheets
accessibility considerations some people have difficulty distinguishing colors.

conic-gradient() - CSS: Cascading Style Sheets
accessibility concerns browsers do not provide any special information on background images to assistive technology.

cross-fade() - CSS: Cascading Style Sheets
accessibility concerns browsers do not provide any special information on background images to assistive technology.

flex-direction - CSS: Cascading Style Sheets
accessibility concerns using the flex-direction property with values of row-reverse or column-reverse will create a disconnect between the visual presentation of content and dom order.

font-size - CSS: Cascading Style Sheets
note: to maximize accessibility, it is generally best to use values that are relative to the user's default font size.

font-style - CSS: Cascading Style Sheets
javascript let slantlabel = document.queryselector('label[for="slant"]'); let slantinput = document.queryselector('#slant'); let sampletext = document.queryselector('.sample'); function update() { let slant = `oblique ${slantinput.value}deg`; slantlabel.textcontent = `font-style: ${slant};`; sampletext.style.fontstyle = slant; } slantinput.addeventlistener('input', update); update(); accessibility concerns large sections of text set with a font-style value of italic may be difficult for people with cognitive concerns such as dyslexia to read.

font-variant-caps - CSS: Cascading Style Sheets
accessibility concerns large sections of text set with a font-variant value of all-small-caps or all-petite-caps may be difficult for people with cognitive concerns such as dyslexia to read.

font-weight - CSS: Cascading Style Sheets
bottom: 0; } javascript let weightlabel = document.queryselector('label[for="weight"]'); let weightinput = document.queryselector('#weight'); let sampletext = document.queryselector('.sample'); function update() { weightlabel.textcontent = `font-weight: ${weightinput.value};`; sampletext.style.fontweight = weightinput.value; } weightinput.addeventlistener('input', update); update(); accessibility concerns people experiencing low vision conditions may have difficulty reading text set with a font-weight value of 100 (thin/hairline) or 200 (extra light), especially if the font has a low contrast color ratio.

height - CSS: Cascading Style Sheets
accessibility concerns ensure that elements set with a height are not truncated and/or do not obscure other content when the page is zoomed to increase text size.

image-set() - CSS: Cascading Style Sheets
accessibility concerns browsers do not provide any special information on background images to assistive technology.

<image> - CSS: Cascading Style Sheets
accessibility concerns browsers do not provide any special information on background images to assistive technology.

<length> - CSS: Cascading Style Sheets
absolute lengths can cause accessibility problems, since they are fixed and do not scale according to user settings.

letter-spacing - CSS: Cascading Style Sheets
accessibility concerns a large positive or negative letter-spacing value will make the word(s) the styling is applied to unreadable.

line-height - CSS: Cascading Style Sheets
accessibility concerns use a minimum value of 1.5 for line-height for main paragraph content.

list-style-type - CSS: Cascading Style Sheets
hiopic-halehame example -moz-ethiopic-halehame-am example ethiopic-halehame-ti-er -moz-ethiopic-halehame-ti-er example ethiopic-halehame-ti-et -moz-ethiopic-halehame-ti-et example hangul -moz-hangul example example example hangul-consonant -moz-hangul-consonant example example example urdu -moz-urdu example accessibility concerns the voiceover screen reader has an issue where unordered lists with a list-style-type value of none applied to them will not be announced as a list.

list-style - CSS: Cascading Style Sheets
accessibility concerns safari has an issue whereby unordered lists with a list-style value of none applied to them will not be recognized as a list in the accessibility tree.

max-height - CSS: Cascading Style Sheets
accessibility concerns ensure that elements set with a max-height are not truncated and/or do not obscure other content when the page is zoomed to increase text size.

max-width - CSS: Cascading Style Sheets
accessibility concerns ensure that elements set with a max-width are not truncated and/or do not obscure other content when the page is zoomed to increase text size.

min() - CSS: Cascading Style Sheets
formal syntax min( <calc-sum># )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) accessibility concerns when using min() to set a maximum font size, ensure that the font can still be scaled at least 200% for readability (without assistive technology like a zoom function).

order - CSS: Cascading Style Sheets
accessibility concerns using the order property will create a disconnect between the visual presentation of content and dom order.

outline - CSS: Cascading Style Sheets
accessibility concerns assigning outline a value of 0 or none will remove the browser's default focus style.

repeating-conic-gradient() - CSS: Cascading Style Sheets
accessibility concerns browsers do not provide any special information on background images to assistive technology.

scrollbar-color - CSS: Cascading Style Sheets
accessibility concerns when using scrollbar-color property with specific color values, authors should ensure the specified colors have enough contrast between them.

text-align - CSS: Cascading Style Sheets
accessibility concerns the inconsistent spacing between words created by justified text can be problematic for people with cognitive concerns such as dyslexia.

text-decoration-color - CSS: Cascading Style Sheets
accessibility concerns it is important to ensure that the contrast ratio between the color of the text, the background the text is placed over, and the text decoration line is high enough that people experiencing low vision conditions will be able to read the content of the page.

text-transform - CSS: Cascading Style Sheets
accessibility concerns large sections of text set with a text-transform value of uppercase may be difficult for people with cognitive concerns such as dyslexia to read.

touch-action - CSS: Cascading Style Sheets
accessibility concerns a declaration of touch-action: none; may inhibit operating a browser's zooming capabilities.

scale() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001 [sx 0 0 sy 0 0] accessibility concerns scaling/zooming animations are problematic for accessibility, as they are a common trigger for certain types of migraine.

transform - CSS: Cascading Style Sheets
accessibility concerns scaling/zooming animations are problematic for accessibility, as they are a common trigger for certain types of migraine.

transition-timing-function - CSS: Cascading Style Sheets
step-start equal to steps(1, jump-start) step-end equal to steps(1, jump-end) accessibility concerns some animations can be helpful such as to guide users to understand what actions are expected, to show relationships within the user interface, and to inform users as to what actions have occurred.

visibility - CSS: Cascading Style Sheets
accessibility concerns using a visibility value of hidden on an element will remove it from the accessibility tree.

width - CSS: Cascading Style Sheets
accessibility concerns ensure that elements set with a width aren't truncated and don't obscure other content when the page is zoomed to increase text size.

word-spacing - CSS: Cascading Style Sheets
examples html <div id="mozdiv1">here are many words...</div> <div id="mozdiv2">...and many more!</div> css #mozdiv1 { word-spacing: 15px; } #mozdiv2 { word-spacing: 5em; } accessibility concerns a large positive or negative word-spacing value will make the sentences the styling is applied to unreadable.

Audio and Video Delivery - Developer guides
it's often important to remember keyboard controls for user convenience and accessibility.

Using HTML sections and outlines - Developer guides
many accessibility tools as well as reader views provided by some browsers rely on semantic sectioning elements.

Index - Developer guides
5 wai aria live regions/api support ajax, accessibility firefox 3 contains important improvements to the way the mozilla engine exposes live changes in a document.

Introduction to Web development - Developer guides
resources w3c web education community group wiki covers web design, html and html5, css, javascript and accessibility.

User input and controls - Developer guides
you should always be mindful of keyboard accessibility where appropriate — many web users only use keyboard to navigate web sites and apps, and locking them out of your functionality is a bad idea.

HTML attribute: multiple - HTML: Hypertext Markup Language
recommendation accessibility concerns provide instructions to help users understand how to complete the form and use individual form controls.

HTML attribute: required - HTML: Hypertext Markup Language
recommendation accessibility concerns provide an indication to users informing them the form control is required.

HTML attribute: step - HTML: Hypertext Markup Language
recommendation accessibility concerns provide instructions to help users understand how to complete the form and use individual form controls.

<a>: The Anchor element - HTML: Hypertext Markup Language
accessibility strong link text the content inside a link should indicate where the link goes, even out of context.

<abbr>: The Abbreviation element - HTML: Hypertext Markup Language
html <p><dfn id="html"><abbr title="hypertext markup language">html</abbr> </dfn> is a markup language used to create the semantics and structure of a web page.</p> <p>a <dfn id="spec">specification</dfn> (<abbr title="specification">spec</abbr>) is a document that outlines in detail how a technology or api is intended to function and how it is accessed.</p> result accessibility concerns spelling out the acronym or abbreviation in full the first time it is used on a page is beneficial for helping people understand it, especially if the content is technical or industry jargon.

<audio>: The Embed Audio element - HTML: Hypertext Markup Language
the browser tries to load the first source element (opus) if it is able to play it; if not it falls back to the second (vorbis) and finally back to mp3: <audio controls> <source src="foo.opus" type="audio/ogg; codecs=opus"/> <source src="foo.ogg" type="audio/ogg; codecs=vorbis"/> <source src="foo.mp3" type="audio/mpeg"/> </audio> accessibility concerns audio with spoken dialog should provide both captions and transcripts that accurately describe its content.

<blink>: The Blinking Text element (obsolete) - HTML: Hypertext Markup Language
blinking text is frowned upon by several accessibility standards and the css specification allows browsers to ignore the <blink> element.

<br>: The Line Break element - HTML: Hypertext Markup Language
evelyn avenue<br> mountain view, ca<br> 94041<br> usa<br> the result looks like so: accessibility concerns creating separate paragraphs of text using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology.

<del>: The Deleted Text element - HTML: Hypertext Markup Language
examples <p><del>this text has been deleted</del>, here is the rest of the paragraph.</p> <del><p>this paragraph has been deleted.</p></del> result accessibility concerns the presence of the del element is not announced by most screen reading technology in its default configuration.

<dl>: The Description List element - HTML: Hypertext Markup Language
accessibility concerns each screen reader announces <dl> content differently.

<embed>: The Embed External Content element - HTML: Hypertext Markup Language
examples <embed type="video/quicktime" src="movie.mov" width="640" height="480" title="title of my video"> accessibility concerns use the title attribute on an embed element to label its content so that people navigating with assistive technology such as a screen reader can understand what it contains.

<footer> - HTML: Hypertext Markup Language
</footer> accessibility concerns the voiceover screen reader has an issue where the footer landmark role is not announced in the landmark rotor.

<frame> - HTML: Hypertext Markup Language
using the <frame> element is not encouraged because of certain disadvantages such as performance problems and lack of accessibility for users with screen readers.

<html>: The HTML Document / Root element - HTML: Hypertext Markup Language
example <!doctype html> <html lang="en"> <head>...</head> <body>...</body> </html> accessibility concerns providing a lang attribute with a valid ietf identifying language tag on the <html> element will help screen reading technology determine the proper language to announce.

<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
html <iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" title="iframe example 1" width="400" height="300"> </iframe> result accessibility concerns people navigating with assistive technology such as a screen reader can use the title attribute on an <iframe> to label its content.

<input type="checkbox"> - HTML: Hypertext Markup Language
beyond accessibility, this is another good reason to properly set up <label> elements on your forms.

<input type="radio"> - HTML: Hypertext Markup Language
beyond accessibility, this is another good reason to properly set up <label> elements on your forms.

<input type="reset"> - HTML: Hypertext Markup Language
adding a tooltip to the button (using the title attribute) can also help, although it's not a complete solution for accessibility purposes.

<input type="submit"> - HTML: Hypertext Markup Language
adding a tooltip to the button (using the title attribute) can also help, although it's not a complete solution for accessibility purposes.

<ins> - HTML: Hypertext Markup Language
examples <ins>this text has been inserted</ins> result accessibility concerns the presence of the <ins> element is not announced by most screen reading technology in its default configuration.

<label> - HTML: Hypertext Markup Language
examples simple label example <label>click me <input type="text"></label> using the "for" attribute <label for="username">click me</label> <input type="text" id="username"> accessibility concerns interactive content don't place interactive elements such as anchors or buttons inside a label.

<main> - HTML: Hypertext Markup Language
</p> </article> </main> <!-- other content --> accessibility concerns landmark the <main> element behaves like a main landmark role.

<mark>: The Mark Text element - HTML: Hypertext Markup Language
the results look like this: accessibility concerns the presence of the mark element is not announced by most screen reading technology in its default configuration.

Standard metadata names - HTML: Hypertext Markup Language
accessibility concerns with viewport scaling disabling zooming capabilities by setting user-scalable to a value of no prevents people experiencing low vision conditions from being able to read and understand page content.

<meta>: The Document-level Metadata element - HTML: Hypertext Markup Language
accessibility concerns pages set with a refresh value run the risk of having the time interval being too short.

<nav>: The Navigation Section element - HTML: Hypertext Markup Language
aria-labelledby can be used in such case to promote accessibility, see example.

<output>: The Output element - HTML: Hypertext Markup Language
<form oninput="result.value=parseint(a.value)+parseint(b.value)"> <input type="range" id="b" name="b" value="50" /> + <input type="number" id="a" name="a" value="10" /> = <output name="result" for="a b">60</output> </form> accessibility concerns many browsers implement this element as an aria-live region.

<p>: The Paragraph element - HTML: Hypertext Markup Language
javascript document.queryselector('button').addeventlistener('click', function (event) { document.queryselectorall('p').foreach(function (paragraph) { paragraph.classlist.toggle('pilcrow'); }); var newbuttontext = event.target.dataset.toggletext; var oldtext = event.target.innertext; event.target.innertext = newbuttontext; event.target.dataset.toggletext = oldtext; }); result accessibility concerns breaking up content into paragraphs helps make a page more accessible.

<pre>: The Preformatted Text element - HTML: Hypertext Markup Language
example html <p>using css to change the font color is easy.</p> <pre> body { color: red; } </pre> result accessibility concerns it is important to provide an alternate description for any images or diagrams created using preformatted text.

<s> - HTML: Hypertext Markup Language
examples <s>today's special: salmon</s> sold out<br> <span style="text-decoration:line-through;">today's special: salmon</span> sold out accessibility concerns the presence of the s element is not announced by most screen reading technology in its default configuration.

<select>: The HTML Select element - HTML: Hypertext Markup Language
it is given an id attribute to enable it to be associated with a <label> for accessibility purposes, as well as a name attribute to represent the name of the associated data point submitted to the server.

<source>: The Media or Image Source element - HTML: Hypertext Markup Language
<picture> <source srcset="mdn-logo-wide.png" media="(min-width: 800px)"> <source srcset="mdn-logo-medium.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" alt="mdn web docs"> </picture> with the <picture> element, you must always include an <img> with a fallback image, with an alt attribute to ensure accessibility (unless the image is an irrelevant background decorative image).

<tbody>: The Table Body element - HTML: Hypertext Markup Language
the <tbody> element, along with its cousins <thead> and <tfoot>, provide useful semantic information that can be used when rendering for either screen or printer as well as for accessibility purposes.

<textarea> - HTML: Hypertext Markup Language
the above example demonstrates a number of features of <textarea>: an id attribute to allow the <textarea> to be associated with a <label> element for accessibility purposes a name attribute to set the name of the associated data point submitted to the server when the form is submitted.

<title>: The Document Title element - HTML: Hypertext Markup Language
accessibility concerns it is important to provide a title value that describes the page's purpose.

<video>: The Video Embed element - HTML: Hypertext Markup Language
accessibility concerns videos should provide both captions and transcripts that accurately describe its content (see adding captions and subtitles to html5 video for more information on how to implement these).

HTML elements reference - HTML: Hypertext Markup Language
important for accessibility and seo, these elements identify the purpose or structure of that content.

x-ms-acceleratorkey - HTML: Hypertext Markup Language
x-ms-acceleratorkey exposes a notification in the accessibility tree, for screen readers and other assistive technologies, that an accelerator key exists for that element.

Global attributes - HTML: Hypertext Markup Language
the multiple aria-* attributes, used for improving accessibility.

HTML documentation index - HTML: Hypertext Markup Language
213 <track>: the embed text track element accessibility, cues, element, html, html embedded content, html5, multimedia, reference, texttrack, web, a11y, track the html <track> element is used as a child of the media elements, <audio> and <video>.

HTTP Public Key Pinning (HPKP) - HTTP
this allows for changing the server's public key without breaking accessibility for clients that have already noted the pins.

Redirections in HTTP - HTTP
always set it to 0 for accessibility compliance.

CSS Houdini
the css working group does a lot of work to ensure every feature is performant, handles all edge cases, and considers security, privacy, and accessibility.

String.prototype.blink() - JavaScript
warning: blinking text is frowned upon by several accessibility standards.

Web media technologies
accessibility guide for media in web design in this guide, we cover ways web designers and developers can create content that is accessible to people with different capabilities.

Navigation and resource timings - Web Performance
the browser then parses the content received, builds the dom, cssom, accessibility, and render trees, eventually rendering the page.

<animate> - SVG: Scalable Vector Graphics
accessibility concerns blinking and flashing animation can be problematic for people with cognitive concerns such as attention deficit hyperactivity disorder (adhd).

<defs> - SVG: Scalable Vector Graphics
graphical objects can be referenced from anywhere, however, defining these objects inside of a <defs> element promotes understandability of the svg content and is beneficial to the overall accessibility of the document.

<symbol> - SVG: Scalable Vector Graphics
documents that are rich in structure may be rendered graphically, as speech, or as braille, and thus promote accessibility.

Web technology for developers
accessibilitycss houdinicss: cascading style sheetsdemos of open web technologiesdeveloper guidesexsltevent referencehtml: hypertext markup languagehttpjavascriptmathmlopensearch description formatprivacy, permissions, and information securityprogressive web apps (pwas)svg: scalable vector graphicstutorialsweb apisweb componentsweb performanceweb app manifestsweb media technologiesweb securityweb technology re...