Praveen Rajamani

Posted on Feb 12

Building Inclusive Websites: Accessibility Guidelines for Developers

#webdev #javascript #programming #learning

Accessibility (a11y) ensures that websites and web applications are usable by everyone, including people with disabilities. This includes individuals with visual, auditory, motor, and cognitive impairments.

Why Accessibility Matters?

Inclusivity:Makes your website usable for all users, including those with visual, auditory, motor, or cognitive disabilities.
Legal Compliance: Many countries have web accessibility laws (e.g., WCAG, ADA).
Better User Experience: Accessibility improvements benefit everyone, not just users with disabilities. Features like clear navigation, proper contrast, and keyboard accessibility enhance usability for all users, including those using mobile devices or in challenging environments.
SEO Benefits: Search engines favor accessible websites (better structure, alt text, etc.). Proper heading structure, descriptive link text, and image alt attributes not only help users with disabilities but also improve your site's search engine rankings and visibility.

Semantic HTML Structure

1. Meaningful Content Organization:

Use to identify the primary content of the page
Employ for self-contained content that can stand alone
Utilize to group related content within an article

2. Improved Accessibility:

Helps screen readers navigate and interpret content structure
Provides a clear hierarchy of information for all users
Enhances keyboard navigation through logical content flow

3. SEO and Parsing Benefits:

Allows search engines to better understand content relationships
Improves content indexing and potential search rankings
Facilitates easier parsing of content by various web technologies

<main>
  <article>
    <h2>Lorem Ipsum Dolor Sit Amet</h2>
    <section>
      <h3>Consectetur Adipiscing Elit</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nunc id aliquam tincidunt</p>
    </section>
    <section>
      <h3>Sed Do Eiusmod Tempor</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </section>
  </article>
</main>

ARIA (Accessible Rich Internet Applications) Attributes

Helps users with visual impairments understand changes without relying on sight.
ARIA attributes supplement HTML where necessary but should not replace proper semantic elements.

<nav aria-label="Main Navigation">
  <!-- Main menu items -->
</nav>

<nav aria-label="Footer Links">
  <!-- Footer menu items -->
</nav>

Keyboard Navigation

1. aria-haspopup="true":

Indicates that the button controls a popup (the dropdown menu)
Informs screen readers that activating this button will open additional content

2. aria-expanded="false":

Indicates whether the dropdown menu is currently expanded or collapsed
Updates dynamically to reflect the current state of the dropdown

3. role="menu" on the <ul>:

Identifies the list as a menu to assistive technologies
Helps screen readers understand the purpose and behavior of the element

4. role="menuitem" on each <a>:

Identifies each link as a menu item within the menu
Improves navigation and understanding for screen reader users

5. Keyboard event listener (keydown):

Allows users to activate the dropdown using the keyboard (Enter or Space)
Enhances accessibility for users who navigate without a mouse

6. preventDefault() in the keydown listener:

Prevents default browser behavior when activating with Space key
Ensures consistent behavior across different input methods

7. toggleDropdown() function:

Updates the aria-expanded attribute to reflect the current state
Toggles the visibility of the dropdown menu
Maintains synchronization between the visual state and ARIA attributes

8. Using display: none and display: block:

Properly hides and shows the dropdown menu
Ensures the hidden menu is not accessible to screen readers when collapsed

<div class="dropdown">
  <button class="dropdown-toggle" aria-haspopup="true" aria-expanded="false">
    Menu
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#" role="menuitem">Item 1</a></li>
    <li><a href="#" role="menuitem">Item 2</a></li>
    <li><a href="#" role="menuitem">Item 3</a></li>
  </ul>
</div>

<script>
const dropdownToggle = document.querySelector('.dropdown-toggle');
const dropdownMenu = document.querySelector('.dropdown-menu');

dropdownToggle.addEventListener('click', toggleDropdown);
dropdownToggle.addEventListener('keydown', (event) => {
  if (event.key === 'Enter' || event.key === ' ') {
    event.preventDefault();
    toggleDropdown();
  }
});

function toggleDropdown() {
  const expanded = dropdownToggle.getAttribute('aria-expanded') === 'true';
  dropdownToggle.setAttribute('aria-expanded', !expanded);
  dropdownMenu.style.display = expanded ? 'none' : 'block';
}
</script>

