WDD 231: Web Frontend Development I

Web Accessibility

Overview

Web accessibility is the practice of making websites usable by people of all abilities. This learning activity focuses on the basics of web accessibility and the tools that are available to help create accessible websites.

Prepare

1. Watch this video of some manuel accessibility testing on websites. This will help to gain an overview of the types of things that are considered when talking about web accessibility.
   ► How To Do an Accessibility Review
2. Consider these basic items that are checked by DevTools Lighthouse - Accessibility category. There are many things on this list that you already have been using in your web development work in this course and previous courses through the audits.
   • Background and foreground colors have a sufficient contrast ratio. This can also be checked in detail using DevTools CSS Overview or via the Contrast Ratio online tool.
   • All images <img> have alt attribute content that accurately describes the image's purpose.
   • Heading elements are in sequentially-descending order. Headings give semantic structure to the document to make it easier to navigate and understand when using assistive technologies.
   • All interactive controls are keyboard focusable.
   • The document has a logical tab order.
   • Simple Landmark, i.e., header, aside, footer, nav, main, etc., elements are used instead of divs. Keep the landmark use basic and consistent.
   • Offscreen content is hidden with display: none or aria-hidden=true. Hide offscreen content
   • Text is resizable.
   • Document has a meaningful and relevant title.
   • Page has a language defined in the of the opening html tag.
   • Page has a favicon.
   • All forms elements have labels that are tied to them.
   • Tables have headers.
   • Video and audio have captions.

   A lot of these items are technical aspects and developers need to remember that they are just tools to aid in the overall accessibility evaluation of a page or site. The Lighthouse accessibility tools will not evaluate the usability of a page with certain disabilities, nor if the content is understood, or what the user's experience is as they navigate and interact with the page and site. These aspects often require manual testing and feedback from users with disabilities to truly understand and improve accessibility.

Example within an Organization

The following checklist was put together by the Accessability Services office at Brigham Young University-Idaho. The checklist provides an organized way to validate your own development work on web pages.
Reference: 🔗 BYU-Idaho Accessibility Checklist

Activity Instructions

Use DevTools Lighthouse to run an accessibility audit of all your development work. This should be part of your normal testing and deployment workflow. The Lighthouse accessibility audit will provide a list of accessibility issues and offer suggestions for improvement.