Learn Accessibility

Create inclusive sites and apps that are easy for everyone to use. Learn how to design for screen readers, keyboard navigation, and other assistive technologies.
  1. Top 5 Figma Plugins for Color Management

    Top 5 Figma Plugins for Color Management

    Tutorial Beginner

    In this post I’m going to take you through what I think are the top 5 color management plugins for Figma.

  2. 6 Tips for Accessibility in Form Design

    6 Tips for Accessibility in Form Design

    Tutorial Beginner

    Here are some best practice tips and examples to ensure your forms are usable, logical and effective for a wide range of users.

  3. How to Keep Your CSS Grid Layouts Accessible

    How to Keep Your CSS Grid Layouts Accessible

    Tutorial Beginner

    Although CSS Grid is almost perfect, the way it’s defined can inherently lead to accessibility issues for screen reader and keyboard-only users. This guide...

  4. A Guide to Creating Accessible Animations

    A Guide to Creating Accessible Animations

    Tutorial Intermediate

    Creating accessible animations is an important part of user experience. Motion on the screen can make people dizzy, nauseous, or worse. In this guide, I’ll...

  5. Accessible SVG: Methods for Adding Alternative Content

    Accessible SVG: Methods for Adding Alternative Content

    Tutorial Beginner

    While there are many things to consider when making SVGs fully accessible, this article will focus on the ways you can add alternative content to an SVG.

  6. Keyboard Accessibility Tips Using HTML and CSS

    Keyboard Accessibility Tips Using HTML and CSS

    Tutorial Beginner

    Making your website accessible for keyboard-only users is an important part of the bigger accessibility picture. Here are some keyboard accessibility tips...

  7. Designing Accessible Content: Typography, Font Styling, and Structure

    Designing Accessible Content: Typography, Font Styling, and Structure

    Tutorial Beginner

    Let’s look at all the steps and design considerations you’ll need to take into account when making your content more accessible.

  8. How We Test for Accessibility at Envato (Tools and Tips)

    How We Test for Accessibility at Envato (Tools and Tips)

    Tutorial Beginner

    Tackling the challenge of creating an accessible website–or making an existing website accessible–can sometimes be a difficult task. In this post I’ll show...

  9. Quick Tip: Use the “lang” Attribute for Better Accessibility

    Quick Tip: Use the “lang” Attribute for Better Accessibility

    Tutorial Beginner

    The “lang” attribute is one of the global HTML attributes developers can apply to any HTML element–it can really help with accessibility, here’s how!

  10. How to Make Custom Accessible Checkboxes and Radio Buttons

    How to Make Custom Accessible Checkboxes and Radio Buttons

    Tutorial Beginner

    In this tutorial I’ll explain how to customize the appearance of checkboxes and radio buttons, whilst making sure that they remain accessible for Assistive...

  11. How to Use the Contrast Checker in Chrome DevTools

    How to Use the Contrast Checker in Chrome DevTools

    Tutorial Beginner

    How can we be certain the color contrast levels in our web designs are accessibility friendly? That’s where Chrome DevTools can help out.

  12. The Importance of Heading Levels for Assistive Technology

    The Importance of Heading Levels for Assistive Technology

    Tutorial Beginner

    Navigating via headings is the most important way people who rely on assistive technology locate information. It’s therefore really important to craft your...