Question

Here’s what the post submit URL looks like:

default.cfm?fuseaction=Seasons.edit&sid=2569#errors

I’ve added an internal anchor to my errors. The code looks like this:

<a name="errors"/>
<div id="errors">
    <p>An error has occured:</p>
    <ul>    
        <li><label for="name">Missing or invalid season name, click to jump there</label></li>
    </ul>
</div>

<form action="#errors" id="gronk" method="post">
<fieldset>      
<legend>Edit Season</legend>

<div class="row">
    <span class="cell">
        <label for="name"><span class="required">*&nbsp;</span>Season name<span class="wcag_hide"> Required string</span></label>
        <input type="text" name="name" id="name" class="formFields" value="" />
    </span>
</div>
...

Is this a valid way to make error reporting accessible?

I had thought of putting this instead, but it only works in IE I believe:

...
<li><a href="#name">Missing or invalid season name, click to jump there</a></li>
...

Answer 1

I think in the scenario of returning to a form with errors, the main thing you want is to:

1. Focus your user’s browser to the input which has an error
2. Alert your user that there is an error & what has caused it (e.g. invalid email)

So possibly, rather than bringing the user back to default.cfm#errors you could focus them on the first field with an error — e.g. bring them back to default.cfm#name and inject the error message into the field label:

<li>
    <label for="name"><span title="Error">Missing or invalid season name. Please enter a </span>Season name</label>
    <input id="name" name="name" type="text"/>
</li>

This then gives a semantic link between the error and the field itself.

Additionally, even before hitting errors, it may be useful to include some text in the label that specifies that the field is required to begin with. While the asterisk is a good visual clue, it mightn’t come across as strongly when using a screen reader.

In these types of scenarios, you could create a class that will hide the text content off screen (not display:none, as this will be ignored by screenreaders also) in order to provide more contextual info to users, e.g.:

<label for="name">Season name *<span class="contextInfo">(this is a required field)</span>:</label>

The main thing though is to test things with an actual screen-reader. While you’re not going to have the same experience as a blind user (as you won’t be used to browsing with it, it may seem strange), you will be alerted to what is and isn’t read out.

NVDA is an open-source screen-reader & JAWS, one of the most popular, has a trial available. You can’t beat testing with the real thing.