Web Accessibility: What’s Beyond the Screen

Web accessibility is an essential pillar in developing and designing websites and applications, going beyond mere compliance with standards. Tim Berners-Lee, the creator of the World Wide Web, emphasizes that its power lies in its universality and the need to make it accessible to everyone, regardless of their abilities.

This article stems from a talk given by one of our Software Engineers, Eliana Rosselli, who was also one of the speakers at DjangoCon US 2023 within the Sparq team. She drew inspiration from a talk presented at last year’s event in the United States, titled “Django’s Accessibility Track Record” which explores the importance of web accessibility and the long journey still ahead to make the web truly accessible.

Based on these experiences, we’ll share some basic accessibility guidelines that you can use to start making your websites more accessible. 

Semantic HTML and ARIA Attributes: The Foundation of Accessibility

Using semantic HTML is crucial for creating an accessible website, selecting tags that describe content meaningfully. Incorporating Accessible Rich Internet Applications (ARIA) attributes allows adding extra meaning when HTML alone is insufficient to convey information in an accessible manner.

Practical Tips for Developers:

• Semantic HTML:
  

Employ HTML tags that communicate essential meaning, opting for semantic tags like <header>, <nav>, <section>, etc. Organize headings hierarchically and use appropriate tags in forms.

• Alt Attribute for Images:

Assign descriptive and human-readable alternative text (alt) to images, avoiding redundancies such as adding the word “image” to the alt text. Remember that alt text also benefits users when the image fails to load.

• ARIA (Accessible Rich Internet Applications):

Understand and use ARIA roles and attributes in HTML to build more accessible web applications. ARIA provides additional information to assistive technologies, enhancing the experience for users with disabilities.

• aria-label: Defines a name or label for the element, useful when visible content cannot be used, as in the case of an SVG (since it’s not a <img> tag, it cannot have an alt attribute) or similar.
• Aria-labelledby: Uses the ID of another DOM element as a label instead of setting it directly. This is useful when the items that label a particular element are already visible (represented by other DOM elements).
• aria-description and aria-describedby: Provide additional descriptions or context for an element, offering information beyond what the label provides.
  

It’s not necessary to memorize all ARIA attributes; the key is to be aware of their existence and consult the reference list when needed.

For those looking to delve deeper into this topic, here are some additional resources:

• W3C ARIA Specification
• Mozilla Developer Network (MDN) – HTML: ARIA Roles

Accessible Design Systems: Facilitating Inclusive Development

The implementation of accessible design systems has been introduced as an effective strategy to ensure consistency and accessibility in web projects. Emphasis has been placed on the importance of utilizing well-established design systems, such as Material Design, that already integrate accessibility principles into their components. This streamlines the process and reduces the likelihood of overlooking crucial accessibility aspects.

Automated and Manual Checks: Ensuring Accessibility

Integrating both automated and manual checks into development processes is essential for maintaining high accessibility standards. There’s a useful Chrome extension called Accessibility Insights for the Web which provides  automatic checks and guidelines for manual testing.

The tool allows evaluating different accessibility criteria, such as color contrast, keyboard navigation, and screen reader interpretation of elements. The utility of conducting accessibility checks in continuous integration (CI) environments to prevent regressions was also emphasized.

Legal Impact and SEO: Additional Reasons for Accessibility

Web accessibility is not only an ethical responsibility but can also have legal implications. The potential for facing lawsuits related to web accessibility has led to a rise in legal specialization in this field.

Furthermore, web accessibility can enhance search engine optimization (SEO) by making content more easily interpretable by web crawlers. This further underscores the importance of addressing accessibility from the beginning of the development process.

A Collective Commitment to Accessibility

In this paragraph I’d like to underscore the importance of keyboard navigation. Through an example using the tab key, we highlight how some elements may not be accessible with this tool if appropriate semantic tags are not used. This results in a limited experience for those who rely on keyboard navigation.

Now, let’s take a look at the use of a Screen Reader, in this case, VoiceOver on a Mac. This software is crucial for individuals with visual impairments. As developers, we need to understand how people use these technologies to enhance the accessibility of our web applications.

VoiceOver Examples:

• Buttons without clear focus:

When using VoiceOver, some buttons may not be recognized as such due to the lack of appropriate semantic labels. This highlights the importance of ensuring that all interactive elements are accessible through various forms of navigation.

• Interaction differences:

Visual focus is crucial for those using keyboard navigation. The visibility of the cursor facilitates understanding the current position on the page, enhancing the user experience.

• Use of ARIA and aria-description:

There are multiple ways of how ARIA can improve accessibility, especially in situations where elements need additional descriptions. Proper descriptions, for example,can enrich the user experience.

• Specific Screen Reader Commands:

It’s also worth learning useful commands for Screen Reader users, such as the list of headings and links. Developers should consider these aspects and ensure that their pages are structured and labeled appropriately.

Additional Considerations:

In addition to navigation and interaction, there are other aspects such as contrast, font size and page layout. Adhering to accessibility guidelines in these areas is essential to ensure an inclusive experience.

Web accessibility is an ongoing commitment. Every small improvement we make in our applications contributes to creating a more inclusive online environment. By understanding the tools and technologies used by people with disabilities, we can effectively address accessibility challenges.

As developers, we are urged to adopt practices that prioritize accessibility. From using semantic HTML to the proper implementation of ARIA and designing with all users in mind, our decisions have a significant impact on web accessibility. This is a shared responsibility that requires collaboration and awareness. By adopting these practices, we contribute to building an inclusive and user-friendly online environment for everyone. We invite you to apply this knowledge in your projects and communities, fostering positive change toward a more accessible web. Web accessibility is an investment in creating online experiences that benefit a diverse audience and enrich digital connectivity for all.

Want to learn more? Let’s talk.