Order in which the screen reader reads the content is the reading order. Typically screen reader reads the content in the DOM order, not in the order how it is displayed on the screen. So making sure that the match between what you see on the screen is the same as what you hear with the screen reader is important.
Remember for the text that is marked with <span>, <p>, layout tables, non-interactive list items etc are navigated with the arrow keys.
English Alphabets |
||
| A | K | T |
| B | L | U |
| C | M | V |
| D | N | W |
| E | O | X |
| F | P | Y |
| G | Q | Z |
| H | R | |
| I | S | |
| J | ||
Read the above alphabets using the arrow keys of the keyboard when screen reader is switched on. You will understand the difference.
Since the above content is displayed with a layout table, the content is not in the sequence. The content is read in the source code order. Instead use CSS to place the alphabets in the same position and in the DOM form a sequence. The screen reader will read the content in alphabetical sequence.
Order in which the screen reader reads the content is the reading order. Typically screen reader reads the content in the DOM order, not in the order how it is displayed on the screen. So making sure that the match between what you see on the screen is the same as what you hear with the screen reader is important.
Remember for the text that is marked with <span>, <p>, layout tables, non-interactive list items etc are navigated with the arrow keys.
English Alphabets
AKTBLUCMVDNWEOXFPYGQZHR
IS
J
Read the above alphabets using the arrow keys of the keyboard when screen reader is switched on. You will understand the difference.
Since the above content is displayed with a layout table, the content is not in the sequence.The content is read in the source code order. Instead use CSS to place the alphabets in the same position and in the DOM form a sequence. The screen reader will read the content in alphabetical sequence.