Color must not be the only means of indicating selection

Color should not be used as the sole method for indicating the selection of an element. For example, color alone should not be used to indicate table row selection or page tab selection. In addition, color within images must not be the only method to indicate selection. Users who are blind, color blind, or have low vision may not understand the selection if the element lacks textual equivalent. To ensure that a selection is accurately communicated to the user, create a text equivalent in the page that accomplishes this objective.

HTML

Check that a selected item is announced as selected using assistive technologies and a checkmark, bold font or other non-color method visually indicates selection.

HTML Example

<script type="text/javascript"> 

function toggleSelect(rowNumber){ 
  myRow = document.getElementById("Row"+ rowNumber);
  myToggle=document.getElementById("toggle" + rowNumber);
 
  if(myRow.getAttribute("st") != "Selected") 
    { 
      myRow.style.backgroundColor="#00cc00"; 
      myRow.setAttribute("st","Selected");
      myToggle.title = "Selection "+rowNumber+" -
Selected"; 
    }else{ 
      myRow.style.backgroundColor="#ffffff"; 
      myRow.setAttribute("st","Not Selected"); 
      myToggle.title = "Selection "+rowNumber+" - Not
Selected"; 
    } 
} 
</script> 

<table> 
<tr id="Row1" st="Not Selected"> 
<td> 
<a id="toggle1" href="javaScript:toggleSelect(1)"
title="Selection 1 - Not Selected"> 
Selection 1</a> 
</td> 
</tr> 
<tr id="Row2" st="Not Selected"> 
<td> 
<a id="toggle2" href="javaScript:toggleSelect(2)"
title="Selection 2 - Not Selected"> 
Selection 2</a> 
</td> 
</tr> 
</table> 

<!-- ARIA Example -->

<!-- A simple grid example using the aria-selected attribute -->
<h3 id="grid-1-header">Simple Selectable Grid with 3
Columns and 2 Rows </h3>
<TABLE tabIndex="0" id="grid-1"
role="grid" aria-labelledby="grid-1-header"
aria-multiselectable=”true”> 
<THEAD>
<TR role=row>
<TH id=col1-header role=columnheader>Column 1</TH>
<TH id=col2-header role=columnheader>Column 2</TH>
<TH id=col3-header role=columnheader>Column 3</TH>
</TR></THEAD>
<TBODY>
<TR  role=row>
<TD role=gridcell tabIndex=0 aria-selected=true >Data 1</TD>
<TD role=gridcell aria-selected=true >Data 2</TD>
<TD role=gridcell aria-selected=true >Data 3</TD>
<TD role=gridcell aria-selected=true >Data 4</TD></TR>
<TR role=row>
<TD role=gridcell tabIndex=-1 aria-selected=false >Data 5</TD>
<TD role=gridcell aria-selected=false >Data 6</TD>
<TD role=gridcell aria-selected=false >Data 7</TD>
<TD role=gridcell aria-selected=false >Data 8</TD></TR>
</TBODY></TABLE>

HTML Failure

<script type="text/javascript"> 

function toggleSelect(rowNumber){ 
  myRow = document.getElementById("Row"+ rowNumber);
  if(myRow.getAttribute("st") != "Selected")
    { 
      myRow.style.backgroundColor="#00cc00";
      myRow.setAttribute("st","Selected");
    } 
      else
    { 
       myRow.style.backgroundColor="#ffffff";
       myRow.setAttribute("st","Not Selected");
    } 
}
</script>
 
<table> 
<tr id="Row1" st="Not Selected"> 
<td> 
<a id="toggle1"
href="javaScript:toggleSelect(1)"> 
Selection 1</a> 
</td> 
</tr>
<tr id="Row2" st="Not Selected"> 
<td> 
<a id="toggle2"
href="javaScript:toggleSelect(2)"> 
Selection 2</a> 
</td> 
</tr>  
</table> 

Remediating

Add a title attribute to the appropriate element to indicate selection state. This titleattribute will be rendered in assistive technology and indicate selection to the user.

For images containing color, developers must provide alt text to indicate selection.

Developers can also use ARIA attribute aria-selected to indicate the "selected" state of an element. Because ARIA is not supported by all browsers and assistive technologies developers should include ARIA and non-ARIA based methods unless the environment used with the site or application can be confirmed to mandate an ARIA supporting assistive technology and browser stack.

Testing

Recommended tool/method: Visual Inspection / AMP / MS Object Inspector

Ensure color is not used as the sole method of indicating selection (Visual)

1. View the page in a web browser
2. Locate any uses of color on the page that indicate selection
   • Row selection within tables
   • Toggle selection within active elements
3. Determine if the selection information is provided in textual form

A more subtle way to look for such uses of color (typically red) is to search inside any linked CSS files for such keywords as 'selected'. This method can frequently identify such violations.

Ensure color is not used as the sole method of indicating selection (AMP Desktop Preview Functions)

InFocus Check: Preview the page with grayscale to determine color is not used as the sole method of indicating selection.

1. Open the desired page within InFocus
2. Activate Preview Modes > Grayscale (Control+Alt+G)
3. Make a selection on the page and verify the selection is not indicated by color

ARIA attribute aria-selected to indicate selection (Microsoft Object Inspector)

1. Open Object Inspector
   • Ensure "MSAA" is selected in the drop down field
   • Ensure the "Show Highlight Rectangle" button is active
2. View the page in a web browser
3. Locate any uses of color on the page that indicate selection
   • Row selection within tables
   • Toggle selection within active elements
4. Focus the element that uses color as the indication of selection.
5. Determine if the selection information is provided in the "State" field within Inspect