WCAG: A Beginner’s Guide To Making Web Content Accessible

An introduction to WCAG and its four principles that help users engage with your website

WCAG: A Beginner's Guide
Image by Doodle Ipsum

Regardless of your subject, industry, or audience, your web content should be accessible. Web accessibility doesn’t just help users with disabilities either. Accessible content improves overall usability and UX (User Experience), jumpstarts readability and SEO, and, when your website requires compliance with the Americans with Disabilities Act (ADA), helps you avoid expensive lawsuits and customer support costs. Fortunately, we have a global standard for web developers and authors to confirm that your web content is accessible: WCAG.

The World Wide Web Consortium (W3C) developed the first version of the Web Content Accessibility Guidelines (WCAG) in 1995. Nearly 30 years later, WCAG continues to grow as the Internet and how we use and perceive online content evolve. WCAG 2 is the current global standard, and as of this writing, W3C is developing WCAG 3. The full details on web accessibility are extensive—there are resources below on how to dig deeper—but we can get started by understanding a few principles.

The Four Pillars of WCAG

WCAG-approved web content follows four overall principles, otherwise known as POUR:

  • Perceivable: How users perceive your content (e.g., listening to a video vs. reading a blog post)
  •  Operable: How users control your content’s UI elements (e.g., using your mouse or keyboard to interact with your content)
  •  Understandable: How users understand your content (e.g., what language your content is in)
  •  Robust: How users access content across evolving web technologies (e.g., the latest iOS screen reader working with your content)

Perceivable

“Information and user interface components must be presentable to users in ways they can perceive.” – W3C

Is the structure of your text compatible with a screen reader? Do your images have alt text? Do you provide transcripts or captions for your audio or video content? If you have a button titled “Upload image,” does that button upload images? Are your background videos related to your content and serve a purpose, or are they obtrusive and don’t add value? These questions will help determine if your content is perceivable by at least one of the senses.

Perceivable web content can include the following and more:

  • Non-text content (images, audio, video) that provides text alternatives that can change into large print, braille, speech, symbols, or more simple language
  •  Time-based media (audio or video-only content) that provides captions, audio descriptions, media alternative, or prerecorded sign language interpretations
  •  Content that can adapt to different layouts without losing information or meaningful structure (e.g., the benefits of having high-quality HTML)
  •  Distinguishable content that’s easy for users to see or hear (e.g., using appropriate colors and text sizes)

Operable

“User interface components and navigation must be operable.” – W3C

If users can’t access a mouse, can they use a keyword to navigate all your content? If your user is purchasing an item and you want to include a time limit for security reasons, are you including enough time? Could your flashy content cause seizures for epileptic users? Does your website have a navigation bar or menu to allow users to reach other links on your website? These are questions related to your content’s UI (User Interface) elements that should be operable.

Operable web content can include the following and more:

  • All content functionality is available using a keyboard
  •  Users have enough time to read and use the content (e.g., don’t kick a user off a page if they are not active for a few seconds)
  •  Content won’t cause seizures and unexpected physical reactions
  •  Users have clear indicators on how to navigate content
  •  Input modalities are available for users to operate content beyond the keyboard (e.g., touchscreens, voice detections, device motions)

Understandable

“Information and the operation of the user interface must be understandable.” – W3C

Is your text written in the language most familiar to your users? When you click a button, does it change the context of your site, which then confuses or disorientates the user? If a user enters a wrong value for an input, does that input issue a warning? Answering these questions will make sure your content is understandable to your audience.

Understandable web content can include the following and more:

  • Text content is readable without confusing slang or abbreviations
  •  Web pages are predictable and appear and operate in expected ways
  •  Users have input assistance to help avoid and correct mistakes

Robust

“Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.” – W3C

Web content compatible with current and future user agents is considered robust. This principle involves much testing on web tools such as screen readers to ensure that your content is up to date for users.

User agents and technologies come and go, yet there are two dependable ways in which you can always make sure your web content is robust:

Further WCAG Reading

Knowing these four principles will give you a head start on making your web content more accessible. The following resources offer more tips on making your content accessible to help your users:

Thank you for reading! This blog post is part of a series by Brady Gerber exploring ideas and tools every writer should know. Learn more about Brady on his home page, find his writing and content samples, and subscribe to his newsletter.