The column headers are not very screen reader friendly. There are 2 problems:
- The label on the sort buttons are hard to understand because they are missing spaces, e.g., "sort by Band inascendingorder"
- The table is hard to read because the column headers are way too verbose. When reading across a row with a screen reader, most screen readers read the header first and then the cell. For instance, reading across the first row, you hear "Singer sort by Singer inascendingorder Barney Greenway"
The first problem is a simple bug. The second problem would be easily fixable by employing abbr on the th elements, e.g.:
<th abbr="Singer">Singer <button>sort by Singer in ascending order</button></th>
If you do this, then screen readers will announce only the abbr value when reading across a row instead of the entire content of the th element.
The column headers are not very screen reader friendly. There are 2 problems:
The first problem is a simple bug. The second problem would be easily fixable by employing
abbron thethelements, e.g.:<th abbr="Singer">Singer <button>sort by Singer in ascending order</button></th>If you do this, then screen readers will announce only the
abbrvalue when reading across a row instead of the entire content of thethelement.