Giter VIP home page Giter VIP logo

axe-core's Introduction

axe-core

License Version Total npm downloads Commits GitHub contributors Join our Slack chat Package Quality

Axe is an accessibility testing engine for websites and other HTML-based user interfaces. It's fast, secure, lightweight, and was built to seamlessly integrate with any existing test environment so you can automate accessibility testing alongside your regular functional testing.

Sign up for axe news to get the latest on axe features, future releases, and events.

The Accessibility Rules

Axe-core has different types of rules, for WCAG 2.0, 2.1, 2.2 on level A, AA and AAA as well as a number of best practices that help you identify common accessibility practices like ensuring every page has an h1 heading, and to help you avoid "gotchas" in ARIA like where an ARIA attribute you used will get ignored. The complete list of rules, grouped WCAG level and best practice, can found in doc/rule-descriptions.md.

With axe-core, you can find on average 57% of WCAG issues automatically. Additionally, axe-core will return elements as "incomplete" where axe-core could not be certain, and manual review is needed.

To catch bugs earlier in the development cycle we recommend using the axe-linter vscode extension. To improve test coverage even further we recommend the intelligent guided tests in the axe Extension.

Getting started

First download the package:

npm install axe-core --save-dev

Now include the javascript file in each of your iframes in your fixtures or test systems:

<script src="node_modules/axe-core/axe.min.js"></script>

Now insert calls at each point in your tests where a new piece of UI becomes visible or exposed:

axe
  .run()
  .then(results => {
    if (results.violations.length) {
      throw new Error('Accessibility issues found');
    }
  })
  .catch(err => {
    console.error('Something bad happened:', err.message);
  });

Philosophy

The web can only become an accessible, inclusive space if developers are empowered to take responsibility for accessibility testing and accessible coding practices.

Automated accessibility testing is a huge timesaver, it doesn't require special expertise, and it allows teams to focus expert resources on the accessibility issues that really need them. Unfortunately, most accessibility tools are meant to be run on sites and applications that have reached the end of the development process and often don't give clear or consistent results, causing frustration and delays just when you thought your product was ready to ship.

Axe was built to reflect how web development actually works. It works with all modern browsers, tools, and testing environments a dev team might use. With axe, accessibility testing can be performed as part of your unit testing, integration testing, browser testing, and any other functional testing your team already performs on a day-to-day basis. Building accessibility testing into the early development process saves time, resources, and all kinds of frustration.

About axe - our Manifesto

  • Axe is open source.
  • It returns zero false positives (bugs notwithstanding).
  • It's designed to work on all modern browsers and with whatever tools, frameworks, libraries and environments you use today.
  • It's actively supported by Deque Systems, a major accessibility vendor.
  • It integrates with your existing functional/acceptance automated tests.
  • It automatically determines which rules to run based on the evaluation context.
  • Axe supports in-memory fixtures, static fixtures, integration tests and iframes of infinite depth.
  • Axe is highly configurable.

Supported Browsers

The axe-core API fully supports the following browsers:

  • Microsoft Edge v40 and above
  • Google Chrome v42 and above
  • Mozilla Firefox v38 and above
  • Apple Safari v7 and above
  • Internet Explorer v11 (DEPRECATED)

Support means that we will fix bugs and attempt to test each browser regularly. Only Chrome and Firefox are currently tested on every pull request.

There is limited support for JSDOM. We will attempt to make all rules compatible with JSDOM but where this is not possible, we recommend turning those rules off. Currently the color-contrast rule is known not to work with JSDOM.

We can only support environments where features are either natively supported or polyfilled correctly. We do not support the deprecated v0 Shadow DOM implementation.

Contents of the API Package

The axe-core API package consists of:

  • axe.js - the JavaScript file that should be included in your web site under test (API)
  • axe.min.js - a minified version of the above file

Localization

Axe can be built using your local language. To do so, a localization file must be added to the ./locales directory. This file must be named in the following manner: <langcode>.json. To build axe using this locale, instead of the default, run axe with the --lang flag, like so:

grunt build --lang=nl

or equivalently:

npm run build -- --lang=nl

This will create a new build for axe, called axe.<lang>.js and axe.<lang>.min.js. If you want to build all localized versions, simply pass in --all-lang instead. If you want to build multiple localized versions (but not all of them), you can pass in a comma-separated list of languages to the --lang flag, like --lang=nl,ja.

To create a new translation for axe, start by running grunt translate --lang=<langcode>. This will create a json file in the ./locales directory, with the default English text in it for you to translate. Alternatively, you could copy ./locales/_template.json. We welcome any localization for axe-core. For details on how to contribute, see the Contributing section below. For details on the message syntax, see Check Message Template.

To update an existing translation file, re-run grunt translate --lang=<langcode>. This will add new messages used in English and remove messages which were not used in English.

Additionally, locale can be applied at runtime by passing a locale object to axe.configure(). The locale object must be of the same shape as existing locales in the ./locales directory. For example:

