Understanding Web Accessibility (a11y): A Beginner's Guide

4 months ago

Hello STEMGeeks community, this is my first post on this community. I'm a frontend developer for more than 10 years experiences, so I would like to share some frontend thingies in this community. Since this is my first post here, I think I will share about one of the fundamental website building aspect, fundamental but often being overlooked. I'm going to talk about Web Accessibility.

Web accessibility, or a11y for short ('11' represents the 11 letters between 'a' and 'y'), is all about making web applications usable for everyone. This means that all users, regardless of their abilities or impairments, can perceive, understand, navigate, and interact with the web.

In this blog post, we will cover why web accessibility matters, the key principles of accessibility, practical steps you can take to improve accessibility on your website, and tools and resources to help you along the way. By the end of this guide, I hope we will have a solid foundation to start making our web projects more inclusive and user-friendly for everyone.

Why Web Accessibility Matters

When websites and web tools are properly designed and coded, people with disabilities can use them. However, currently many sites and tools are developed with accessibility barriers that make them difficult or impossible for some people to use.
~ (www.w3.org - Introduction to Web Accessibility)

When we talk about web accessibility, it generally means that all people, including those with disabilities, can use your website. Disabilities can be visual, auditory, physical, speech, cognitive, language, learning, and neurological. Making your site accessible is a necessity because we can not assume who will access our web. Even if the website is landing on a certain specific niche, we should imagine that our web will serve a wide range of users. In short, a website should be inclusive.

To promote this inclusivity, some countries have regulations to make web accessibility a requirement, such as the Americans with Disabilities Act (ADA) in the United States and the Web Accessibility Directive in the European Union.

I don't really know if non-compliance to these acts can lead to legal consequences or fines, but one thing for sure: it definitely will be a good idea to comply. Because accessible websites often rank better in search engines. Search engines love best practices for web standards. Proper use of HTML tags, alt text for images, and structured content definitely can improve your site's SEO performance.

As a web developer, I tend to think that building a website is not for SEO though. We build websites for people to use. Meaning we built it for humans, not machines. And accessible websites provide better user experience for everyone who accesses it. Because if we talk about web accessibility, we don't talk about assistive technology, but more on features like clear navigation, readable text, and intuitive forms. Since it will benefit all users, leading to higher user satisfaction and engagement. That would be the end goal for a good website.

Key Principles of Web Accessibility

There are some key principles we can follow to achieve good web accessibility.

Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
Operable
User interface components and navigation must be operable.
Understandable
Information and the operation of the user interface must be understandable.
Robust
Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies.

By following these principles, we will have a good foundation on building a better website. But enough theory, let's try to implement these principles into practice.

Practical Implementation of Web Accessibility

1. Semantic HTML

HTML is a beautiful markup language. It offers various tags that will create web elements that have inherent meaning. So it is necessary to use proper HTML tags to convey the meaning and structure of your content. Implementing semantic HTML helps screen readers and other assistive technologies understand the layout and purpose of different elements.

Semantic HTML includes using tags like <header>, <nav>, <main>, and <footer> to structure your document, as well as appropriate use of <article>, <section>, <aside>, and <figure>.

I often see that a web developer would put every element of a website as <div>. While it will still work as you expect, but in general, this is not a good practice. <div> itself has its own semantic meaning, just like <span>, or any other decorative tags.

Elements like <header>, <footer>, <nav>, and <main> provide context and clearer meaning, making it easier for assistive technologies to navigate and interpret the content.

HTML tags like <section>, <article>, and <aside> allow you to group related content. For instance, <section> is used for thematic grouping, <article> for independent content like a blog post, and <aside> for supplementary content.

Use <button>, <form>, <label>, and <input> correctly to ensure that interactive elements are accessible. Notice how modern Javascript frameworks make it very easy to make any web element interactive. But, using the elements as what it is intended to be, that would be a better web accessibility practice.

