Skip to content

Beyond Inclusion: The Importance of Accessible Web Content and Design

Contributed by Sebastian Wells

Overview

Accessibility is the ability to access, perceive, understand, and navigate web content regardless of disability category. While it is vital for disabled individuals, it is equally important for people who use small screens, our aging population, folks with temporary disabilities, and situational limitations.

There are three levels of accessibility conformance outlined in the Web Content Accessibility Guidelines: - A: The easiest level of compliance, you put a minimal amount of effort into accessibility. - AA: Your website is legally compliant, effort was put into making the content accessible. - AAA: Accessibility was a priority, you did your absolute best to create an accessible website.

To get started on making your website more accessible, Kat Shereko recommends these three steps: 1. Choose a conformance level. 

Start with a goal for your website.

  1. Audit a segment of your website.

    If checking your entire website for compliance is overwhelming, audit only one segment to start.

  2. Publish an Accessibility Statement.

    Make it clear to your users that accessibility is a goal. Make it easy for them to reach out about accessibility concerns.

It is common to have accessibility issues with headers, images, forms, color, videos, and links. Below are some helpful things to remember about each of these elements.

Headers

  • Landing page headers should use: - One < h1 > tag per page. - < h2 > - < h6 > tags to separate ideas and break up heavy copy.

  • Headers should flow well when read on their own.

  • Header's aren't used for styling or aesthetics.

Images

  • There are decorative and non-decorative images. Decorative images don't add to the understanding of the webpage, and don't need description.
  • All non-decorative images should be described with an Alt Attribute that incorporates important keywords, fits the rest of the content on the page, and is no more than 140 characters.
  • Infographics need to be broken up into accessible chunks that can be described with Alt Attributes, or avoided altogether.

Forms

  • All forms should: - Be keyboard accessible. - Be mobile friendly. - Avoid time limits. - Call out "required" fields, i.e "NAME is required" rather than "fill in all required fields". - Use input errors (describe exactly what was input incorrectly).

Color

  • Use color: - In combination with shapes and textures. - With sufficient contrast between text, icons, buttons, and background.

Videos

  • All videos should: - Include legible captions (think text size, font, color, etc.) - Include transcripts.
  • Don't allow auto-play
  • Links within text should include: - Use anchor text that's clear outside of context. - Avoid generic copy (e.g "click here"). - Be specific.

Key takeaways

The three WCAG levels of compliance: - A: The easiest level of compliance, you put a minimal amount of effort into accessibility. - AA: Your website is legally compliant, effort was put into making the content accessible. - AAA: Accessibility was a priority, you did your absolute best to create an accessible website.

The three steps to get started on making your website accessible: 1. Choose a conformance level. 

Start with a goal for your website.

  1. Audit a segment of your website.

    If checking your entire website for compliance is overwhelming, audit only one segment to start.

  2. Publish an Accessibility Statement.

    Make it clear to your users that accessibility is a goal. Make it easy for them to reach out about accessibility concerns.

And finally, the common trouble areas when it comes to website accessibility, headers, images, forms, colors, videos, and links. See above for key things to focus on in each area.

Reflection

This presentation provided a great overview of things to keep in mind while writing for the web. I kept the recommendations for headers in mind while writing this summary, and the rest of the recommendations are applicable across various kinds of websites. My notes on this presentation will be useful for the remainder of this class, because making sure what I'm writing is as accessible as I can make it is one of my priorities.

Written with StackEdit.