Touch targets do not have sufficient size or spacing.

cdrini commented 3 months ago

Problem

The source record links on the book page are too close together for some readers to select, which is an accessibility problem, i.e.:

Expected behaviour / screenshots

The text should be spaced out enough to draw a 24 x 24 pixel square around the center of the target without hitting an adjacent target, something like this: Sample spacing

Additional Context

Proposal & Constraints

This should be a very simple fix! It will just involve:

Adding a new class to the source records section in edition/view.html, ideally something with a clear name like source-records: https://github.com/internetarchive/openlibrary/blob/dd3ca411cf828d153f1b9b62f1d44c5c64a1fc1d/openlibrary/templates/type/edition/view.html#L454-L457
Adding two new properties to that class in work.less:
- word-spacing: 1px
- line-height: 1.75

Related files

/edition/view.html
work.less

Stakeholders

@veronicamar

Instructions for Contributors

Please run these commands to ensure your repository is up to date before creating a new branch to work on this issue and each time after pushing code to Github, because the pre-commit bot may add commits to your PRs upstream.

veronicamar commented 3 months ago

From PageSpeed: Touch targets with sufficient size and spacing help users who may have difficulty targeting small controls to activate the targets.

Touch targets must be at least 24 by 24 CSS pixels in size. Size is computed by taking the largest unobscured area of the touch target. If the size of the target is insufficient, then it must be possible to draw a virtual circle centered on the target with a diameter of 24 pixels that does not intersect any other targets, nor any of the circles on other undersized targets.

< button style="font-size : 24px"> Submit < /button >

  < button > + < /button >
  < button style ="margin-left: 10px"> Adjacent Target < /button >

Jash2606 commented 3 months ago

Hey @cdrini , I would like to work on this issue. please could you assign me this issue?

BarryByte commented 3 months ago

@cdrini Please assign me this issue...

cdrini commented 3 months ago

This one needs some designs before it can be implemented @Jash2606 and @BarryByte .

@veronicamar said she's willing to work on designs!

veronicamar commented 3 months ago

Hi all,

For touch targets, I can see the same area has been flagged as too small, I think if the spacing is increased between links this will make them easier to select (as you can see in below picture)

I would suggest word-spacing: 1px; what word spacing is this currenty?

veronicamar commented 3 months ago

Also line height- p.big { line-height: 1.5;

I think each link on a seperate line could make them more clickable however if we want to keep them grouped in the same way, word spacing is key- what are your thoughts?

rebecca-shoptaw commented 2 months ago

@veronicamar Thanks so much, that sounds reasonable to me! I'll update the description. Tried it out in the dev tools (with 1.75 line-height) and got this result, which I think is a big improvement and passes the 24x24 test:

internetarchive / openlibrary