增强现实AR>> aria-api>> 返回
项目作者： xi

项目描述 ：
Access ARIA information from JavaScript
高级语言： JavaScript
项目地址: git://github.com/xi/aria-api.git
创建时间： 2017-03-12T16:17:30Z
项目社区：https://github.com/xi/aria-api
开源协议：MIT License
下载


aria-api

WAI-ARIA allows websites to provide
additional semantics to assistive technologies. Roles and attributes can be set
either explicitly (e.g. <span role="link">click me</span>) or implicitly
(<a href="//example.com">click me</a> implicitly has the role “link”).

While the implicit mappings make authoring accessible websites simpler, it
makes the task of calculating an element’s role and attributes more
complicated. This library takes care of exactly that.

Install

  1. npm install aria-api

This installation method works best if you use tools like webpack or
rollup. There is also an UMD build included as dist/aria.js.

Usage

  1. var aria = require('aria-api'):
  3. aria.querySelector('landmark').forEach(landmark => {
  4.     if (!aria.matches(landmark, ':hidden')) {
  5.         var role = aria.getRole(landmark);
  6.         var name = aria.getName(landmark);
  7.         console.log(role, name);
  8.     }
  9. });

getRole(element)

Calculate an element’s role.

Note that this will return only the most specific role. If you want to know
whether an element has a role, use matches() instead.

getAttribute(element, attribute)

Calculate the value of an element’s attribute (state or property). The
“aria-“ prefix is not included in the attribute name.

getName(element)

Calculate an element’s name according to the Accessible Name and Description
Computation.

getDescription(element)

Calculate an element’s description according to the Accessible Name and
Description Computation.

matches(element, selector)

Similar to Element.matches(),
this allows to check whether an element matches a selector. A selector can be
any of the following:

  • role: Matches if the element has the specified role. This also works for
    hierarchical roles such as “landmark”.
  • :attribute: Matches if the attribute is truthy. The “aria-“ prefix is not
    included in the attribute name.
  • [attribute="value"]: Matches if the value of the attribute converted to
    string equals the specified value.

Note that combinations of selectors are not supported (e.g. main link,
link:hidden, :not(:hidden)). The single exception to this rule are
comma-separated lists of roles, e.g. link,button.

querySelector(element, selector)

Similar to Element.querySelector().
See matches() for details.

querySelectorAll(element, selector)

Similar to Element.querySelectorAll().
See matches() for details.

closest(element, selector)

Similar to Element.closest().
See matches() for details.

getParentNode(node)

Similar to Node.parentNode,
but takes aria-owns into account.

getChildNodes(node)

Similar to Node.childNodes,
but takes aria-owns into account.

What is this for?

First of all, I thought that something like this should exist. I currently use
it for a11y-outline, a web extension
that generates outlines based on WAI-ARIA roles.

That said, this is what I think it could also be used for:

  • Providing features based on the additional information provided by ARIA,
    e.g. landmark navigation.
  • Tools helping developers with improving accessibility.

Implemented standards

I try to update the code whenever a new version of these specs becomes a
recommendation.

Notes

  • This is a pet project. I do not have the time to do extensive testing and
    may skip some details now and then. I am happy to receive bug reports and
    pull requests though.
  • The standards are still in a very rough state. Many things are
    unclear/undecided and therefore no browser really implements them. So
    naturally, this library cannot really implement the standards either.
  • This library does not do any validity checks. Invalid attributes or roles
    will not produce any warnings.
  • In order to calculate the “hidden” attribute,
    Window.getComputedStyle()
    is called. This only seems to return reliable values if the element is
    attached to document.
  • Due to security restrictions it is not generally possible to inspect the
    content of iframes, so they are ignored.

Related projects