When you view the homepage or a Category page with a sufficiently narrow screen, you get a combo box to choose a different category page to go to.
This combobox doesn't have an accessible label. NVDA + Firefox currently announce the combobox as:
clickable combo box Latest Articles collapsed
I've reworded 'Categories' to 'Category', on the grounds that the user should choose a single 'category' not multiple 'categories'. And I've re-marked-upped it from a <h3> to a <label> which is explicitly associated with the combo box using the for attribute. I've also sprinkled in a bit of CSS so that the visual appearance is almost identical. Here's what it looks like:
The top margin is subtly different, but I think there's no obvious need for that subtly different top margin that would justify an extra line of CSS. Happy to be overruled if you disagree!
Now, the combo box is announced by NVDA + Firefox as:
Category combo box Latest Articles collapsed
This should be generally in line with user expectations. Compare, for example, this location combo box from the footer in the BBC iPlayer website:
This is read out as:
Change location combo box East Yorks & Lincs collapsed
This clears two errors identified by pa11y. Here's a screenshot where I run pa11y on the live blog and get two errors, but when I run the same pa11y command on my localhost version of the blog running on this branch, the errors go away.
When you view the homepage or a Category page with a sufficiently narrow screen, you get a combo box to choose a different category page to go to.
This combobox doesn't have an accessible label. NVDA + Firefox currently announce the combobox as:
I've reworded 'Categories' to 'Category', on the grounds that the user should choose a single 'category' not multiple 'categories'. And I've re-marked-upped it from a
<h3>to a<label>which is explicitly associated with the combo box using theforattribute. I've also sprinkled in a bit of CSS so that the visual appearance is almost identical. Here's what it looks like:The top margin is subtly different, but I think there's no obvious need for that subtly different top margin that would justify an extra line of CSS. Happy to be overruled if you disagree!
Now, the combo box is announced by NVDA + Firefox as:
This should be generally in line with user expectations. Compare, for example, this location combo box from the footer in the BBC iPlayer website:
This is read out as:
This clears two errors identified by pa11y. Here's a screenshot where I run pa11y on the live blog and get two errors, but when I run the same pa11y command on my localhost version of the blog running on this branch, the errors go away.