2. Alt Text for Images:

Always put effort on providing descriptive alt text for images. Great alt text conveys the content and function of the image. The general rule of alt text will be: if the image contains important information, describe it succinctly. If it's decorative, you can use an empty alt attribute (alt="") to make it clear to screen readers that the image is not critical.

The essential information needs to be described in the image. For example, <img src="example.jpg" alt="A woman reading a book in a park"> is better than <img src="example.jpg" alt="Book">.

Imagine someone accessing your website and navigating your website using assistive technology, the clearer description you gave on the alt text, the more helpful your website is, because it conveys clearer meaning.

But if an image is purely decorative and doesn't add meaningful content, we can use an empty alt attribute. For example, <img src="decorative.jpg" alt="">.

Otherwise if the image is functioning as a link or a button, describe the function rather than the appearance. For example, <img src="submit.jpg" alt="Submit form">.

3. Accessible Forms:

Forms are quite a basic website element. It is often overlooked too. When dealing with form, make sure to label all form controls clearly. This ensures users, including those using screen readers, understand the purpose of each form element.

We can achieve clearer form by the correct use <label> tags to associate labels with their corresponding form elements. In fact, always use <label> to define labels for input fields. This will link the label to the input, making it clear to assistive technologies what the input is for.

<label for="name">Name:</label>
<input type="text" id="name" name="name">

For more complex forms, we can use <fieldset> to group related form elements, and <legend> to provide a caption for the group. Use ARIA roles and properties to enhance form accessibility when necessary, such as aria-required="true" for required fields.

<fieldset>
  <legend>Personal Information</legend>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname">
</fieldset>

4. Keyboard Navigation:

This one is a crucial part since not all users can use a mouse. Some of the users might not be able to use it. So, make sure that all interactive elements can be accessed and operated using a keyboard. Elements like buttons, links, and form controls should be focusable and operable via the keyboard.

A logical tab order can be achieved by using semantic HTML and, if necessary, the tabindex attribute. Elements with tabindex="0" are included in the natural tab order, while those with negative values are excluded.

Be sure to provide clear focus styles for interactive elements to indicate which element is currently focused. We can use CSS to style the :focus state.

button:focus, a:focus {
  outline: 2px solid #f00;
}

5. Color Contrast:

Sufficient contrast between text and background colors is necessary to make content readable for users with visual impairments. WCAG recommends a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

Tools like WebAIM's Color Contrast Checker can help to verify that our color choices meet WCAG guidelines. This tool helps you input your foreground and background colors to see if they pass.

Be sure to choose color schemes that provide high contrast and are not solely reliant on color to convey information. Patterns, textures, or additional text can always help to differentiate elements.

And the most crucial thing when it comes to color contrast would be: regularly test your design with users who have visual impairments to ensure that the color contrast is effective in real-world scenarios.

Use tools like WebAIM's Color Contrast Checker to verify your color choices.

6. ARIA Landmarks:

Use ARIA (Accessible Rich Internet Applications) roles and properties to enhance HTML semantics. ARIA landmarks help assistive technologies better understand the role of different elements on the page.

Common ARIA roles include navigation, main, banner, and contentinfo. These roles help define regions of a page and make navigation easier for users relying on assistive technologies.

 <div role="navigation">...</div>
 <div role="main">...</div>

ARIA properties like aria-label, aria-labelledby, and aria-describedby to provide additional information about elements. For example, aria-label can be used to provide a label for an element that does not have a visible label.

 <button aria-label="Close">X</button>

For complex widgets like sliders, tabs, or modal dialogs, use ARIA roles and properties to convey their functionality to assistive technologies. This includes roles like role="dialog" for modal dialogs and role="tabpanel" for tab panels.

7. Responsive Design:

This one goes without saying. Make sure your site is usable on all device types and screen sizes. This involves using flexible grids, media queries, and responsive images to ensure content is accessible on both desktop and mobile devices.

