Supporting Accessibility

Accessibility Testing

Testing your app for accessibility ensures that the app is accessible by users with disabilities or those who use assistive technologies. For apps developed on Android devices, use Talkback and Explore by Touch. For iOS devices, use VoiceOver to test for accessibility. For desktop devices, use Wave Toolbar to check for accessibility errors and recommendations for your apps.

To check that a component’s HTML output is accessibility compliant, run $A.test.assertAccessible(). You can also run $A.devToolService.checkAccessibility() on a browser console.

$A.test.assertAccessible()

Throws an assertion failure and displays errors when run in a test case, for example, on http://<your server>/uitest/inputDate_Test.cmp?aura.mode=JSTEST. This test validates that the ui:inputDate component is accessible when a new attribute is added and the date picker is opened using this.openDatePicker(cmp).

1swfobject.registerObject("clippy.codeblock-0", "9");testAccessibility : {
2    attributes : {value: "2020-09-10", format: "MM-dd-yyyy"},
3    test : [function(cmp) {
4        this.openDatePicker(cmp);
5    },function(cmp) {
6        $A.test.assertAccessible();
7    }]
8}

$A.devToolService.checkAccessibility()

Logs any accessibility errors found in the component. You can also refer to the Accessibility tab at http://<your server>/uitest/inputDate_Test.cmp?aura.debugtool=true&aura.mode=STATS, which logs any accessibility errors found in the component. This test returns an assertion failure message if the checkAccessibility() method returns at least one error message.

1swfobject.registerObject("clippy.codeblock-1", "9");testAccessibility : {
2    test: function(cmp) {
3        var result = window.$A.devToolService.checkAccessibility();
4        $A.test.assertTrue(result == "", "Error occurred when running checkAccessibility(). " + result + ".\n");
5    }
6}

$A.devToolService.checkAccessibility(startingElement)

Same as the previous, but accepts an optional parameter to denote which DOM element to start with.

For more information on resolving accessibility errors, see Resolving Accessibility Errors.

Accessibility Anti-Patterns

When developing or testing components, avoid:

• Images without the alt attribute
• Anchor element without textual content
• input elements without an associated label
• Group of radio buttons not in a fieldset tag
• iframe or frame elements with empty title attribute
• fieldset element without a legend
• th element without a scope attribute
• head element with an empty title attribute
• Headings (H1, H2, etc.) increasing by more than one level at a time
• CSS color contrast ratio between text and background less than 4.5:1