davidbgk
/
larlet-fr-david-cache
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
325 Commits
1 Branch
Tree: 8be7e09f30
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '8be7e09f30'
${ noResults }
larlet-fr-david-cache/cache/2024/c98206d38897264005bcd5b453d.../index.html

index.html 182KB
Raw Blame History

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang="fr">

  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset="utf-8">

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name="viewport" content="width=device-width,initial-scale=1">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Designing better target sizes (archive) — David Larlet</title>

  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">

  14. <!-- That good ol' feed, subscribe :). -->

  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">

  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">

  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">

  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">

  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">

  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">

  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">

  23. <meta name="msapplication-TileColor" content="#f7f7f7">

  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">

  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">

  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">

  27. <!-- Is that even respected? Retrospectively? What a shAItshow…

  28.   https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->

  29. <meta name="robots" content="noai, noimageai">

  30. <!-- Documented, feel free to shoot an email. -->

  31. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">

  32. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->

  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>

  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>

  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>

  36. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>

  37. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>

  38. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>

  39. <script>

  40.     function toggleTheme(themeName) {

  41.         document.documentElement.classList.toggle(

  42.             'forced-dark',

  43.             themeName === 'dark'

  44.         )

  45.         document.documentElement.classList.toggle(

  46.             'forced-light',

  47.             themeName === 'light'

  48.         )

  49.     }

  50.     const selectedTheme = localStorage.getItem('theme')

  51.     if (selectedTheme !== 'undefined') {

  52.         toggleTheme(selectedTheme)

  53.     }

  54. </script>

  55. 

  56.   <meta name="robots" content="noindex, nofollow">

  57.   <meta content="origin-when-cross-origin" name="referrer">

  58.   <!-- Canonical URL for SEO purposes -->

  59.   <link rel="canonical" href="https://ishadeed.com/article/target-size">

  60. 

  61. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">

  62. 

  63. 

  64. <article>

  65.   <header>

  66.     <h1>Designing better target sizes</h1>

  67.   </header>

  68.   <nav>

  69.     <p class="center">

  70.       <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">

  71.         <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>

  72.       </svg> Accueil</a> •

  73.       <a href="https://ishadeed.com/article/target-size" title="Lien vers le contenu original">Source originale</a>

  74.       <br>

  75.       Mis en cache le 2024-01-10

  76.     </p>

  77.   </nav>

  78.   <hr>

  79.   <h2 id="intro">Intro</h2>

  80. <p>As a user, you need to interact with clickable UI elements like buttons, links, cards, and more.</p>

  81. <p>If an action has a small target size, it will be harder for the user to click, or they might click an adjacent action element by mistake.</p>

  82. <p>Let’s take a look at the following example.</p>

  83. <p><astro-island uid="1rP0JF" prefix="r1" component-url="https://ishadeed.com/_astro/Demo1.8eWum0Xi.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true]}' ssr="" client="visible" opts='{"name":"Demo1","value":true}' await-children=""><div><p>Try to hover on an item ☝️ </p></div></astro-island></p>

  84. <p>Notice the small target size? We can address this by increasing the target size.</p>

  85. <p>When the target size is increased, it becomes easier for a user to click and interact with an element.</p>

  86. <p><astro-island uid="3MEby" prefix="r2" component-url="https://ishadeed.com/_astro/Demo1.8eWum0Xi.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"enhanced":[0,true]}' ssr="" client="visible" opts='{"name":"Demo1","value":true}' await-children=""></astro-island></p>

  87. <p><strong>Hover over the menu and toggle the checkbox</strong> to observe the difference between small and large target sizes.</p>

  88. <h2 id="what-is-a-target-size">What is a target size?</h2>

  89. <p><astro-island uid="2131rO" prefix="r71" component-url="https://ishadeed.com/_astro/Quote.7SNL3D4W.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"The specific region within a user interface element where a user clicks, touches, or taps to trigger an action."]}' ssr="" client="visible" opts='{"name":"Quote","value":true}' await-children=""><blockquote class="_quote_1a1hc_1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 32 33"><g><rect y="0.527" fill="#D9BAF7" rx="16"></rect><g stroke="#7D45A7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M16.25 9.527c-3.5 0-5.25 2.75-5.25 5.25 0 4 3 4.5 3 6v2.25a1 1 0 001 1h2.5a1 1 0 001-1v-2.25c0-1.5 3-2 3-6 0-2.5-1.75-5.25-5.25-5.25z"></path><path d="M14.25 21.527h4"></path></g></g></svg><div><p>The specific region within a user interface element where a user clicks, touches, or taps to trigger an action.</p></div></blockquote></astro-island></p>

  90. <p>Today, users interact with a UI in various ways; it’s not solely about clicking an element with a mouse.</p>

  91. <p>Below is a table illustrating how multiple input types can function on the same device.</p>

  92. <p><picture> <source srcset="https://ishadeed.com/_astro/input-types.TICJ3qfC_26stTG.png" type="image/png"><source srcset="https://ishadeed.com/_astro/input-types.TICJ3qfC_ZHx551.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/input-types.TICJ3qfC_26stTG.png" alt="A visual that shows the different input types for mobile, tablet, and desktop" loading="lazy" decoding="async"> </source></source></picture></p>

  93. <p>That thing caused to have many names for the topic:</p>

  94. <ul>

  95. <li>Apple calls it a <strong>hit target</strong></li>

  96. <li>Google Material calls it a <strong>Touch target</strong></li>

  97. <li>WAI call it a <strong>target size</strong></li>

  98. <li>Google LightSpeed test call it a <strong>Tap target</strong></li>

  99. <li><strong>Clickable area</strong>: used in the design community</li>

  100. </ul>

  101. <p>When talking about this, it’s important to know the context. For example, <strong>on mobile it’s the touch or tap</strong>, but on <strong>a device with a mouse it’s the click target</strong>.</p>

  102. <p>Here is an example of that.</p>

  103. <p><astro-island uid="Z14dVCp" prefix="r3" component-url="https://ishadeed.com/_astro/DemoContext.riEHUkJo.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"DemoContext","value":true}' await-children=""><div><div class="example-wrapper center"><div class="demo-context"><div><svg viewbox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.5"><path d="M12.3484 12.808C12.3484 14.675 15.1484 14.675 15.1484 12.808C15.1484 10.941 12.3484 10.941 12.3484 12.808Z" fill="black"></path><path d="M17.8914 12.808C17.8914 14.675 20.6914 14.675 20.6914 12.808C20.6914 10.941 17.8914 10.941 17.8914 12.808Z" fill="black"></path><path d="M6.94414 12.808C6.94414 14.675 9.74414 14.675 9.74414 12.808C9.74414 10.941 6.94414 10.941 6.94414 12.808Z" fill="black"></path><path d="M9.51938 3.20386H18.5079C23.6037 3.20386 27.7754 7.34814 27.7754 12.4724C27.7754 17.5967 23.6311 21.741 18.5068 21.741H16.1826L9.26688 26.8653L9.26797 21.7127C4.28369 21.5727 0.252249 17.4841 0.252249 12.4441C0.251156 7.34842 4.42369 3.20414 9.51969 3.20414L9.51938 3.20386ZM9.51938 20.4239H10.5836V24.2596L15.735 20.4239H18.5066C22.9023 20.4239 26.458 16.8681 26.458 12.4724C26.458 8.0767 22.9023 4.52098 18.5066 4.52098L9.51916 4.51988C5.12344 4.51988 1.56771 8.0756 1.56771 12.4713C1.56771 16.8682 5.12366 20.4239 9.51938 20.4239Z" fill="black"></path></g></svg><p>I checked the order page on my <span>phone</span> and tried to <span>tap</span> the order button but it’s not responding.</p></div></div></div></div></astro-island></p>

  104. <p>For clarity purposes, I will refer to the concept as target size for the rest of the guide, even though I wrote about it and called it <a href="https://ishadeed.com/article/clickable-area/">clickable area</a> years ago.</p>

  105. <h2 id="inclusive-target-size">Inclusive target size</h2>

  106. <h3 id="minimum-target-size">Minimum target size</h3>

  107. <p>According to the <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html">WCAG 2.5.5</a> guidelines, the target size must at least be 24 by 24 CSS pixels. I want to emphasize that this is about the target size, not the icon size.</p>

  108. <p>Let’s take the following example. We have a mobile menu. The size of the icon is 24 by 24 pixels.</p>

  109. <p><picture> <source srcset="https://ishadeed.com/_astro/min-target-size-1.bf6twW3i_1qhhM0.png" type="image/png"><source srcset="https://ishadeed.com/_astro/min-target-size-1.bf6twW3i_ihIre.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/min-target-size-1.bf6twW3i_1qhhM0.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  110. <p>However, the target size is 44 by 44 pixels. This is the area where the

  111. user can hover or tap.</p>

  112. <p>The recommended size differs from one platform to another. For example, Material for Android recommends a 48 by 48 pixels target size.</p>

  113. <p>As per the <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">WCAG 2.5.8</a>, for a target size to pass, it should have a minimum of 24 by 24-pixel target size and it shouldn’t overlap with other targets.</p>

  114. <p><picture> <source srcset="https://ishadeed.com/_astro/min-target-size-2.bCoimqde_Z2staXt.png" type="image/png"><source srcset="https://ishadeed.com/_astro/min-target-size-2.bCoimqde_1tIouG.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/min-target-size-2.bCoimqde_Z2staXt.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  115. <p>Notice when the target size is less than 24 by 24 pixels, the circles overlap.

  116. The target size failed. This is as per the WCAG 2.2 guidelines.</p>

  117. <figure><picture> <source srcset="https://ishadeed.com/_astro/min-target-size-3.6qqxqgwd_Z17Ni1N.png" type="image/png"><source srcset="https://ishadeed.com/_astro/min-target-size-3.6qqxqgwd_Z2fMQmz.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/min-target-size-3.6qqxqgwd_Z17Ni1N.png" alt="" loading="lazy" decoding="async"> </source></source></picture> <figcaption><p>Left: the actions compared to the screen size. Right: the actions

  118. compared to my thumb finger.</p></figcaption></figure>

  119. <figure><picture> <source srcset="https://ishadeed.com/_astro/min-target-size-4.mBikg9wL_ZbVCKT.png" type="image/png"><source srcset="https://ishadeed.com/_astro/min-target-size-4.mBikg9wL_Z1jVc6F.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/min-target-size-4.mBikg9wL_ZbVCKT.png" alt="" loading="lazy" decoding="async"> </source></source></picture> <figcaption><p>A side view of how my thumb covers 2-3 icons at a time.</p></figcaption></figure>

  120. <p>My recommendation is to have a target with a minimum size of 44 by 44 pixels, at least. This is per the WCAG 2.5.5.</p>

  121. <p>As per <a href="https://developers.google.com/cars/design/android-auto/design-system/sizing">Google Design for Driving</a> guidelines, the minimum touch target size is 76dp * 76dp.</p>

  122. <p>While driving a car, you have a very short time to tap something, so it should be large enough. This feels related to Fitt’s Law (below), where the size of a target should be larger if the time to tap is short.</p>

  123. <figure><picture> <source srcset="https://ishadeed.com/_astro/target-size-driving.4vvHpECm_1md4rh.png" type="image/png"><source srcset="https://ishadeed.com/_astro/target-size-driving.4vvHpECm_Z2ou8p8.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/target-size-driving.4vvHpECm_1md4rh.png" alt="" loading="lazy" decoding="async"> </source></source></picture> <figcaption><p>Android Auto UI that shows the target sizes.

  124. <a href="https://www.figma.com/community/file/966820396083110735">Source</a></p></figcaption></figure>

  125. <p>It’s beneficial to have specific rules, but it doesn’t mean they should be followed blindly. It’s crucial to consistently test the UI targets.</p>

  126. <h3 id="applying-fitts-law">Applying Fitt’s Law</h3>

  127. <p><astro-island uid="175nIu" prefix="r72" component-url="https://ishadeed.com/_astro/Quote.7SNL3D4W.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{&quot;content&quot;:[0,&quot;It's a principle that says it's faster to click or touch bigger objects that are closer to you.&quot;]}" ssr="" client="visible" opts='{"name":"Quote","value":true}' await-children=""><blockquote class="_quote_1a1hc_1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 32 33"><g><rect y="0.527" fill="#D9BAF7" rx="16"></rect><g stroke="#7D45A7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M16.25 9.527c-3.5 0-5.25 2.75-5.25 5.25 0 4 3 4.5 3 6v2.25a1 1 0 001 1h2.5a1 1 0 001-1v-2.25c0-1.5 3-2 3-6 0-2.5-1.75-5.25-5.25-5.25z"></path><path d="M14.25 21.527h4"></path></g></g></svg><div><p>It's a principle that says it's faster to click or touch bigger objects that are closer to you.</p></div></blockquote></astro-island></p>

  128. <p>From a UI perspective, that means the bigger a call to action, the better for the user.</p>

  129. <p>In the following example, notice how much the distance between the input method and the button.</p>

  130. <p><picture> <source srcset="https://ishadeed.com/_astro/fitt-law-1.E_ddOyn4_JNlX3.png" type="image/png"><source srcset="https://ishadeed.com/_astro/fitt-law-1.E_ddOyn4_ZtLPYr.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/fitt-law-1.E_ddOyn4_JNlX3.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  131. <p>With a larger button, the distance and time required for both the initial and final movements decrease.</p>

  132. <p><picture> <source srcset="https://ishadeed.com/_astro/fitt-law-2.JYstwono_Z2olxMJ.png" type="image/png"><source srcset="https://ishadeed.com/_astro/fitt-law-2.JYstwono_1rfn3H.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/fitt-law-2.JYstwono_Z2olxMJ.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  133. <p>What are the initial and final movements? As per <a href="https://en.wikipedia.org/wiki/Fitts%27s_law">Wikipedia</a>:</p>

  134. <ul>

  135. <li><strong>Initial movement</strong>: a fast but imprecise movement towards the target.</li>

  136. <li><strong>Final movement</strong>: slower but more precise movement to tap or click the target.</li>

  137. </ul>

  138. <p>We can compare this to a real-life case. Imagine a physical keyboard. The

  139. buttons that need to be used the most (Enter, Esc, Space, Shift) are larger

  140. and closer to the user’s fingers than the rest of the buttons.</p>

  141. <p><picture> <source srcset="https://ishadeed.com/_astro/fitt-law-3.tRicewH2_rqW8J.png" type="image/png"><source srcset="https://ishadeed.com/_astro/fitt-law-3.tRicewH2_ZM9fNK.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/fitt-law-3.tRicewH2_rqW8J.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  142. <p>Or even better, we can see that in action. In the previous section, I mentioned

  143. how the target sizes should be larger for car UIs, and how how that is

  144. somehow related to Fitt’s law.</p>

  145. <p><astro-island uid="1UNHK0" prefix="r4" component-url="https://ishadeed.com/_astro/CarUI.BOI0hj1P.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,"Toggle between the options and see how the target size changes."]}' ssr="" client="visible" opts='{"name":"CarUI","value":true}' await-children=""><div><p>Toggle between the options and see how the target size changes.</p></div></astro-island></p>

  146. <h3 id="spacing-around-the-targets">Spacing around the targets</h3>

  147. <p><astro-island uid="1pdmST" prefix="r73" component-url="https://ishadeed.com/_astro/Quote.7SNL3D4W.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"Make sure that the spacing between each target is enough and prevent clicking or tapping a target by mistake."]}' ssr="" client="visible" opts='{"name":"Quote","value":true}' await-children=""><blockquote class="_quote_1a1hc_1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 32 33"><g><rect y="0.527" fill="#D9BAF7" rx="16"></rect><g stroke="#7D45A7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M16.25 9.527c-3.5 0-5.25 2.75-5.25 5.25 0 4 3 4.5 3 6v2.25a1 1 0 001 1h2.5a1 1 0 001-1v-2.25c0-1.5 3-2 3-6 0-2.5-1.75-5.25-5.25-5.25z"></path><path d="M14.25 21.527h4"></path></g></g></svg><div><p>Make sure that the spacing between each target is enough and prevent clicking or tapping a target by mistake.</p></div></blockquote></astro-island></p>

  148. <p>Consider the following example. We have three buttons, and the target size for each of them is 44 by 44 pixels.</p>

  149. <p><picture> <source srcset="https://ishadeed.com/_astro/target-spacing-1.I1X5nan6_1SRiX9.png" type="image/png"><source srcset="https://ishadeed.com/_astro/target-spacing-1.I1X5nan6_RBcdo.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/target-spacing-1.I1X5nan6_1SRiX9.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  150. <p>When the user tries to tap an action on mobile, the average thumb size

  151. is large, thus might result in tapping an action item by mistake.</p>

  152. <p>In the following figure, the circle represents a thumb. Notice how it touches two target items.</p>

  153. <p><picture> <source srcset="https://ishadeed.com/_astro/target-spacing-2.kfqtbf8K_w16Iz.png" type="image/png"><source srcset="https://ishadeed.com/_astro/target-spacing-2.kfqtbf8K_Zuf01b.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/target-spacing-2.kfqtbf8K_w16Iz.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  154. <p>According to a <a href="http://touchlab.mit.edu/publications/2003_009.pdf">study</a>

  155. by the MIT Touch Lab of human fingertips, the average size of the index

  156. finger is 1.6 to 2 cm, which translates to a width of 45 - 57 pixels.</p>

  157. <p>To apply that, we need to increase the spacing between the items.</p>

  158. <p><picture> <source srcset="https://ishadeed.com/_astro/target-spacing-3.7pTWY6zY_l5OPl.png" type="image/png"><source srcset="https://ishadeed.com/_astro/target-spacing-3.7pTWY6zY_ZFagTp.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/target-spacing-3.7pTWY6zY_l5OPl.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  159. <p>Now it’s less likely that the user will tap a target by mistake.</p>

  160. <h3 id="visual-target-feedback">Visual target feedback</h3>

  161. <p><astro-island uid="2bhe3X" prefix="r74" component-url="https://ishadeed.com/_astro/Quote.7SNL3D4W.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"When hovering over or tapping a target, displaying visual feedback is beneficial, as it enhances the time to action."]}' ssr="" client="visible" opts='{"name":"Quote","value":true}' await-children=""><blockquote class="_quote_1a1hc_1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 32 33"><g><rect y="0.527" fill="#D9BAF7" rx="16"></rect><g stroke="#7D45A7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M16.25 9.527c-3.5 0-5.25 2.75-5.25 5.25 0 4 3 4.5 3 6v2.25a1 1 0 001 1h2.5a1 1 0 001-1v-2.25c0-1.5 3-2 3-6 0-2.5-1.75-5.25-5.25-5.25z"></path><path d="M14.25 21.527h4"></path></g></g></svg><div><p>When hovering over or tapping a target, displaying visual feedback is beneficial, as it enhances the time to action.</p></div></blockquote></astro-island></p>

  162. <p>This is useful for elements without clear boundaries. For example, a link or an icon-only button.</p>

  163. <p>Try to hover over one of the buttons below.</p>

  164. <p><astro-island uid="1Q9JtP" prefix="r75" component-url="https://ishadeed.com/_astro/VisualFeedback.KoO0MgZL.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"VisualFeedback","value":true}' await-children=""></astro-island></p>

  165. <p>Adding visual feedback sets expectations for the user. It’s like a hint that lets them know the target area boundaries.</p>

  166. <p>Here is another example of a menu.</p>

  167. <p><astro-island uid="13Y4L0" prefix="r76" component-url="https://ishadeed.com/_astro/VisualFeedback.KoO0MgZL.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"VisualFeedback","value":true}' await-children=""></astro-island></p>

  168. <h3 id="multi-input-sources">Multi-input sources</h3>

  169. <p><astro-island uid="1l9apY" prefix="r77" component-url="https://ishadeed.com/_astro/Quote.7SNL3D4W.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"A target size that works well with a mouse might be hard to tap on mobile. Make sure the target size is big enough."]}' ssr="" client="visible" opts='{"name":"Quote","value":true}' await-children=""><blockquote class="_quote_1a1hc_1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 32 33"><g><rect y="0.527" fill="#D9BAF7" rx="16"></rect><g stroke="#7D45A7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M16.25 9.527c-3.5 0-5.25 2.75-5.25 5.25 0 4 3 4.5 3 6v2.25a1 1 0 001 1h2.5a1 1 0 001-1v-2.25c0-1.5 3-2 3-6 0-2.5-1.75-5.25-5.25-5.25z"></path><path d="M14.25 21.527h4"></path></g></g></svg><div><p>A target size that works well with a mouse might be hard to tap on mobile. Make sure the target size is big enough.</p></div></blockquote></astro-island></p>

  170. <p>An example of that would be to compare how clicking a target with a mouse versus tapping with a finger.</p>

  171. <p><picture> <source srcset="https://ishadeed.com/_astro/target-rwd-1.amrPG9os_1IvNtk.png" type="image/png"><source srcset="https://ishadeed.com/_astro/target-rwd-1.amrPG9os_KBtxm.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/target-rwd-1.amrPG9os_1IvNtk.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  172. <p>In this example, the radio button is small compared to the user’s finger,

  173. but it’s almost the same size as the computer pointer. The idea here is

  174. to make sure a target size works with multiple input sources.</p>

  175. <h2 id="what-to-consider">What to consider</h2>

  176. <h3 id="touch-size-differs-based-on-finger-size">Touch size differs based on finger size</h3>

  177. <p>There is a common term which is ”<strong>fat finger</strong> problem”. It means that the user’s finger is too big to accurately tap on the touch targers. In this case, I can blame the small touch targets only.</p>

  178. <p>To demonstrate that, I made the following interactive playground that helps in visualizing your finger touch size.</p>

  179. <p><strong>Please note that the following demo works on mobile only. Not on mobile, no problem! See the video tab.</strong></p>

  180. <p><astro-island uid="1Wgx9I" prefix="r5" component-url="https://ishadeed.com/_astro/TouchTest.EuL0qnw3.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"TouchTest$1","value":true}' await-children=""><div><p class="_tabsWrapper_3fegj_69"><button class="_button_3fegj_74 _isActive_3fegj_87">Demo</button><button class="_button_3fegj_74">Video</button></p><div id="touchTest" class="example-wrapper center _touchTestwrapper_3fegj_1"><div><div><p>Try to tap any of the following menu items.</p><p class="_box_3fegj_62"></p></div><p>This is an estimation only. It will differ from a device to another.</p></div></div><p><video poster="https://ishadeed.com/assets/target-size/videos/touch-test.png" src="https://ishadeed.com/assets/target-size/videos/touch-test.mp4" controls="" controlslist="nodownload"></video></p></div></astro-island></p>

  181. <p>I used the snippet shown on the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Touch/radiusX">MDN website</a>. While this might not be perfect, at least it’s useful to demonstrate the concept.</p>

  182. <p>We need to get the <code>radiusX</code> and <code>radiusY</code>, then multiply them by 2.</p>

  183. <pre class="language-js"><code is:raw="" class="language-js">box<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"touchstart"</span><span class="token punctuation">,</span> getTouchSize<span class="token punctuation">)</span>

  184. ​

  185. <span class="token keyword">function</span> <span class="token function">getTouchSize</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

  186.   <span class="token keyword">const</span> touch <span class="token operator">=</span> e<span class="token punctuation">.</span>changedTouches<span class="token punctuation">.</span><span class="token function">item</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>

  187.   elm<span class="token punctuation">.</span>style<span class="token punctuation">.</span>width <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>touch<span class="token punctuation">.</span>radiusX <span class="token operator">*</span> <span class="token number">2</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px</span><span class="token template-punctuation string">`</span></span>

  188.   elm<span class="token punctuation">.</span>style<span class="token punctuation">.</span>height <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>touch<span class="token punctuation">.</span>radiusY <span class="token operator">*</span> <span class="token number">2</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px</span><span class="token template-punctuation string">`</span></span>

  189. <span class="token punctuation">}</span></code></pre>

  190. <p>We can take this further and show what the target size looks like on your phone. Once you tap on the cross area, the UI will get your finger size and append it to the question.</p>

  191. <p>Notice how the target size is compared to the radio button.</p>

  192. <p><astro-island uid="Z1d9DfT" prefix="r6" component-url="https://ishadeed.com/_astro/TouchTestDemo.63BHA1EC.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"TouchTest","value":true}' await-children=""><div><p class="_tabsWrapper_1yyl2_82"><button class="_button_1yyl2_87 _isActive_1yyl2_100">Demo</button><button class="_button_1yyl2_87">Video</button></p><div class="demo-content"><div><div id="touchTesDemo" class="example-wrapper center _touchTestwrapperDemo_1yyl2_1"><div><div class="_touchResult_1yyl2_21"><p>W: 32, H: 32</p><p class="_cross_1yyl2_33"></p><p>👋 Tap here to get your finger size</p></div></div></div></div><p><video poster="https://ishadeed.com/assets/target-size/videos/touch-demo.png" src="https://ishadeed.com/assets/target-size/videos/touch-demo.mp4" controls="" controlslist="nodownload"></video></p></div></div></astro-island></p>

  193. <p>Interesting, right?</p>

  194. <h3 id="touch-size-differs-based-on-the-touch-angle">Touch size differs based on the touch angle</h3>

  195. <p>It’s important to keep in mind that the user might use the touch in two different ways:</p>

  196. <ul>

  197. <li>Touch with fingertip</li>

  198. <li>Touch with the finger pad</li>

  199. </ul>

  200. <h4 id="fingertip">Fingertip</h4>

  201. <p>When using the fingertip, the finger is titled with an angle.</p>

  202. <h4 id="finger-pad">Finger pad</h4>

  203. <p>When using the finger pad, the finger isn’t tilted, but this can increase the issue of the target being hidden while the user’s finger is above it.</p>

  204. <p><picture> <source srcset="https://ishadeed.com/_astro/finger-tip-1.Dxt6CXvq_Z187QcV.png" type="image/png"><source srcset="https://ishadeed.com/_astro/finger-tip-1.Dxt6CXvq_Z262b8T.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/finger-tip-1.Dxt6CXvq_Z187QcV.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  205. <p>In the following illustration, notice how the search icon is still visible

  206. when the user is using their fingertip.</p>

  207. <p><picture> <source srcset="https://ishadeed.com/_astro/finger-tip-2.mERclBS9_2hs6Rl.png" type="image/png"><source srcset="https://ishadeed.com/_astro/finger-tip-2.mERclBS9_1jxLVn.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/finger-tip-2.mERclBS9_2hs6Rl.png" alt="" loading="lazy" decoding="async"> </source></source></picture>

  208. <astro-island uid="2fkQFq" prefix="r78" component-url="https://ishadeed.com/_astro/Quote.7SNL3D4W.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{&quot;content&quot;:[0,&quot;Small touch targets make users work harder because they require more accuracy to hit. Users need to reorient their finger, from finger pad to fingertip, to hit the target with clear visual feedback. Using the finger pad would cover the entire target, making it impossible for users to see the target they're trying to hit.&quot;],&quot;source&quot;:[0,&quot;UX movement&quot;],&quot;link&quot;:[0,&quot;https://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-target-sizes/&quot;]}" ssr="" client="visible" opts='{"name":"Quote","value":true}' await-children=""><blockquote class="_quote_1a1hc_1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 32 33"><g><rect y="0.527" fill="#D9BAF7" rx="16"></rect><g stroke="#7D45A7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M16.25 9.527c-3.5 0-5.25 2.75-5.25 5.25 0 4 3 4.5 3 6v2.25a1 1 0 001 1h2.5a1 1 0 001-1v-2.25c0-1.5 3-2 3-6 0-2.5-1.75-5.25-5.25-5.25z"></path><path d="M14.25 21.527h4"></path></g></g></svg><div><p>Small touch targets make users work harder because they require more accuracy to hit. Users need to reorient their finger, from finger pad to fingertip, to hit the target with clear visual feedback. Using the finger pad would cover the entire target, making it impossible for users to see the target they're trying to hit.</p><p>- <a href="https://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-target-sizes/">UX movement</a></p></div></blockquote></astro-island></p>

  209. <p>The touch with the finger pad is often at an angle, which makes it shape like an oval. The touch with the finger pad is larger but often hides the target you’re tapping.</p>

  210. <p>Here is a figure that shows a comparison.</p>

  211. <p><picture> <source srcset="https://ishadeed.com/_astro/finger-tip-3.xY66qdf2_Z12Ps9n.png" type="image/png"><source srcset="https://ishadeed.com/_astro/finger-tip-3.xY66qdf2_ZsKIbK.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/finger-tip-3.xY66qdf2_Z12Ps9n.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  212. <h3 id="small-touch-sizes-are-hard-to-use-in-shaking-environments">Small touch sizes are hard to use in shaking environments</h3>

  213. <p>When a user is trying to tap a small target size, it isn’t that they are sitting in a perfect environment and just staring at the screen. People are busy and they want to achieve their goals fast.</p>

  214. <p>In the following interactive demo, I tried to simulate how a shaking environment makes using a small target much harder.</p>

  215. <ul>

  216. <li>Turn on the “Stimulate shaking” toggle.</li>

  217. <li>Try to select one of the icons.</li>

  218. </ul>

  219. <p><astro-island uid="ZHilQs" prefix="r7" component-url="https://ishadeed.com/_astro/ShakingPhone.9bY4X2KJ.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"ShakingPhone$1","value":true}' await-children=""><div><div class="shaking-test"><p><strong>⚠️ Motion warning:</strong> this example may affect people with visual sensitivities.</p><div class="box"><div class="content"><h3>Try to tap on one of the navigation items</h3><p>This is how it feels to navigate small target areas with a shaking device. Not cool, right?</p></div><p class="touch"></p></div><div class="info"><p>A simulation of how a mobile can shake in situation like being in public transportation, or driving on bumpy roads.</p></div></div></div></astro-island></p>

  220. <p>It’s annoying, isn’t it? I hope the demo gave you the vibes of when you tap something by mistake.</p>

  221. <h3 id="using-touch-with-the-fingers-covered">Using touch with the fingers covered</h3>

  222. <p>A user might wear a glove in the winter and is trying to tab on a UI. This is a common and expected thing. In this case, if the target sizes are small and close to each other, the user will find a hard time trying to tap on an item.</p>

  223. <p>Here is a mocked comparison between the natural touch and the touch with gloves. Notice that it got slightly bigger with gloves. This is important to take into consideration.</p>

  224. <p><picture> <source srcset="https://ishadeed.com/_astro/fingers-covered-1.gzu_BN_n_2qOi6k.png" type="image/png"><source srcset="https://ishadeed.com/_astro/fingers-covered-1.gzu_BN_n_1iOIKy.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/fingers-covered-1.gzu_BN_n_2qOi6k.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  225. <p><strong>In the following example</strong>, try to switch the context between “Natural

  226. touch” or “Touch with gloves” and notice how it becomes harder to select

  227. a target.</p>

  228. <p>This is similar to what a user with gloves on experience.</p>

  229. <p><astro-island uid="1OXYxj" prefix="r8" component-url="https://ishadeed.com/_astro/HandGloves.61JqWuZ9.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"ShakingPhone","value":true}' await-children=""><div class="hand-gloves"><div class="box"><div class="content"><h3>Try to tap on one of the navigation items</h3><p>This is a demo that shows the size of your finger when wearing a glove.</p></div><p class="touch"></p></div><div class="info"><p>The touch size interferes with the two actions.</p></div></div></astro-island></p>

  230. <h3 id="spacing">Spacing</h3>

  231. <p>There are exceptions for a target size like inline elements or when there is a small target but it has a large spacing around it.</p>

  232. <p>According to the <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html#dfn-pointer-input">WCAG 2.58</a>:</p>

  233. <p><astro-island uid="Z1728rp" prefix="r79" component-url="https://ishadeed.com/_astro/Quote.7SNL3D4W.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"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;"]}' ssr="" client="visible" opts='{"name":"Quote","value":true}' await-children=""><blockquote class="_quote_1a1hc_1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 32 33"><g><rect y="0.527" fill="#D9BAF7" rx="16"></rect><g stroke="#7D45A7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M16.25 9.527c-3.5 0-5.25 2.75-5.25 5.25 0 4 3 4.5 3 6v2.25a1 1 0 001 1h2.5a1 1 0 001-1v-2.25c0-1.5 3-2 3-6 0-2.5-1.75-5.25-5.25-5.25z"></path><path d="M14.25 21.527h4"></path></g></g></svg><div><p>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;</p></div></blockquote></astro-island></p>

  234. <h4 id="links">Links</h4>

  235. <p>For example, a link that is part of a paragraph is excluded from the target size recommendations.</p>

  236. <p>See the following example.</p>

  237. <p><astro-island uid="Z2heG9M" prefix="r80" component-url="https://ishadeed.com/_astro/Links.o41XTd_H.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"Links","value":true}' await-children=""><div class="_links_65166_1 example-wrapper center"><p>As per <a href="#">this article</a>, it's recommended to stay calm at all times.</p></div></astro-island></p>

  238. <p>The target size for the link is the same as the line height. No need to make it larger.</p>

  239. <p>However, that doesn’t mean we shouldn’t care about links. It’s equally important to a regular target area.</p>

  240. <p><astro-island uid="171Aws" prefix="r81" component-url="https://ishadeed.com/_astro/Links.o41XTd_H.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"Links","value":true}' await-children=""><div class="_links_65166_1 example-wrapper center"><div><p class="_desc_65166_5"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 17 17"><g clip-path="url(#clip0_2216_428)"><path fill="#E73C65" d="M8.5.928C4.31.928.9 4.336.9 8.528s3.409 7.6 7.6 7.6c4.192 0 7.6-3.408 7.6-7.6s-3.408-7.6-7.6-7.6zm2.512 9.103a.705.705 0 01-.496 1.2.664.664 0 01-.496-.208L8.5 9.52l-1.503 1.503a.692.692 0 01-.497.208.664.664 0 01-.496-.208.705.705 0 010-.992l1.504-1.503-1.504-1.504a.705.705 0 010-.992.705.705 0 01.992 0L8.5 7.536l1.503-1.504a.705.705 0 01.992 0 .705.705 0 010 .992L9.492 8.528l1.52 1.503z"></path></g><defs><clippath id="clip0_2216_428"><path fill="#fff" d="M0 0H16V16H0z" transform="translate(.5 .527)"></path></clippath></defs></svg>Don’t do this. The line height is too small.</p><p>As per this article, it’s recommended to keep calm at all times. If you need help, feel free to <a href="#">get in touch</a> for an appointment.</p></div></div></astro-island></p>

  241. <p>It can get worse if there are multiple links in the same paragraph:</p>

  242. <p><astro-island uid="4pPB7" prefix="r82" component-url="https://ishadeed.com/_astro/Links.o41XTd_H.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"3"]}' ssr="" client="visible" opts='{"name":"Links","value":true}' await-children=""><div class="_links_65166_1 example-wrapper center"><div><p class="_desc_65166_5"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 17 17"><g clip-path="url(#clip0_2216_428)"><path fill="#E73C65" d="M8.5.928C4.31.928.9 4.336.9 8.528s3.409 7.6 7.6 7.6c4.192 0 7.6-3.408 7.6-7.6s-3.408-7.6-7.6-7.6zm2.512 9.103a.705.705 0 01-.496 1.2.664.664 0 01-.496-.208L8.5 9.52l-1.503 1.503a.692.692 0 01-.497.208.664.664 0 01-.496-.208.705.705 0 010-.992l1.504-1.503-1.504-1.504a.705.705 0 010-.992.705.705 0 01.992 0L8.5 7.536l1.503-1.504a.705.705 0 01.992 0 .705.705 0 010 .992L9.492 8.528l1.52 1.503z"></path></g><defs><clippath id="clip0_2216_428"><path fill="#fff" d="M0 0H16V16H0z" transform="translate(.5 .527)"></path></clippath></defs></svg>Don’t do this. The line height is too small.</p><p>As per this article, it’s recommended to <a href="#">keep calm</a> at all times. If you need help, feel free to <a href="#">get in touch</a> for an appointment.</p></div></div></astro-island></p>

  243. <p>Instead, we should increase the line height in CSS:</p>

  244. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">p</span> <span class="token punctuation">{</span>

  245.   <span class="token property">line-height</span><span class="token punctuation">:</span> 1.4<span class="token punctuation">;</span>

  246. <span class="token punctuation">}</span></code></pre>

  247. <p><astro-island uid="1DIU91" prefix="r83" component-url="https://ishadeed.com/_astro/Links.o41XTd_H.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"4"]}' ssr="" client="visible" opts='{"name":"Links","value":true}' await-children=""><div class="_links_65166_1 example-wrapper center"><div><p>As per this article, it’s recommended to <a href="#">keep calm</a> at all times. If you need help, feel free to <a href="#">get in touch</a> for an appointment.</p></div></div></astro-island></p>

  248. <h4 id="more-spacing-for-small-targets">More spacing for small targets</h4>

  249. <p>If there are multiple actions on mobile and their size is 48px or less, then it makes sense to have more spacing between them.</p>

  250. <p><picture> <source srcset="https://ishadeed.com/_astro/small-target-spacing-1.cMIi5iEz_1xqhax.png" type="image/png"><source srcset="https://ishadeed.com/_astro/small-target-spacing-1.cMIi5iEz_2wprtu.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/small-target-spacing-1.cMIi5iEz_1xqhax.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  251. <p>If the spacing is small, then the small targets will fail. Here is a figure

  252. on how they will look like.</p>

  253. <figure><picture> <source srcset="https://ishadeed.com/_astro/small-target-spacing-2.1zPSdkr3_3YhVL.png" type="image/png"><source srcset="https://ishadeed.com/_astro/small-target-spacing-2.1zPSdkr3_12XsfI.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/small-target-spacing-2.1zPSdkr3_3YhVL.png" alt="" loading="lazy" decoding="async"> </source></source></picture> <figcaption>❌ Small targets need more spacing</figcaption></figure>

  254. <p>I have a real-life example that is very convincing. In Instagram, the comment’s like button is very small, but it works well because the spacing around it is large enough.</p>

  255. <p>See the following figure:</p>

  256. <p><picture> <source srcset="https://ishadeed.com/_astro/small-target-spacing-3.alOpO9pm_AloCY.png" type="image/png"><source srcset="https://ishadeed.com/_astro/small-target-spacing-3.alOpO9pm_1zkyVV.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/small-target-spacing-3.alOpO9pm_AloCY.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  257. <p>The target sizes are below the minimum, but they work very well because

  258. the surrounding space is large enough.</p>

  259. <p>See the following figure for the highlighted space. The green highlight is just the space around the target.</p>

  260. <p><picture> <source srcset="https://ishadeed.com/_astro/small-target-spacing-4.gRQhUEl5_3GE4h.png" type="image/png"><source srcset="https://ishadeed.com/_astro/small-target-spacing-4.gRQhUEl5_12FOne.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/small-target-spacing-4.gRQhUEl5_3GE4h.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  261. <h4 id="less-spacing-for-large-targets">Less spacing for large targets</h4>

  262. <p>In the following examples, the spacing between the targets is zero, but due to their large size, it’s fine to have less or no spacing at all.</p>

  263. <p><picture> <source srcset="https://ishadeed.com/_astro/large-target-spacing-1.V6iUc4le_ZKHYWq.png" type="image/png"><source srcset="https://ishadeed.com/_astro/large-target-spacing-1.V6iUc4le_dgalw.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/large-target-spacing-1.V6iUc4le_ZKHYWq.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  264. <h4 id="target-size-that-grows-with-the-system-font-size">Target size that grows with the system font size</h4>

  265. <p>I did a test on Apple iOS to see if the system icons grow when I change the font size from the accessibility settings, and it did. If the user wants a bigger font, then the target size should grow proportionally for that.</p>

  266. <p><picture> <source srcset="https://ishadeed.com/_astro/large-target-spacing-2.iiO6ATQo_Z1Kl4JP.png" type="image/png"><source srcset="https://ishadeed.com/_astro/large-target-spacing-2.iiO6ATQo_ZLlTqS.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/large-target-spacing-2.iiO6ATQo_Z1Kl4JP.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  267. <p>It’s not like we should do that for all apps, but it makes sense to think

  268. about it.</p>

  269. <h2 id="target-size-examples">Target size examples</h2>

  270. <p>As a front-end developer, it’s important to know the techniques to build an accessible target size.</p>

  271. <p>Let’s explore that in the following examples.</p>

  272. <h3 id="website-navigation">Website navigation</h3>

  273. <p>In this example, try to hover over a navigation item.</p>

  274. <p><astro-island uid="EoInw" prefix="r9" component-url="https://ishadeed.com/_astro/WebsiteNav.YZ97Zit8.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true],"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"WebsiteNav","value":true}' await-children=""><div><p>Try to hover on an item ☝️</p><p></p></div></astro-island></p>

  275. <p>Notice how the clickable area is small? That happened because that spacing is added to the outer container, not the link itself.</p>

  276. <p><astro-island uid="40L80" prefix="r10" component-url="https://ishadeed.com/_astro/WebsiteNav.YZ97Zit8.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"Try to toggle the outline spacing, target area, or both!"],"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"WebsiteNav","value":true}' await-children=""><div><p>Try to toggle the outline spacing, target area, or both!</p></div></astro-island></p>

  277. <p>Let’s take a look at the CSS.</p>

  278. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.nav</span> <span class="token punctuation">{</span>

  279.   <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>

  280.   <span class="token property">gap</span><span class="token punctuation">:</span> 1.5rem<span class="token punctuation">;</span>

  281.   <span class="token property">padding-top</span><span class="token punctuation">:</span> 0.75rem<span class="token punctuation">;</span>

  282.   <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 0.75rem<span class="token punctuation">;</span>

  283. <span class="token punctuation">}</span></code></pre>

  284. <p>Notice that there is a:</p>

  285. <ul>

  286. <li>Gap between each nav item</li>

  287. <li>Vertical padding on the parent</li>

  288. </ul>

  289. <p>This isn’t good. We need to remove both and use padding on the individual navigation item.</p>

  290. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.nav</span> <span class="token punctuation">{</span>

  291.   <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>

  292. <span class="token punctuation">}</span>

  293. <span class="token selector">​ .nav__item a</span> <span class="token punctuation">{</span>

  294.   <span class="token property">padding</span><span class="token punctuation">:</span> 0.75rem 1rem<span class="token punctuation">;</span>

  295. <span class="token punctuation">}</span></code></pre>

  296. <p><astro-island uid="rWMHG" prefix="r11" component-url="https://ishadeed.com/_astro/WebsiteNav.YZ97Zit8.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"Better now."],"variation":[0,"3"]}' ssr="" client="visible" opts='{"name":"WebsiteNav","value":true}' await-children=""></astro-island></p>

  297. <p>Hover over a navigation item to see the difference.</p>

  298. <h3 id="dropdown-toggle">Dropdown toggle</h3>

  299. <p>In this example, the target size is only on the label, not the whole menu container.</p>

  300. <p><astro-island uid="pgavt" prefix="r12" component-url="https://ishadeed.com/_astro/DropdownToggle.v46l7Fin.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"Try to hover on a menu ☝️"],"helper":[0,true],"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"DropdownToggle","value":true}' await-children=""><div><div class="example-wrapper center"><p class="_dropdown_ixlv5_1"><label for=":r12R0:">Category</label><select name="" id=":r12R0:"><option value="">Web development</option><option value="">Web design</option><option value="">CSS</option></select></p></div><p>Try to hover on a menu ☝️</p></div></astro-island></p>

  301. <p>The target area is only on the text, and it’s trimmed. To fix that, we need to expand the target area of the whole container.</p>

  302. <p>I added the padding to the <code>&lt;select&gt;</code> menu itself, instead of the outer wrapper.</p>

  303. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.dropdown__content</span> <span class="token punctuation">{</span>

  304.   <span class="token property">padding</span><span class="token punctuation">:</span> 1.5rem 0.5rem<span class="token punctuation">;</span>

  305. <span class="token punctuation">}</span></code></pre>

  306. <p>Here is the <strong>enhanced</strong> example.</p>

  307. <p><astro-island uid="zgecT" prefix="r13" component-url="https://ishadeed.com/_astro/DropdownToggle.v46l7Fin.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true],"content":[0,"Better, right?"],"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"DropdownToggle","value":true}' await-children=""><div><div class="example-wrapper center"><p class="_dropdown_ixlv5_1 _dropdownEnhanced_ixlv5_39"><label for=":r13R0:">Category</label><select name="" id=":r13R0:"><option value="">Web development</option><option value="">Web design</option><option value="">CSS</option></select></p></div><p>Better, right?</p></div></astro-island></p>

  308. <p>It’s just about adding the padding to the appropriate HTML element.</p>

  309. <h3 id="navigation-bar">Navigation bar</h3>

  310. <p>Here is an example where we have a bottom navigation for a website. Try to hover over an item to see its boundaries.</p>

  311. <p><astro-island uid="Zs8KPB" prefix="r84" component-url="https://ishadeed.com/_astro/BottomNavigation.wKeBXBWw.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true]}' ssr="" client="visible" opts='{"name":"BottomNavigation","value":true}' await-children=""><div><div class="example-wrapper center"><div class="_box_myits_1"><div class="_content_myits_89"><h3>Try to tap on one of the navigation items</h3><p>This is a demo that shows the size of your finger when wearing a glove.</p></div></div></div><p>Try to hover on an item ☝️</p><p></p></div></astro-island></p>

  312. <p>Notice how the boundaries are small, compared to the space around the item itself.</p>

  313. <p>We can fix that in CSS by forcing each navigation item to fill the available width. To do that, we need to apply <code>flex: 1</code> on the navigation item.</p>

  314. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.nav</span> <span class="token punctuation">{</span>

  315.   <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>

  316. <span class="token punctuation">}</span>

  317. <span class="token selector">​ .nav__item</span> <span class="token punctuation">{</span>

  318.   <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>

  319. <span class="token punctuation">}</span></code></pre>

  320. <p><astro-island uid="Z2ww7XC" prefix="r85" component-url="https://ishadeed.com/_astro/BottomNavigation.wKeBXBWw.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"BottomNavigation","value":true}' await-children=""><div><div class="example-wrapper center"><div class="_box_myits_1"><div class="_content_myits_89"><h3>Try to tap on one of the navigation items</h3><p>This is a demo that shows the size of your finger when wearing a glove.</p></div></div></div><p></p></div></astro-island></p>

  321. <p>Much better now.</p>

  322. <h3 id="icon-buttons">Icon buttons</h3>

  323. <p>Another example where having a large target size is important is an icon button.</p>

  324. <p>As a designer, you might need to use an icon only due to cases like not having enough space, for example, or if the icon is too common.</p>

  325. <p>In the following demo, try to hover over one of the icons and notice how the thumb size overlaps between them. For larger thumbs, the probability of tapping by mistake is high.</p>

  326. <p><astro-island uid="1FAgGj" prefix="r14" component-url="https://ishadeed.com/_astro/IconButtons.qKnNiHGe.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"IconButtons","value":true}' await-children=""></astro-island></p>

  327. <p>To fix that, we need to do the following:</p>

  328. <ul>

  329. <li>Increase the spacing between the two buttons</li>

  330. <li>Increase the target size area</li>

  331. </ul>

  332. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.header-actions</span> <span class="token punctuation">{</span>

  333.   <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>

  334.   <span class="token property">gap</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>

  335. <span class="token punctuation">}</span>

  336. <span class="token selector">​ .action__item</span> <span class="token punctuation">{</span>

  337.   <span class="token property">padding</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>

  338. <span class="token punctuation">}</span></code></pre>

  339. <p><astro-island uid="Z6kBwC" prefix="r15" component-url="https://ishadeed.com/_astro/IconButtons.qKnNiHGe.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"IconButtons","value":true}' await-children=""></astro-island></p>

  340. <h3 id="safe-triangle-target-areas">Safe triangle target areas</h3>

  341. <p>It’s common to find multi-level menus on large websites like e-commerce apps, for example. Oftentimes, I find it hard to select an item from a multi-level menu, because the target area for the secondary menu is small.</p>

  342. <p>Let’s take the following example.</p>

  343. <p><picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-1.gWdKi3yE_Z18UI7y.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-1.gWdKi3yE_2gbY1b.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-1.gWdKi3yE_Z18UI7y.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  344. <p>Try to hover over any of the menu items with an arrow. Notice how the secondary

  345. menu appears only when you hover on its parent. If the mouse goes out of

  346. that area, the secondary menu will disappear.</p>

  347. <p><picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-2.83z9uuii_ZXtSqJ.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-2.83z9uuii_2qCNH0.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-2.83z9uuii_ZXtSqJ.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  348. <p>To fix that, we need to follow the safe triangle method that was seen <a href="https://height.app/blog/guide-to-build-context-menus">first

  349. on Amazon</a>.</p>

  350. <p>The idea is that instead of the highlighted target area, there will be a triangle attached to the sub-menu that will create a larger target size.</p>

  351. <p><picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-3.KwHHoU15_1ATFa3.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-3.KwHHoU15_Z49Kv9.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-3.KwHHoU15_1ATFa3.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  352. <p>How does that work in code? Let’s break this down.</p>

  353. <ul>

  354. <li>The submenu has a rectangle that is attached to it.</li>

  355. <li>That rectangle has clip-path, and the visible part of it is the triangle.</li>

  356. <li>Any area outside the triangle won’t receive pointer events due to its being clipped.</li>

  357. </ul>

  358. <h4 id="the-problem">The problem</h4>

  359. <p>We will use <code>clip-path</code> to create a triangle from the safe area element. That means we will need <strong>three points</strong>.</p>

  360. <p><picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-4.VxSWoCWW_nAveQ.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-4.VxSWoCWW_Z1hsUql.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-4.VxSWoCWW_nAveQ.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  361. <p><strong>The point that is close to the hand cursor is the dynamic one</strong> that

  362. we need to get. The other two points are static.</p>

  363. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.safeAreaElement</span> <span class="token punctuation">{</span>

  364.   <span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token function">polygon</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--safe-start<span class="token punctuation">)</span><span class="token punctuation">,</span> 100% 100%<span class="token punctuation">,</span> 100% 0<span class="token punctuation">)</span><span class="token punctuation">;</span>

  365. <span class="token punctuation">}</span></code></pre>

  366. <h4 id="the-solution">The solution</h4>

  367. <p>The markup for this UI is as follows. We have a list item that contains a secondary menu. I wrote this in React, that’s why there are <code>className</code> and <code>ref={}</code>.</p>

  368. <pre class="language-html"><code is:raw="" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hasSub<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

  369.   Sort by

  370.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>subMenu<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

  371.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>

  372.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>

  373.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>

  374.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>Type<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>

  375.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>Status<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>

  376.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>

  377.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>safeAreaElement<span class="token punctuation">"</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{submenuSafeAreaRef}<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

  378.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>

  379.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

  380. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span></code></pre>

  381. <p>In CSS, I did the following:</p>

  382. <ul>

  383. <li>Added <code>position: absolute</code> to position the secondary menu to the right of its parent <code>&lt;li&gt;</code> item.</li>

  384. <li>Positioned the safe area element on the opposite side of the secondary menu.</li>

  385. <li>Added a default value of <code>clip-path</code>.</li>

  386. </ul>

  387. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.hasSub</span> <span class="token punctuation">{</span>

  388.   <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>

  389. <span class="token punctuation">}</span>

  390. <span class="token selector">​ .subMenu</span> <span class="token punctuation">{</span>

  391.   <span class="token property">--safe-start</span><span class="token punctuation">:</span> 0% 0%<span class="token punctuation">;</span>

  392.   <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>

  393.   <span class="token property">left</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% - 8px<span class="token punctuation">)</span><span class="token punctuation">;</span>

  394.   <span class="token property">top</span><span class="token punctuation">:</span> -2px<span class="token punctuation">;</span>

  395.   <span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>

  396.   <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>

  397. <span class="token punctuation">}</span>

  398. <span class="token selector">​ .safeAreaElement</span> <span class="token punctuation">{</span>

  399.   <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>

  400.   <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>

  401.   <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>

  402.   <span class="token property">right</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>

  403.   <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% - 8px<span class="token punctuation">)</span><span class="token punctuation">;</span>

  404.   <span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token function">polygon</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--safe-start<span class="token punctuation">)</span><span class="token punctuation">,</span> 100% 100%<span class="token punctuation">,</span> 100% 0<span class="token punctuation">)</span><span class="token punctuation">;</span>

  405. <span class="token punctuation">}</span></code></pre>

  406. <p>To make sure we’re on the same page, here is the annotation of the HTML parts.</p>

  407. <p><picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-5.ybtFLCHC_ZMUuo2.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-5.ybtFLCHC_Z2sYV4e.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-5.ybtFLCHC_ZMUuo2.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  408. <p>Also, here is what the default clipped area looks like.</p>

  409. <p><picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-6.I2btTKYg_1DzkWG.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-6.I2btTKYg_Z1u5Hv.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-6.I2btTKYg_1DzkWG.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  410. <h4 id="the-safe-triangle-area">The safe triangle area</h4>

  411. <p>The safe area is positioned relative to the secondary menu. It’s like an extension to the menu.</p>

  412. <p><picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-7.2qp5GWHQ_Z13SblS.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-7.2qp5GWHQ_2levLQ.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-7.2qp5GWHQ_Z13SblS.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  413. <h4 id="get-the-mouse-x--y-coordinates">Get the mouse X &amp; Y coordinates</h4>

  414. <p>When the user hovers in the safe area, we need to get the mouse X &amp; Y coordinates. In Javascript, we get the X &amp; Y values for the whole page, so we need to scope them for the safe area element only.</p>

  415. <pre class="language-js"><code is:raw="" class="language-js">

  416. 

  417. 

  418. <span class="token keyword">const</span> <span class="token punctuation">{</span>

  419.   <span class="token literal-property property">width</span><span class="token operator">:</span> menuItemWidth<span class="token punctuation">,</span>

  420.   <span class="token literal-property property">height</span><span class="token operator">:</span> menuItemHeight<span class="token punctuation">,</span>

  421. <span class="token punctuation">}</span> <span class="token operator">=</span> hasSubRef<span class="token punctuation">.</span>current<span class="token punctuation">.</span><span class="token function">getBoundingClientRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

  422. ​

  423. 

  424. <span class="token keyword">const</span> <span class="token punctuation">{</span>

  425.   <span class="token literal-property property">left</span><span class="token operator">:</span> safeAreaLeftPos<span class="token punctuation">,</span>

  426.   <span class="token literal-property property">top</span><span class="token operator">:</span> safeAreaTopPos<span class="token punctuation">,</span>

  427.   <span class="token literal-property property">width</span><span class="token operator">:</span> safeAreaWidth<span class="token punctuation">,</span>

  428.   <span class="token literal-property property">height</span><span class="token operator">:</span> safeAreaHeight<span class="token punctuation">,</span>

  429. <span class="token punctuation">}</span> <span class="token operator">=</span> submenuSafeAreaRef<span class="token punctuation">.</span>current<span class="token punctuation">.</span><span class="token function">getBoundingClientRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

  430. ​

  431. 

  432. <span class="token keyword">const</span> localX <span class="token operator">=</span> mouseX <span class="token operator">-</span> safeAreaLeftPos

  433. <span class="token keyword">const</span> localY <span class="token operator">=</span> mouseY <span class="token operator">-</span> safeAreaTopPos</code></pre>

  434. <p>In the code, we got:</p>

  435. <ul>

  436. <li>Width and height of the <code>&lt;li&gt;</code></li>

  437. <li>Left and top position of the safe area relative to the page</li>

  438. <li>The mouse X and Y then subtract the safe area left and top from each, respectively.</li>

  439. </ul>

  440. <p>This will give us the local coordinates scoped to the safe area.</p>

  441. <p><picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-8.vEvvLEEa_17eNqj.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-8.vEvvLEEa_ZxOCeS.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-8.vEvvLEEa_17eNqj.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  442. <p>Given the data we have now, we need to do a few more steps to get the X

  443. and Y percentage values to use in the <code>clip-path</code>.</p>

  444. <ul>

  445. <li>Any X value that is larger than the safe area element width isn’t needed</li>

  446. <li>Any Y value below the main <code>&lt;li&gt;</code> isn’t needed (the black line)</li>

  447. <li>Convert those X and Y values into percentages by dividing them with the width and height of the safe area element, respectively.</li>

  448. </ul>

  449. <p><picture> <source srcset="https://ishadeed.com/_astro/safe-triangle-9.bgggmP8x_201eKf.png" type="image/png"><source srcset="https://ishadeed.com/_astro/safe-triangle-9.bgggmP8x_jVN53.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/safe-triangle-9.bgggmP8x_201eKf.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  450. <p>Take a look at the Javascript.</p>

  451. <pre class="language-js"><code is:raw="" class="language-js">

  452. <span class="token keyword">if</span> <span class="token punctuation">(</span>

  453.   localX <span class="token operator">&gt;</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span>

  454.   localX <span class="token operator">&lt;</span> menuItemWidth <span class="token operator">&amp;&amp;</span>

  455.   localY <span class="token operator">&gt;</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span>

  456.   localY <span class="token operator">&lt;</span> menuItemHeight

  457. <span class="token punctuation">)</span> <span class="token punctuation">{</span>

  458.   <span class="token keyword">const</span> percentageX <span class="token operator">=</span> <span class="token punctuation">(</span>localX <span class="token operator">/</span> safeAreaWidth<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">100</span><span class="token punctuation">;</span>

  459.   <span class="token keyword">const</span> percentageY <span class="token operator">=</span> <span class="token punctuation">(</span>localY <span class="token operator">/</span> safeAreaHeight<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">100</span><span class="token punctuation">;</span>

  460. ​

  461.   submenuRef<span class="token punctuation">.</span>current<span class="token punctuation">.</span>style<span class="token punctuation">.</span><span class="token function">setProperty</span><span class="token punctuation">(</span>

  462.     <span class="token string">"--safe-start"</span><span class="token punctuation">,</span>

  463.     <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>percentageX<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">% </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>percentageY<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">%</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>

  464.   <span class="token punctuation">)</span><span class="token punctuation">;</span>

  465. <span class="token punctuation">}</span></code></pre>

  466. <p>The magic here happens because <code>clip-path</code> disables pointer events for clipped areas. When we hover under the menu, it disappears as expected.</p>

  467. <p>Explore the interactive demo below and try to move the dynamic path point.</p>

  468. <p><astro-island uid="1pnaJG" prefix="r16" component-url="https://ishadeed.com/_astro/SafeTrianglePlay.JCL8WTQn.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"SafeTrianglePlay","value":true}' await-children=""><div><p class="_tabsWrapper_14lhn_134"><button class="_button_14lhn_139 _isActive_14lhn_152">Demo</button><button class="_button_14lhn_139">Video</button></p><div><div><div class="_safeTestPlay_14lhn_1"><ul><li>New project</li><li class="has-sub">Change workflow<span>➡️</span></li><li>Sort by</li><li>Filter by</li><li>Another item</li></ul><p class="_pathResult_14lhn_123">clip-path: polygon(<code>0% 0%</code>, <code>100% 100%</code>,<code>100% 0</code>);</p></div></div><p><video poster="https://ishadeed.com/assets/target-size/videos/safe-tri-1.png" src="https://ishadeed.com/assets/target-size/videos/safe-tri-1.mp4" controls="" controlslist="nodownload"></video></p></div></div></astro-island></p>

  469. <p>Let’s explore a demo that uses the safe triangle method. First, try to hover with the default state, then change it to the safe area.</p>

  470. <p><astro-island uid="1YW1aH" prefix="r17" component-url="https://ishadeed.com/_astro/SafeTriangle.nCpnxMOa.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"name":[0,"wrapper 2"]}' ssr="" client="visible" opts='{"name":"SafeTriangle","value":true}' await-children=""><div><p class="_tabsWrapper_18mju_113"><button class="_button_18mju_118 _isActive_18mju_131">Demo</button><button class="_button_18mju_118">Video</button></p><div><div><div class="_safeTest_18mju_1"><ul><li>New project</li><li class="_hasSub_18mju_94 _hasSubActive_18mju_97">Change workflow<span>➡️</span></li><li>Sort by</li><li>Filter by</li><li>Another item</li></ul></div></div><p><video poster="https://ishadeed.com/assets/target-size/videos/safe-tri-2.png" src="https://ishadeed.com/assets/target-size/videos/safe-tri-2.mp4" controls="" controlslist="nodownload"></video></p></div></div></astro-island></p>

  471. <h3 id="mobile-search">Mobile search</h3>

  472. <p>While researching, I found an interesting target size issue in a couple of websites. When the search is active, there are no clear boundaries for it. That causes the user to guess where to tab.</p>

  473. <p>In the following example, the search is shown once the mobile menu is toggled. However, it’s not clear where the boundaries of the search are.</p>

  474. <p><picture> <source srcset="https://ishadeed.com/_astro/mobile-search-1.lhfbhihy_d0grH.png" type="image/png"><source srcset="https://ishadeed.com/_astro/mobile-search-1.lhfbhihy_Z1s4adu.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/mobile-search-1.lhfbhihy_d0grH.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  475. <p>It’s not a good idea to let the user “guess” where the target area is.

  476. In this design, here is a comparison <strong>between my expectation and the actual

  477. target size</strong>.</p>

  478. <p><picture> <source srcset="https://ishadeed.com/_astro/mobile-search-2.6fdQVi3Q_1aSf9Q.png" type="image/png"><source srcset="https://ishadeed.com/_astro/mobile-search-2.6fdQVi3Q_Zubbvl.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/mobile-search-2.6fdQVi3Q_1aSf9Q.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  479. <p>See the following demo. It’s confusing.</p>

  480. <p><astro-island uid="rTo2R" prefix="r18" component-url="https://ishadeed.com/_astro/MobileSearch.ntbnwgyB.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true],"content":[0,"Toggle the checkbox and see how the search makes you think that it spans to the far right."]}' ssr="" client="visible" opts='{"name":"MobileSearch","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_hbbaq_1"><p class="checkbox"><input id=":r18R5:" type="checkbox" class="sr-only _input_3qp17_1" checked><label class="_label_3qp17_16" for=":r18R5:">Toggle highlight</label></p><div class="_page_hbbaq_7 false"><div><p>Random title</p><p> This is a sample text. CSS is awesome.</p></div></div></div><p>Toggle the checkbox and see how the search makes you think that it spans to the far right.</p></div></astro-island></p>

  481. <p>To solve that, we need to expand the target area and make it fill the rest of the space.</p>

  482. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.search-form</span> <span class="token punctuation">{</span>

  483.   <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>

  484.   <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>

  485.   <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>

  486.   <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>

  487. <span class="token punctuation">}</span>

  488. 

  489. <span class="token selector">.search-form input</span> <span class="token punctuation">{</span>

  490.   <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>

  491.   <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>

  492. <span class="token punctuation">}</span></code></pre>

  493. <p><astro-island uid="ZwgKg2" prefix="r19" component-url="https://ishadeed.com/_astro/MobileSearch.ntbnwgyB.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true],"content":[0,"The search is positioned absolutely to the header with a limited width."],"variation":[0,"enhanced"]}' ssr="" client="visible" opts='{"name":"MobileSearch","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_hbbaq_1"><p class="checkbox"><input id=":r19R5:" type="checkbox" class="sr-only _input_3qp17_1" checked><label class="_label_3qp17_16" for=":r19R5:">Toggle highlight</label></p><div class="_page_hbbaq_7 _enhanced_hbbaq_109"><div><p>Random title</p><p> This is a sample text. CSS is awesome.</p></div></div></div><p>The search is positioned absolutely to the header with a limited width.</p></div></astro-island></p>

  494. <h3 id="active-navigation-border">Active Navigation border</h3>

  495. <p>This is an example of a navigation where the hovered item shows a bottom border. When you see that, you assume that the whole area is clickable.</p>

  496. <p><astro-island uid="1SK72H" prefix="r20" component-url="https://ishadeed.com/_astro/NavBottomBorder.rxRKGiDC.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true],"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"NavBottomBorder","value":true}' await-children=""><div><p>Try to hover on an item ☝️</p></div></astro-island></p>

  497. <p>However, when you try to hover over another item, you will discover that the target area is only for the text. The border is just for visual purposes. Notice the outline around the inner item.</p>

  498. <p><picture> <source srcset="https://ishadeed.com/_astro/nav-bottom-border.oj4vN2U9_1WWwv8.png" type="image/png"><source srcset="https://ishadeed.com/_astro/nav-bottom-border.oj4vN2U9_OWXam.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/nav-bottom-border.oj4vN2U9_1WWwv8.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  499. <p>The problem is that there is horizontal padding on the <code>&lt;li&gt;</code> element, and the <code>&lt;a&gt;</code> has vertical padding only.</p>

  500. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.nav-item</span> <span class="token punctuation">{</span>

  501.   <span class="token property">padding-left</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>

  502.   <span class="token property">padding-right</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>

  503.   <span class="token property">border-bottom</span><span class="token punctuation">:</span> 4px solid transparent<span class="token punctuation">;</span>

  504. <span class="token punctuation">}</span>

  505. 

  506. <span class="token selector">​ .nav-item a</span> <span class="token punctuation">{</span>

  507.   <span class="token property">padding-top</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>

  508.   <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>

  509. <span class="token punctuation">}</span>

  510. 

  511. <span class="token selector">​ .nav-item:hover</span> <span class="token punctuation">{</span>

  512.   <span class="token property">border-bottom-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>

  513. <span class="token punctuation">}</span></code></pre>

  514. <p>To fix that, we need to add all the padding to the <code>&lt;a&gt;</code> element.</p>

  515. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.nav-item</span> <span class="token punctuation">{</span>

  516.   <span class="token property">border-bottom</span><span class="token punctuation">:</span> 4px solid transparent<span class="token punctuation">;</span>

  517. <span class="token punctuation">}</span>

  518. <span class="token selector">​ .nav-item a</span> <span class="token punctuation">{</span>

  519.   <span class="token property">padding</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>

  520. <span class="token punctuation">}</span>

  521. <span class="token selector">​ .nav-item:hover</span> <span class="token punctuation">{</span>

  522.   <span class="token property">border-bottom-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>

  523. <span class="token punctuation">}</span></code></pre>

  524. <p>See it yourself in the following demo.</p>

  525. <p><astro-island uid="EyAQd" prefix="r21" component-url="https://ishadeed.com/_astro/NavBottomBorder.rxRKGiDC.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true],"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"NavBottomBorder","value":true}' await-children=""><div><p>Try to hover on an item ☝️</p></div></astro-island></p>

  526. <p>Much better. Now the whole link is interacive.</p>

  527. <h3 id="player-ui">Player UI</h3>

  528. <p>In this example, we have an audio player UI.</p>

  529. <p>The target area is limited to the bar height only.</p>

  530. <p>We need to fix that by extending the target size to cover at least the playhead (the little circle) height. In the following figure, the target size should be within the top and bottom red lines.</p>

  531. <p><picture> <source srcset="https://ishadeed.com/_astro/player-ui-1.Xn-WLRZ-_1luvnd.png" type="image/png"><source srcset="https://ishadeed.com/_astro/player-ui-1.Xn-WLRZ-_Z1sv3Bu.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/player-ui-1.Xn-WLRZ-_1luvnd.png" alt="" loading="lazy" decoding="async"> </source></source></picture>A simple

  532. thing to do is to wrap the progress in a container and extend the

  533. height of it. That way, the progress height will remain the same, but

  534. the clickable area will get bigger.</p>

  535. <p>See the following HTML:</p>

  536. <pre class="language-html"><code is:raw="" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>progress<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

  537.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>progressBar<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

  538. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></code></pre>

  539. <p>Please note this HTML is just for demo purposes. There are a lot of things missing like the current progress bar value.</p>

  540. <p>Here is the CSS:</p>

  541. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.progress</span> <span class="token punctuation">{</span>

  542.   <span class="token property">flex</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>

  543.   <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>

  544.   <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>

  545.   <span class="token property">height</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>

  546.   <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>

  547. <span class="token punctuation">}</span>

  548. 

  549. <span class="token selector">.progressBar</span> <span class="token punctuation">{</span>

  550.   <span class="token property">flex</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>

  551.   <span class="token property">height</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>

  552.   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">color-mix</span><span class="token punctuation">(</span>in srgb<span class="token punctuation">,</span> #9c3ce7<span class="token punctuation">,</span> white 70%<span class="token punctuation">)</span><span class="token punctuation">;</span>

  553. <span class="token punctuation">}</span></code></pre>

  554. <p>It’s much better now. Try to click anywhere on the progress bar. Play with the checkbox to see the before &amp; after.</p>

  555. <p><astro-island uid="Z1P9OSf" prefix="r22" component-url="https://ishadeed.com/_astro/PlayerUI.ZnDFoBQF.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"PlayerUI","value":true}' await-children=""></astro-island></p>

  556. <h3 id="avoid-dead-target-areas">Avoid dead target areas</h3>

  557. <p>A dead area is when there are multiple ways to do the same action. This can apply to a label and an icon.</p>

  558. <p>In the following example, there are two target areas (label + icon). Between them, there is a dead target area; when clicked or tapped, the action won’t be triggered.</p>

  559. <p><astro-island uid="ma1lq" prefix="r23" component-url="https://ishadeed.com/_astro/DeadAreas.ovHoBlHE.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,true]}' ssr="" client="visible" opts='{"name":"DeadArea","value":true}' await-children=""><div><p class="example-wrapper center _wrapper_1e53f_1"></p><p>Try to hover between the label and icon</p></div></astro-island></p>

  560. <p>When the same target areas refer to the same action, it’s good to keep them as one target, or at least to remove the gap between them.</p>

  561. <p>In the following demo, I just removed the gap and the issue is fixed. Unless there is no real need for that, I would recommend combining them as one action.</p>

  562. <p><astro-island uid="Z1KwDX7" prefix="r24" component-url="https://ishadeed.com/_astro/DeadAreas.ovHoBlHE.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"enhanced"]}' ssr="" client="visible" opts='{"name":"DeadArea","value":true}' await-children=""></astro-island></p>

  563. <h3 id="extend-target-size-with-pseudo-elements">Extend target size with pseudo-elements</h3>

  564. <p>This is a useful technique that can increase the target size without changing the object size or padding. Here is a summary:</p>

  565. <ul>

  566. <li>Add a pseudo-element to the target</li>

  567. <li>Make it size larger than the target</li>

  568. <li>Done! 🥳</li>

  569. </ul>

  570. <p>In the following example, we have a simple link. Notice that the target area is highlighted.</p>

  571. <p><astro-island uid="ZpaUjB" prefix="r25" component-url="https://ishadeed.com/_astro/ExpandTarget.UVLz_TuK.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"],"helper":[0,true]}' ssr="" client="visible" opts='{"name":"ExpandTarget","value":true}' await-children=""></astro-island></p>

  572. <p>The hover effect is simple. Try to hover and see it.</p>

  573. <p>When we add a pseudo-element to the link, it will take the same target area as its parent. That means we can extend the target area in a very dynamic way.</p>

  574. <p>Try to hover over the purple square, and notice how it will trigger the hover effect on the link (its parent).</p>

  575. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.link</span> <span class="token punctuation">{</span>

  576.   <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>

  577. <span class="token punctuation">}</span>

  578. 

  579. <span class="token selector">.link a:after</span> <span class="token punctuation">{</span>

  580.   <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>

  581.   <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>

  582.   <span class="token property">left</span><span class="token punctuation">:</span> 160%<span class="token punctuation">;</span>

  583.   <span class="token property">top</span><span class="token punctuation">:</span> -40px<span class="token punctuation">;</span>

  584.   <span class="token property">--size</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span>

  585.   <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size<span class="token punctuation">)</span><span class="token punctuation">;</span>

  586.   <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size<span class="token punctuation">)</span><span class="token punctuation">;</span>

  587.   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>194<span class="token punctuation">,</span> 170<span class="token punctuation">,</span> 216<span class="token punctuation">)</span><span class="token punctuation">;</span>

  588.   <span class="token property">border-radius</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span>

  589. <span class="token punctuation">}</span></code></pre>

  590. <p><astro-island uid="1WDIR5" prefix="r26" component-url="https://ishadeed.com/_astro/ExpandTarget.UVLz_TuK.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"content":[0,"Try to hover on the purple square. It will trigger the link."],"variation":[0,"2"],"helper":[0,true]}' ssr="" client="visible" opts='{"name":"ExpandTarget","value":true}' await-children=""><div><p>Try to hover on the purple square. It will trigger the link.</p></div></astro-island></p>

  591. <p>Interesting, right? We can take this even further and have two pseudo-elements (<code>:before</code> and <code>:after</code>).</p>

  592. <p>This technique can be extended to create more interesting interactions. See the following example.</p>

  593. <p><astro-island uid="Zm2kOJ" prefix="r27" component-url="https://ishadeed.com/_astro/ExpandTargetExample.TjNPOfag.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"ExpandTargetExample","value":true}' await-children=""></astro-island></p>

  594. <p>When you hover over one of the links, its thumbnail will be triggered. Interesting, right? I used my <a href="https://debuggingcss.com/">Debugging CSS</a> book and <a href="https://defensivecss.dev/">Defensive CSS</a> as an example.</p>

  595. <p>Here is how I did it:</p>

  596. <ul>

  597. <li>There is a <code>&lt;p&gt;</code> element with two links.</li>

  598. <li>Each link has a thumb that is positioned to the right side.</li>

  599. <li>There is a large padding on the right to accommodate the thumbs.</li>

  600. <li>When the link is hovered, its pseudo-element will be scaled and positioned on top.</li>

  601. </ul>

  602. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">p a:after</span> <span class="token punctuation">{</span>

  603.   <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>

  604.   <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>

  605.   <span class="token property">--size</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span>

  606.   <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>

  607.   <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size<span class="token punctuation">)</span><span class="token punctuation">;</span>

  608.   <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size<span class="token punctuation">)</span><span class="token punctuation">;</span>

  609.   <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>

  610.   <span class="token property">transition</span><span class="token punctuation">:</span> 0.3s ease-out<span class="token punctuation">;</span>

  611. <span class="token punctuation">}</span>

  612. 

  613. <span class="token selector">p a:hover:after</span> <span class="token punctuation">{</span>

  614.   <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.3<span class="token punctuation">)</span><span class="token punctuation">;</span>

  615. <span class="token punctuation">}</span>

  616. 

  617. <span class="token selector">p .debugging:after</span> <span class="token punctuation">{</span>

  618.   <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>

  619. <span class="token punctuation">}</span>

  620. 

  621. <span class="token selector">p .defensive:after</span> <span class="token punctuation">{</span>

  622.   <span class="token property">right</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>

  623. <span class="token punctuation">}</span></code></pre>

  624. <p>With that in mind, let’s explore a few examples of using pseudo-elements to increase the target size.</p>

  625. <h4 id="card-block-link">Card block link</h4>

  626. <p>A common confusion that happens on the web is that you have a certain expectation for where the target area for a card is, and when you try to interact with it, it’s not as per your expectations.</p>

  627. <p>Using this solution will make the text hard to select. Use with caution and when necessary only.</p>

  628. <p>Consider the following example. Try to hover on the card and notice that only the title is clickable.</p>

  629. <p><astro-island uid="alkhL" prefix="r28" component-url="https://ishadeed.com/_astro/Card.HXVEtCTV.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"Card","value":true}' await-children=""></astro-island></p>

  630. <p>The clickable area is only in the title.</p>

  631. <p><picture> <source srcset="https://ishadeed.com/_astro/expand-target-card-2.PTN6qcho_ZvQD7A.png" type="image/png"><source srcset="https://ishadeed.com/_astro/expand-target-card-2.PTN6qcho_ZiePUN.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/expand-target-card-2.PTN6qcho_ZvQD7A.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  632. <p>Here is the card’s HTML markup.</p>

  633. <pre class="language-html"><code is:raw="" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>article</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

  634.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cookies.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>

  635.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>

  636.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>How I made cookies<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span>

  637.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>time</span><span class="token punctuation">&gt;</span></span>2 Dec 2023<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>time</span><span class="token punctuation">&gt;</span></span>

  638.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

  639. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>article</span><span class="token punctuation">&gt;</span></span></code></pre>

  640. <p>Notice that the link is inside the <code>&lt;h3&gt;</code> element, so that’s why the target area is there only.</p>

  641. <p>We can add a pseudo-element to the <code>&lt;a&gt;</code> element, and position it to cover the card. Try to hover over the card, now all the cards are clickable.</p>

  642. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.card</span> <span class="token punctuation">{</span>

  643.   <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>

  644. <span class="token punctuation">}</span>

  645. <span class="token selector">​ .card h3 a::after</span> <span class="token punctuation">{</span>

  646.   <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>

  647.   <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>

  648.   <span class="token property">inset</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>

  649. <span class="token punctuation">}</span></code></pre>

  650. <p><astro-island uid="Z1W7Ryd" prefix="r29" component-url="https://ishadeed.com/_astro/Card.HXVEtCTV.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"enhanced":[0,true]}' ssr="" client="visible" opts='{"name":"Card","value":true}' await-children=""></astro-island></p>

  651. <p>In this example, there is not much text, so the accessibility concern of text being not selectable might not be valid.</p>

  652. <p>However, I would be careful to use this solution if there is too much text in the card (e.g.: title, description, author name.. etc).</p>

  653. 

  654. <p>Another use case for increasing the target size via pseudo-element is a mobile menu. I already showed a similar example but solved it via padding.</p>

  655. <p>See the following demo.</p>

  656. <p><astro-island uid="ZFnSBW" prefix="r30" component-url="https://ishadeed.com/_astro/MobileMenu.jhXdaTWo.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"MobileMenu","value":true}' await-children=""></astro-island></p>

  657. <p>The target size is small. You need to point the cursor or your finger exactly at the menu. We can add a pseudo-element that is larger than the menu, and it will solve the problem.</p>

  658. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.menu:after</span> <span class="token punctuation">{</span>

  659.   <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>

  660.   <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>

  661.   <span class="token property">inset</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>

  662.   <span class="token property">z-index</span><span class="token punctuation">:</span> -1<span class="token punctuation">;</span>

  663.   <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.5<span class="token punctuation">)</span><span class="token punctuation">;</span>

  664. <span class="token punctuation">}</span></code></pre>

  665. <p>Easy and straightforward, right? Play with the demo below and see the difference.</p>

  666. <p><astro-island uid="ZOL472" prefix="r31" component-url="https://ishadeed.com/_astro/MobileMenu.jhXdaTWo.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"enhanced":[0,true]}' ssr="" client="visible" opts='{"name":"MobileMenu","value":true}' await-children=""></astro-island></p>

  667. <h4 id="modal-dismiss-button">Modal dismiss button</h4>

  668. <p>A model dismiss button is an important action that needs to be considered while building the UI.</p>

  669. <p>If the target size is too small, it will be hard to dismiss the modal, especially on touch devices.</p>

  670. <p><astro-island uid="12Mzfu" prefix="r32" component-url="https://ishadeed.com/_astro/ModalDismiss.F2g45n_x.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"ModalDismiss","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1juvx_1"><div class="_modal_1juvx_7"><div class="_modalContent_1juvx_58"><p>title in here</p><p>a few description text just for the demo purpose.</p></div></div></div></div></astro-island></p>

  671. <p>What are the solutions that we can do?</p>

  672. <ul>

  673. <li>Increase the size of the dismiss button.</li>

  674. <li>Increase the target area only by adding a pseudo-element</li>

  675. </ul>

  676. <p><picture> <source srcset="https://ishadeed.com/_astro/modal-1.-bVW1gH8_ZqytJw.png" type="image/png"><source srcset="https://ishadeed.com/_astro/modal-1.-bVW1gH8_22t23P.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/modal-1.-bVW1gH8_ZqytJw.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  677. <p>The first solution works, but it increases the size of the header, which

  678. isn’t needed. Also, designers won’t like that 😉.</p>

  679. <p>Instead, we can add a pseudo-element to the dismiss button and it will increase the size without affecting the modal header.</p>

  680. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.button:after</span> <span class="token punctuation">{</span>

  681.   <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>

  682.   <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>

  683.   <span class="token property">inset</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>

  684.   <span class="token property">z-index</span><span class="token punctuation">:</span> -1<span class="token punctuation">;</span>

  685.   <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.5<span class="token punctuation">)</span><span class="token punctuation">;</span>

  686. <span class="token punctuation">}</span></code></pre>

  687. <p><astro-island uid="Z1ibAYg" prefix="r33" component-url="https://ishadeed.com/_astro/ModalDismiss.F2g45n_x.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"enhanced":[0,true]}' ssr="" client="visible" opts='{"name":"ModalDismiss","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1juvx_1"><div class="_modal_1juvx_7"><div class="_modalContent_1juvx_58"><p>title in here</p><p>a few description text just for the demo purpose.</p></div></div><p class="checkbox"><input id=":r33R2:" type="checkbox" class="sr-only _input_3qp17_1"><label class="_label_3qp17_16" for=":r33R2:">Enhance target size</label></p></div></div></astro-island></p>

  688. <p>Fixed 🥳</p>

  689. 

  690. <p>An example of having a large target size is a section header. There is a link that redirects the user to the full content.</p>

  691. <p>At first glance, the arrow looks fine. Try to hover on the arrow link. Notice how the target area is small.</p>

  692. <p><astro-island uid="1xYYb7" prefix="r34" component-url="https://ishadeed.com/_astro/SectionHeader.IaPXyJUt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"SectionHeader","value":true}' await-children=""></astro-island></p>

  693. <p>The spacing around the arrow is padding for the section header.</p>

  694. <p><astro-island uid="LOF9P" prefix="r35" component-url="https://ishadeed.com/_astro/SectionHeader.IaPXyJUt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"SectionHeader","value":true}' await-children=""></astro-island></p>

  695. <p>To fix that, we have two options:</p>

  696. <ul>

  697. <li>Remove padding from the header and add it to the arrow button.</li>

  698. <li>Keep the padding on the header and use a pseudo-element to increase the target size.</li>

  699. </ul>

  700. <p>I will opt-in for the pseudo solution. Feel free to do the solution that works best for your use-case.</p>

  701. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.section__more:after</span> <span class="token punctuation">{</span>

  702.   <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>

  703.   <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>

  704.   <span class="token property">inset</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>

  705.   <span class="token property">z-index</span><span class="token punctuation">:</span> -1<span class="token punctuation">;</span>

  706.   <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.5<span class="token punctuation">)</span><span class="token punctuation">;</span>

  707. <span class="token punctuation">}</span></code></pre>

  708. <p><astro-island uid="1JmVfE" prefix="r36" component-url="https://ishadeed.com/_astro/SectionHeader.IaPXyJUt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"],"toggleEnhance":[0,true]}' ssr="" client="visible" opts='{"name":"SectionHeader","value":true}' await-children=""></astro-island></p>

  709. <h4 id="search-component">Search component</h4>

  710. <p>Oftentimes, we add an icon to the search component. It’s recommended to give it a enough target size.</p>

  711. <p><astro-island uid="Xnm4j" prefix="r37" component-url="https://ishadeed.com/_astro/SearchFilter.DBhRpvXm.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"SearchFilter","value":true}' await-children=""></astro-island></p>

  712. <p>In the above example, the filter button size is constrained to the icon only. We can increase the size via padding, sizing the icon, or expanding the target area with an additional element.</p>

  713. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.search__filter:after</span> <span class="token punctuation">{</span>

  714.   <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>

  715.   <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>

  716.   <span class="token property">inset</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>

  717.   <span class="token property">z-index</span><span class="token punctuation">:</span> -1<span class="token punctuation">;</span>

  718.   <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>2<span class="token punctuation">)</span><span class="token punctuation">;</span>

  719. <span class="token punctuation">}</span></code></pre>

  720. <p><astro-island uid="Z6GnhQ" prefix="r38" component-url="https://ishadeed.com/_astro/SearchFilter.DBhRpvXm.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"],"toggleEnhance":[0,true]}' ssr="" client="visible" opts='{"name":"SearchFilter","value":true}' await-children=""></astro-island></p>

  721. <p>Much better.</p>

  722. 

  723. <p>In a profile menu toggle, having the action only on the arrow icon isn’t a good practice. It forces the user to laser-point their mouse to open the menu.</p>

  724. <p><astro-island uid="Z2i5n2K" prefix="r39" component-url="https://ishadeed.com/_astro/ProfileMenu.NcPq9QU7.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"ProfileMenu","value":true}' await-children=""></astro-island></p>

  725. <p>Instead, the target size should be on the whole block (name, avatar, and icon). To do that, we can use a pseudo-element to extend the target size.</p>

  726. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.siteHeaderActions</span> <span class="token punctuation">{</span>

  727.   <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>

  728. <span class="token punctuation">}</span>

  729. 

  730. <span class="token selector">.button:after</span> <span class="token punctuation">{</span>

  731.   <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>

  732.   <span class="token property">inset</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>

  733. <span class="token punctuation">}</span></code></pre>

  734. <p><astro-island uid="219Gx6" prefix="r40" component-url="https://ishadeed.com/_astro/ProfileMenu.NcPq9QU7.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"toggleEnhance":[0,true]}' ssr="" client="visible" opts='{"name":"ProfileMenu","value":true}' await-children=""></astro-island></p>

  735. <p>Even better, we can add a background and make it more clear that all of

  736. the block is clickable.</p>

  737. <p><astro-island uid="ZTA6BG" prefix="r41" component-url="https://ishadeed.com/_astro/ProfileMenu.NcPq9QU7.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"toggleEnhance":[0,true],"boxed":[0,true]}' ssr="" client="visible" opts='{"name":"ProfileMenu","value":true}' await-children=""></astro-island></p>

  738. <h3 id="checkboxes-and-radio-buttons">Checkboxes and radio buttons</h3>

  739. <p>Let’s highlight something here. The default styling for checkboxes and radio buttons on the web isn’t accessible for touch users. I guess the reason is because these controls weren’t designed for touch in the first place.</p>

  740. <p><astro-island uid="Z1NAlBu" prefix="r42" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island></p>

  741. <p>I experimented to validate that. In the following photo, see how the tip of my thumb is almost the size of three checkboxes. It’s very hard to choose an option. This is the default style for checkboxes.</p>

  742. <p><picture> <source srcset="https://ishadeed.com/_astro/example-checkbox-1.QtNLxMH4_175es6.png" type="image/png"><source srcset="https://ishadeed.com/_astro/example-checkbox-1.QtNLxMH4_1DGMCK.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/example-checkbox-1.QtNLxMH4_175es6.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  743. <p>Let’s explore how to make this much better.</p>

  744. <h4 id="link-the-input-with-the-label">Link the input with the label</h4>

  745. <p>Before diving into this solution, let’s highlight the issue it prevents.</p>

  746. <p>Say that we have the following HTML: an input and a label.</p>

  747. <pre class="language-html"><code is:raw="" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>feedback<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>feedback1<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>

  748. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">&gt;</span></span>Social media<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span></code></pre>

  749. <p>The target area will be only on the checkbox (the highlighted area).</p>

  750. <p><astro-island uid="TLr98" prefix="r43" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island></p>

  751. <p>To fix that, the input ID must be used in the <code>for</code> attribute of the label. Such a quick fix with a big impact on the user experience and accessibility.</p>

  752. <pre class="language-html"><code is:raw="" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>feedback<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>feedback1<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>

  753. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>feedback1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Social media<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span></code></pre>

  754. <p><astro-island uid="RIQtj" prefix="r44" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island></p>

  755. <h4 id="make-the-checkbox-bigger">Make the checkbox bigger</h4>

  756. <p>The next step is to increase the checkbox size. To make things easier, I will do a custom checkbox and hide the default one. This is better to have a consistent experience across different browsers and devices.</p>

  757. <ul>

  758. <li>Hide the default input. I used the <code>sr-only</code> solution to hide it only visually.</li>

  759. <li>Styled a custom element for the label.</li>

  760. </ul>

  761. <pre class="language-html"><code is:raw="" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span>

  762.   <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>”sr-only”<span class="token punctuation">"</span></span>

  763.   <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span>

  764.   <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>feedback<span class="token punctuation">"</span></span>

  765.   <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>feedback1<span class="token punctuation">"</span></span>

  766. <span class="token punctuation">/&gt;</span></span>

  767. Social media

  768. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>feedback1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span></code></pre>

  769. <p><astro-island uid="2nCbld" prefix="r45" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"3"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island></p>

  770. <h4 id="add-padding">Add padding</h4>

  771. <p>Increasing the padding around the checkbox will make the target area even larger.</p>

  772. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">label</span> <span class="token punctuation">{</span>

  773.   <span class="token property">padding-block</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span>

  774. <span class="token punctuation">}</span></code></pre>

  775. <p><astro-island uid="Z2cPodr" prefix="r46" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"4"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island></p>

  776. <h4 id="increase-spacing-between-each-row">Increase spacing between each row</h4>

  777. <p>You might be wondering, the article is about increasing the target size, but the checkboxes are too close to each other. Let’s fix that.</p>

  778. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.form-group</span> <span class="token punctuation">{</span>

  779.   <span class="token property">gap</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>

  780. <span class="token punctuation">}</span></code></pre>

  781. <p><astro-island uid="s6o8o" prefix="r47" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"5"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island></p>

  782. <h4 id="make-the-labels-equal-to-the-largest-one">Make the labels equal to the largest one</h4>

  783. <p>Currently, the width of each option is equal to its container. This is a large target area that can get even larger if the container is taking the full width.</p>

  784. <p>See the following example.</p>

  785. <p><astro-island uid="Z1i3zVB" prefix="r48" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"6"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island></p>

  786. <p>This is a very large target area that isn’t needed in my opinion. What we can do instead is to limit the width of all options to the largest of them.</p>

  787. <p>We can get the benefit of <code>max-content</code> in CSS. When we add it to the options container, its width will be equal to the longest option.</p>

  788. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.form-group</span> <span class="token punctuation">{</span>

  789.   <span class="token property">width</span><span class="token punctuation">:</span> max-content<span class="token punctuation">;</span>

  790. <span class="token punctuation">}</span></code></pre>

  791. <p><astro-island uid="ZBIeVa" prefix="r49" component-url="https://ishadeed.com/_astro/CheckboxExample.8UrfXGPq.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"7"]}' ssr="" client="visible" opts='{"name":"CheckboxExample","value":true}' await-children=""></astro-island></p>

  792. <p>On mobile, we can increase the spacing between the checkbox items. We might not need that. Please make sure to test them.</p>

  793. <p>I made a final demo that show the process of enhancing the UI. Move the slider to see the gradual enhancement.</p>

  794. <p><astro-island uid="ZGMdKl" prefix="r50" component-url="https://ishadeed.com/_astro/DemoCheckbox.AEQa6zTC.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"DemoCheckbox","value":true}' await-children=""></astro-island></p>

  795. <p>With that, here is the enhanced target size with an actual larger thumb using them (Hey there!).</p>

  796. <p><picture> <source srcset="https://ishadeed.com/_astro/example-checkbox-2.s6ysUW0v_1a10bj.png" type="image/png"><source srcset="https://ishadeed.com/_astro/example-checkbox-2.s6ysUW0v_1GCylX.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/example-checkbox-2.s6ysUW0v_1a10bj.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  797. <p>From the photo, I can see that my thumb tip is being able to tap a specific

  798. checkbox without worrying about checking one by mistake.</p>

  799. <p>Since humans like visuals more, here is a side-by-side comparison of the before and after.</p>

  800. <p><picture> <source srcset="https://ishadeed.com/_astro/example-checkbox-3.VXbf8iIk_Z14ocTL.png" type="image/png"><source srcset="https://ishadeed.com/_astro/example-checkbox-3.VXbf8iIk_ZwLDJ7.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/example-checkbox-3.VXbf8iIk_Z14ocTL.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  801. <p>Notice how the difference is clear. Always make sure to have a large target

  802. size. See the following video for me trying to use the checkboxes.</p>

  803. <video poster="https://ishadeed.com/assets/target-size/videos/test-poster.png" src="https://ishadeed.com/assets/target-size/videos/test-video.mp4" controls controlslist="nodownload"></video>

  804. <h3 id="action-buttons">Action buttons</h3>

  805. <p>Buttons are a foundational component of the web. On every website you visit, you might need to interact with a button. When built right, they can be effective and easy to use for the user.</p>

  806. <p>In the given example, two buttons are present. It’s possible to tap the wrong button due to their small size and minimal spacing.</p>

  807. <p>Try to change the thumb size and notice how the touch indicator can easily overlap the buttons at once. This isn’t good.</p>

  808. <p><astro-island uid="Z1IVVvi" prefix="r51" component-url="https://ishadeed.com/_astro/TouchIndicator.8MUI1jDX.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"TouchIndicator","value":true}' await-children=""><div class="touch-test"><div class="box"><div class="content undefined"><h3>Please review changes</h3><p>All changes will be saved upon confirming.</p></div><p class="touch"></p></div></div></astro-island></p>

  809. <p>We have two options to fix that:</p>

  810. <ul>

  811. <li>Increase button size and spacing</li>

  812. <li>Display each button it a new line with full width</li>

  813. </ul>

  814. <p><picture> <source srcset="https://ishadeed.com/_astro/example-buttons-1._JwUmOce_1UYccD.png" type="image/png"><source srcset="https://ishadeed.com/_astro/example-buttons-1._JwUmOce_MYCQR.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/example-buttons-1._JwUmOce_1UYccD.png" alt="" loading="lazy" decoding="async"> </source></source></picture>I won’t

  815. discuss which solution is the best, but the idea is that we want to

  816. increase the target size. In both solutions, it’s harder to overlap or

  817. tap a button my mistake.</p>

  818. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.button-group</span> <span class="token punctuation">{</span>

  819.   <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>

  820.   <span class="token property">gap</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span>

  821. <span class="token punctuation">}</span>

  822. <span class="token selector">​ .button</span> <span class="token punctuation">{</span>

  823. 

  824.   <span class="token property">padding</span><span class="token punctuation">:</span> 0.5rem 1rem<span class="token punctuation">;</span>

  825. <span class="token punctuation">}</span></code></pre>

  826. <p>Or..</p>

  827. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.button-group</span> <span class="token punctuation">{</span>

  828.   <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>

  829.   <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>

  830.   <span class="token property">gap</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span>

  831. <span class="token punctuation">}</span>

  832. <span class="token selector">​ .button</span> <span class="token punctuation">{</span>

  833. 

  834.   <span class="token property">padding</span><span class="token punctuation">:</span> 0.5rem 1rem<span class="token punctuation">;</span>

  835. <span class="token punctuation">}</span></code></pre>

  836. <p>For the sake of this example, I will go with the first solution.</p>

  837. <p><astro-island uid="2en9q5" prefix="r52" component-url="https://ishadeed.com/_astro/TouchIndicator.8MUI1jDX.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"enhanced":[0,true]}' ssr="" client="visible" opts='{"name":"TouchIndicator","value":true}' await-children=""><div class="touch-test"><div class="box"><div class="content enhanced"><h3>Please review changes</h3><p>All changes will be saved upon confirming.</p></div><p class="touch"></p></div></div></astro-island></p>

  838. <h3 id="text-buttons">Text buttons</h3>

  839. <p>Text buttons are often used to give more focus to the surrounding content, or to use them as a secondary button.</p>

  840. <p>In the following demo, the text button “learn more” looks like it has a good target size. Toggle the outline and see it.</p>

  841. <p><astro-island uid="268TaJ" prefix="r53" component-url="https://ishadeed.com/_astro/TextButton.Gu2escNA.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"showOutline":[0,true]}' ssr="" client="visible" opts='{"name":"TextButton","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1hqq0_1"><article class="_card_1hqq0_7"><img src="https://ishadeed.com/assets/target-size/cookies.jpg" alt=""><div><h3>Yummy cookies</h3><p>Learn how to make great cookies at home.</p></div></article></div></div></astro-island></p>

  842. <p>The simplest fix is to add <code>padding</code> around the button itself.</p>

  843. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.button</span> <span class="token punctuation">{</span>

  844. 

  845.   <span class="token property">padding</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>

  846. <span class="token punctuation">}</span></code></pre>

  847. <p><astro-island uid="Z12Ob50" prefix="r54" component-url="https://ishadeed.com/_astro/TextButton.Gu2escNA.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"showOutline":[0,true],"enhanced":[0,true]}' ssr="" client="visible" opts='{"name":"TextButton","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1hqq0_1"><article class="_card_1hqq0_7"><img src="https://ishadeed.com/assets/target-size/cookies.jpg" alt=""><div><h3>Yummy cookies</h3><p>Learn how to make great cookies at home.</p></div></article></div></div></astro-island></p>

  848. <p>Better, right?</p>

  849. <p>Another example where text buttons can be used is in a group of buttons. Say we have a modal with a confirm and cancel button.</p>

  850. <p><astro-island uid="1iLYfO" prefix="r55" component-url="https://ishadeed.com/_astro/ConfirmSection.7blkEYyt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"showOutline":[0,true]}' ssr="" client="visible" opts='{"name":"ConfirmSection","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1dai1_1"><article class="_card_1dai1_7"><div><div><h3>Are you sure?</h3><p>You are about to change nothing since this is just a UI example.</p></div></div></article></div></div></astro-island></p>

  851. <p>To fix that, we need to make sure that the text button has padding around it.</p>

  852. <p><astro-island uid="Z253uYi" prefix="r56" component-url="https://ishadeed.com/_astro/ConfirmSection.7blkEYyt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"showOutline":[0,true],"enhanced":[0,true]}' ssr="" client="visible" opts='{"name":"ConfirmSection","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1dai1_1"><article class="_card_1dai1_7"><div><div><h3>Are you sure?</h3><p>You are about to change nothing since this is just a UI example.</p></div></div></article></div></div></astro-island></p>

  853. <p>The pagination is often used to organize large amounts of content so the user can access them easily.</p>

  854. <p>Let’s explore a pagination example that looks fine from a visual perspective, but raises important questions when it comes to the target area size.</p>

  855. <p><astro-island uid="Z1MgAO6" prefix="r57" component-url="https://ishadeed.com/_astro/Pagination.GQenUq0_.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"Pagination","value":true}' await-children=""></astro-island></p>

  856. <p>Notice the target area when it’s highlighted.</p>

  857. <ul>

  858. <li>Target size is small</li>

  859. <li>Spacing is large</li>

  860. </ul>

  861. <p>The spacing made look like the target size is large.</p>

  862. <p><astro-island uid="6P1w3" prefix="r58" component-url="https://ishadeed.com/_astro/Pagination.GQenUq0_.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"],"spacingIndicator":[0,true]}' ssr="" client="visible" opts='{"name":"Pagination","value":true}' await-children=""></astro-island></p>

  863. <p>To fix that, we need to:</p>

  864. <ul>

  865. <li>Reduce the spacing</li>

  866. <li>Add more horizontal (inline) padding to each pagination item</li>

  867. </ul>

  868. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.pagination</span> <span class="token punctuation">{</span>

  869.   <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>

  870.   <span class="token property">gap</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>

  871. <span class="token punctuation">}</span>

  872. 

  873. <span class="token selector">.pagination__item</span> <span class="token punctuation">{</span>

  874.   <span class="token property">padding</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span>

  875. <span class="token punctuation">}</span></code></pre>

  876. <p><astro-island uid="ZqBHF2" prefix="r59" component-url="https://ishadeed.com/_astro/Pagination.GQenUq0_.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"3"],"toggleEnhance":[0,true]}' ssr="" client="visible" opts='{"name":"Pagination","value":true}' await-children=""></astro-island></p>

  877. <h3 id="vertical-navigation">Vertical navigation</h3>

  878. <p>In a previous Twitter design, the navigation was as follows. Each nav item size depends on its content.</p>

  879. <p><astro-island uid="UgDd3" prefix="r60" component-url="https://ishadeed.com/_astro/VerticalNav.rwmZXwOt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"],"Indicator":[0,"Non-clickable area"]}' ssr="" client="visible" opts='{"name":"VerticalNav$1","value":true}' await-children=""></astro-island></p>

  880. <p>This is a confusing behavior as the user might expect the full navigation element to be clickable.</p>

  881. <p><picture> <source srcset="https://ishadeed.com/_astro/vertical-nav-1.enZO-EDj_13yyaV.png" type="image/png"><source srcset="https://ishadeed.com/_astro/vertical-nav-1.enZO-EDj_Z1rOaiu.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/vertical-nav-1.enZO-EDj_13yyaV.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  882. <p>Here is a version with each navigation item taking the full width. Much

  883. better.</p>

  884. <p><astro-island uid="R3q9F" prefix="r61" component-url="https://ishadeed.com/_astro/VerticalNav.rwmZXwOt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"],"toggleEnhance":[0,true],"helper":[0,"Toggle the checkbox to see the larger targets"]}' ssr="" client="visible" opts='{"name":"VerticalNav$1","value":true}' await-children=""><div><p>Toggle the checkbox to see the larger targets</p></div></astro-island></p>

  885. <h3 id="category-list">Category list</h3>

  886. <p>In the following example, the target size is on the label only. The spacing around the labels is padding added to the <code>&lt;li&gt;</code> element, not the <code>&lt;a&gt;</code> element.</p>

  887. <p><picture> <source srcset="https://ishadeed.com/_astro/category-list-1.84dVSplc_P5nbq.png" type="image/png"><source srcset="https://ishadeed.com/_astro/category-list-1.84dVSplc_ZOY3tL.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/category-list-1.84dVSplc_P5nbq.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  888. <p>To fix that:</p>

  889. <ul>

  890. <li>Move the icon inside the <code>&lt;a&gt;</code> element.</li>

  891. <li>We need to remove the padding from the <code>&lt;li&gt;</code> and add it to the <code>&lt;a&gt;</code> element, and force them to take the full width.</li>

  892. </ul>

  893. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.nav-item a</span> <span class="token punctuation">{</span>

  894. 

  895.   <span class="token property">padding</span><span class="token punctuation">:</span> 0.8rem 1rem<span class="token punctuation">;</span>

  896.   <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>

  897. <span class="token punctuation">}</span></code></pre>

  898. <p><astro-island uid="ZyUqp1" prefix="r62" component-url="https://ishadeed.com/_astro/CategoryList.AMHssFfm.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,"Toggle the checkbox. This demo is using a pseudo-element for interactivity purposes."],"toggleEnhance":[0,true]}' ssr="" client="visible" opts='{"name":"VerticalNav","value":true}' await-children=""><div><p>Toggle the checkbox. This demo is using a pseudo-element for interactivity purposes.</p></div></astro-island></p>

  899. <p>On mobile, having a great scrolling experience is crucial to let the user explore more content. The other day, I was browsing Amazon on my mobile and noticed an interesting behavior.</p>

  900. <p>In the following figure, the scrollable section “You might also like” isn’t only on the cards, but also on the highlighted area underneath.</p>

  901. <p><picture> <source srcset="https://ishadeed.com/_astro/scrolling-container-1.j0KqkTzR_oi5Tc.png" type="image/png"><source srcset="https://ishadeed.com/_astro/scrolling-container-1.j0KqkTzR_1nhgd9.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/scrolling-container-1.j0KqkTzR_oi5Tc.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  902. <p>In CSS, we can do such a thing by extending the bottom spacing. If we’re

  903. using CSS Scroll Snap, we need to add <code>padding-bottom</code> only.</p>

  904. <p>See the following demo.</p>

  905. <p><astro-island uid="QnnGW" prefix="r63" component-url="https://ishadeed.com/_astro/ScrollingContainer.J0ZtNdDg.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"ScrollingContainer","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_8ctok_1 undefined"><div><h3>You might also like</h3><section class="_section_8ctok_12 false"><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Chocolate Cake</h4><p class="_desc_8ctok_43">Rich and moist chocolate cake with a velvety smooth ganache.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Strawberry Cheesecake</h4><p class="_desc_8ctok_43">Creamy cheesecake topped with fresh strawberries and a sweet glaze.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Apple Pie</h4><p class="_desc_8ctok_43">Flaky crust filled with cinnamon-spiced apples, baked to golden perfection.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Tiramisu</h4><p class="_desc_8ctok_43">Classic Italian dessert with layers of coffee-soaked ladyfingers and mascarpone cream.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Mango Sorbet</h4><p class="_desc_8ctok_43">Refreshing sorbet made with ripe mangoes, perfect for a tropical treat.</p></div></div></section></div><div><h3>Another section in here</h3><p>This is a random desc in here, just to show that there is another section under the scrollable one.</p></div></div></div></astro-island></p>

  906. <p>Try to scroll the section on mobile, and you will notice that the scrollable area is within the content only.</p>

  907. <p>We can extend that by increasing the bottom padding.</p>

  908. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.section</span> <span class="token punctuation">{</span>

  909. 

  910.   <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 4rem<span class="token punctuation">;</span>

  911. <span class="token punctuation">}</span></code></pre>

  912. <p><astro-island uid="aC2t" prefix="r64" component-url="https://ishadeed.com/_astro/ScrollingContainer.J0ZtNdDg.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,"Try to scroll the container on mobile."],"toggleEnhance":[0,true]}' ssr="" client="visible" opts='{"name":"ScrollingContainer","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_8ctok_1 _enhanced_8ctok_8"><div><h3>You might also like</h3><section class="_section_8ctok_12 false"><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Chocolate Cake</h4><p class="_desc_8ctok_43">Rich and moist chocolate cake with a velvety smooth ganache.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Strawberry Cheesecake</h4><p class="_desc_8ctok_43">Creamy cheesecake topped with fresh strawberries and a sweet glaze.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Apple Pie</h4><p class="_desc_8ctok_43">Flaky crust filled with cinnamon-spiced apples, baked to golden perfection.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Tiramisu</h4><p class="_desc_8ctok_43">Classic Italian dessert with layers of coffee-soaked ladyfingers and mascarpone cream.</p></div></div><div class="_sectionItem_8ctok_31"><p class="_sectionItemThumb_8ctok_47"></p><div><h4 class="_title_8ctok_39">Mango Sorbet</h4><p class="_desc_8ctok_43">Refreshing sorbet made with ripe mangoes, perfect for a tropical treat.</p></div></div></section></div><div><h3>Another section in here</h3><p>This is a random desc in here, just to show that there is another section under the scrollable one.</p></div></div><p>Try to scroll the container on mobile.</p></div></astro-island></p>

  913. <p>This is better. Some may say there’s a big spacing under the section, and I agree. However, sometimes it’s okay because the benefits outweigh the drawbacks.</p>

  914. <h3 id="placement-of-target-items">Placement of target items</h3>

  915. <p>In cases where there is an action item at the top and a result at the bottom, the user’s finger on mobile might cover the result, making it annoying to see the change when for example, changing tabs, or toggling an option from a list.</p>

  916. <p>This example is from this article.</p>

  917. <p><astro-island uid="ZCkO4u" prefix="r65" component-url="https://ishadeed.com/_astro/DemoContext.riEHUkJo.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"DemoContext","value":true}' await-children=""><div><div class="example-wrapper center"><div class="demo-context"><div><svg viewbox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.5"><path d="M12.3484 12.808C12.3484 14.675 15.1484 14.675 15.1484 12.808C15.1484 10.941 12.3484 10.941 12.3484 12.808Z" fill="black"></path><path d="M17.8914 12.808C17.8914 14.675 20.6914 14.675 20.6914 12.808C20.6914 10.941 17.8914 10.941 17.8914 12.808Z" fill="black"></path><path d="M6.94414 12.808C6.94414 14.675 9.74414 14.675 9.74414 12.808C9.74414 10.941 6.94414 10.941 6.94414 12.808Z" fill="black"></path><path d="M9.51938 3.20386H18.5079C23.6037 3.20386 27.7754 7.34814 27.7754 12.4724C27.7754 17.5967 23.6311 21.741 18.5068 21.741H16.1826L9.26688 26.8653L9.26797 21.7127C4.28369 21.5727 0.252249 17.4841 0.252249 12.4441C0.251156 7.34842 4.42369 3.20414 9.51969 3.20414L9.51938 3.20386ZM9.51938 20.4239H10.5836V24.2596L15.735 20.4239H18.5066C22.9023 20.4239 26.458 16.8681 26.458 12.4724C26.458 8.0767 22.9023 4.52098 18.5066 4.52098L9.51916 4.51988C5.12344 4.51988 1.56771 8.0756 1.56771 12.4713C1.56771 16.8682 5.12366 20.4239 9.51938 20.4239Z" fill="black"></path></g></svg><p>I checked the order page on my <span>phone</span> and tried to <span>tap</span> the order button but it’s not responding.</p></div></div></div></div></astro-island></p>

  918. <p>At first glance, the positioning of the radio buttons might seem okay. On mobile, it’s something different.</p>

  919. <p><picture> <source srcset="https://ishadeed.com/_astro/placement-target-1.3wmZOrJa_Z1XLOjh.png" type="image/png"><source srcset="https://ishadeed.com/_astro/placement-target-1.3wmZOrJa_Z1rag8C.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/placement-target-1.3wmZOrJa_Z1XLOjh.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  920. <p>Notice how my thumb is covering the result. It’s hard to see the changes

  921. while my thumb is choosing an option.</p>

  922. <p>The fix is simple. The placement of the options should be at the bottom.</p>

  923. <p><astro-island uid="vmLPo" prefix="r66" component-url="https://ishadeed.com/_astro/DemoContext.riEHUkJo.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"DemoContext","value":true}' await-children=""><div><div class="example-wrapper center"><div class="demo-context"><div><svg viewbox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.5"><path d="M12.3484 12.808C12.3484 14.675 15.1484 14.675 15.1484 12.808C15.1484 10.941 12.3484 10.941 12.3484 12.808Z" fill="black"></path><path d="M17.8914 12.808C17.8914 14.675 20.6914 14.675 20.6914 12.808C20.6914 10.941 17.8914 10.941 17.8914 12.808Z" fill="black"></path><path d="M6.94414 12.808C6.94414 14.675 9.74414 14.675 9.74414 12.808C9.74414 10.941 6.94414 10.941 6.94414 12.808Z" fill="black"></path><path d="M9.51938 3.20386H18.5079C23.6037 3.20386 27.7754 7.34814 27.7754 12.4724C27.7754 17.5967 23.6311 21.741 18.5068 21.741H16.1826L9.26688 26.8653L9.26797 21.7127C4.28369 21.5727 0.252249 17.4841 0.252249 12.4441C0.251156 7.34842 4.42369 3.20414 9.51969 3.20414L9.51938 3.20386ZM9.51938 20.4239H10.5836V24.2596L15.735 20.4239H18.5066C22.9023 20.4239 26.458 16.8681 26.458 12.4724C26.458 8.0767 22.9023 4.52098 18.5066 4.52098L9.51916 4.51988C5.12344 4.51988 1.56771 8.0756 1.56771 12.4713C1.56771 16.8682 5.12366 20.4239 9.51938 20.4239Z" fill="black"></path></g></svg><p>I checked the order page on my <span>phone</span> and tried to <span>tap</span> the order button but it’s not responding.</p></div></div></div></div></astro-island>

  924. <picture> <source srcset="https://ishadeed.com/_astro/placement-target-2.LwjLzU3l_1UBqaJ.png" type="image/png"><source srcset="https://ishadeed.com/_astro/placement-target-2.LwjLzU3l_2sdYlo.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/placement-target-2.LwjLzU3l_1UBqaJ.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  925. <p>A real-life example of this is a UX detail I like on TikTok. When you tab the

  926. progress bar of the video, the timing will be shown above in a large

  927. size.</p>

  928. <p>This is a great UX detail, as it doesn’t show the timing under my finger or next to it. See the following figure:</p>

  929. <p><picture> <source srcset="https://ishadeed.com/_astro/placement-target-vs-result.j7Un2NEp_Z2dUT9I.png" type="image/png"><source srcset="https://ishadeed.com/_astro/placement-target-vs-result.j7Un2NEp_1qGa52.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/placement-target-vs-result.j7Un2NEp_Z2dUT9I.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  930. <p>If the time were displayed on the progress bar itself, it would be harder

  931. for the user to spot it. Placing it at the top is better.</p>

  932. <p>On Instagram, it’s similar, but they also add a preview of the video.</p>

  933. <p><picture> <source srcset="https://ishadeed.com/_astro/placement-target-vs-result-2.SK-0Rka5_ZAWA4X.png" type="image/png"><source srcset="https://ishadeed.com/_astro/placement-target-vs-result-2.SK-0Rka5_Z1FaVUP.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/placement-target-vs-result-2.SK-0Rka5_ZAWA4X.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  934. <h3 id="dominant-hand-of-the-user">Dominant hand of the user</h3>

  935. <p>Making it easy for the user to tap a target is not only about its size, but also it’s location. The following is an experiment based on a React hook by <a href="https://github.com/KittyGiraudel/dhand">Kitty Giraudel</a> called “dhand”.</p>

  936. <p>The idea is to guess what’s the dominant hand for the user and update the UI based on it.</p>

  937. <p><picture> <source srcset="https://ishadeed.com/_astro/dominant-hand-1.wzgmkaOW_hGm1B.png" type="image/png"><source srcset="https://ishadeed.com/_astro/dominant-hand-1.wzgmkaOW_Z1nn4DA.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/dominant-hand-1.wzgmkaOW_hGm1B.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  938. <p>The assumption that this experience is based on is that a left-handed user

  939. will more likely tap on the far right of the UI. On the other hand, a right-handed

  940. will tap on the left side.</p>

  941. <p><picture> <source srcset="https://ishadeed.com/_astro/dominant-hand-2.dp3ednDd_ZdLRWK.png" type="image/png"><source srcset="https://ishadeed.com/_astro/dominant-hand-2.dp3ednDd_Z1SQjCW.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/dominant-hand-2.dp3ednDd_ZdLRWK.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  942. <p>With that info in mind, we can make decisions about what’s the dominant

  943. hand. It’s an interesting experience. If I can learn one thing from this,

  944. it’s that target area isn’t only about size, but also the location.</p>

  945. <h2 id="testing-target-sizes">Testing target sizes</h2>

  946. <p>Spending time on a UI without testing it is a waste of time and effort. We should test the target sizes early on and keep an eye on them throughout the product building.</p>

  947. <p>To achieve that, we need to do testing in both the design and development. Let’s start with the design aspect first.</p>

  948. <h3 id="for-designers-delivering-a-clear-target-size-spec">For designers: delivering a clear target size spec</h3>

  949. <p>As a designer, it’s important to have clear documentation or a spec that explains the target size throughout the system.</p>

  950. <p>While this might not be needed for elements like buttons, it’s important for stuff like icon buttons, cards, tabs, mobile menus, you name it!</p>

  951. <h4 id="tabs-component">Tabs component</h4>

  952. <p>In a tabs component, the spacing should be around the tab item itself, not built from the outer padding of the parent.</p>

  953. <p><picture> <source srcset="https://ishadeed.com/_astro/test-designers-1.pFkXV2JK_2iawU4.png" type="image/png"><source srcset="https://ishadeed.com/_astro/test-designers-1.pFkXV2JK_1gTqaj.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/test-designers-1.pFkXV2JK_2iawU4.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  954. <h4 id="slider-navigation">Slider navigation</h4>

  955. <p>This is a great example of keeping the UI as is, but expanding the target size to make it easier for the user to control the slider.</p>

  956. <p><picture> <source srcset="https://ishadeed.com/_astro/test-designers-2.j5oDanki_1uKRsc.png" type="image/png"><source srcset="https://ishadeed.com/_astro/test-designers-2.j5oDanki_mLj7q.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/test-designers-2.j5oDanki_1uKRsc.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  957. <p>As a designer, thinking about those UI decisions upfront is important to

  958. deliver a great UX.</p>

  959. <h4 id="icon-buttons-1">Icon buttons</h4>

  960. <p>This applies to different cases and examples. Here is one for a modal dismiss button.</p>

  961. <p><picture> <source srcset="https://ishadeed.com/_astro/test-designers-3._YGew-vA_FfQCk.png" type="image/png"><source srcset="https://ishadeed.com/_astro/test-designers-3._YGew-vA_Zl0f7q.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/test-designers-3._YGew-vA_FfQCk.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  962. <p>And this is for a close pattern that is placed at the top-right corner.

  963. Generally speaking, this pattern isn’t recommended.</p>

  964. <p>I spotted this in the tags menu in Threads by Meta.</p>

  965. <p><picture> <source srcset="https://ishadeed.com/_astro/test-designers-4.3Jkk6XZv_Z1DDesl.png" type="image/png"><source srcset="https://ishadeed.com/_astro/test-designers-4.3Jkk6XZv_2phMAP.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/test-designers-4.3Jkk6XZv_Z1DDesl.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  966. <p>Here is my recommendation.</p>

  967. <p><picture> <source srcset="https://ishadeed.com/_astro/test-designers-5.KR37WxIr_10hWCt.png" type="image/png"><source srcset="https://ishadeed.com/_astro/test-designers-5.KR37WxIr_ZX97h.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/test-designers-5.KR37WxIr_10hWCt.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  968. <h4 id="website-navigation-1">Website navigation</h4>

  969. <p>In a design tool like Figma, we sometimes forget the touch size details when we quickly mock up a UI. In this example, it’s a website header.</p>

  970. <p><picture> <source srcset="https://ishadeed.com/_astro/test-designers-6.Vajf4ul-_Z29J3LM.png" type="image/png"><source srcset="https://ishadeed.com/_astro/test-designers-6.Vajf4ul-_1fnDlW.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/test-designers-6.Vajf4ul-_Z29J3LM.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  971. <p>In this design, the navigation items target size is only on the text. This

  972. isn’t good. Don’t make the developer think twice like:</p>

  973. <ul>

  974. <li>Did the designer mean to have them like this?</li>

  975. <li>What if the user clicked <code>3px</code> above a navigation item?</li>

  976. </ul>

  977. <p>An experienced developer will fix that themselves, or ask the designer first. But we can’t assume that all developers are aware of this as people have different levels of knowledge, which is fine.</p>

  978. <p><picture> <source srcset="https://ishadeed.com/_astro/test-designers-7.osLbV_Y9_1sfSGD.png" type="image/png"><source srcset="https://ishadeed.com/_astro/test-designers-7.osLbV_Y9_qYLVS.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/test-designers-7.osLbV_Y9_1sfSGD.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  979. <h4 id="provide-a-target-size-component">Provide a target size component</h4>

  980. <p>Let’s suppose that you worked on a modal design and used an icon for a close button.</p>

  981. <p><picture> <source srcset="https://ishadeed.com/_astro/target-size-component-1.VM9rVhCi_Z2iFmYe.png" type="image/png"><source srcset="https://ishadeed.com/_astro/target-size-component-1.VM9rVhCi_Z2ki0gm.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/target-size-component-1.VM9rVhCi_Z2iFmYe.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  982. <p>In Figma, the close icon doesn’t have any boundaries other than the icon

  983. itself, thus indicating to the developer that it should be that way.</p>

  984. <p>In the following example, I placed the icon within a Target component. I can use this component anywhere in the design.</p>

  985. <p><picture> <source srcset="https://ishadeed.com/_astro/target-size-component-2.BK1i_Aqk_y6EA1.png" type="image/png"><source srcset="https://ishadeed.com/_astro/target-size-component-2.BK1i_Aqk_wu2iS.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/target-size-component-2.BK1i_Aqk_y6EA1.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  986. <p>Making this clear in the design is important for both the designer and

  987. the developer. If they know it, it’s a friendly reminder. If not, then

  988. they’ve learned something new!</p>

  989. <h3 id="for-developers-testing-target-sizes">For developers: testing target sizes</h3>

  990. <p>Once the design we have is well documented for target size rules, it’s time to test the UI for any small target sizes.</p>

  991. 

  992. <p>The browser DevTools is a powerful way to detect and spot target size issues. The simplest thing you can do is to check the width of a target size by inspecting the element.</p>

  993. <p><picture> <source srcset="https://ishadeed.com/_astro/developers-test-1.iJ5AJveK_2lN9xh.png" type="image/png"><source srcset="https://ishadeed.com/_astro/developers-test-1.iJ5AJveK_1dNAcv.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/developers-test-1.iJ5AJveK_2lN9xh.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  994. <p>This is good for testing a simple UI, but for a UI with lots of details,

  995. you will need to automate that somehow.</p>

  996. <h4 id="use-css-outline-to-have-a-look-at-the-target-size">Use CSS outline to have a look at the target size</h4>

  997. <p>Applying a CSS outline to every link and button on the page is a good mechanism. It helps you to see the outer box for every interactive element on the page.</p>

  998. <p>I worked on a proof of concept snippet that adds an outline to every button and link on the page plus showing the size of each.</p>

  999. <p>See it in the demo below:</p>

  1000. <p class="codepen" data-height="504.97265625" data-theme-id="light" data-slug-hash="wvOWLQw" data-user="shadeed"></p>

  1001. 

  1002. <p><a href="https://polypane.app/">Polypane browser</a> by Kilian Valkhof is a great browser for testing and debugging websites. There is a “Target size” debug feature that lets you pick a size for the cursor.</p>

  1003. <p><picture> <source srcset="https://ishadeed.com/_astro/developers-test-3.AfckxL0L_ZWiBSm.png" type="image/png"><source srcset="https://ishadeed.com/_astro/developers-test-3.AfckxL0L_Z25ibe8.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/developers-test-3.AfckxL0L_ZWiBSm.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  1004. <p>Once you pick the target size (48, 44, or 24), the cursor will become the

  1005. size of the selected option. It’s useful to spot UI elements that will

  1006. interfere with each other.</p>

  1007. <p>Here is an example in testing my headers-css project, the search and menu buttons should have more spacing between each other.</p>

  1008. <p><picture> <source srcset="https://ishadeed.com/_astro/developers-test-4.jiYYm-Pw_ZrpaQ1.png" type="image/png"><source srcset="https://ishadeed.com/_astro/developers-test-4.jiYYm-Pw_Z1zoJbM.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/developers-test-4.jiYYm-Pw_ZrpaQ1.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  1009. <p>Another detail that I liked in Polypane is highlighting small target areas

  1010. and how they interfere with each other. Here is an example of the default

  1011. HTML checkboxes:</p>

  1012. <p><picture> <source srcset="https://ishadeed.com/_astro/developers-test-5.EVJscJ5s_ZCyg9D.png" type="image/png"><source srcset="https://ishadeed.com/_astro/developers-test-5.EVJscJ5s_Z1KxOup.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/developers-test-5.EVJscJ5s_ZCyg9D.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  1013. <h2 id="real-life-examples">Real-life examples</h2>

  1014. <p>You can’t make an article on a UX topic without showcasing a practical example. Let’s explore examples that I spotted on the web and how to fix them.</p>

  1015. 

  1016. <p>The other day, I was listenting to a Twitter space, and I was about to leave the space by mistake because the “Leave” button is overlapping with the context menu (AKA the dots icon).</p>

  1017. <p><astro-island uid="ZDDoJP" prefix="r67" component-url="https://ishadeed.com/_astro/TwitterSpaces.U4-9hhPt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,"Try to hover on the Leave button or the dots menu."],"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"TwitterSpaces","value":true}' await-children=""><div><p>Try to hover on the Leave button or the dots menu.</p></div></astro-island></p>

  1018. <p>Did you notice that the dots and “leave” buttons overlap? Let me make it more clear.</p>

  1019. <p><astro-island uid="2cur99" prefix="r68" component-url="https://ishadeed.com/_astro/TwitterSpaces.U4-9hhPt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"TwitterSpaces","value":true}' await-children=""></astro-island></p>

  1020. <p>This isn’t good. To fix it, we simply need to add spacing between the icons buttons and the “leave” button.</p>

  1021. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.header</span> <span class="token punctuation">{</span>

  1022. 

  1023.   <span class="token property">gap</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>

  1024. <span class="token punctuation">}</span></code></pre>

  1025. <p><astro-island uid="Z15cCbU" prefix="r69" component-url="https://ishadeed.com/_astro/TwitterSpaces.U4-9hhPt.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props='{"helper":[0,"Much better."],"variation":[0,"3"]}' ssr="" client="visible" opts='{"name":"TwitterSpaces","value":true}' await-children=""></astro-island></p>

  1026. <p>While looking at a font in Adobe Fonts, I noticed an issue in the target size of the tag component.</p>

  1027. <p><picture> <source srcset="https://ishadeed.com/_astro/adobe-fonts-tag-1.z4SgZnZ5_1Y2tLM.png" type="image/png"><source srcset="https://ishadeed.com/_astro/adobe-fonts-tag-1.z4SgZnZ5_Q2Ur1.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/adobe-fonts-tag-1.z4SgZnZ5_1Y2tLM.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  1028. <p>The target size of the tag is on the text only. As a user, you will expect

  1029. that all of the tags is clickable. This is not good. I’m surprised to see

  1030. that by Adobe.</p>

  1031. <p><picture> <source srcset="https://ishadeed.com/_astro/adobe-fonts-tag-2.jlkOF7Ey_Z10pLdC.png" type="image/png"><source srcset="https://ishadeed.com/_astro/adobe-fonts-tag-2.jlkOF7Ey_Z28pkyo.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/adobe-fonts-tag-2.jlkOF7Ey_Z10pLdC.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  1032. <p>Here is the CSS for the component:</p>

  1033. <pre class="language-html"><code is:raw="" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>spectrum-Tags-item<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>listitem<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

  1034.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>English<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>

  1035. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></code></pre>

  1036. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.spectrum-Tags-item</span> <span class="token punctuation">{</span>

  1037.   <span class="token property">display</span><span class="token punctuation">:</span> inline-flex<span class="token punctuation">;</span>

  1038.   <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>

  1039.   <span class="token property">padding</span><span class="token punctuation">:</span> 0 9px<span class="token punctuation">;</span>

  1040.   <span class="token property">height</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span>

  1041.   <span class="token property">border</span><span class="token punctuation">:</span> 1px solid<span class="token punctuation">;</span>

  1042.   <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>

  1043. 

  1044. <span class="token punctuation">}</span></code></pre>

  1045. <p>To fix that, we need to:</p>

  1046. <ul>

  1047. <li>The padding should be added to the <code>&lt;a&gt;</code> instead.</li>

  1048. <li>Remove the fixed height Using a fixed height isn’t recommended. See <a href="https://defensivecss.dev/tip/fixed-sizes/">Fixed sizes on Defensive CSS</a>.</li>

  1049. </ul>

  1050. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.spectrum-Tags-item a</span> <span class="token punctuation">{</span>

  1051.   <span class="token property">display</span><span class="token punctuation">:</span> inline-flex<span class="token punctuation">;</span>

  1052.   <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>

  1053.   <span class="token property">padding</span><span class="token punctuation">:</span> 4px 12px<span class="token punctuation">;</span>

  1054.   <span class="token property">border</span><span class="token punctuation">:</span> 1px solid<span class="token punctuation">;</span>

  1055.   <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>

  1056. <span class="token punctuation">}</span></code></pre>

  1057. <p>Here is a video that compares the before and after change:</p>

  1058. <video poster="https://ishadeed.com/assets/target-size/videos/adobe-fonts-poster.png" src="https://ishadeed.com/assets/target-size/videos/adobe-fonts-tag.mp4" controls controlslist="nodownload"></video>

  1059. <h3 id="backblaze-navigation">Backblaze navigation</h3>

  1060. <p>I use Backblaze to back up my data and noticed something on the login page. The target size for the menu items is only on the text.</p>

  1061. <p><picture> <source srcset="https://ishadeed.com/_astro/backblaze-nav-1._NyIwUt3_1CKatB.png" type="image/png"><source srcset="https://ishadeed.com/_astro/backblaze-nav-1._NyIwUt3_Z2jgbA.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/backblaze-nav-1._NyIwUt3_1CKatB.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  1062. <p>In the UI, it indicates that the whole item is clickable because there

  1063. are top and bottom borders.</p>

  1064. <p>Again, the fix is similar to the previous Adobe example. We need to add the padding to the <code>&lt;a&gt;</code> element.</p>

  1065. <p><picture> <source srcset="https://ishadeed.com/_astro/backblaze-nav-2.sVNwrzNN_YTu6d.png" type="image/png"><source srcset="https://ishadeed.com/_astro/backblaze-nav-2.sVNwrzNN_ZF9VyY.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/backblaze-nav-2.sVNwrzNN_YTu6d.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  1066. <h3 id="dribbble-navigation">Dribbble navigation</h3>

  1067. <p>Yes, Dribbble! I found lots of interesting target size issues, so why not fix them? Even though Dribbble is full of beautiful but useless UIs with lots of shadows and trendy gradients.</p>

  1068. <p><picture> <source srcset="https://ishadeed.com/_astro/real-life-examples-1.l5TbdF-8_Z2iSl9l.png" type="image/png"><source srcset="https://ishadeed.com/_astro/real-life-examples-1.l5TbdF-8_Z25gxWy.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/real-life-examples-1.l5TbdF-8_Z2iSl9l.png" alt="" loading="lazy" decoding="async"> </source></source></picture>I added a

  1069. CSS outline and noticed the following issues:</p>

  1070. <ul>

  1071. <li>Navigation item target size is too small</li>

  1072. <li>There is zero spacing between the navigation items. This isn’t good.</li>

  1073. <li>The search button is very small &amp; inconsistent with the messages and profile size.</li>

  1074. </ul>

  1075. <p>On mobile, it’s even worse. The width of each navigation item is dependent on the content length.</p>

  1076. <p><picture> <source srcset="https://ishadeed.com/_astro/real-life-examples-2.jMb3iBtB_Z1ft6yV.png" type="image/png"><source srcset="https://ishadeed.com/_astro/real-life-examples-2.jMb3iBtB_Z11Qjn9.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/real-life-examples-2.jMb3iBtB_Z1ft6yV.png" alt="" loading="lazy" decoding="async"> </source></source></picture>I took it

  1077. further and mocked up how this UI can be viewed compared to human

  1078. fingers.</p>

  1079. <p><picture> <source srcset="https://ishadeed.com/_astro/real-life-examples-3.FyLgrdba_c8rEM.png" type="image/png"><source srcset="https://ishadeed.com/_astro/real-life-examples-3.FyLgrdba_pKeQz.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/real-life-examples-3.FyLgrdba_c8rEM.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  1080. <p>Since the CSS is written via Flexbox, I was able to increase the CSS <code>gap</code>

  1081. and force the flex items to align normally.</p>

  1082. <p>The web version:</p>

  1083. <p><picture> <source srcset="https://ishadeed.com/_astro/real-life-examples-4.fg_d5aRG_mNNVS.png" type="image/png"><source srcset="https://ishadeed.com/_astro/real-life-examples-4.fg_d5aRG_AqB8F.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/real-life-examples-4.fg_d5aRG_mNNVS.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  1084. <p>And the mobile version:</p>

  1085. <p><picture> <source srcset="https://ishadeed.com/_astro/real-life-examples-5.m05M50JQ_Z1cU5R6.png" type="image/png"><source srcset="https://ishadeed.com/_astro/real-life-examples-5.m05M50JQ_C5fim.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/real-life-examples-5.m05M50JQ_Z1cU5R6.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  1086. <p>But wait… why the “Go Pro” item doesn’t have a padding from the bottom?

  1087. It’s because of this CSS:</p>

  1088. <pre class="language-css"><code is:raw="" class="language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 949px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  1089.   <span class="token selector">.nav-v2-main__item:last-child a</span> <span class="token punctuation">{</span>

  1090.     <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>

  1091.   <span class="token punctuation">}</span>

  1092. <span class="token punctuation">}</span></code></pre>

  1093. <p>This is not good. It’s a bad practice. Just keep the padding, please.</p>

  1094. <h3 id="dribbble-checkbox-component">Dribbble checkbox component</h3>

  1095. <p>Another example of Dribbble is the checkbox component. The target size is limited to the checkbox height only, while its container is large and is indicated with a border.</p>

  1096. <p>You might argue that this is just a container. For me, as a user, I assumed that the whole area was clickable.</p>

  1097. <p><picture> <source srcset="https://ishadeed.com/_astro/real-life-examples-6.Z8j5Mmi__2tNkAn.png" type="image/png"><source srcset="https://ishadeed.com/_astro/real-life-examples-6.Z8j5Mmi__Z2mL11L.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/real-life-examples-6.Z8j5Mmi__2tNkAn.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  1098. <p>What I did is that I removed the padding from the outer container and added

  1099. it instead to the checkbox itself.</p>

  1100. <pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.checkbox-toggle-content</span> <span class="token punctuation">{</span>

  1101. 

  1102. <span class="token punctuation">}</span>

  1103. <span class="token selector">​ .checkbox-radio-label</span> <span class="token punctuation">{</span>

  1104.   <span class="token property">padding</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span>

  1105. <span class="token punctuation">}</span></code></pre>

  1106. <p><picture> <source srcset="https://ishadeed.com/_astro/real-life-examples-7.SIWrOZU2_ZdG2qR.png" type="image/png"><source srcset="https://ishadeed.com/_astro/real-life-examples-7.SIWrOZU2_Z4ff5.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/real-life-examples-7.SIWrOZU2_ZdG2qR.png" alt="" loading="lazy" decoding="async"> </source></source></picture></p>

  1107. <p>Much better.</p>

  1108. <h2 id="target-size-cheatsheet">Target size cheatsheet</h2>

  1109. <p>I worked on a simple A4 cheatsheet that summarize the most important points in the article. It’s only for 7.00 USD and you can purchase it as a support for this guide.</p>

  1110. <p><picture> <source srcset="https://ishadeed.com/_astro/poster.XewPyGAC_ZKt6B2.jpg" type="image/jpg"><source srcset="https://ishadeed.com/_astro/poster.XewPyGAC_ZORkpD.webp" type="image/webp"> <img src="https://ishadeed.com/_astro/poster.XewPyGAC_ZKt6B2.jpg" alt="" loading="lazy" decoding="async"> </source></source></picture>

  1111. <astro-island uid="ZrxhmJ" prefix="r70" component-url="https://ishadeed.com/_astro/CheatSheetButton.Zrqypjtr.js" component-export="default" renderer-url="https://ishadeed.com/_astro/client.2wOxL1Aq.js" props="{}" ssr="" client="visible" opts='{"name":"CheatSheetButton","value":true}' await-children=""></astro-island></p>

  1112. <h2 id="outro">Outro</h2>

  1113. <p>When I started working on this article, I hadn’t expected it to grow that large. I initially wanted to make an interactive guide about the clickable area, but after a lot of research, I decided to call it “Target size”.</p>

  1114. <p>I already published about <a href="https://ishadeed.com/article/clickable-area/">this topic</a> five years ago, but felt the need to do it again, and I’m glad for that.</p>

  1115. <h3 id="thank-you">Thank you</h3>

  1116. <p>Thanks to my wife and partner, Kholoud, for her great support throughout the creation of this guide. I asked her about it every day for the past 6 weeks, and she didn’t kick me out of our home.</p>

  1117. <h3 id="resources">Resources</h3>

  1118. <ul>

  1119. <li><a href="https://craftcms.com/blog/accessible-target-sizes">Accessible Target Sizes</a></li>

  1120. <li><a href="https://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Target Size and 2.5.5</a></li>

  1121. <li><a href="https://tetralogical.com/blog/2022/12/20/foundations-target-size">Foundations: target sizes</a></li>

  1122. <li><a href="https://www.nngroup.com/articles/touch-target-size/">Touch Targets on Touchscreens</a></li>

  1123. <li><a href="https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/">Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes</a></li>

  1124. </ul>

  1125. <h3 id="thanks-to">Thanks to</h3>

  1126. <ul>

  1127. <li><a href="https://twitter.com/fvsch">Florens Verschelde</a> for shedding the light on the initial and fast movement of Fitt’ law.</li>

  1128. <li>The <a href="https://www.joshwcomeau.com/snippets/react-hooks/use-mouse-position/">useMousePosition</a> hook by Joshua Comeau</li>

  1129. <li><a href="https://kld.dev/building-table-of-contents/">Astro table of contents</a> by Kevin Drum</li>

  1130. <li>This <a href="https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles/">article</a> by Costa Alexoglou on Smashing Magazine inspired me to the solution of safe triangles, but I used a clip-path instead.</li>

  1131. </ul>

  1132. </article>

  1133. 

  1134. 

  1135. <hr>

  1136. 

  1137. <footer>

  1138.   <p>

  1139.     <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">

  1140.         <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>

  1141.       </svg> Accueil</a> •

  1142.     <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">

  1143.         <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>

  1144.       </svg> Suivre</a> •

  1145.     <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">

  1146.         <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>

  1147.       </svg> Pro</a> •

  1148.     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">

  1149.         <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>

  1150.       </svg> Email</a> •

  1151.     <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">

  1152.         <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>

  1153.       </svg> Légal</abbr>

  1154.   </p>

  1155.   <template id="theme-selector">

  1156.       <form>

  1157.           <fieldset>

  1158.               <legend><svg class="icon icon-brightness-contrast">

  1159.                 <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>

  1160.               </svg> Thème</legend>

  1161.               <label>

  1162.                   <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto

  1163.               </label>

  1164.               <label>

  1165.                   <input type="radio" value="dark" name="chosen-color-scheme"> Foncé

  1166.               </label>

  1167.               <label>

  1168.                   <input type="radio" value="light" name="chosen-color-scheme"> Clair

  1169.               </label>

  1170.           </fieldset>

  1171.       </form>

  1172.   </template>

  1173. </footer>

  1174. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>

  1175. <script>

  1176.     function loadThemeForm(templateName) {

  1177.         const themeSelectorTemplate = document.querySelector(templateName)

  1178.         const form = themeSelectorTemplate.content.firstElementChild

  1179.         themeSelectorTemplate.replaceWith(form)

  1180. 

  1181.         form.addEventListener('change', (e) => {

  1182.             const chosenColorScheme = e.target.value

  1183.             localStorage.setItem('theme', chosenColorScheme)

  1184.             toggleTheme(chosenColorScheme)

  1185.         })

  1186. 

  1187.         const selectedTheme = localStorage.getItem('theme')

  1188.         if (selectedTheme && selectedTheme !== 'undefined') {

  1189.             form.querySelector(`[value="${selectedTheme}"]`).checked = true

  1190.         }

  1191.     }

  1192. 

  1193.     const prefersColorSchemeDark = '(prefers-color-scheme: dark)'

  1194.     window.addEventListener('load', () => {

  1195.         let hasDarkRules = false

  1196.         for (const styleSheet of Array.from(document.styleSheets)) {

  1197.             let mediaRules = []

  1198.             for (const cssRule of styleSheet.cssRules) {

  1199.                 if (cssRule.type !== CSSRule.MEDIA_RULE) {

  1200.                     continue

  1201.                 }

  1202.                 // WARNING: Safari does not have/supports `conditionText`.

  1203.                 if (cssRule.conditionText) {

  1204.                     if (cssRule.conditionText !== prefersColorSchemeDark) {

  1205.                         continue

  1206.                     }

  1207.                 } else {

  1208.                     if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {

  1209.                         continue

  1210.                     }

  1211.                 }

  1212.                 mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))

  1213.             }

  1214. 

  1215.             // WARNING: do not try to insert a Rule to a styleSheet you are

  1216.             // currently iterating on, otherwise the browser will be stuck

  1217.             // in a infinite loop…

  1218.             for (const mediaRule of mediaRules) {

  1219.                 styleSheet.insertRule(mediaRule.cssText)

  1220.                 hasDarkRules = true

  1221.             }

  1222.         }

  1223.         if (hasDarkRules) {

  1224.             loadThemeForm('#theme-selector')

  1225.         }

  1226.     })

  1227. </script>

  1228. </body>

  1229. </html>