auspice
auspice copied to clipboard
Various usability issues/suggestions
Putting a handful of accessibility and usability notes in this issue.
The text on the bottom of this page is extremely difficult to read. The links are "#5097BA" (contrast ratio 3.24), but the font they are rendered in is too thin to even fill a full pixel. The text itself is "#888" (CR 3.54) and has the same font thickness problem. This seems to only directly affect the data page, and not the narrative sections. (https://nextstrain.org/ncov/2020-03-04)
The pagination dots are very tiny and difficult to hit with a mouse. They appear to be about 6 pixels in diameter. There is also no hint as to where they go; a tooltip or other indicator upon hovering, indicating what section it represents, would help make it more clear. (It may also be worth changing from simple dots to something indicating that the pagination is referencing the section below, browser tabs.)
Long sections cannot be scrolled with the arrow keys. Even if you first click on the right side of the page, pressing the up or down arrow keys will still swap between sections. (Clicking on the right side and then using page up/down will scroll it, but not until the click has happened, and it will stop working if you change sections.)
If the page is zoomed in, it becomes impossible to read parts of the narrative. In this screenshot, the text below the "next section" arrow is not readable - scrolling will swap to the next section, revealing that the text is actually cut off entirely.
Great suggestions -- thanks @Xkeeper0. Would you mind breaking these out into separate issues? Hopefully we can get people to help submit PRs for each of them.
One quick point regarding the right-hand-side of narratives dissapearing as you change sections. This is by design -- each left-hand-section is associated with a right-hand-section (either text or more commonly a view into the tree/map). When you move between sections, the right hand part should change. Your point about scroll-ability and being too greedy with binding the up/down arrows is spot on.
UPDATE: #956 details the narrative scrollability issues