Accessibility UI Guidelines: Text

Text

2.12 Text

Well-structured and thoughtfully formatted text significantly enhances the readability of web content. By adhering to best practices that consider neurological diversity, you ensure that your website is accessible and user-friendly for all visitors, including those with cognitive disabilities such as dyslexia, ADHD, or other neurological conditions.

2.12.1 Clear and Concise Language

Use simple and straightforward language to convey your message. Avoid jargon, complex sentences, and ambiguous terms that can confuse readers, especially those with cognitive impairments.

<!-- Clear and Concise Paragraph -->
<p>Our mission is to provide high-quality products that meet your needs and exceed your expectations.</p>

<!-- Complex and Confusing Paragraph (Avoid) -->
<p>Our organisational objectives are centered around the strategic delivery of superior quality commodities that not only align with but also transcend customer requisites and anticipations.</p>

2.12.2 Appropriate Font Size and Type

Select font sizes and types that enhance readability. Use sans-serif fonts like Arial, Helvetica, or Verdana, which are easier to read on screens. Ensure that font sizes are large enough to be comfortably read without straining.

/* Example CSS for Readable Fonts */
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

2.12.3 Sufficient Line Spacing and Text Length

Maintain adequate line spacing (leading) and limit the length of text blocks to improve readability. Shorter paragraphs prevent cognitive overload and make it easier for users to process information.

/* Example CSS for Line Spacing */
p {
    line-height: 1.6;
    margin-bottom: 1em;
}

2.12.4 High Contrast Between Text and Background

Ensure a high contrast ratio between text and background colors to make content easily readable. Adhere to the Web Content Accessibility Guidelines (WCAG) for color contrast.

/* Example CSS for High Contrast */
body {
    background-color: #ffffff;
    color: #000000;
}

a {
    color: #005fcc;
}

a:hover, a:focus {
    color: #003399;
    text-decoration: underline;
}

2.12.5 Use of Headings and Subheadings

Organise content using headings and subheadings to create a clear structure. This not only aids in navigation but also helps users with cognitive impairments to understand and locate information more efficiently.

<!-- Structured Content with Headings -->
<h2>Our Services</h2>
<p>We offer a range of services designed to meet your needs.</p>

<h3>Consulting</h3>
<p>Expert advice to help your business grow.</p>

<h3>Development</h3>
<p>Custom software solutions tailored to your requirements.</p>

2.12.6 Avoiding Cognitive Overload

Limit the amount of information presented at once. Break down complex information into manageable chunks and use bullet points or numbered lists to enhance clarity.

<!-- Avoiding Cognitive Overload -->
<p>To improve our services, we focus on the following areas:</p>
<ul>
    <li>Customer Support</li>
    <li>Product Development</li>
    <li>Quality Assurance</li>
    <li>Marketing Strategies</li>
</ul>

2.12.7 Consistent Layout and Formatting

Maintain a consistent layout and formatting throughout your website. Consistency helps users predict where to find information, reducing cognitive strain and enhancing usability.

/* Example CSS for Consistent Formatting */
h2 {
    font-size: 1.5em;
    margin-top: 1.5em;
}

h3 {
    font-size: 1.2em;
    margin-top: 1em;
}

p, ul, ol {
    margin-bottom: 1em;
}

2.12.8 Use of Visual Aids

Incorporate images, icons, and other visual aids to support and enhance textual content. Visuals can help convey information more effectively and aid comprehension for users with neurological differences.

<!-- Using Visual Aids -->
<p>Our process includes the following steps:</p>
<ol>
    <li><img src="research-icon.png" alt="Research Icon"> Research</li>
    <li><img src="design-icon.png" alt="Design Icon"> Design</li>
    <li><img src="development-icon.png" alt="Development Icon"> Development</li>
    <li><img src="testing-icon.png" alt="Testing Icon"> Testing</li>
</ol>

2.12.9 ARIA Attributes for Enhanced Accessibility

Use ARIA (Accessible Rich Internet Applications) attributes to provide additional context and improve the accessibility of textual content. ARIA can help assistive technologies better interpret the structure and purpose of content.

<!-- Example of ARIA Attributes -->
<p aria-label="Company Overview">Our company specialises in providing top-notch services to our clients.</p>

2.12.11 Avoiding Text-Only Content

While text is essential, relying solely on it can be challenging for some users. Combine text with other media formats like audio, video, and interactive elements to cater to diverse learning and processing styles.

<!-- Combining Text with Media -->
<p>Learn more about our services by watching the video below:</p>
<video controls>
    <source src="services-overview.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>