Why You Should Care About Web Accessibility, and What to Consider When Designing Your Next Project

Photo of a laptop and braille display by Elizabeth Woolner on Unsplash

One of the important topics that generally gets sort of glossed over in bootcamp courses and online learning resources used by many self-taught developers is web accessibility. If you're going to be building up your skills to become a successfully employed front-end developer, you should really spend some time getting familiar with web accessibility best practices. Starting with the WCAG guidelines is a good idea, but just reading them might not give you a good idea of the whole picture.
If you're looking for more in-depth exposure to why web accessibility should be on your mind when you're designing a new project, I suggest checking out the WCAG's free course on edX, Introduction to Web Accessibility, which will introduce you to the different tools those with disabilities use to access information online, as well as many difficulties they face in doing so.

Why Is Web Accessibility Important?

Even if people with disabilities aren't your primary audience, incorporating accessibility best practices into your development process will expand the audience your content is able to reach. Optimizing your site for use with screen readers or making it navigable by people who only use keyboard, button, or switch inputs opens your content up to a wider audience.
Even accessibility features built in to modern technology that were meant for those with disabilities can be useful to those of us who aren't disabled. For example: using voice commands to interact with devices, setting dark mode to reduce eye strain, using zoom features to make text larger, or using closed captions on videos when we can't play the audio out loud. So, in essence, what makes things easier for those with disabilities, makes things easier for all of us.

Basic Things to Keep In Mind When Designing Your Project

When you're in the early stages of creating a new project, keep in mind these design elements that can improve your project's accessibility:

• Color contrast
  • Make sure you use available tools (like Adobe Color) when you're selecting your project's color palette, and check the contrast between your colors to ensure your information is easily readable.
  • You can also use tools like Coolors, which has options for viewing your chosen colors as those with different types of color blindness would see them.
• Navigation
  • Ensure that you use semantic HTML to denote your site's main navigation (wrap it in the <nav> tag). This will make things simpler for those using screen readers or keyboard-only inputs.
• Tab Order
  • Pay attention to the order in which your content is navigated when tabbing through your website. Does it make sense? Does it follow the reading order of your content (i.e. left to right, top to bottom)? Do you need a hidden skip to content link at the top of your page to help the user easily get to the main content on the page?
• Font Size
  • Make sure you use an appropriate size for your chosen fonts. Also, don't use images of text. True text enlarges more easily, loads faster, and is easier to translate and customize. It's also easier for screen reader users to decipher.
• Clearly indicated links
  • Links in text shouldn't be indicated solely by color. There should always be a fallback indicator for links, like an underline, for those who can't discern the difference in color.
• Link messages make sense on their own
  • Link text should indicate what they link to. Try to avoid link text like 'Click Here', as it doesn't indicate what the link leads to. Someone using a screen reader to hop between links would have a hard time finding the information they're searching for if your page is full of 'Click Here' or 'Read more' links.
• Heading Structure
  • Ideally, your page should have a single H1 element, and h2-6 should be used in a nested fashion to create a logical heading structure, which will make your content more easily readable by every user.
• Keyboard focus indicators
  • Make sure your actionable elements (links, buttons, etc) are keyboard focusable. Most browsers will indicate the current focus location with a border of some kind, but you will need to add this ability to some elements, or pay attention not to accidentally remove it from others.
• Make sure information doesn't rely solely on color
  • Just like you shouldn't indicate links with just color, the same goes with other forms of important information. If you have elements that convey information using only color, those settings may get overridden by user settings or they may be indiscernible to the user due to colorblindness. Screen reader users would miss this information entirely.
• Accessible form controls
  • Making sure form controls have descriptive labels, instructions, and error messages will help users easily navigate your forms.

Some Good Places to Start with Accessibility

1) Lay out your project using semantic HTML. Use appropriate tags for your elements (like the <nav> tag for the navbar), which will ensure that the browser/screen reader handles those elements correctly. Avoid <div> soup -- divs have no semantic meaning.
2) Use alt text in your image tags. Providing alt text helps convey the meaning of an image to someone who can't view it, whether they're using a screen reader or they have a slow connection.
3) Ensure that there is sufficient color contrast between text and background colors. Using tools like Adobe Color, which has built in settings for addressing color contrast, or tools like A11y Rocks color palette should help you ensure appropriate contrast for your colors.
4) Use descriptive links. This one is pretty easy: make sure your links tell the user what they lead to! 'Click Here' is not always helpful, especially to screen reader users. Visually impaired users can scan through links just like sighted users can, so using descriptive link text helps to put the link in context for all your users.
5) Provide captions if you're embedding video. Captions provide content to users in real time when audio is not an option. Many youtube videos now have the option to turn captions on or off. Or, if you are creating the video content yourself, consider including open captions (which is an option available on TikTok, where users include captions that are part of the video and can't be turned off) or providing a transcript for users who can't make use of audio content.
6) Test out your website on a mobile device. You can use the responsive design mode in the DevTools in both Chrome and Firefox to check out how your site works on mobile (after all, not everyone has access to a laptop or desktop computer). Are your links clickable? Are there spaces between your buttons that make it easy for the user to click what they want to click?

Web accessibility is an important concept for new webdevs to grasp. Making the above considerations second nature early on will ensure that all of your projects are accessible to a wider audience. Accessibility principles make the web a better place for everyone!