axe.configure({
  locale: {
    lang: 'de',
    rules: {
      accesskeys: {
        help: 'Der Wert des accesskey-Attributes muss einzigartig sein.'
      }
      // ...
    },
    checks: {
      abstractrole: {
        fail: 'Abstrakte ARIA-Rollen dürfen nicht direkt verwendet werden.'
      },
      'aria-errormessage': {
        // Note: doT (https://github.com/olado/dot) templates are supported here.
        fail: 'Der Wert der aria-errormessage ${data.values}` muss eine Technik verwenden, um die Message anzukündigen (z. B., aria-live, aria-describedby, role=alert, etc.).'
      }
      // ...
    }
  }
});

Supported Locales

Axe-core supports the following locales. Do note that since locales are contributed by our community, they are not guaranteed to include all translations needed in a release.

  • Basque
  • Danish
  • Dutch
  • French
  • German
  • Hebrew
  • Japanese
  • Korean
  • Norwegian (Bokmål)
  • Polish
  • Portuguese (Brazilian)
  • Spanish
  • Greek
  • Italian
  • Simplified Chinese
  • Traditional Chinese

Updates & Security

Axe-core has a new minor release every 3 to 5 months, which usually introduces new rules and features. We recommend scheduling time to upgrade to these versions. Security updates will be made available for minor version lines up to 18 months old.

  • See release and support for details on the frequency of releases, long-term support and recommendations on upgrading axe-core.
  • See backward compatibility for details on the types of changes different releases may introduce.

Deque Trademarks Policy

DEQUE, DEQUELABS, AXE®, and AXE-CORE® are trademarks of Deque Systems, Inc. Use of the Deque trademarks must be in accordance with Deque's trademark policy.

Supported ARIA Roles and Attributes.

Refer axe-core ARIA support for a complete list of ARIA supported roles and attributes by axe.

Contributing

Read the Proposing Axe-core Rules guide

Read the documentation on the architecture

Read the documentation on contributing

Projects using axe-core

List of projects using axe-core

Acknowledgements

Thanks to Marat Dulin for his css-selector-parser implementation which is included for shadow DOM support. Another thank you to the Slick Parser implementers for their contribution, we have used some of their algorithms in our shadow DOM support code. Thanks to Lea Verou and Chris Lilley for their colorjs.io library which we have used for converting between color formats.

Licenses

Axe-core is distributed under the Mozilla Public License, version 2.0. It comes bundled with several dependencies which are distributed under their own terms. (See LICENSE-3RD-PARTY.txt)

axe-core's People

Contributors

42tte avatar ahuth avatar attest-team-ci avatar autosponge avatar clottman avatar dbjorge avatar dbowling avatar dependabot[bot] avatar dmfay avatar dsturley avatar dylanb avatar gaiety-deque avatar greenkeeper[bot] avatar iandotkelly avatar isner avatar jasonkarns avatar jeeyyy avatar ma10 avatar marcysutton avatar mfairchild365 avatar mfranzke avatar michael-siek avatar scottaohara avatar scurker avatar shankarshastri avatar stephenmathieson avatar straker avatar sulsanaul avatar wilcofiers avatar zidious avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

axe-core's Issues

Bower dependencies for utils are included more than once

Now that rules are stored in the same repository, we should only have to include dependencies once, however the following dependencies are bundled both for core/engine and commons:

[
  'bower_components/simple-clone/lib/index.js',
  'bower_components/element-matches/lib/index.js',
  'bower_components/escape-selector/lib/index.js'
]

Add node's ID to duplicate ID failure message

This information is not readily available as the CSS selector will not use an ID if it is not unique. We should include the value of the duplicated ID attribute in the failure message.

Add option to suppress passes

The passes array can be large and capturing it for large pages can take seconds, we should allow for an option to be added to suppress the capture of the node information in the passes array.

When this option is turned on, the rules that run and passed on the page should still be captured but the nodes array will be empty.

Color contrast of disabled form controls

A color contrast violation should not be identified for labels of inputs which are currently disabled, per the "Incidental" exception found at http://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast.

For example, in the example below, the label containing "Jim" should not fail color contrast.

<style>
  label.disabled {
    color: #ccc;
  }
</style>

<input id="bob" type="radio" name="name" />
<label for="bob">Bob</label>

<input id="jim" type="radio" name="name" disabled="disabled" />
<label for="jim" class="disabled">Jim</label>

NodeLists cannot be used as context in PhantomJS

PhantomJS thinks NodeLists have a typeof function. The following fails to find any issues in PhantomJS < 2.

