Skip to content

Instantly share code, notes, and snippets.

@mattzeunert
Last active December 12, 2018 18:35
Show Gist options
  • Save mattzeunert/15795cec109baedc42bc5897b5ce2f25 to your computer and use it in GitHub Desktop.
Save mattzeunert/15795cec109baedc42bc5897b5ce2f25 to your computer and use it in GitHub Desktop.
@mattzeunert
Copy link
Author

mattzeunert commented Dec 12, 2018

Reddit – 26% appropriately sized tap targets

The header isn't scored because it's position absolute, will fix that later by introducing elementAtPoint to check if a tap target is visible

screenshot 2018-12-12 at 15 58 22

Google Search – 98% appropriately sized tap targets

Also misses some tap target that are position absolute:

screenshot 2018-12-12 at 16 04 29

There's a lot of tap fingers here because the outer rect is partially hidden by the scroll container and therefore we ignore it. I've not seen it cause a false result yet though. The fingers are all for the same tap target but having extra fingers could introduce a failure over having one central finger.

screenshot 2018-12-12 at 16 04 57

One failing target is correctly identified, fails because the "Sign in" link is very small

screenshot 2018-12-12 at 16 05 03

Wikipedia article: 94% appropriately sized tap targets

Also misses some tap target that are position absolute (in the edit icons bar)

screenshot 2018-12-12 at 16 08 33

Illustrates our nodeIsInTextBlock algorithm, which depends on other text content around the link:

screenshot 2018-12-12 at 16 09 31

This similarly depends on text block detection, but is fairly reasonable overall:

screenshot 2018-12-12 at 16 12 24

CNN: 88% appropriately sized tap targets

Some footer links are identified as a text block, others aren't.

screenshot 2018-12-12 at 16 19 39

Lighthouse: 45% appropriately sized tap targets

screenshot 2018-12-12 at 16 47 48

Footer links fail with an overlap score of exactly 0.25

screenshot 2018-12-12 at 16 48 17

Twitter: 84% appropriately sized tap targets

screenshot 2018-12-12 at 18 29 14

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment