Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Web accessibility - behaviour of screenreaders when configured to read 'title' attribute

I've been advised that if a 'title' attribute expands upon what's present in a control's visible text, it should include all information in the visible text, because the screenreader may read the title instead of the visible text. To clarify exactly how this works, are any of the following points true (for must screenreaders)?

  1. If a label is associated with an input field using the 'for' attribute, and the input field's title attribute is set, then the screenreader will read only the title attribute and ignore the label text.

  2. If a control with its own text, such as a button, is provided with both visible text and a title attribute, then only the title attribute will be read.

  3. The screenreader will ignore visible text for button controls, even if the developer neglected to provide the title attribute for that particular control (the most extreme possibility).

like image 639
user17777 Avatar asked Mar 04 '09 16:03

user17777


1 Answers

  1. The label is preferred to the input title attribute. If the label is present, JAWS reads that, otherwise if the title is present JAWS reads that.

  2. The title attribute is not read in this case, the visible text is read

  3. Not true.

From http://www.w3.org/TR/html401/struct/global.html#adef-title:

Audio user agents may speak the title information in a similar context. For example, setting the attribute on a link allows user agents (visual and non-visual) to tell users about the nature of the linked resource:

I tested using JAWS on this code:

<FORM action="http://somesite.com/prog/adduser" method="post">
 <LABEL for="firstname">First name Label: </LABEL>
          <INPUT title="first name Title" type="text" id="firstname"><BR>
          <INPUT title="Last name Title" type="text" id="lastname"><BR>
 <LABEL for="email">email Label: </LABEL>
          <INPUT type="text" title="Email Title" id="email"><BR>
 <INPUT type="radio" name="sex" value="Male"> Male<BR>
 <INPUT type="radio" name="sex" value="Female"> Female<BR>
 <INPUT title="Send title" type="submit" value="Send"> <INPUT type="reset">
</FORM>

I should also point out that Freedom Scientific has a trial download (ftp) which will give you a vastly deeper understanding of what web pages look like to users.

like image 148
Kai Avatar answered Sep 19 '22 17:09

Kai