WDD 231: Web Frontend Development I

W03 Learning Activity: Web Accessibility

Overview

Web accessibility is the practice of making websites usable by people of all abilities, including those who have difficulty viewing a traditional screen or using a mouse. This learning activity focuses on the basics of web accessibility and the tools that are available to help create accessible websites.

Prepare

It is important to ensure that the user experience of your website works well for all of your users. This includes making sure that each image contains appropriate alt text and that there is enough contrast among the colors you use so the text can be easily read. You need to make sure the font sizes can be adjusted, interactive controls can be navigated using the keyboard, and that your page follows proper use of HTML tags such as the title, h1-h6 elements, header, nav, main, and so forth.

The DevTools Lighthouse report contains a number of checks in the Accessibility category to help you verify that your page is accessible. Lighthouse checks some of the following automatically. The rest you must check yourself.

• Background and foreground colors have a sufficient contrast ratio.
  The contrast ratio can be checked in detail using DevTools CSS Overview or via an online tool like Contrast Ratio. The contrast ratio is important because it helps ensure that text and other content is readable. WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text.
• All images <img> have alt attribute content that accurately describes the image's purpose. The alt attribute is important because it provides a text alternative for images, which is essential for when screen readers are being used or when image loading has been turned off or is slow. Purely decorative images should have an empty alt="".
• Heading elements (h1, h2, h3, etc.) are in order, without skipping levels. Headings give semantic structure to the document to make it easier to navigate and understand when using assistive technologies. This semantic structure is important for screen readers and other assistive technologies to help users navigate the page.
• All interactive controls are keyboard focusable. When using a keyboard, the user should be able to navigate through all interactive elements on the page, such as links, buttons, and form fields. This is important for users not using a mouse or other pointing device.
• Focus indicators are visible. Do not remove outlines without replacing them.
• The document has a logical tab order. The tab order is the order in which the focus moves when the user presses the Tab key. The tab order should follow a logical sequence that matches the visual layout of the page. This is important for users who rely on keyboard navigation to access content.
• Landmark elements such as header, nav, main, aside, and footer are used instead of generic divs. Keep the landmark use basic and consistent.
• Content that is not currently shown, such as a closed menu, is hidden with display: none or the hidden attribute so that keyboard and screen reader users do not land on something they cannot see.
• Text is resizable. All users should be able to resize text up to 200% without loss of content or functionality.
• Document has a meaningful and relevant title. The title of the document should be descriptive and relevant to the content of the page to provide accurate information to users and search engines.
• Page has a language lang attribute defined in the opening html tag. The lang attribute assignment is important for browsers and assistive technologies to understand the language of the content on the page.
• All form elements have labels that are tied to them. Form labels are essential to provide explicit context for form controls and to provide a clickable area for users to select the form control.
• Tables have headers. Most tables that present data should use <th> elements to identify the header cells so that assistive technology users can understand the content of the table.
• Video and audio have captions or transcripts.

Activity Instructions

1. Open your course home page and navigate through it using only the keyboard (the Tab, Shift+Tab, and Enter keys). Note anything you cannot reach or cannot see focused.
2. Use DevTools Lighthouse to run an accessibility audit of the page. It will provide a list of accessibility issues and offer suggestions for improvement.
3. Fix at least one issue that you found.
4. Post what you found and what you fixed in Microsoft Teams.