dom-accessibility-api
Advanced tools
Package description
The dom-accessibility-api package is a library that provides utility functions for querying and manipulating the accessibility tree of DOM elements. It allows developers to retrieve accessible names and descriptions, roles, and other properties related to accessibility, which are crucial for building web applications that are compliant with accessibility standards.
Getting the accessible name
This feature allows you to retrieve the accessible name of a DOM element, which is the name that screen readers will announce to users.
import { getAccessibleName } from 'dom-accessibility-api';
const element = document.getElementById('myElement');
const accessibleName = getAccessibleName(element);Getting the accessible description
This feature allows you to retrieve the accessible description of a DOM element, providing additional context to assistive technologies.
import { getAccessibleDescription } from 'dom-accessibility-api';
const element = document.getElementById('myElement');
const accessibleDescription = getAccessibleDescription(element);Getting the role
This feature allows you to get the computed role of a DOM element, which is used by assistive technologies to understand the purpose of the element.
import { getRole } from 'dom-accessibility-api';
const element = document.getElementById('myElement');
const role = getRole(element);aria-query is a package that provides maps of ARIA roles, states, and properties to use with DOM elements. It is similar to dom-accessibility-api in that it helps with accessibility concerns but does not provide functions to directly retrieve accessible names or descriptions.
ally.js is a JavaScript library to help modern web applications with accessibility concerns. It provides a higher-level API compared to dom-accessibility-api and includes features for focus handling, keyboard interaction, and more.
Changelog
0.4.6
f7c1981 #288 Thanks @eps1lon! - Drop node 13 support
We only stopped testing. Probability of breakage should be very low.
New policy:
Only active node versions are supported. Inactive node versions can stop working in a SemVer MINOR release.
fa53c51 #210 Thanks @eps1lon! - Implement accessbile description computation
import { computeAccessibleDescription } from "dom-accessibility-api";
const description = computeAccessibleDescription(element);
Warning: It always considers title attributes if the description is empty.
Even if the title attribute was already used for the accessible name.
This is fails a web-platform-test.
The other failing test is due to aria-label being ignored for the description which is correct by spec.
It's likely an issue with wpt.
The other tests are passing (13/15).
Readme
Computes the accessible name or description of a given DOM Element. https://w3c.github.io/accname/ implemented in JavaScript for testing.
$ yarn add dom-accessibility-api
import {
computeAccessibleName,
computeAccessibleDescription,
} from "dom-accessibility-api";
I'm not an editor of any of the referenced specs (nor very experience with using them) so if you got any insights, something catches your eye please open an issue.
WARNING: Only active node versions are supported. Inactive node versions can stop working in a SemVer MINOR release.
ie 11
edge >= 14
firefox >= 52
chrome >= 49
safari >= 10
node 10.0
or check the published .browserslistrc
Using https://github.com/web-platform-tests/wpt. Be sure to init submodules when cloning. See the test readme for more info about the test setup.
153/159
web-platform-tests
accname
✓ [expected fail] description_1.0_combobox-focusable-manual.html
✓ [expected fail] description_from_content_of_describedby_element-manual.html
✓ description_link-with-label-manual.html
✓ description_test_case_557-manual.html
✓ description_test_case_664-manual.html
✓ description_test_case_665-manual.html
✓ description_test_case_666-manual.html
✓ description_test_case_772-manual.html
✓ description_test_case_773-manual.html
✓ description_test_case_774-manual.html
✓ description_test_case_838-manual.html
✓ description_test_case_broken_reference-manual.html
✓ description_test_case_one_valid_reference-manual.html
✓ description_title-same-element-manual.html
✓ name_1.0_combobox-focusable-alternative-manual.html
✓ name_1.0_combobox-focusable-manual.html
✓ name_checkbox-label-embedded-combobox-manual.html
✓ name_checkbox-label-embedded-listbox-manual.html
✓ name_checkbox-label-embedded-menu-manual.html
✓ name_checkbox-label-embedded-select-manual.html
✓ name_checkbox-label-embedded-slider-manual.html
✓ name_checkbox-label-embedded-spinbutton-manual.html
✓ name_checkbox-label-embedded-textbox-manual.html
✓ name_checkbox-label-multiple-label-alternative-manual.html
✓ name_checkbox-label-multiple-label-manual.html
✓ name_checkbox-title-manual.html
✓ name_file-label-embedded-combobox-manual.html
✓ name_file-label-embedded-menu-manual.html
✓ name_file-label-embedded-select-manual.html
✓ name_file-label-embedded-slider-manual.html
✓ name_file-label-embedded-spinbutton-manual.html
✓ [expected fail] name_file-label-inline-block-elements-manual.html
✓ [expected fail] name_file-label-inline-block-styles-manual.html
✓ name_file-label-inline-hidden-elements-manual.html
✓ name_file-label-owned-combobox-manual.html
✓ name_file-label-owned-combobox-owned-listbox-manual.html
✓ name_file-title-manual.html
✓ name_from_content-manual.html
✓ name_from_content_of_label-manual.html
✓ name_from_content_of_labelledby_element-manual.html
✓ name_from_content_of_labelledby_elements_one_of_which_is_hidden-manual.html
✓ name_heading-combobox-focusable-alternative-manual.html
✓ name_image-title-manual.html
✓ name_link-mixed-content-manual.html
✓ name_link-with-label-manual.html
✓ name_password-label-embedded-combobox-manual.html
✓ name_password-label-embedded-menu-manual.html
✓ name_password-label-embedded-select-manual.html
✓ name_password-label-embedded-slider-manual.html
✓ name_password-label-embedded-spinbutton-manual.html
✓ name_password-title-manual.html
✓ name_radio-label-embedded-combobox-manual.html
✓ name_radio-label-embedded-menu-manual.html
✓ name_radio-label-embedded-select-manual.html
✓ name_radio-label-embedded-slider-manual.html
✓ name_radio-label-embedded-spinbutton-manual.html
✓ name_radio-title-manual.html
✓ name_test_case_539-manual.html
✓ name_test_case_540-manual.html
✓ name_test_case_541-manual.html
✓ name_test_case_543-manual.html
✓ name_test_case_544-manual.html
✓ name_test_case_545-manual.html
✓ name_test_case_546-manual.html
✓ name_test_case_547-manual.html
✓ name_test_case_548-manual.html
✓ name_test_case_549-manual.html
✓ name_test_case_550-manual.html
✓ name_test_case_551-manual.html
✓ [expected fail] name_test_case_552-manual.html
✓ [expected fail] name_test_case_553-manual.html
✓ name_test_case_556-manual.html
✓ name_test_case_557-manual.html
✓ name_test_case_558-manual.html
✓ name_test_case_559-manual.html
✓ name_test_case_560-manual.html
✓ name_test_case_561-manual.html
✓ name_test_case_562-manual.html
✓ name_test_case_563-manual.html
✓ name_test_case_564-manual.html
✓ name_test_case_565-manual.html
✓ name_test_case_566-manual.html
✓ name_test_case_596-manual.html
✓ name_test_case_597-manual.html
✓ name_test_case_598-manual.html
✓ name_test_case_599-manual.html
✓ name_test_case_600-manual.html
✓ name_test_case_601-manual.html
✓ name_test_case_602-manual.html
✓ name_test_case_603-manual.html
✓ name_test_case_604-manual.html
✓ name_test_case_605-manual.html
✓ name_test_case_606-manual.html
✓ name_test_case_607-manual.html
✓ name_test_case_608-manual.html
✓ name_test_case_609-manual.html
✓ name_test_case_610-manual.html
✓ name_test_case_611-manual.html
✓ name_test_case_612-manual.html
✓ name_test_case_613-manual.html
✓ name_test_case_614-manual.html
✓ name_test_case_615-manual.html
✓ name_test_case_616-manual.html
✓ name_test_case_617-manual.html
✓ name_test_case_618-manual.html
✓ name_test_case_619-manual.html
✓ name_test_case_620-manual.html
✓ name_test_case_621-manual.html
✓ [expected fail] name_test_case_659-manual.html
✓ [expected fail] name_test_case_660-manual.html
✓ [expected fail] name_test_case_661-manual.html
✓ [expected fail] name_test_case_662-manual.html
✓ [expected fail] name_test_case_663a-manual.html
✓ name_test_case_721-manual.html
✓ name_test_case_723-manual.html
✓ name_test_case_724-manual.html
✓ name_test_case_725-manual.html
✓ name_test_case_726-manual.html
✓ name_test_case_727-manual.html
✓ name_test_case_728-manual.html
✓ name_test_case_729-manual.html
✓ name_test_case_730-manual.html
✓ name_test_case_731-manual.html
✓ name_test_case_733-manual.html
✓ name_test_case_734-manual.html
✓ name_test_case_735-manual.html
✓ name_test_case_736-manual.html
✓ name_test_case_737-manual.html
✓ name_test_case_738-manual.html
✓ name_test_case_739-manual.html
✓ name_test_case_740-manual.html
✓ name_test_case_741-manual.html
✓ name_test_case_742-manual.html
✓ name_test_case_743-manual.html
✓ name_test_case_744-manual.html
✓ name_test_case_745-manual.html
✓ name_test_case_746-manual.html
✓ name_test_case_747-manual.html
✓ name_test_case_748-manual.html
✓ name_test_case_749-manual.html
✓ name_test_case_750-manual.html
✓ name_test_case_751-manual.html
✓ name_test_case_752-manual.html
✓ [expected fail] name_test_case_753-manual.html
✓ [expected fail] name_test_case_754-manual.html
✓ [expected fail] name_test_case_755-manual.html
✓ [expected fail] name_test_case_756-manual.html
✓ [expected fail] name_test_case_757-manual.html
✓ [expected fail] name_test_case_758-manual.html
✓ [expected fail] name_test_case_759-manual.html
✓ [expected fail] name_test_case_760-manual.html
✓ [expected fail] name_test_case_761-manual.html
✓ [expected fail] name_test_case_762-manual.html
✓ name_text-label-embedded-combobox-manual.html
✓ name_text-label-embedded-menu-manual.html
✓ name_text-label-embedded-select-manual.html
✓ name_text-label-embedded-slider-manual.html
✓ name_text-label-embedded-spinbutton-manual.html
✓ name_text-title-manual.html
FAQs
Implements https://w3c.github.io/accname/
The npm package dom-accessibility-api receives a total of 12,768,388 weekly downloads. As such, dom-accessibility-api popularity was classified as popular.
We found that dom-accessibility-api demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
Security News
Results from the 2023 State of JavaScript Survey highlight key trends, including Vite's dominance, rising TypeScript adoption, and the enduring popularity of React. Discover more insights on developer preferences and technology usage.