{"id":279,"date":"2024-07-19T13:00:00","date_gmt":"2024-07-19T13:00:00","guid":{"rendered":"https:\/\/fdswebdesign.com\/?p=279"},"modified":"2024-10-15T23:26:17","modified_gmt":"2024-10-15T23:26:17","slug":"getting-to-the-bottom-of-minimum-wcag-conformant-interactive-element-size","status":"publish","type":"post","link":"https:\/\/fdswebdesign.com\/index.php\/2024\/07\/19\/getting-to-the-bottom-of-minimum-wcag-conformant-interactive-element-size\/","title":{"rendered":"Getting To The Bottom Of Minimum WCAG-Conformant Interactive Element Size"},"content":{"rendered":"<p>              <title>Getting To The Bottom Of Minimum WCAG-Conformant Interactive Element Size<\/title><\/p>\n<article>\n<header>\n<h1>Getting To The Bottom Of Minimum WCAG-Conformant Interactive Element Size<\/h1>\n<address>Eric Bailey<\/address>\n<p>                  2024-07-19T13:00:00+00:00<br \/>\n                  2024-10-15T23:05:45+00:00<br \/>\n                <\/header>\n<p>There are many rumors and misconceptions about conforming to WCAG criteria for the minimum sizing of interactive elements. I\u2019d like to use this post to demystify <strong>what is needed for baseline compliance<\/strong> and to point out an approach for making successful and inclusive interactive experiences using ample target sizes.<\/p>\n<h2 id=\"minimum-conformant-pixel-size\">Minimum Conformant Pixel Size<\/h2>\n<p>Getting right to it: When it comes to pure Web Content Accessibility Guidelines (WCAG) conformance, <strong>the bare minimum<\/strong> <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/target-size-minimum.html#dfn-css-pixel\"><strong>pixel size<\/strong><\/a> <strong>for an interactive, non-inline element is 24\u00d724 pixels<\/strong>. This is outlined in <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/target-size-minimum.html\">Success Criterion 2.5.8: Target Size (Minimum)<\/a>.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/1-aa-compliant.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"316\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Two panels, each featuring a bright pink square. The first panel\u2019s square measures 16 pixels\u00d716 pixels, and its title reads, \u2018Not WCAG 2.2 AA Conformant\u2019. The second panel\u2019s square measures 24\u00d724 pixels, and its title reads, \u2018WCAG 2.2 AA Conformant.\u2019\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/1-aa-compliant.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/1-aa-compliant.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Success Criterion 2.5.8 is <strong>level AA<\/strong>, which is the most commonly used level for public, mass-consumed websites. This Success Criterion (or SC for short) is sometimes confused for <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/target-size-enhancedhttps:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/target-size-enhanced\">SC 2.5.5 Target Size (Enhanced)<\/a>, which is level AAA. The two are distinct and provide separate guidance for properly sizing interactive elements, even if they appear similar at first glance.<\/p>\n<p>SC 2.5.8 is relatively new to WCAG, having been released as <a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/new-in-22\/#258-target-size-minimum-aa\">part of WCAG version 2.2<\/a>, which was published on October 5th, 2023. WCAG 2.2 is <strong>the most current version of the standard<\/strong>, but this newer release date means that knowledge of its existence isn\u2019t as widespread as the older SC, especially outside of web accessibility circles. That said, <strong>WCAG 2.2 will remain the standard<\/strong> until WCAG 3.0 is released, something that is likely going to take 10\u201315 years or more to happen.<\/p>\n<p>SC 2.5.5 calls for larger interactive elements sizes that are at least <strong>44\u00d744 pixels<\/strong> (compared to the SC 2.5.8 requirement of 24\u00d724 pixels). At the same time, notice that SC 2.5.5 is <a href=\"https:\/\/tetralogical.com\/blog\/2021\/11\/26\/understanding-wcag-level-aaa\/\"><strong>level AAA<\/strong><\/a> (compared to SC 2.5.8, level AA) which is a level reserved for specialized support beyond level AA.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/2-aaa-compliant.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"316\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Two panels, each featuring a bright pink square. The first panel\u2019s square measures 24 pixels\u00d724 pixels, and its title reads, \u2018Not WCAG 2.2 AAA Conformant\u2019. The second panel\u2019s square measures 44\u00d744 pixels, and its title reads, \u2018WCAG 2.2 AAA Conformant.\u2019\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/2-aaa-compliant.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/2-aaa-compliant.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p><strong>Sites that need to be fully <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#conformance-reqs\">WCAG Level AAA conformant<\/a> are rare<\/strong>. Chances are that if you are making a website or web app, you\u2019ll only need to support level AA. Level AAA is often reserved for large or highly specialized institutions.<\/p>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Meet <strong><a data-instant href=\"\/printed-books\/image-optimization\/\">Image Optimization<\/a><\/strong>, Addy Osmani\u2019s new practical guide to optimizing and delivering <strong>high-quality images<\/strong> on the web. Everything in one single <strong>528-pages<\/strong> book.<\/p>\n<p><a data-instant href=\"https:\/\/www.smashingmagazine.com\/printed-books\/image-optimization\/\" class=\"btn btn--green btn--large\">Jump to table of contents&nbsp;\u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"https:\/\/www.smashingmagazine.com\/printed-books\/image-optimization\/\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img decoding=\"async\" loading=\"lazy\" class=\"feature-panel-image-img lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Feature Panel\" width=\"480\" height=\"697\" data-src=\"https:\/\/archive.smashing.media\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/87fd0cfa-692e-459c-b2f3-15209a1f6aa7\/image-optimization-shop-cover-opt.png\"><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h3 id=\"making-interactive-elements-larger-with-css-padding\">Making Interactive Elements Larger With CSS Padding<\/h3>\n<p>The family of <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/padding\"><code>padding<\/code>-related properties<\/a> in CSS can be used to extend the interactive area of an element to make it conformant. For example, declaring <code>padding: 4px;<\/code> on an element that measures 16\u00d716 pixels invisibly increases its bounding box to a total of 24\u00d724 pixels. This, in turn, means the interactive element satisfies SC 2.5.8.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/3-padding.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"316\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Two panels, each featuring a bright pink square with a thick, lighter pink outer border. The first panel\u2019s square measures 16 pixels\u00d716 pixels, and its outer border measures 4 pixels wide. Its title reads, \u2018WCAG 2.2 AA Conformant\u2019. The second panel\u2019s square measures 24\u00d724 pixels, and its outer border measures 10 pixels wide, and its title reads, \u2018WCAG 2.2 AAA Conformant.\u2019\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/3-padding.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      16 + 4  + 4 = 24. 24 + 10 + 10 = 44. (<a href=\"https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/3-padding.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>This is a good trick for making smaller interactive elements easier to click and tap. If you want more information about this sort of thing, I enthusiastically recommend <a href=\"https:\/\/ishadeed.com\/\">Ahmad Shadeed<\/a>\u2019s post, \u201c<a href=\"https:\/\/ishadeed.com\/article\/target-size\/\">Designing better target sizes<\/a>\u201d.<\/p>\n<p>I think it\u2019s also worth noting that <strong>CSS <code>margin<\/code> could also hypothetically be used to achieve level AA conformance<\/strong> since the SC includes a spacing exception:<\/p>\n<blockquote><p>The size of the <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/target-size-minimum.html#dfn-target\">target<\/a> for <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/target-size-minimum.html#dfn-pointer-input\">pointer inputs<\/a> is at least 24\u00d724 <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/target-size-minimum.html#dfn-css-pixel\">CSS pixels<\/a>, except where:<\/p>\n<p><strong>Spacing:<\/strong> Undersized targets (those less than 24\u00d724 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/target-size-minimum.html#dfn-minimum-bounding-box\">bounding box<\/a> of each, the circles do not intersect another target or the circle for another undersized target;<\/p>\n<p>[\u2026]<\/p><\/blockquote>\n<p>The difference here is that <strong>padding extends the interactive area, while margin does not<\/strong>. Through this lens, you\u2019ll want to honor the spirit of the success criterion because <a href=\"https:\/\/adrianroselli.com\/2023\/12\/2-5-8-adversarial-conformance.html#Adversarial\">partial conformance is adversarial conformance<\/a>. At the end of the day, we want to help people successfully click or tap interactive elements, such as buttons.<\/p>\n<h3 id=\"what-about-inline-interactive-elements\">What About Inline Interactive Elements?<\/h3>\n<p>We tend to think of targets in terms of block elements &mdash; elements that are displayed on their own line, such as a button at the end of a call-to-action. However, interactive elements can be inline elements as well. Think of links in a paragraph of text.<\/p>\n<p>Inline interactive elements, such as text links in paragraphs, <strong>do not<\/strong> need to meet the 24\u00d724 pixel minimum requirement. Just as <code>margin<\/code> is an exception in <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/target-size-minimum.html#exceptions\">SC 2.5.8: Target Size (Minimum)<\/a>, so are inline elements with an interactive target:<\/p>\n<blockquote><p>The size of the <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/target-size-minimum.html#dfn-target\">target<\/a> for <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/target-size-minimum.html#dfn-pointer-input\">pointer inputs<\/a> is at least 24\u00d724 <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/target-size-minimum.html#dfn-css-pixel\">CSS pixels<\/a>, except where:<\/p>\n<p>[\u2026]<\/p>\n<p><strong>Inline:<\/strong> The target is in a sentence or its size is otherwise constrained\u00d7the line-height of non-target text;<\/p>\n<p>[\u2026]<\/p><\/blockquote>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/4-inline.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"316\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Two panels, each titled \u2018WCAG 2.2 Conformant\u2019. The first panel shows a wireframe illustration of an underlined link placed in a paragraph of text. The second panel shows a wireframe illustration of a form with two inputs and a submit button. The submit button and link are colored blue to suggest they both are related in terms of compliance.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/4-inline.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/4-inline.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h2 id=\"apple-and-android-the-source-of-more-confusion\">Apple And Android: The Source Of More Confusion<\/h2>\n<p>If the differences between interactive elements that are inline and block are still confusing, that\u2019s probably because the whole situation is even further muddied by third-party human interface guidelines requiring interactive sizes closer to what the level AAA Success Criterion 2.5.5 Target Size (Enhanced) demands.<\/p>\n<p>For example, Apple\u2019s \u201c<a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/\">Human Interface Guidelines<\/a>\u201d and Google\u2019s \u201c<a href=\"https:\/\/m3.material.io\">Material Design<\/a>\u201d are guidelines for how to design interfaces for their respective platforms. Apple\u2019s guidelines recommend that <a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/accessibility#Buttons-and-controls\">interactive elements are 44\u00d744 points<\/a>, whereas Google\u2019s guides stipulate target sizes that are <a href=\"https:\/\/m3.material.io\/foundations\/designing\/structure#b421e522-35a6-47cd-bfc6-bf94cbacf7bb\">at least 48\u00d748 using density-independent pixels<\/a>.<\/p>\n<p>These may satisfy Apple and Google requirements for designing interfaces, but <em>are they WCAG-conformant<\/em> Apple and Google &mdash; not to mention any other organization with UI guidelines &mdash; can specify whatever interface requirements they want, but <em>are they copasetic with WCAG SC 2.5.5 and SC 2.5.8?<\/em><\/p>\n<p>It\u2019s important to ask this question because there is a hierarchy when it comes to accessibility compliance, and it contains legal levels:<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/5-the-law.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"658\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A vertically-oriented flowchart. There are six layers. The topmost layer has one node labeled \u2018WCAG\u2019. The second layer down has one node labeled \u2018International law\u2019. The third layer down has two nodes. The first node is labeled, \u2018Governments: United States, EU, etc.\u2019 The second node is labeled, \u2018Companies: Apple, Google, etc.\u2019 The fourth layer down is labeled \u2018Human interface guidelines\u2019. The fifth layer down is labeled \u2018Design systems\u2019. The sixth and final layer has four nodes. The nodes are labeled, \u2018Websites\u2019, \u2018Webapps\u2019, \u2018Apps\u2019, and \u2018Kiosks\u2019. Arrows flow downward from each node to show the parent\/child hierarchy.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/5-the-law.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/5-the-law.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Human interface guidelines often inform design systems, which, in turn, influence the sites and apps that are built by authors like us. But they\u2019re not the \u201cauthority\u201d on accessibility compliance. Notice how everything is (and ought to be) influenced by WCAG at the very top of the chain.<\/p>\n<p>Even if these third-party interface guidelines conform to SC 2.5.5 and 2.5.8, it\u2019s still tough to tell when they are expressed in \u201c<a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/images#Resolution\">points<\/a>\u201d and \u201c<a href=\"https:\/\/developer.android.com\/design\/ui\/mobile\/guides\/layout-and-content\/grids-and-units\">density independent pixels<\/a>\u201d which aren\u2019t pixels, but often get conflated as such. I\u2019d advise not getting too deep into researching <a href=\"https:\/\/www.oddbird.net\/2024\/07\/09\/zoomies\/#what%E2%80%99s-a-(css)-pixel%3F\">what a pixel truly is<\/a>. Trust me when I say it\u2019s a road you don\u2019t want to go down. But whatever the case, the inconsistent use of unit sizes exacerbates the issue.<\/p>\n<h2 id=\"can-t-we-just-use-a-media-query\">Can\u2019t We Just Use A Media Query?<\/h2>\n<p>I\u2019ve also observed some developers attempting to use <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@media\/pointer\">the <code>pointer<\/code> media feature<\/a> as a clever \u201ctrick\u201d to <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@media\/pointer#coarse\">detect when a touchscreen is present<\/a>, then conditionally adjust an interactive element\u2019s size as a way to get around the WCAG requirement.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/6-media-query.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"406\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Two panels, with an overall title of, \u2018Don\u2019t do this\u2019. Each panel has a visual, followed\u00d7CSS code. The first panel\u2019s visual is a small pink square. The second panel\u2019s visual is a larger pink square. The CSS code shows how using an any-pointer: coarse media query can turn an 18-pixel wide\u00d718 pixel tall button into a 44-pixel wide\u00d744 pixel tall button.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/6-media-query.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/6-media-query.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>After all, mouse cursors are for fine movements, and touchscreens are for more broad gestures, right? Not always. The thing is, <strong>devices are multimodal<\/strong>. They can support <a href=\"https:\/\/hacks.mozilla.org\/2013\/04\/detecting-touch-its-the-why-not-the-how\/\">many different kinds of input<\/a> and don\u2019t require a special switch to flip or button to press to do so. A straightforward example of this is switching between a trackpad and a keyboard while you browse the web. A less considered example is a device with a touchscreen that also supports a trackpad, keyboard, mouse, and voice input.<\/p>\n<p>You might think that the combination of trackpad, keyboard, mouse, and voice inputs sounds like some sort of absurd, obscure Frankencomputer, but what I just described is a <a href=\"https:\/\/www.microsoft.com\/en-us\/surface\/devices\/surface-laptop-7th-edition\">Microsoft Surface laptop<\/a>, and guess what? They\u2019re <a href=\"https:\/\/www.windowscentral.com\/surface-windows-fy22-q2-revenue-report\">pretty popular<\/a>.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/7-microsoft-surface-laptop.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"477\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A silver Microsoft Surface laptop. It is opened, posed towards the viewer to show its keyboard and trackpad, as well as a full-color display featuring an abstract, prismatic whorl of paper-thin organic shapes. The Windows 11 taskbar is also shown.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/7-microsoft-surface-laptop.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/7-microsoft-surface-laptop.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"responsive-design-vs-inclusive-design\">Responsive Design Vs. Inclusive Design<\/h2>\n<p>There is a difference between the two, even though they are often used interchangeably. Let\u2019s delineate the two as clearly as possible:<\/p>\n<ul>\n<li>Responsive Design is about designing for an <strong>unknown device<\/strong>.<\/li>\n<li>Inclusive Design is about designing for an <strong>unknown user<\/strong>.<\/li>\n<\/ul>\n<p>The other end of this consideration is that people with <a href=\"https:\/\/www.w3.org\/WAI\/people-use-web\/abilities-barriers\/#physical\">motor control conditions<\/a> &mdash; like hand tremors or arthritis &mdash; can and do use mice inputs. This means that fine input actions may be painful and difficult, yet ultimately still possible to perform.<\/p>\n<p>People also use more precise input mechanisms for touchscreens all the time, including both <a href=\"https:\/\/www.apple.com\/apple-pencil\/\">official accessories<\/a> and <a href=\"https:\/\/www.amazon.com\/s?k=stylus+pen+for+touchscreen\">aftermarket devices<\/a>. In other words, some devices designed to accommodate coarse input can also be used for <a href=\"https:\/\/procreate.com\/\">fine detail work<\/a>.<\/p>\n<p>I\u2019d be remiss if I didn\u2019t also point out that people plug mice and keyboards into smartphones. We cannot automatically say that they only support coarse pointers:<\/p>\n<figure class=\"video-embed-container\">\n<div class=\"video-embed-container--wrapper\"><\/div>\n<\/figure>\n<p>My point is that a <strong>mode-based approach to inclusive design is a trap<\/strong>. This isn\u2019t even about <a href=\"https:\/\/www.linkedin.com\/pulse\/what-world-view-tap-asymmetry-nora-nishia-burtschi\">view\u2013tap asymmetry<\/a>. Creating entire alternate experiences based on assumed input mode reinforces an ugly \u201cus versus them\u201d mindset. It\u2019s also far more work to set up, maintain, and educate others.<\/p>\n<p>It\u2019s better to proactively accommodate an unknown number of unknown people using an unknown suite of devices in unknown ways by <a href=\"https:\/\/ericwbailey.website\/published\/contrast-color-is-a-good-thing-but-also-solving-the-problem-at-the-wrong-layer\/#further-issues\"><strong>providing an inclusive experience by default<\/strong><\/a>. Doing so has a list of benefits:<\/p>\n<ul>\n<li>More proactively accommodating,<\/li>\n<li>Less effort to create,<\/li>\n<li>Less effort to maintain,<\/li>\n<li>Less data to download, and<\/li>\n<li>Less compliance risk.<\/li>\n<\/ul>\n<p>After all, <a href=\"https:\/\/news.mit.edu\/2024\/mouth-based-touchpad-augmental-0605\">that tap input might be coming from a tongue<\/a>, and that click event might be someone <a href=\"https:\/\/thoughtbot.com\/blog\/an-introduction-to-macos-head-pointer\">raising their eyebrows<\/a>.<\/p>\n<h2 id=\"wcag-is-the-floor-not-the-ceiling\">WCAG Is The Floor, Not The Ceiling<\/h2>\n<p>A WCAG-conformant 24\u00d724 minimum pixel size requirement for interactive elements is <strong>our industry\u2019s best understanding<\/strong> of what can accommodate most access needs distributed across a global population accessing an unknown amount of content dealing with unknown topics in unknown ways under unknown circumstances.<\/p>\n<p>The load-bearing word in that previous sentence is <em>minimum<\/em>. The guidance &mdash; and the pixel size it mandates &mdash; is likely a balancing act between:<\/p>\n<ol>\n<li>Setting something up that is functional enough while also<\/li>\n<li>Avoiding a standard that would be impossible to broadly achieve (hence the SC 2.5.5 level AAA rating).<\/li>\n<\/ol>\n<p>Even the SC itself <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/target-size-minimum.html#intent\">acknowledges this potential limitation<\/a>:<\/p>\n<blockquote><p>\u201cThis Success Criterion defines a minimum size and, if this can&#8217;t be met, a minimum spacing. It is still possible to have very small and difficult-to-activate targets and meet the requirements of this Success Criterion.\u201d<\/p><\/blockquote>\n<p>Larger interactive areas can be a good thing to strive for. This is to say <strong>a minimum of approximately 40 pixels may be beneficial for individuals who struggle with the smaller yet still WCAG-conformant size<\/strong>.<\/p>\n<h2 id=\"interactive-area-sizing-is-as-much-an-art-as-it-is-a-science\">Interactive Area Sizing Is As Much An Art As It Is A Science<\/h2>\n<p>We should also <strong>be careful not to overcorrect<\/strong> by dropping in gigantic interactive elements in all of our work. If an interactive area is <em>too<\/em> large, it risks being activated by accident. This is important to note when an interactive element is placed in close proximity to other interactive elements and even more important to consider when activating those elements can result in irrevocable consequences.<\/p>\n<p>There is also a phenomenon where elements, if large enough, are not interpreted or recognized as being interactive. Consequently, users may inadvertently miss them, despite large sizing.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/8-too-large-touch-target.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"550\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A simplified wireframe illustration of a wide viewport website. There are four large colored blocks that take up the bulk of the main content area, and it is unclear if they are content placeholders or intended to be interactive items.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/8-too-large-touch-target.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      What on this page is clickable? (<a href=\"https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/8-too-large-touch-target.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"context-is-king\">Context Is King<\/h3>\n<p>Conformant and successful interactive areas &mdash; both large and small &mdash; require <strong>knowing the ultimate goals of your website or web app<\/strong>. When you arm yourself with this context, you are empowered to make informed decisions about the kinds of people <em>who<\/em> use your service, <em>why<\/em> they use the service, and <em>how<\/em> you can accommodate them.<\/p>\n<p>For example, the <a href=\"https:\/\/www.nngroup.com\/articles\/touch-target-size\/#toc-when-bigger-is-better-4\">Glow Baby app uses larger interactive elements<\/a> because it knows the user is likely holding an adorable, albeit squirmy and fussy, baby while using the application. This allows Glow Baby to emphasize the interactive targets in the interface to accommodate parents who have their hands full.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/9-glowbaby-mobileapp-nursingtimer.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"808\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Two screenshots placed side\u00d7side. It shows two timers, one for the left breast and one for the right, demonstrating how the timers can be activated independently of each other. The UI is minimal, and all interactive items, including the timers, are large and easy to distinguish from each other.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/9-glowbaby-mobileapp-nursingtimer.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Source: \u201cTouch Targets on Touchscreens\u201d by Neilsen Norman Group. (<a href=\"https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/9-glowbaby-mobileapp-nursingtimer.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>In the same vein, <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/target-size-minimum.html#exceptions\">SC SC 2.5.8 acknowledges that smaller touch targets<\/a> &mdash; such as those used in map apps &mdash; <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/target-size-minimum.html#exceptions\">may contextually be exempt<\/a>:<\/p>\n<blockquote><p>For example, in digital maps, the position of pins is analogous to the position of places shown on the map. If there are many pins close together, the spacing between pins and neighboring pins will often be below 24 CSS pixels. It is essential to show the pins at the correct map location; therefore, the Essential exception applies.<\/p>\n<p>[\u2026]<\/p>\n<p>When the &#8220;Essential&#8221; exception is applicable, authors are strongly encouraged to provide equivalent functionality through alternative means to the extent practical.<\/p><\/blockquote>\n<p>Note that <strong>this exemption language is not carte blanche to make your own work an exception to the rule<\/strong>. It is more of a mechanism, and an acknowledgment that broadly applied rules may have exceptions that are worth thinking through and documenting for future reference.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"further-considerations\">Further Considerations<\/h2>\n<p>We also want to consider the larger context of the device itself as well as the environment the device will be used in.<\/p>\n<p><a href=\"https:\/\/www.nngroup.com\/articles\/very-large-touchscreen-ux-design\/\">Larger, more fixed position touchscreens compel larger interactive areas<\/a>. Smaller devices that are moved around in space a lot (e.g., smartwatches) may benefit from alternate input mechanisms such as voice commands.<\/p>\n<p>What about people who are driving in a car? People in this context probably ought to be provided straightforward, simple interactions that are facilitated via large interactive areas to prevent them from taking their eyes off the road. The same could also be said for high-stress environments like hospitals and <a href=\"https:\/\/www.24a11y.com\/2017\/convince-company-tames-dinosaurs-design-inclusively\/\">oil rigs<\/a>.<\/p>\n<p>Similarly, <a href=\"https:\/\/www.smashingmagazine.com\/2024\/02\/practical-guide-design-children\/\">devices and apps that are designed for children<\/a> may require interactive areas that are larger than WCAG requirements for interactive areas. So would experiences aimed at older demographics, where age-derived vision and motor control disability factors tend to be more present.<\/p>\n<p>Minimum conformant interactive area experiences may also make sense in their own contexts. Data-rich, information-dense experiences like <a href=\"https:\/\/www.bloomberg.com\/professional\/products\/bloomberg-terminal\/\">the Bloomberg terminal<\/a> come to mind here.<\/p>\n<h2 id=\"design-systems-are-also-worth-noting\">Design Systems Are Also Worth Noting<\/h2>\n<p>While you can control what components you include in a <a href=\"https:\/\/www.figma.com\/blog\/design-systems-101-what-is-a-design-system\/\">design system<\/a>, you cannot control where and how they\u2019ll be used by those who adopt and use that design system. Because of this, I suggest <strong>defensively baking accessible defaults into your design systems<\/strong> because they can go a long way toward incorporating accessible practices when they\u2019re integrated right out of the box.<\/p>\n<p>One option worth consideration is <strong>providing an accessible range of choices<\/strong>. Components, like buttons, can have size variants (e.g., small, medium, and large), and you can provide a minimally conformant interactive target on the smallest variant and then offer larger, equally conformant versions.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/10-design-system-variants.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"300\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A panel showing three button component variants. The panel\u2019s title reads, \u2018WCAG 2.2 AA Conformant\u2019. The first button component variant measures 24 pixels tall and is labeled \u2018Variant: Small\u2019. The second button component variant measures 36 pixels tall and is labeled \u2018Variant: Medium\u2019. The third button component variant measures 58 pixels tall and is labeled, \u2018Variant: Large\u2019.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/10-design-system-variants.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/10-design-system-variants.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h2 id=\"so-how-do-we-know-when-we-re-good\">So, How Do We Know When We\u2019re Good?<\/h2>\n<p>There is no magic number or formula to get you that perfect Goldilocks \u201cnot too small, not too large, but just right\u201d interactive area size. It requires knowledge of what the people who want to use your service want, and how they go about getting it.<\/p>\n<p>The best way to learn that? <strong>Ask people<\/strong>.<\/p>\n<p>Accessibility research includes more than just asking people who use screen readers what they think. It\u2019s also a lot easier to conduct than you might think! For example, prototypes are a great way to quickly and inexpensively evaluate and de-risk your ideas before committing to writing production code. \u201c<a href=\"https:\/\/www.smashingmagazine.com\/2024\/04\/conducting-accessibility-research-inaccessible-ecosystem\/\">Conducting Accessibility Research In An Inaccessible Ecosystem<\/a>\u201d by <a href=\"https:\/\/mawconsultingllc.com\/\">Dr. Michele A. Williams<\/a> is chock full of tips, strategies, and resources you can use to help you get started with accessibility research.<\/p>\n<h2 id=\"wrapping-up\">Wrapping Up<\/h2>\n<p>The bottom line is that<\/p>\n<blockquote class=\"pull-quote\">\n<p>\n    <a class=\"pull-quote__link\" aria-label=\"Share on Twitter\" href=\"https:\/\/twitter.com\/share?text=%0a%e2%80%9cCompliant%e2%80%9d%20does%20not%20always%20equate%20to%20%e2%80%9cusable.%e2%80%9d%20But%20compliance%20does%20help%20set%20baseline%20requirements%20that%20benefit%20everyone.%0a&amp;url=https:\/\/smashingmagazine.com%2f2024%2f07%2fgetting-bottom-minimum-wcag-conformant-interactive-element-size%2f\"><\/p>\n<p>\u201cCompliant\u201d does not always equate to \u201cusable.\u201d But compliance does help set baseline requirements that benefit everyone.<\/p>\n<p>    <\/a>\n  <\/p>\n<div class=\"pull-quote__quotation\">\n<div class=\"pull-quote__bg\">\n      <span class=\"pull-quote__symbol\">\u201c<\/span><\/div>\n<\/p><\/div>\n<\/blockquote>\n<p>To sum things up:<\/p>\n<ul>\n<li>24\u00d724 pixels is the bare minimum in terms of WCAG conformance.<\/li>\n<li>Inline interactive elements, such as links placed in paragraphs, are exempt.<\/li>\n<li>44\u00d744 pixels is for WCAG level AAA support, and level AAA is reserved for specialized experiences.<\/li>\n<li>Human interface guidelines by the likes of Apple, Android, and other companies must ultimately confirm to WCAG.<\/li>\n<li>Devices are multimodal and can use different kinds of input concurrently.<\/li>\n<li>Baking sensible accessible defaults into design systems can go a long way to ensuring widespread compliance.<\/li>\n<li>Larger interactive element sizes may be helpful in many situations, but might not be recognized as an interactive element if they are too large.<\/li>\n<li>User research can help you learn about your audience.<\/li>\n<\/ul>\n<p>And, perhaps most importantly, all of this is about people and enabling them to get what they need.<\/p>\n<h3 id=\"further-reading\">Further Reading<\/h3>\n<ul>\n<li><a href=\"https:\/\/tetralogical.com\/blog\/2022\/12\/20\/foundations-target-size\/\">Foundations: target sizes<\/a> (TetraLogical)<\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/perspective-videos\/controls\/\">Large Links, Buttons, and Controls<\/a> (Web Accessibility Initiative)<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/interaction-media-features-and-their-potential-for-incorrect-assumptions\/\">Interaction Media Features and Their Potential (for Incorrect Assumptions)<\/a> (CSS-Tricks)<\/li>\n<li><a href=\"https:\/\/tetralogical.com\/blog\/2023\/04\/21\/meeting-wcag-level-aaa\/#increased-text-color-contrast\">Meeting WCAG Level AAA<\/a> (TetraLogical)<\/li>\n<\/ul>\n<div class=\"signature\">\n  <img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" class=\"lazyload\" data-src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\"><br \/>\n  <span>(gg, yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Getting To The Bottom Of Minimum WCAG-Conformant Interactive Element Size Getting To The Bottom Of Minimum WCAG-Conformant Interactive Element Size Eric Bailey 2024-07-19T13:00:00+00:00 2024-10-15T23:05:45+00:00 There are many rumors and misconceptions about conforming to WCAG criteria for the minimum sizing of interactive elements. I\u2019d like to use this post to demystify what is needed for baseline&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":["post-279","post","type-post","status-publish","format-standard","hentry","category-accessibility"],"_links":{"self":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts\/279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/comments?post=279"}],"version-history":[{"count":1,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts\/279\/revisions"}],"predecessor-version":[{"id":280,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts\/279\/revisions\/280"}],"wp:attachment":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/media?parent=279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/categories?post=279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/tags?post=279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}