var context = document.querySelectorAll('#header, #footer);
axe.a11yCheck(context, function (r) {
   console.log(r);
});

stop leaking uuid into the global namespace

The dependency on the node-uuid module is leaking things into the window namespace in a browser and into the module.exports when required in Node.js

We should not leak anything into any namespaces unintentionally

Warn when given an unknown ruleset tag or rule ID

a11yCheck({}, {
  runOnly: {
    type: "tag",
    values: ["my-made-up-tag"]
  }
})

I would expect this to throw an error for my-made-up-tag not being a known ruleset tag. However, it successfully returns 0 violations. (Presumably because the tag doesn't exist, so the rule-set that was checked is empty, thus finding 0 violations.)

Additionally:

a11yCheck({}, {
  runOnly: {
    type: "rule",
    values: ["fakeRule"]
  }
})

also successfully returns 0 violations, rather than an error even though fakeRule doesn't exist.

I would expect both of these scenarios (as well as with {rules: {fakeRule: {enabled:true}}}) to return errors stating that the rule ID or tag doesn't exist.

callback should follow error-first convention

For better or for worse, nodejs conventions are taking over JavaScript as a whole, even in browser js.

One convention that applies to a11yCheck is the callback parameters. It currently accepts a single successful result parameter. NodeJS convention, by contrast, is well established that callbacks are defined as cb(error, result).

I strongly recommend that the a11yCheck callback conform to this pattern, as it would make it possible to use all the nodejs async utilities (like async itself, and any promise library with denodify-like support).

Some ready on node's error-first callbacks: http://thenodeway.io/posts/understanding-error-first-callbacks/

New Rule: Scrollable pane not keyboard accessible

Scrollable areas (overflow: auto / scroll) need a method for keyboard-only users to scroll the area. This can be fixed if:

  1. The scrollable area has focusable elements within it.
  2. The scrollable area is added to tab order.

Perhaps throw error/warning when `include` context selector doesn't match anything

This is clearly up to the maintainers (as the behavior is rather subjective), but in the process of working on the matcher gem, I found it odd that invoking a11yCheck({include: "#nonExistant"}) doesn't throw an error when #nonExistant doesn't exist.

Perhaps it's not worth throwing an error, as the 'error state' can be derived by checking if both violations and passes are empty in the results? I'm not familiar enough with the underlying functionality to know if there are other instances where violations and passes would both be empty that doesn't indicate a no-match scenario.

Thoughts?

documentation around `rules`

The documentation around selecting which rules should be run (https://github.com/dequelabs/axe-core/blob/master/doc/API.md#b-options-parameter) lists essentially three modes of operation:

  1. only rules included in (presumably the union?) set of rules matching given tags
  2. run all rules except x, y, z
  3. run only rules x, y, z

syntax for 1. is runOnly: type: "tag", values:[]
syntax for 2. is rules: rule1: enabled: false
syntax for 3. is documented as runOnly: type: "rule", values:[]

However, example 3 shows rules: rule1: enabled: true. With the documented behavior being that only the rules listed as enabled are run. This seemingly contradicts the documentation which states that:

The default operation for a11yCheck is to run all rules.

Is example 3 a typo? Should it have been runOnly: type: "rule", values: [x, y, z]? Or is the syntax truly rules: rule1: enabled: true/false. Or are both forms acceptable? If so, it sounds as if

The default operation for a11yCheck is to run all rules.

should be clarified to state that once any rules/runOnly is specified, then a11yCheck no longer defaults to "all rules". (For if that were true, then specifying a list of rules with enabled:true would be meaningless.)

Engine should not require duplicated Check function bodies

In order to (sanely) extend or override Checks, the engine will need to store Checks in a single collection and then look up function bodies & default options once rather than for every rule that references it.

Currently it expects:

dqre._load({
  rules: [{
    id: 'bob',
    any: [{
       id: 'bob-check',
       options: 'specific-options-for-rule-implementation'
       evaluate: function () {
         // function body
       }
    }, {
       id: 'bob-check2',
       evaluate: function () {
         // function body
       }
    }]
  }]
});

Change this to:

dqre._load({
  checks: [{
    id: 'bob-check',
    options: 'default-options',
    evaluate: function () {
      // function body
    }
  }, {
     id: 'bob-check2',
     evaluate: function () {
       // function body
     }
  }],
  rules: [{
    id: 'bob',
    any: [{
       id: 'bob-check',
       options: 'specific-options-for-rule-implementation'
    }, 'bob-check2']
  }]
});

Improve context parameter defaults

The following should default include to the document:

axe.a11yCheck({}, function (r) { console.log(r); });
axe.a11yCheck({ exclude: ['.bob'] }, function (r) { console.log(r); });
axe.a11yCheck({ exclude: [] }, function (r) { console.log(r); });

Expose DqElement

Expose a "getSelector" or DqElement API to allow Chrome to more efficiently generate an ID

Extend getRules

Add help, helpUrl and tags to the output of axe.getRules.

Document how to specify options for Checks

API documentation does not document how to specify options for Checks. We should probably also document what Checks take options, the format they expect and default values.

Add support for SVG images

We do not handle SVG images correctly at the moment, need to be able to calculate the accessible name correctly for inline SVG and report when not present.

Document the easiest way to start

Would be good to document the easiest way to get going on a given html page.

I would think that doing an audit of the whole page would be the easiest. How would I do that?

I'd rather not have Qunit or Selenium enabled to do this too.

Create aria-owns rules

Elements may only be owned by one other element. With aria-owns, it is possible to

  1. Have two elements trying to own the same element explicitly
  2. Have an element try to own something that is already implicitly owned by some other element

We should have rules that detect both of these scenarios

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.