Guide to Accesibility in Web Applications

by | May 27, 2024 | Web | 0 comments

Creating web applications that are accessible to all users, including those with disabilities, is not just a legal requirement in many regions (including Poland) but also a moral imperative. Web accessibility, often referred to as a11y, ensures that everyone, regardless of their abilities, can navigate and interact with web content. This blog post explores the importance of web accessibility, the principles of good semantic HTML architecture, and practical tips for making web applications reader-friendly and keyboard-friendly, particularly using React.

Understanding Web Accessibility

Web accessibility is the practice of making websites usable by people of all abilities and disabilities. This includes those with visual, auditory, motor, and cognitive impairments. According to the World Health Organization, over 1 billion people, or about 15% of the global population, live with some form of disability. These individuals often face significant challenges when accessing the web, making accessibility an essential aspect of web development.

The Importance of Semantic HTML

Semantic HTML is the foundation of accessible web applications. It involves using HTML tags that convey the meaning and structure of content. Proper use of semantic HTML ensures that assistive technologies, such as screen readers, can interpret and present content accurately to users.

Key elements of semantic HTML include:

  • Headings (<h1> to <h6>): Use headings to outline the structure of your content. Screen readers use these to navigate the page.
  • Landmarks (<header>, <nav>, <main>, <footer>): Define different sections of your page to help users understand and navigate the layout.
  • Lists (<ul>, <ol>, <li>): Use lists for related items to convey relationships and hierarchies.
  • Links (<a>): Ensure links are descriptive and make sense out of context.

Making Web Content Reader-Friendly

A key approach to enhancing the accessibility of your web application is by utilizing semantic HTML elements and attributes. These elements impart meaningful information and structure to your content, aiding screen readers, browsers, and search engines.

  1. Use Alt Text for Images: Provide descriptive alt text for images to convey the information to users who cannot see them. Note that, screen readers automatically detect images, below you can see bad and good examples of alt text.
    Bad example:
    <img src="cat.jpg" alt="Image of a cat" />
    Good example:
    <img src="cat.jpg" alt="Gray cat sitting on a windowsill" />
  2. Label Forms Properly: Use <label> elements with form controls and associate them correctly using the for attribute.
    <label for="email">Email Address</label>
    <input type="email" id="email" name="email" />
  3. Provide ARIA Roles and Properties: ARIA (Accessible Rich Internet Applications) roles, states, and properties enhance the accessibility of dynamic content.
    <div role="alert">Your form has been submitted successfully!</div>

Proper styling and CSS

CSS significantly influences the accessibility of your website, particularly for users with visual impairments, color blindness, or those in challenging viewing conditions like low lighting or screen glare. Proper styling also enhances the user experience across different browsers and screen sizes.

Font Sizes

Using pixels for font sizes is a common practice, but it can hinder accessibility. Users who struggle with small text may increase their browser’s default font size, but pixel-based fonts won’t adapt to these changes. Instead, use root em (REMs) as your unit of measurement. REMs are relative to the root element, allowing your site to adjust when a user changes their font size settings.

/* Example of using REMs for font sizes */
body {
  font-size: 16px; /* base font size */
}

p {
  font-size: 1rem; /* same as 16px */
}

h1 {
  font-size: 2rem; /* 32px, twice the base size */
}

Font Styling

Prioritize semantic HTML elements over purely CSS-based styling. For instance, using the <strong> tag not only makes text bold but also conveys importance, which screen readers can interpret. This semantic meaning is lost if you rely solely on CSS classes for styling.

<!-- Semantic HTML example -->
<p>This is <strong>important</strong> information.</p>

<!-- Non-semantic CSS example (less accessible) -->
<p>This is <span class="bold">important</span> information.</p>

Font Color

Avoid using color as the sole means of conveying information. While colors can enhance visual appeal and clarity, always provide text-based instructions or messages to ensure all users understand your content.

<!-- Good practice: providing text alongside color -->
<p><span style="color: red;">Error:</span> Please enter a valid email address.</p>

<!-- Bad practice: using color alone -->
<p style="color: red;">Please enter a valid email address.</p>

Contrast

Contrast refers to the difference in brightness between two colors. A high contrast ratio ensures readability, especially for users with visual impairments. Contrast ratios range from 1:1 (least readable, e.g., white on white) to 21:1 (most readable, e.g., black on white). Aim for a minimum contrast ratio of 4.5:1 for normal text. For larger text (at least 14pt bold or 18pt), a ratio of 3:1 is acceptable. Logos and purely decorative elements are exempt from contrast requirements.

How to Test Your Web Application for Accessibility

Ensuring your web application is accessible and user-friendly requires thorough testing. This involves using various tools and techniques to simulate different user scenarios and conditions. Below are some effective methods and tools to test your web application for accessibility and user-friendliness.

Browser extensions:

  • Lighthouse
  • axe DevTools
  • WAVE

Online tools:

  • WebAIM
  • Accessible Colors

Manual testing:

  • Keyboard Navigation
  • Zooming and Resizing
  • Changing Font Size

Conclusion

Web accessibility is not just a compliance requirement but a crucial aspect of user experience. By adhering to the principles of a11y, utilizing good semantic HTML architecture, and making content both reader and keyboard-friendly, we can create inclusive web applications that everyone can use. Implementing these practices in frameworks like React further ensures that our applications are accessible to a wider audience, enhancing usability and satisfaction for all users.