Accessibility issues for results sorting

[richardofsussex]

Still to-do

• Please call it a hyphen or use an en-dash (–).

• Mark up "Advertisements" as an h2 (first ad heading is also h2 but outside of our control)

• I'm not sure that "Show" really conveys the purpose of that drop-down control. Perhaps something like <label for="results_per_page"><span class="accessibility">Number of results to </span>Show</label>

• span class="accessibility">Postem available
  </span

• Investigate (& possibly fix) access to Search Criteria

• ...Caption would be better as: Your search results. Select a header link to sort by that column; select again to reverse the order.

• [ ]

Keyboard-only

It still takes two presses of the tab key to reveal the "Skip to content" link. The "Privacy" link (which goes to the Cookie Options, with no clue in the URL, not the Privacy Policy) still gets focus ahead of the skip-link: this is wrong.

Tabbing works well: in Firefox: after a sort, focus returns to the column header link.
However, a keyboard-only user would expect the sort to be a button, even though it looks more like a link – because it will do something – rather than the link that it is. A link should go somewhere. It is important because it affects selection: the Space key selects a button; Enter selects a link. See below for my suggested edit to the text in the grey box.

Using a screen reader (VO in Safari)

Although a table caption is present, I think it needs tweaking. Please edit it firstly to properly label (describe) the table (search results), and then to explain the sort function. The explanation in the grey box is better than the one in the caption, but both would be better if they made clear the presence of links (for as long as we are using links, that is). So, I suggest the caption would be better as: Your search results. Select a header link to sort by that column; select again to reverse the order.

Using VO (VoiceOver) in Safari, the recommended browser, selecting a sort link in a header cell reloads the whole page and the user is returned to the top of the page; one has to use the rotor (the group of listings), for instance, to return to the beginning of the table headers. Very awkward; could we make this better?

I for one would be very interested to know whether the Windows screen reader, Narrator, gives a similar experience.

I could not access the "Search Criteria" contents using VO – the link appears to work but there is no accessible content beyond the heading.

Although the "No data available" symbol is described as a dash, it is in fact a hyphen, and that is what VO announces. Please call it a hyphen or use an en-dash (–). I would favour the latter as it is easier to see and looks less like a speck of dirt on the screen.

The heading that is part of the advert appears in the headings listing as an h2: I got "We found records about Brandis" (when I searched for the surname Brandis) and became (temporarily!) isolated in the advert when I selected that heading.

In addition, a screen reader user is unlikely to hear "Advertisements" because it isn't marked up as anything notable: it is in a element, an inline piece of text. I wonder if it is possible to mark up "Advertisements" as an h2 (with the style adjusted to minimise its visual impact), with the advert heading as an h3? Perhaps the advert heading is not under our control?

I'm not sure that "Show" really conveys the purpose of that drop-down control. Perhaps something like <label for="results_per_page"><span class="accessibility">Number of results to </span>Show</label>

The Postem symbol is not announced. An alt attribute would not be announced, so how to make a SRU aware that it is there? I had success with the following ('Postem' by itself was announced with a short 'o' and sounded really odd, almost like 'postern' as in 'postern gate'. A nested span would be ignored):

<span class="accessibility">Postem available</span>
<span><i class="fas fa-envelope" style="padding-right:5px"></i></span>

General

For users that do not use a screen reader, there is no explanation of what the envelope (Postem) symbol means on the results page – a short note would be sufficient. Do not use a title attribute as this would be inaccessible to keyboard-only users.

[richardofsussex]

Keyboard only

With my test setup I get the "Skip to main content" link the first time I press Tab. I'll pass this one across to @Vino-S, since the production setup must be different. The Privacy link is well down the pecking order on the pages I generate.

I think the question of whether the 'sort column' headings are links or buttons needs to be postponed until after release. The fact of the matter is that they are links, which re-load the page of results with a different order displayed.

Screen readers

For the same reason, I don't think there is much that can be done about screen readers starting from the top of the page after a sort. (I get the same behaviour in Narrator.) The page has been re-loaded, even though it looks similar.

I have changed the hyphens to n-dashes as requested.

"Advertisements" is now marked up as <h2>. No, we don't have any control over the headings within the advert, so this will lead to (our) <h2> followed by (their) <h2>, meaning the user can't skip over the advert. However, they will at least have been alerted to what is coming!

I have amended the Show heading as suggested.

I now announce the Postem 'letter' icon as suggested.

General

I'm not sure if there is space to include even a short (visible) note in the results listing table, so I haven't done that.

[DeniseColbert]

@AlOneill could you take a look at Richard's changes (the ticked items in the description) so far? On Test3.

Skipping straight to 'Privacy' is a post-MVP issue already noted in GitHub

We'll make a new story for a long-term plan for handling table sorting via JS rather than page refresh, which will allow better accessibility for users.

[richardofsussex]

OK, I have amended the caption at the start of the results table.

I haven't made any major changes to the search criteria section, although there was an accessibility heading which was floating outside it which is now inside it. I did manage to access the search criteria using Narrator, although it wasn't that direct. Clicking on the View Search Criteria link should take you to the element with ID 'search_criteria_container', but this link also has an onclick event handler which shows the search criteria and hides the View Search Criteria link itself. Maybe the Javascript could also move you to the selected section? Instead, I had to tab across the other search-related commands until I arrived at the Search Criteria block. Then I could navigate through the individual settings (though I had to use down-arrow not right-arrow; otherwise I got all the headings, followed by all the values, on each row). So this section is accessible; you just aren't taken there when you select it.

Having said all that, the updated version on test3 now seems to jump to the start of the Search Criteria section when I click on the View Search Criteria link. Please have a go and see what you make of it.

[richardofsussex]

Advertisements heading now centred in the adverts space and made less tiny, on both Search Results and Entry Information page.

[AlOneill]

@Vino-S @DeniseColbert @richardofsussex
Test3 will not process a search, so cannot test until fixed.

[richardofsussex]

I ran a search just now without problems.

[AlOneill]

Still unable to search