Improvements to Results page #609
Comments
KristinaGadzhieva
added
MVP
KristinaGadzhieva
changed the title
KristinaGadzhieva
added this to the Phase 4: Minimum Viable Product (MVP) Release milestone
|
@richardofsussex @DeniseColbert @nurifreembd Please have a look at # 4, 5, 6, 8 in the story description. |
|
Number of results disappeared (story #575 was closed) Filter by, Sort by options disappeared (story #572 was closed) |
|
#572 - yes you are right. Sorting of results is now achieved by clicking on column headings, which is a widely understood and frequently-implemented way of doing this. So the 'sort by' options control is redundant. Similarly, the 'filter by' control is simply replicating what the user can do very simply, by modifying their search. There is no need for it in the results page. |
|
Regarding suggestion 8: if you hover over "First name" and "Surname" you will see that each is a separate link. This allows sorting of the results by either first name or surname. The proposed change would remove this facility (and open up the question of how names should be sorted!). |
|
Suggestion 5: let's create a story for that. Ironically, the plural form would make sense on the search page, since you may find lots of each event type. Once you are in the results page, looking at one record in the table of results, it is definitely a singular instance of that event. Also, I wonder if having them in upper case is a bit shouty - why not just (e.g.) 'Birth'? |
|
Suggestion 7: I implemented this as part of the work on context-sensitive help. @Vino-S, this was in branch fb_188_rbl - please merge this into beta. |
|
fb_188_rbl is now on beta |
|
re 5, consider lower case/capitals. Be consistent with the rest of the labels on the page. Also consider plurals on the page title please. |
|
3 - The sorting improvements are very useful. However, the sorting option may not be obvious to users at first glance. Can we consider adding a note before the table for users? |
|
4 - Have we agreed that buttons (links) will look like links? Personally, I would prefer 'buttons look'. However, it will be a consistent approach across the three websites, so we need to confirm. 5 - I think the singular form is acceptable and consistent with other names in the table heading. I agree with the lowercase and capitals, 'Birth' etc. Can we make the change based on this story? Since it is a small change, do we really need a separate story on it ? |
|
5 - I think the singular form is acceptable and consistent with other names in the table heading. I agree with the lowercase and capitals, 'Birth' etc. Thanks, Vino. |
|
4 - Agreed: to make all links displayed as 'links' and single underlined. @Vino-S could you please make changes on Test 3 |
|
3 - The sorting improvements are very useful. However, the sorting option may not be obvious to users at first glance. Can we consider adding a note before the table for users? @richardofsussex @DeniseColbert @nurifreembd do you agree ? |
|
Would work Khristina. Another option is if user hoovers over the label
maybe an alt text on the label, would that work?
…On Tuesday, December 10, 2024, KristinaGadzhieva ***@***.***> wrote:
*3 - The sorting improvements are very useful. However, the sorting option
may not be obvious to users at first glance. Can we consider adding a note
before the table for users?*
@richardofsussex <https://github.com/richardofsussex> @DeniseColbert
<https://github.com/DeniseColbert> @nurifreembd
<https://github.com/nurifreembd> do you agree ?
—
Reply to this email directly, view it on GitHub
<#609 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/BDP72B4G7OYVYGNUVG7AXVL2E4JWNAVCNFSM6AAAAABS6CHMN2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMZSGIZDSOJYGE>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
|
If we're flagging that column headings are links which will cause the table of results to be re-sorted, we should do so in an accessible manner. I don't think alt text (on its own) meets that requirement. Just checked FreeReg, and the headings in their results listing are 'naked' - there is nothing at all to indicate that they trigger a sort. So we're breaking new ground here. More generally, do we want to implement a way of telling the user what will happen/where they will end up, when they click on a link? For example, the links in the first column lead to the Entry information page for that record - there is nothing to indicate what will happen when you click on the link. (There used to be, when it was a button. Just saying ...) @AlOneill isn't there an 'accessibility' attribute that we could use for this? |
|
As regards capitalization of names - I wonder if we would be sacrificing fidelity to the source data in the pursuit of visual tidiness. Names are recorded in the index using a variety of case strategies: shouldn't we simply reflect what was recorded? If we are going to enforce a case strategy, I would note that it is common practice (e.g. in FreeReg and the Probate books I am looking at) to have forenames in mixed case and surnames in upper case. @AlOneill does all upper case present itself as "shouting" in a screen reader, or is it not an issue? |
|
@richardofsussex As mentioned in #606, please see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort for details of how to implement the sort accessibly. Note that this is a case for buttons because the sort does something rather than going somewhere. |
|
I have implemented support for sorting the table along the lines suggested by @AlOneill. This includes using buttons and including appropriate ARIA attributes. It's now on test3 for us to look at. |
|
As for capital letters in names (9), consistency in case looks neater. If you look at other competitor genealogy websites, many of them use capital and lowercase letters in names. If we can implement this without modifying the database, I think it can be done in MVP. |
|
@richardofsussex @AlOneill As for sorting (3), sorry, I do not support placing buttons inside the table headers, as it makes the table visually cluttered. We have alternatives, such as making the headings clickable with small sorting icons (up/down arrows) beside the column names. Another option is a drop-down list for sorting, which we had previously implemented (before it was removed). |
|
I used W3C guidance as the basis for my work: see https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/. Their advice suggests that it makes sense to give users as big a target to aim at as possible. And as @AlOneill has pointed out, clicking on the heading leads to a 'button-like' operation, not a 'link-like' one. The W3C example styles the buttons so that they fill the whole heading cell, which gives a neater visual effect than what I managed to achieve using our standard CSS button styles. We could look into doing something similar. What I have written gives us, as far as I understand it, properly accessible control over table sorting. I would be reluctant to give that up. |
|
As regards capitalization, we have established that all caps would not be an issue for screen readers. I don't have strong views on this, and I think it would be easy to implement consistent upper and lower case. Any other opinions? |
|
@KristinaGadzhieva @richardofsussex @nurifreebmd |
|
I've also been thinking about this issue (while not sleeping). The core of the problem as outlined by @AlOneill appears to me to be the fact that you land at the top of the page after each sort operation. I have now implemented a link-based sort which includes a '#' value at the end of the URL, which takes the user back to the table header cell which activated the sort:
When @Vino-S has had chance to upload my code to test3, you can try it out. My own view is that this works adequately, and there is no need to switch to a javascript-based approach. |
|
OK, it's there now: thanks Vino. The table has the aria-sort attribute, and uses aria-hidden on the sort icons as recommended. So I think the HTML markup is as it should be. I think that putting 'up' and 'down' markers on each sortable column would confuse rather than clarify. since it would make the currently sorted column less obvious. |
|
An arrow icon indicates sorting direction (ascending or descending) in the column header. Unsorted columns display a neutral double-arrow icon. The double-arrow icon is widely used. The current diamond-like symbol can be confusing and is not commonly used on websites. (https://daext.com/wp-content/uploads/2024/10/datatables-table-with-sorting.png) |
|
I read this on the W3C ARIA table sorting page (https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/): and found the symbol the closest I could find to the one they use there. |
|
Progress: for a sighted keyboard-only user the behaviour is as expected (or close enough)—thank you. However, for a screen reader user (on VO, at least), the sort takes a user back to the very top. I cannot offer an explanation. I'm not hearing any ARIA-related messages. Can I suggest the caption begins "Select a column heading …" rather than "Click on a …" as the only people to hear the caption won't be able to click? |
|
Well ... my first experience of a screen reader (as far as I can recall). I used Narrator to cross-check your findings. When I pressed Enter to sort by a column, it did indeed reload the page, and gave some initial description of it, but after that, when I pressed Tab once, the focus moved straight back to the column heading I had sorted on, exactly as it should. Try pressing Tab yourself a few times, to confirm (or, hopefully, not) that you really are at the top of the page! Thanks Caption amended as suggested. For some reason Narrator reads it out twice. |
|
No mention of |
|
Sorry, but after a sort, VO returns to the top of the page and starts reading. This happens if I use the keys that VO tells me to use or whether I use Enter. Pressing Tab does not help. No mention of sort or sort-direction in the link you gave in VO either. Have to stop now as getting heart rate warnings. |
|
Thank you all. I have added information about 'No data' and dash (‘-’) cases to the Help MVP doc. Regarding sorting, have we agreed on table-based sorting despite some accessibility issues? To what extent are we going to address this in the MVP? |
|
Agreed to enforce mixed case for first names and upper case for surnames, noting that this is consistent with practice in FreeCEN and FreeREG, but different from what many competitor sites do. Testing/feedback will reveal (hopefully) what our users' preferences are. |
|
@Vino-S , could you please take 4 and 9? @richardofsussex could you please help with 10? |
|
@Vino-S Icon suggestions View search criteria Revise search New search |
|
I have done 10. and it is implemented in test3. It looks to me as though 9. has been implemented too. |
|
9 and 10 look good, thank you. |
|
Can @Vino-S take on 11 please? |
|
Deployed to Beta |
|
10 is not on Beta |
|
See #604 comment. Just needs pushing to beta. |
|
|
In addition to dependent stories, I noticed other inconsistencies on Beta:
1. Table header: the font color in the table header is now magenta instead of bold black.3. Filter by, Sort by options disappeared (story Filter by and Sort by fields on the Result page #572 was closed)8. Suggestion: First Name Surname column could be changed to 'Individual's Full Name'The text was updated successfully, but these errors were encountered: