Example 4 - Creative Counting
Summary
When you place a button in a table cell, VoiceOver on iOS devices announces the table row position along with the button information.
Examples
Please review the following on your iOS device.
| First Name | Middle Name | Last Name |
|---|---|---|
| Deque | Deque | Deque |
Explanation
When you place a button inside a <td> cell in a table, then swipe to it using VoiceOver on iOS devices, VoiceOver will announce:
- The accessible name of the button.
- Its role (button).
- The position of the table row where the button is located
- The words "of one".
When you swipe to the first button in the table above using Voiceover on an iOS device, you will hear Voiceover announce: "This is a button, button, 2 of 1" (the buttons are in the second row of the table, counting the header row). If you swipe on down to the buttons in the 4th row you will hear "submit button, 4 of 1".
There are a number of workarounds for this, including using a link instead of a button (notice how the odd Voiceover announcement does not occur for the links in row 3) and putting role="presentation" on the table tag (which only works if the table is used for layout, it will erase all table semantics).
The end user impact is minor. Users have access to all content and controls on the webpage. But the odd announcement could confuse users who may believe there is an important element on the page they do not have access to. Plus the creative counting can throw off even the most creative accountant.
Imagine...
You are the same developer as in example 3. You have made all your buttons visible and you placed them inside a table. While testing the webpage with VoiceOver, you notice the odd announcements. You can remove the announcements by changing the buttons back to links but your boss has been promoted to chairman of the board of corrections in the "Save the Semantic Meaning" foundation, and you do not want to let him down. You could also remove the buttons from the table, but it requires some extra coding and testing.
So...