Target Size and how it impacts SEO…

Written by: Marília Gabriele Suzart

Did you know that by neglecting the target size, in addition to harming the experience and accessibility, you are also losing approximately 2 SEO points?

WCAG and Google have different opinions on touch area accessibility, even if you use WCAG as a reference, you will still lose SEO points.

Did you know that? Come with me and I’ll explain the recommendations of WCAG and Google. Also, I’ll teach you a wonderful trick to implement the target size area while maintaining a minimalist and elegant look.

Now that I’ve drawn your attention to this article, before starting, I’d like to invite you to think about accessibility in addition to complying with legislation and SEO improvements.

Let’s implement accessibility for people?

When we design buttons, links and other clickable elements with a good touch area, we provide a better experience for all users, especially for people with motor disabilities, older people and people with Cognitive and Learning disabilities.

Did you notice that I highlighted “older people”? That was on purpose. There is a question that I ask myself every day before I start working and I would like you to reflect a little with me.

In 5 or 10 years, I will be able to use the platform I am designing today?

After all, disabilities are acquired throughout life and one day inevitably ALL of us will need accessibility, whether due to an accident, illness or just the natural aging process.

When we design interfaces to ONLY meet the requirements of robots and legislation, we forget about the most important thing: people! This undermines accessibility, creating a barrier for millions of people, including our future selves.

So, now that we’ve thought about it a little, let’s get started?

This article is the support material for our YouTube video about the Target Size:

Explaining the WCAG

WCAG, version 2.1, success criterion 2.5.5 Target Size (Level AAA): The size of the target for pointer inputs is at least 44 by 44 CSS pixels with some exceptions.

In WCAG version 2.2, which is in draft, we will have a new criterion related to the touch area, which can still be changed, but which currently looks like this:

WCAG, version 2.2 in draft, success criterion 2.5.8 Pointer Target Spacing (Level AA): For each target, there is an area with a width and height of at least 44 CSS pixels that includes it, and no other targets with some exceptions.

The following are two images with a brief explanation of this new rule that is in draft:

If the touch area is 44 pixels, no additional spacing is required.

The sum of the touch area + spacing must be a minimum of 44 pixels.

I recommend using Google’s recommendation, in the next topic I will explain why.

Explaining Google’s e SEO recommendation

To encourage the improvement of accessibility on the web, Google puts some accessibility issues as criteria for SEO. Thus, it can improve the position in searches for sites that are more accessible.

When validating a page with a small button or link, the auditing system reports the following:

Tap targets are not sized appropriately: Interactive elements like buttons and links should be large enough (48x48px), and have enough space around them, to be easy enough to tap without overlapping onto other elements. Read about Google Audit.

There’s a touch target size accessibility support page on Android, with a Design topic that says the following:

Consider making touch targets at least 48x48dp, separated by 8dp of space or more, to ensure balanced information density and usability. A touch target of 48x48dp results in a physical size of about 9mm, regardless of screen size. The recommended target size for touchscreen objects is 7–10mm.

Note that the unit of measurement is dp and not px, that is, during the implementation we need to take into account the screen density and implement what would be equivalent to 48 pixels for that device.

GAIA Recommendation — Web accessibility guide focused on aspects of autism

GAIA, G23 — Clickable appearance: Buttons, menus, form controls and other clickable elements should have a larger click or touch area to accommodate different motor skills of people with ASD and should feature a design that they can be clicked or pressed.

And now which rule to follow?

You can talk to your team and choose what works best for the scenario and project you are working on. However, be careful not to confuse people and complicate the implementation of accessibility!

As there are many rules and exceptions, it is common for people to get confused and resist implementing them. In addition, the work becomes more complex and increases the chances of making mistakes, especially when there are several teams working on the same product.

Make it simple! And the work of the entire team when implementing accessibility will be simpler.

WCAG simplified rule:

All clickable elements, for example buttons, links, text box, etc… Must have a minimum height and width of 44 pixels.

WCAG + Google’s SEO simplified rule:

All clickable elements, eg. buttons, links, text box, etc… Must have a minimum height and width of 48 pixels, separated by a margin of at least 8 pixels from other clickable elements.

In my projects I follow Google’s recommendation, because I know that the experience for users will be even better.

Implementation tricks

In the perception of some people who work as a Designer, a larger button can be aesthetically “ugly”.

It shouldn’t be necessary to argue that accessibility and experience (UX) are more important than this concept of “beauty”.

But luckily, there is a solution to make it affordable and keep the design minimalistic and visually “nice”. I’ll show you an example based on a project I’ve worked on:

A product card with 16-pixel padding and buttons that are 32 pixels high and 32 pixels wide.

Button that is visually 32px high and 32px wide

In the implementation, I removed the padding from the card. For the first block, I put the 16 pixels. For the block where the buttons were, I put only 8 pixels, the other 8 pixels were free to add a padding inside the button, increasing its touch area, as shown in the following example:

Transparent button that is 48px tall and 48px wide, with the 32px visual centered.

When making the prototype, we need to remember that 2 bodies do not occupy the same place in space! This transparent area cannot overlap the transparent area of other clickable elements. The following is an example that I presented to a team of volunteers from an NGO:

Radio button items too close together do not have the target size.

During prototyping, position the elements considering their size and spacing, as shown in the image below:

Radio button items with a height of 48 pixels and 8 pixels of margin between them.

Note to dev: When creating reusable clickable components, such as the button, you can put min-width: 3rem and min-height: 3rem. So, you will have one less worry in your routine.

If you liked this content, don’t forget to clap a lot and share with that person who also needs to learn this.

Thanks for reading. Hope this content is useful to you ☺