Error message test

← Index page

The KANA system does not allow separate error messages as per the Chroma system. Errors are flagged with strong red text, but nothing programatic for screen readers. These two tests are to determine if and where an error message can be presented to screen readers

Example 01: aria-label applied to the<label> element

Code

<form action="#">
  <div class="form-container">
    <label for="two" aria-label="Error: What is the time">Address</label>
    <input class="input" type="text" id="two">
  </div>
</form>

Dummy link after

Example 02: Hidden information inside <label> element

Code

<form action="#">
  <div class="form-container">
    <label class="label" for="three">
      <span class="sr-only">Error:</span>
      Email
    </label>
    <input class="input" type="text" id="three">
  </div>
</form>

Dummy link after

Results

The first example works in all browser/screen reader combinations EXCEPT Chroma/VoiceOver. Adding an aria-label to the label means that the <label> is completely ignored in this browser/screen reader combination.

← Index page