back to CanAdapt home

Test (1) a title tag on a <span> in a <label> and
(2) a title on a link in a second language

Test 1: Description

In the first test a title is on a span in a label tag to indicate a required field

Code Used

<div id="wrapper-anon-job">
<div class="form-item form-type-select form-item-anon-job">
<label for="edit-anon-job--2">
2. What kind of work do you do?
<span class="form-required" title="This field is required.">*</span>
</label>
<select id="edit-anon-job--2" class="form-select required ajax-processed" name="anon_job" aria-controls="wrapper-anon-city anon-union-info">
<option selected="selected" value=" ">-- Select --</option>
<optgroup label="Energy Inc.">
<option value="141">any position</option>
</optgroup>
</select>
</div>
</div>

Test

Accessibility Support technology used

  JAWS NVDA VoiceOver
FireFox40.0.3 No No N/A
IE11.0.9 No No N/A
Chrome 45.02 No No N/A
Safari MacOS N/A N/A No

Comments

This construct does not work, use HTML5 requried attribute on input instead.

Solution

Use HTML5 "required" attribute

Test 2

Description

Put an xml:lang tag on an anchor and profive a title that is in the second language. Then try the same thing with a lang tag.

Code Used for first example

<ul class="language-switcher-locale-url">
<li class="en first active">
<a class="language-link active" title="Need help?" xml:lang="en" href="#">En</a>
</li>
<li class="fr last">
<a class="language-link" title="Besoin d'aide?" xml:lang="fr" href="#">Fr</a>
</li>
</ul>

In the second test, the same code is used but the lang attribute is used instead of xml:lang

xml:lang with Title in second langage

  JAWS NVDA VoiceOver
FireFox40.0.3 No No N/A
IE11.0.9 No No N/A
Chrome 45.02 No No N/A
Safari MacOS N/A N/A No

 

lang with Title in second langage

  JAWS NVDA VoiceOver
FireFox40.0.3 Yes Yes N/A
IE11.0.9 No Yes N/A
Chrome 45.02 No No N/A
Safari MacOS N/A N/A No

Now Lang with aria-label in second langage

  JAWS NVDA VoiceOver
FireFox40.0.3 No Yes N/A
IE11.0.9 yes Yes N/A
Chrome 45.02 No No N/A
Safari MacOS N/A N/A No

Now add viusally hidden letters to finish off English and French. Lang with aria-label in second langage

  JAWS NVDA VoiceOver
FireFox40.0.3 No Yes N/A
IE11.0.9 yes Yes N/A
Chrome 45.02 No No N/A
Safari MacOS N/A N/A No

Comments

Accessibility support better for the third example with aria-label, but VoiceOver, and Chrome don't work on any. Better to use visually hidden CSS instead.