Accessible Forms

1. Clear Labeling and Structure:

Use concise, descriptive labels adjacent to form fields
Group related fields using
and
Implement ARIA roles and attributes (e.g., aria-labelledby) to enhance screen reader compatibility

2. Provide Guidance and Feedback:

Offer clear instructions before form fields
Use aria-describedby to link instructions to form elements
Display informative error messages that explain issues and how to resolve them

3. Ensure Keyboard Accessibility:

Set initial focus on the first form field upon loading
Maintain visible focus indicators as users navigate the form
Test and ensure full form functionality using keyboard-only navigation

<form>
  <div>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" aria-describedby="username-error">
    <p id="username-error" class="error-message" role="alert" aria-live="assertive"></p>
  </div>
  <button type="submit">Submit</button>
</form>

<script>
function validate username

1. 
() {
  const username = document.getElementById('username');
  const errorElement = document.getElementById('username-error');
  if (username.value.length < 3) {
    errorElement.textContent = 'Username must be at least 3 characters long.';
  } else {
    errorElement.textContent = '';
  }
}
</script>

Color Contrast

1. Importance of Color Contrast:

Good color contrast helps all users read content easily
It is crucial for people with visual impairments or color blindness
WCAG guidelines specify minimum contrast ratios for text

2. Contrast Ratio Requirements:

Normal text should have a minimum contrast ratio of 4.5:1
Large text (18.66px bold or 24px regular) needs at least 3:1 contrast
These standards ensure readability for a wide range of users

3. Implementing Good Contrast:

Use contrast-checking tools like WebAIM's Contrast Checker
Choose colors that stand out from each other (e.g., black on white)
Apply contrast principles to all website elements, including buttons and links

/* Bad contrast */
.bad-contrast-1 {
  color: #CCCCCC; /* Light gray text */
  background-color: #FFFFFF; /* White background */
}

/* Good contrast */
.good-contrast-1 {
  color: #000000; /* Black text */
  background-color: #FFFFFF; /* White background */
}

Responsive Design

1. Make it Flexible:

Use layouts that adjust to different screen sizes
Make sure images and text can resize without breaking
Use special code (media queries) to change designs for different devices

2. Think Mobile First:

Start by designing for small screens, then add more for bigger screens
Focus on the most important content for mobile users
Make sure buttons and links are easy to tap on touchscreens

** 3. Test on Real Devices:**

Check your design on actual phones, tablets, and computers
Make sure it works well and looks good on different screen sizes
Pay attention to how fast it loads, especially on mobile networks

<div class="image-gallery">
  <img src="image1.jpg" alt="Description of image 1">
  <img src="image2.jpg" alt="Description of image 2">
  <img src="image3.jpg" alt="Description of image 3">
</div>

<style>
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.image-gallery img {
  width: 100%;
  max-width: 300px;
  height: auto;
}

@media screen and (min-width: 768px) {
  .image-gallery img {
    width: calc(50% - 5px);
  }
}

@media screen and (min-width: 1024px) {
  .image-gallery img {
    width: calc(33.33% - 7px);
  }
}
</style>

Conclusion

Building inclusive websites through accessibility guidelines is not just a matter of compliance, but a commitment to providing a better user experience for everyone. By implementing semantic HTML, ARIA attributes, keyboard navigation, accessible forms, sufficient color contrast, and responsive design, developers can create websites that are truly accessible to all users, regardless of their abilities or devices. Embracing these practices enhances usability, improves SEO, and ensures that your website is inclusive and reaches the widest possible audience.

Top comments (4)

Nick Adams • Feb 14

I'd note that WCAG is not a law like section 508 or the ADA, but a set of guidelines that if you follow, will keep you compliant with those laws.

To anybody that wants to get good at creating accessible websites every time, the best free tool that I've used to this date is still webaims wave extension. It scans your page, and gives issues, explanations, conformance levels, and links to the WCAG so you can get a more full understanding of the issue.

None of these tools are perfect. They always miss things. For example, they almost always scan links, but not with pseudo state styling, so it may miss contrast issues there.