1. Getting Started
  2. Installation: Preline UI

Accessibility

ARIA input fields must have an accessible name

Providing role, state, and value information on all user interface components enables compatibility with assistive technology, such as screen readers, screen magnifiers, and speech recognition software, used by people with disabilities.

Fixing the problem

Correct markup solutions

The aria-input-field-label rule includes six markup patterns that pass testing criteria:

<!-- combobox -->
<div id="pass1" aria-label="country" role="combobox">England</div>
<!-- Select a color: -->
<div id="pass2" role="listbox" aria-labelledby="pass2Label">
<div role="option">Orange</div>
</div>
<!-- searchbox -->
<p id="pass3Label">Search currency pairs:</p>
<div id="pass3"  role="searchbox"  contenteditable="true"  aria-labelledby="pass3Label"></div>
<!-- slider -->
<div id="pass4"  role="slider"  aria-label="Choose a value"  aria-valuemin="1"  aria-valuemax="7"  aria-valuenow="2"></div>
<!-- spinbutton -->
<div id="pass5"  role="spinbutton"  aria-valuemin="0"  aria-valuemax="10"  aria-valuenow="8"  aria-label="Enter quantity:"></div>
<!-- textbox -->
<label id="foo">  foo
<div id="pass6" role="textbox" aria-labelledby="foo"></div>
</label>

Incorrect markup solutions

The aria-input-field-label rule includes ten markup patterns that fail testing criteria:

<!-- aria-label with empty text string -->
<div id="fail1" aria-label=" " role="combobox">England</div>
<!-- The label does not exist. -->
<div id="fail2" aria-labelledby="non-existing" role="combobox">England</div>
<!-- The implicit label is not supported on div elements. -->
<label>  first name
<div id="fail3" role="textbox"></div>
</label>
<!-- explicit label not supported on div elements -->
<label for="fail4">first name</label>
<div role="textbox" id="fail4"></div>
<!-- combobox -->
<div id="fail5" role="combobox">England</div>
<!-- listbox -->
<div id="fail6" role="listbox" aria-labelledby="label-does-not-exist">
<div role="option">Orange</div>
</div>
<!-- searchbox -->
<div id="fail7"  role="searchbox"  contenteditable="true"  aria-labelledby="unknown-label"></div>
<!-- slider -->
<div id="fail8"  role="slider"  aria-valuemin="1"  aria-valuemax="7"  aria-valuenow="2"></div>
<!-- spinbutton -->
<div id="fail9"  role="spinbutton"  aria-valuemin="0"  aria-valuemax="10"  aria-valuenow="8"></div>
<!-- textbox -->
<label>foo
<div id="fail10" role="textbox"></div>
</label>

All rights reserved - Sitefig