Getting To The Bottom Of Minimum WCAG-Conformant Interactive Element Size<\/h1>\nEric Bailey<\/address>\n 2024-07-19T13:00:00+00:00
\n 2024-07-24T15:45:53+00:00
\n <\/header>\n
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 compliance<\/strong> and to point out an approach for making successful and inclusive interactive experiences using ample target sizes.<\/p>\nMinimum Conformant Pixel Size<\/h2>\n
Getting right to it: When it comes to pure Web Content Accessibility Guidelines (WCAG) conformance, the bare minimum<\/strong> pixel size<\/strong><\/a> for an interactive, non-inline element is 24\u00d724 pixels<\/strong>. This is outlined in Success Criterion 2.5.8: Target Size (Minimum)<\/a>.<\/p>\n<\/p>\n <\/p>\n
<\/p>\n
<\/a>\n (Large preview<\/a>)
\n <\/figcaption><\/figure>\nSuccess Criterion 2.5.8 is 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 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>\nSC 2.5.8 is relatively new to WCAG, having been released as part of WCAG version 2.2<\/a>, which was published on October 5th, 2023. WCAG 2.2 is 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, 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>\nSC 2.5.5 calls for larger interactive elements sizes that are at least 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 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<\/p>\n <\/p>\n
<\/p>\n
<\/a>\n (Large preview<\/a>)
\n <\/figcaption><\/figure>\nSites that need to be fully 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\n
\n 2024-07-24T15:45:53+00:00
\n <\/header>\n
Minimum Conformant Pixel Size<\/h2>\n
Getting right to it: When it comes to pure Web Content Accessibility Guidelines (WCAG) conformance, the bare minimum<\/strong> pixel size<\/strong><\/a> for an interactive, non-inline element is 24\u00d724 pixels<\/strong>. This is outlined in Success Criterion 2.5.8: Target Size (Minimum)<\/a>.<\/p>\n <\/p>\n <\/a> Success Criterion 2.5.8 is 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 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 SC 2.5.8 is relatively new to WCAG, having been released as part of WCAG version 2.2<\/a>, which was published on October 5th, 2023. WCAG 2.2 is 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, 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 SC 2.5.5 calls for larger interactive elements sizes that are at least 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 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 <\/p>\n <\/a> Sites that need to be fully 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<\/p>\n
\n <\/figcaption><\/figure>\n<\/p>\n
\n <\/figcaption><\/figure>\n