Validation errors and alerts for the Search Result Page (YSO)

[miguelvaara]

Check up by visiting http://finto.fi/yso/en/search?clang=fi&q=automaatio

Before fixing the errors mentioned in this issue make sure the issues #1036, #1037, #1038 and #1039 are done. They are more context oriented and this issue can only be fixed if the context is reasonable (semantic structure, header levels and tab order)

• Errors:

- Missing alternative text:

Case 1:
<img class="property-hover" src="resource/pics/broader.gif">

Case 2:
<img class="property-hover" src="resource/pics/narrower.gif">

Case 3:
<img class="property-hover" src="resource/pics/cloud.gif">

Case 4:
<img class="property-hover" src="resource/pics/replaced.gif">

Case 5..N:
...Check up the validator result and find out the correct points in the code loop to fix the problem

What It Means
Image alternative text is not present.

What To Do
Add an alt attribute to the image. The attribute value should accurately and succinctly present the content and function of the image. If the content of the image is conveyed in the context or surroundings of the image, or if the image does not convey content or have a function, it should be given empty/null alternative text (alt="").

- Missing form labels:

Case 1:
<input style="display: none" name="clang" value="fi" id="lang-input">

Case 2:
<input name="anylang" type="checkbox">

Case 3:
<input type="radio" id="all-languages-true" name="anylang" value="on" onclick="createCookie('SKOSMOS_SEARCH_ALL', this.value , 365);">

Case 4:
<input type="radio" id="all-languages-true" name="anylang" value="on" onclick="createCookie('SKOSMOS_SEARCH_ALL', this.value , 365);">

Case 5:

<select id="scheme-limit" value="0" class="form-control multiselect" multiple="multiple"><option value="http://www.yso.fi/onto/yso/">
YSO - General Finnish ontology
</option><option value="http://www.yso.fi/onto/yso/aggregateconceptscheme">
http://www.yso.fi/onto/yso/aggregateconceptscheme
</option><option value="http://www.yso.fi/onto/yso/deprecatedconceptscheme">
http://www.yso.fi/onto/yso/deprecatedconceptscheme
</option></select>

Case 6..N:
...Check up the validator result and find out the correct points in the code to fix the problems

What It Means
A form control does not have a corresponding label.

What To Do
If a text label for a form control is visible, use the element to associate it with its respective form control. If there is no visible label, either provide an associated label, add a descriptive title attribute to the form control, or reference the label(s) using aria-labelledby. Labels are not required for image, submit, reset, button, or hidden form controls.

• Alerts:

- Orphaned form label:

Case 1:

<label class="sr-only" for="lang-dropdown-toggle">
Content and search language
</label>

Case 2:

<label class="sr-only" for="search-all-button">
Submit search
</label>

What It Means
A form label is present, but it is not correctly associated with a form control.

What To Do:
Properly associate the label with its corresponding form control. If there is no corresponding form control, remove the label. Labels are not appropriate for image, submit, reset, button, or hidden form controls.

- Missing fieldset:

Case 1:
<input name="anylang" type="checkbox">

What It Means
A group of check boxes or radio buttons is not enclosed in a fieldset.

What To Do
Determine whether the grouping of check boxes or radio buttons has or needs text that explains the purpose of the check boxes or radio button grouping. If so, mark up the group within a fieldset and put the group description in a legend element.