Advance Theme Development

Previous Topic
Next Lesson

Accessibility (WCAG 2.2)

Advance Theme Development Theme Essentials Accessibility (WCAG 2.2)

Accessibility is a widely discussed topic in the tech industry. When you are designing websites that are going to be used by thousands, if not millions of users around the web you should make sure that it is accessible for everyone irrespective of the device they are using, their disabilities, or the environment.

Accessibility Best Practices

Let’s make sure our website is accessible to everyone! Here are some key accessibility practices to follow:

  • Use Semantic HTML – Instead of using non-semantic <div> tags for page sections, you should use the semantic elements <header>, <main>, <nav>, and <footer> respectively.
  • Use descriptive alt text to convey the image’s purpose. Compress images to reduce load times.
  • Please use appropriate heading tags (<h1>, <h2>, <h3>, etc.) to structure your content. Use heading tag for title present in each section, do not use <p> or <div> tag for heading text.
  • Ensure headings are in a logical order. Ex. h1, h2, h3, etc. On page make sure one unique h1 tag is present.
  • Ensure all interactive elements can be accessed and operated with a keyboard. Use CSS to style focus indicators.
  • Optimize touch interactions and avoid small touch targets.
  • Employ ARIA attributes like aria-label, aria-describedby, and aria-live to provide additional context for screen readers. Use ARIA only when HTML semantics are insufficient.
  • Use screen readers and other tools to evaluate accessibility.
  • Involve accessibility testing throughout the development process.

Ideas to Explore:

  • How can you make your theme accessibility ready?
  • How can you make your plugin accessible?
  • what is wp.a11y.speak()? and how to use it?
  • Does choosing colors for the theme impact accessibility?

Resources

Previous Topic
Back to Lesson
Next Lesson