I wonder if anyone can offer some gems of wisdom
I am working on a site which needs to meet WCAG 2.0. Its a forms based site where the user needs to answer some questions.
Each question is presented in a row with 'columns', where the question text is on the left, followed by an optional help icon/link, an optional mandatory character, and then the answer field. The anwser may have an optional prefix character (eg: a £ sign). If the user has sumbitted the form and the field is in error, an error message is displayed spanning all columns.
(If my description above sounds very 'tabular' - thats because the site used to use tables for layout
Its all been changed now in favour of divs but not with any real view as to changing the markup structure. I am looking to see if we can improve things further)
So, the div based code for a given question is:
- Code: Select all
<div id="row_request_risk_proposerDetails_personalDetails_title" class="row">
<div id="err_request_risk_proposerDetails_personalDetails_title" class="errorRow hidden">
</div>
<div id="label_request_risk_proposerDetails_personalDetails_title" class="question">
<label for="request_risk_proposerDetails_personalDetails_title">Title</label>
</div>
<div id="help_request_risk_proposerDetails_personalDetails_title" class="help">
</div>
<div id="mand_request_risk_proposerDetails_personalDetails_title" class="mandatory">
</div>
<div id="prfx_request_risk_proposerDetails_personalDetails_title" class="prefix">
</div>
<div id="fld_request_risk_proposerDetails_personalDetails_title" class="answer">
<select id="request_risk_proposerDetails_personalDetails_title" name="request.risk.proposerDetails.personalDetails.title" saved_disabled_attr="false">
<option value="">Please select</option>
<option value="DR">Dr</option>
<option value="MISS">Miss</option>
<option value="MR">Mr</option>
<option value="MRS">Mrs</option>
<option value="MS">Ms</option>
</select>
</div>
<div id="reset_request_risk_proposerDetails_personalDetails_title" class="reset"></div>
</div>
The above validates to WCAG 2.0 AAA (http://achecker.ca/checker/index.php) but we are using a lot of structural markup (divs) as content containers.
I am wondering if we can make it more semantic. Something like this:
- Code: Select all
<div id="row_request_risk_proposerDetails_personalDetails_title" class="row">
<p id="err_request_risk_proposerDetails_personalDetails_title" class="errorRow hidden">
</p>
<p id="label_request_risk_proposerDetails_personalDetails_title" class="question">
Title
</p>
<p id="help_request_risk_proposerDetails_personalDetails_title" class="help">
</p>
<p id="mand_request_risk_proposerDetails_personalDetails_title" class="mandatory">
</p>
<fieldset>
<legend>Title</legend>
<span id="prfx_request_risk_proposerDetails_personalDetails_title" class="prefix">
</span>
<select id="request_risk_proposerDetails_personalDetails_title" name="request.risk.proposerDetails.personalDetails.title">
<option value="">Please select</option>
<option value="DR">Dr</option>
<option value="MISS">Miss</option>
<option value="MR">Mr</option>
<option value="MRS">Mrs</option>
<option value="MS">Ms</option>
</select>
<label for="request_risk_proposerDetails_personalDetails_title" class="accessibleLabel">Title</label>
</fieldset>
</div>
Again, this validates to WCGA 2.0 AAA, but to me it 'feels' better. Text is contained within p elements, the input control is in a fieldset (which is what we currently do for radios etc), and theres a lot less page structure implied in the markup.
So, my question is, which is better? Would a screen reader do a better job with version 1 (div based) or version 2 (paragraph based) ?
Also, could I improve the semantics further by not including empty elements. For example, the optional help and mandatory elements - if a given question does not use them, would I be better off not including them at all in the markup? (I think I know the answer to this one, but just checking!
- what I dont know is if a screen reader will try to read an empty p or div )
Many thanks for any help
Best regards
Nathan
.