CODEWITHSUNDEEP
htmlaccessibility
waseem
waseem

Reputation: 19

access html label using keyboard and make it readable using screen reader software

currently I am using the anchor tag to make a label accessible by keyboard and readable using screen reader software (Jaws or thunder any of them).

for example the solution what i have found is the below mentioned: instead of using :-

<label for="I am label">I am label</label>

I am using:-

<a href="#" style="text-decoration:none">I am label</a>

I want some alternative way where i don't have to provide anchor tag for label and the label should be accessible using keyboard and it should be readable by screen reader software...

Upvotes: 1

Views: 2247

Answers (1)

k-den
k-den

Reputation: 853

You can cheat a bit and use the tabindex attribute to make a table cell so you can tab to it. However, tabindexes take a lot of maintenance-- you have to update them every time you add a new element to your page that belongs in the tab order.

Semantically, you should be using the <caption> element to label a table, but you will not be able to tab to the <caption> element either. You can put your title in a <th> element, and tab to that if that's what you really want. Keep in mind that this isn't as semantically good as using <caption>, because a <th> designates the heading of a row or column, not a whole table.

Here's an example where you can tab to an <input> element, which is correctly labelled with a label element, as the commenters suggest, and then to the table cells, which are ordered by the tabindex attribute. I tested this example in NVDA.

<html>
<head>
<title>Screen Reader Test</title>
</head>
<body>
<label for="firstName">First Name:</label>
<input id="firstName" type="text" />
<br />
<table>
    <tr>
        <th colspan="2">Fruit Prices</th>
    </tr>
    <tr>
        <th tabindex="3">Apples</th>
        <th tabindex="4">Oranges</th>
    </tr>
    <tr>
        <td tabindex="4">$0.50</td>
        <td tabindex="5">$1.00</td>
    </tr>
</table>
</body>
</html>

Sources: Tabindex http://webaim.org/techniques/keyboard/tabindex#spec

Caption tag http://www.w3schools.com/tags/tag_caption.asp

Upvotes: 1

Related Questions