Resolving Accessibility Errors

Accessibility tests validate generated HTML markup and may return an error code followed by a message to help you resolve those errors.

The following errors flag accessibility issues in your components. Resolve these errors to ensure that your components are accessible.

[A11Y_DOM_01] All image tags require the presence of the alt attribute

Informational images must have a description set on its alt attribute. If the image is decorative, set alt="". For more information, see Images.

1swfobject.registerObject("clippy.codeblock-0", "9");<!-- Informational image -->
2<img src="admin.png" alt="admin image">

[A11Y_DOM_02] Labels are required for all input controls

A label element should have a for attribute and match the value of the id attribute on the input control, or the label should be wrapped around the input. Input controls include <input>, <textarea> and <select>. For more information, see Forms, Fields, and Labels.

1swfobject.registerObject("clippy.codeblock-1", "9");<!-- Method 1: Use label/for -->
2<label for="fullname">Enter your full name:</label>
3<input type="text" id="fullname"/>
4                        
5 <!-- Method 2: Use an implicit label-->
6<label>Enter your full name:
7    <input type="text" id="fullname"/>
8</label>

[A11Y_DOM_03] Buttons must have non-empty text labels

When using ui:button, assign a non-empty string to the label attribute. For an icon-only button, use labelDisplay in ui:button to hide the label text. For more information, see Buttons.

1swfobject.registerObject("clippy.codeblock-2", "9");<!-- Method 1: Use the alt attribute to provide a hidden label -->
2<button>
3    <img src="enter_site.gif" alt="enter site"/>
4</button>
5
6<!-- Method 2: Use a span tag with assistiveText class to hide the label visually -->
7<button>
8    <span class="assistiveText">Enter site</span>
9</button>

[A11Y_DOM_04] Links must have non-empty text content

For a graphical link, use a ui:image instead. To include hidden link text, use a span tag with assistiveText class. For buttons, use the ui:button component.

1swfobject.registerObject("clippy.codeblock-3", "9");<!-- Method 1: Use an img tag with the alt attribute to provide link text  -->
2<a href="routes.html">
3    <img src="routes.png" alt="current routes" />
4</a>
5
6<!-- Method 2: Use a span tag with assistiveText class to provide link text -->
7<a href="javascript:void(0);">
8    <span class="assistiveText">Toggle Notifications</span>
9    <div class="notificationCounter"></div>
10</a>

[A11Y_DOM_05] Text color contrast ratio must meet the minimum requirement

Small text must have a contrast ratio of not less than 4.5:1. Small text includes those whose font size are:

Smaller than 19px bold or semibold
Smaller than 24px normal

Large text must have a contrast ratio of not less than 3.0:1. Large text includes those whose font size are:

At least 19px bold or semibold
At least 24px normal

A good color contrast ratio means that the foreground and background color provides enough contrast when viewed by a user who might have impaired vision or when viewed on a black and white screen. You can install Accessibility Developer Tools on your Google Chrome browser or use the WebAim Color Contrast Checker tool.

[A11Y_DOM_06] Each frame and iframe element must have a non-empty title attribute

If using an iframe element, include a descriptive title attribute.

1swfobject.registerObject("clippy.codeblock-4", "9");<iframe src="banner-ad.html" id="testiframe" name="testiframe" title="Advertisement">
2    <a href="banner-ad.html">Advertisement</a>
3</iframe>

[A11Y_DOM_07] The head section must have a non-empty title element

In the head element, include a descriptive title tag.

1swfobject.registerObject("clippy.codeblock-5", "9");<head>
2    <title>Welcome</title>
3</head>

[A11Y_DOM_08] Data table cells must be associated with data table headers

Use the scope attribute or use both the id and header attributes.

1swfobject.registerObject("clippy.codeblock-6", "9");<!-- Method 1: Use the scope attribute -->
2<table border="1"><caption>Contact Information</caption>
3    <tr>
4        <th scope="col">Name</th>
5        <th scope="col">Department</th>
6    </tr> 
7    <tr>
8        <td>admin</td>
9        <td>R&D</td>
10    </tr>
11</table>
12
13<!-- Method 2: Use the id and headers attributes -->
14<table border="1">  
15    <tr>
16        <th id="e1">First Name</th>
17        <th id="e2">Last Name</th>
18        <th id="e3">Department</th>
19    </tr>
20    <tr>
21        <td headers="e1">John</td>
22        <td headers="e2">Smith</td>   
23        <td headers="e3">R&D</td>
24    </tr>
25</table>

[A11Y_DOM_09] Fieldset must have a legend element

Include a descriptive legend in your fieldset element.

1swfobject.registerObject("clippy.codeblock-7", "9");<fieldset>
2    <legend>Choose yes or no</legend>
3</fieldset>

[A11Y_DOM_10] Related radio buttons or checkboxes must be grouped with a fieldset

Nest your radio buttons and checkboxes in a fieldset tag.

1swfobject.registerObject("clippy.codeblock-8", "9");<fieldset>
2    <legend>Choose yes or no</legend>
3    <input type="radio" name="yes" id="yesid" value="yes"/>
4    <label for="yesid">yes</label>
5    <input type="radio" name="no" id="noid" value="no"/>
6    <label for="noid">no</label>
7</fieldset>

[A11Y_DOM_11] Headings should be properly nested

Headings should increase no more than one level each time, and can start at any level.

1swfobject.registerObject("clippy.codeblock-9", "9");<h2>Profile</h2>
2<h3>Profile Details</h3>
3<h2>Interests</h2>

[A11Y_DOM_12] Base and top panels should have proper aria-hidden properties

The aria-hidden attribute indicates whether an element is hidden or not, and can be set to true or false respectively.

1swfobject.registerObject("clippy.codeblock-10", "9");<!-- aria-hidden of base panel is false if top panel is not active -->
2<section class="stage panelSlide forceAccess" aria-hidden="false"></div>
3<div class="panel panelOverlay" aria-hidden="true"></div>
4
5<!-- aria-hidden of base panel is true if there is active top panel -->
6<section class="stage panelSlide forceAccess" aria-hidden="true"></div>
7<div class="panel panelOverlay active" aria-hidden="false"></div>

[A11Y_DOM_13] Aria-describedby must be used to associate error message with input control

The aria-describedby attribute indicates the IDs of the elements that describe the object, and can be used to associate static text with groups of elements. For more information, see Help and Error Messages.

1swfobject.registerObject("clippy.codeblock-11", "9");<label for="fname">First name</label> 
2<input name="firstname" type="text" id="fname" aria-describedby="msgid">
3<ul class="uiInputDefaultError" id="msgid">

Lightning Components Developer’s Guide

No Results

Resolving Accessibility Errors