Which technique should a developer use for text-based hyperlink on mobile web page?

On touch-based mobile devices, small text links can be difficult for users to tap accurately. The most effective technique to improve usability is to increase the size of the clickable area, or "touch target," without necessarily increasing the font size. This is achieved by applying CSS padding to the anchor () element. The padding is invisible but expands the tappable region around the text, making the link much easier to interact with and reducing user frustration from missed taps.

1. MDN Web Docs. (2023). Touch targets. Mozilla. This article explicitly recommends using padding to increase the interactive area of an element to meet accessibility guidelines for touch controls. Retrieved from https://developer.mozilla.org/en-US/docs/Web/Accessibility/UnderstandingWCAG/Mobile/Touchtargets

2. W3C. (2023). Understanding Success Criterion 2.5.5: Target Size. In Web Content Accessibility Guidelines (WCAG) 2.1. This guideline explains the need for sufficient target size for pointer inputs, and the techniques section often suggests padding as a method. Retrieved from https://www.w3.org/WAI/WCAG21/Understanding/target-size.html

3. Nielsen, J. (2012, September 24). Touch Target Size. Nielsen Norman Group. This article recommends touch target sizes and notes that making the entire clickable area larger is key, a goal achieved with padding.