#2 – Accessible Style Guide | Target Size and how it impacts SEO
(background music) When neglecting the Target Size, in
addition to negatively affecting the experience and accessibility, you
could lose around 2 points on SEO. Hello there! My name is Marília,
and this is Accessibility For Devs! (scratching paper) The Target Size is the minimum touching area,
in width and height, that an interactive element needs to be for most people to be able to
click or tap without missing the target. This is essential for the user experience,
especially people with physical disabilities, older people and people with
Cognitive or Learning disabilities. It must be applied for every interactive element,
such as buttons, links, checkbox, input and so on.
The W3C and Google diverge about the
directives related to the target size. At WCAG, there are 2 rules:
One current and a draft one. The first rule says that the interactive elements
must have at least 44 pixels on height and width. In the second, it's not necessarily 44 pixels, but the combined width and spacing
of the target must be 44 pixels. The SEO directives from Google, advise that
the interactive elements need to be at least 48 density pixels on width and height,
separated by 8 pixels of space or more.
Now you know more about the Target Size, I’ll
teach you a technique to create buttons that seem to be visually small, but with a larger touching
area. To do so, we need to create a fake button. How it works: First, we need
to create a transparent box, with the minimum size of 48×48. After that,
we position the smaller button inside it. In the HTML, this transparent box
is a button and the visual element will be just a tag without semantics
without CSS, such as div, svg or span. When building the prototype, make sure
to not overlap the transparent areas. The elements must be kept apart. For more information, access
the support material that we published on Medium. The
link is on the description. So? Did you like these tips? Tell me about it
in the comments! Thanks and see you next week! (background music).
