What does this accessibility issue mean?
Issue summary: Insufficient or non-adjustable spacing between inline elements
Adjustable inline text spacing is important for website accessibility because it allows users to customize the spacing between characters, words, and lines of text to better meet their individual needs and preferences.
Users with visual impairments, dyslexia, reading difficulties, or cognitive impairments may have difficulty reading text with standard or smaller-than-average spacing between lines.
To ensure your content is easy to read and interact with, allow for adjustable spacing between lines of text and other inline elements.
Solution:
Ensure that text spacing set through style attributes can be adjusted with custom stylesheets
Example HTML violation: Insufficient spacing between inline elements (WCAG Level AA Issue)
<div class="product">
<img src="product.jpg" alt="Product Image" />
<p style="letter-spacing: 4px !important; word-spacing: 2px !important; line-height: 20px !important;">This is a description of the product. It has a fixed spacing.</p>
<a style="text-decoration: none; color: black; letter-spacing: 2px !important;" href="#"> Buy now! </a>
</div>The above HTML violates the avoid-inline-spacing accessibility rule because it uses inline styles with the !important declaration to apply spacing. This rule is in place to allow users to modify the spacing of text according to their accessibility needs. For example, users with dyslexia may require more spacing to comfortably read text.
By using inline styles with !important, the spacing becomes fixed and cannot be easily adjusted by users.
How to fix "Insufficient spacing between inline elements (WCAG Level AA Issue)" issue
<p style="letter-spacing: 4px; word-spacing: 2px; line-height: 20px;">This is a description of the product. It has adjustable spacing.</p>
<a style="text-decoration: none; color: black; letter-spacing: 2px;" href="#"> Buy now! </a>In this corrected version, we've removed the !important declarations. This allows the browser to adjust the spacing values according to the user's preference. This change will follow the guideline as mentioned by W3C - WCAG 2.1 (AA) and the avoid-inline-spacing rule of axe-core 4.7.
Please note that going further with true accessibility, you should provide alt attributes which describes the image, for example alt="Product X Image". This is necessary for visually impaired users who rely on screen readers to understand the content of the page. By following the above changes, you can maintain a high level of accessibility on your site.
