|
WCAG 2.2, the new version of the Web Content Accessibility Guidelines, is due to be published this month (August 2023). But how does it differ from WCAG 2.1? I thought I’d dedicate this issue of Type E: to the topic, and focus on its one new Success Criterion that has relevance to those of us who create emails – Target Size.
Target Size (in WCAG 2.1)
Target Size currently exists within WCAG 2.1, as level AAA Success Criterion 2.5.5 Target Size.
Despite being a level AAA Success Criterion, which most organisations overlook, conforming to level AA Success Criteria at best, this one is really important.
It’s really important, because it gives us guidance when we’re creating buttons that are accessible – defining a minimum size of 44px x 44px for the ‘size of the target for pointer inputs’.
What this means is, when we’re creating buttons, we should ensure that their selectable area is no smaller than 44px x 44px. As such, an entire button should be selectable, not just its text.
To achieve this, apply padding around the <a> element of a button, as follows:
|
<a href="" target="_blank" style="font-family:Arial, sans-serif; font-size:18px; line-height:1.1em; font-weight:bold; color:#ffffff; text-decoration:none; text-align:center; padding:0.75em 1em; display:block;">Call to Action</a>
|
Target Size (in WCAG 2.2)
In WCAG 2.2, we see the introduction of another Target Size Success Criterion, Success Criterion 2.5.8 Target Size (Minimum), with Success Criterion 2.5.5 Target Size now becoming Success Criterion 2.5.5 Target Size (Enhanced).
It addresses the issue that occurs when two or more text links are placed too close to one another within a paragraph, where it’s all too easy, especially on a touch screen, for a recipient to select a link they didn’t want to select and send them to a landing page they didn’t want to visit.
This new Success Criterion requires text links to have a 24px x 24px bounding box around them (which in and of itself is a new feature) to avoid this occurring. Success Criterion 2.5.8 Target Size (Minimum) reads as follows:
Success Criterion 2.5.8 Target Size (Minimum)
(Level AA)
The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:
- Spacing: Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;
|
|