CSS Grid or Flexbox to create flexible layouts that adapt to different screen sizes, I think this one is already a common practice. These modern layout techniques allow for complex and responsive designs without relying on fixed-width elements.

Someone who learns frontend web development would know that CSS media queries apply styles based on the characteristics of the device, such as screen width, height, orientation, and resolution. But as the web technology keeps evolving, nowadays we can use the srcset attribute to provide different image sources for different screen sizes and resolutions. This helps ensure that images look good and load efficiently on all devices.

 <img src="small.jpg" srcset="medium.jpg 600w, large.jpg 1200w" alt="Responsive image example">

Pro tips:
When you need to serve different images for different device characteristics and provide a caption for the image. Or when the visual content changes significantly across different screen sizes and a caption is necessary to describe the image, we can wrap a <picture> tag with a <figure> tag. This is a common practice when you want to provide responsive images along with a caption. The <figure> tag provides a semantic grouping for the image and its caption, while the <picture> tag allows for different image sources based on the device's characteristics.

Example:

<figure>
  <picture>
    <source media="(min-width: 1200px)" srcset="large.jpg">
    <source media="(min-width: 600px)" srcset="medium.jpg">
    <img src="small.jpg" alt="A description of the image">
  </picture>
  <figcaption>A description of the image</figcaption>
</figure>

8. Test with Assistive Technologies:

Regularly test your website with screen readers and other assistive technologies to ensure accessibility. This helps identify and fix issues that might not be apparent through manual or automated testing alone.

Popular screen readers include JAWS (Job Access With Speech), NVDA (NonVisual Desktop Access), and VoiceOver (built into macOS and iOS). Testing with these tools helps you understand how your content is interpreted and navigated by users with visual impairments.

Navigate your site using only a keyboard and a screen reader to ensure that all interactive elements are accessible. Listen to how content is read aloud and ensure that all necessary information is conveyed clearly.

Use automated tools like Lighthouse, axe, and WAVE to perform initial accessibility checks. These tools can highlight common issues, but manual testing with assistive technologies is essential for comprehensive coverage.

Conclusion

Making your website accessible is not just an ethical obligation; it also enhances the user experience for everyone. By following the key principles and practical steps outlined in this guide, you can create a more inclusive and user-friendly web. Start small, keep learning, and continuously improve your web accessibility practices.

Tools

WAVE (Web Accessibility Evaluation Tool): A web accessibility evaluation tool that helps identify and fix accessibility issues. WAVE
axe Accessibility Checker: A browser extension that helps developers find and fix accessibility issues.axe
Web Content Accessibility Guidelines (WCAG): A comprehensive set of guidelines and standards for web accessibility.WCAG 2.1
Google Lighthouse: Built-in accessibility audits in Chrome DevTools that provide insights and suggestions for improving web accessibility. Google Lighthouse

Resources

Learn more about semantic HTML from MDN Web Docs.
For more guidance on writing effective alt text, visit WebAIM's Alt Text guide.
For more information on accessible forms, see MDN's guide on form accessibility.
For a comprehensive guide on using ARIA, see the W3C ARIA Authoring Practices.
For more information on responsive design, check out Google's Responsive Web Design Basics.
For tips on testing with screen readers, visit WebAIM's Screen Reader Testing guide.
For more tips on ensuring keyboard accessibility, check WebAIM's Keyboard Accessibility guide.

4PYjjVwJ1UdtC5FGc4dbeF1E4FitPfBjR7UqkAYqBLuRR1wQLaLaSR6WB7fHYzqKH9DYiuTt9Gn9GSPtnbgdak1YtzcAgSs9SXWBbqqEZwc.jpg

*Sorry for not putting proper ALT text on the images, I couldn't find how to add it :D
*Photo by Branko Stancevic on Unsplash

stemgeeks proofofbrain html a11y webdevelopment frontend web accessibilty semantichtml

0 comments