Record A Goose: Accessibility Audit & Fixes

by Admin 44 views
Record a Goose: Accessibility Audit & Fixes

Alright, guys! Let's dive into a fun and insightful project: Record a Goose. This exercise is all about discovery and improvement. We're going to explore a real-world application and identify its accessibility issues. Then, we'll discuss how to fix them. Think of it as a treasure hunt, but instead of gold, we're finding opportunities to make the web more inclusive!

The Mission: Uncover Accessibility Issues

Your mission, should you choose to accept it, involves using several powerful tools to dissect the "Record a Goose" application. Here’s the breakdown:

  1. Go to the battlefield: Head over to https://github.com/CodeYourFuture/CYF-Record-A-Goose-Project and get acquainted with the project.
  2. Arm yourself with tools: You'll be using Devtools, Lighthouse, and the WAVE accessibility plugin. These are your trusty sidekicks in this quest.
  3. Start hunting: Your goal is to identify all the ways this app is broken from an accessibility standpoint. Think about users with disabilities and how they might interact with the application. Are the colors contrasting enough? Is the keyboard navigation intuitive? Does the app provide alternative text for images?
  4. Discuss your findings: This is where the magic happens! Start a thread in your class channel to share your findings and discuss potential solutions. Remember, no goose left behind!

This project can be tackled individually or, even better, as a collaborative in-person workshop. Working together allows you to bounce ideas off each other and learn from different perspectives.

Why Focus on Accessibility?

Accessibility is not just a nice-to-have; it's a fundamental aspect of web development. Creating accessible websites ensures that everyone, regardless of their abilities, can access and use the information and services available online. By focusing on accessibility, we're building a more inclusive and equitable digital world.

Furthermore, accessible websites often perform better in search engine rankings. Search engines like Google prioritize websites that provide a good user experience, and accessibility is a key factor in achieving that. So, by making your website accessible, you're not only helping users with disabilities but also improving your website's visibility and reach.

Moreover, in many countries, accessibility is legally required for certain types of websites, such as government websites and websites that provide public services. By adhering to accessibility standards, you can avoid potential legal issues and ensure that your website complies with relevant regulations. So, investing in accessibility is not only ethically responsible but also makes good business sense.

The Arsenal: Your Accessibility Tools

Let's get familiar with the tools you'll be using:

1. Chrome Devtools

Chrome Devtools is a set of web developer tools built directly into the Google Chrome browser. It allows you to inspect and debug your code, analyze performance, and emulate different devices and network conditions. For accessibility testing, Devtools provides features such as:

  • Accessibility Pane: Inspect the accessibility properties of HTML elements, such as their role, name, and value. This helps you understand how assistive technologies like screen readers will interpret the content.
  • Lighthouse: (which we'll cover separately) can be run directly from Devtools to generate accessibility reports.
  • Inspecting the DOM: Allows you to examine the structure of your HTML and identify potential issues with semantic markup.

To access Chrome Devtools, simply right-click on any web page and select "Inspect" or press Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac).

2. Lighthouse

Lighthouse is an automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO, and more. You can run it in Chrome Devtools, from the command line, or as a Node module. The Lighthouse accessibility audit checks for common accessibility issues and provides actionable recommendations on how to fix them. It analyzes various aspects of your website, such as:

  • Contrast ratios: Ensures that text and background colors have sufficient contrast for users with low vision.
  • ARIA attributes: Verifies that ARIA attributes are used correctly to provide semantic information to assistive technologies.
  • Image alt text: Checks that all images have descriptive alt text, allowing screen readers to convey the image's content to users.
  • Keyboard navigation: Evaluates whether the website can be navigated using only a keyboard, which is essential for users who cannot use a mouse.

To run Lighthouse in Chrome Devtools, open the Devtools panel, go to the "Audits" tab, select "Accessibility," and click "Run audit."

3. WAVE Accessibility Plugin

WAVE (Web Accessibility Evaluation Tool) is a free web accessibility evaluation tool developed by WebAIM. It's available as a Chrome and Firefox extension. Unlike Lighthouse, which is integrated into developer tools, WAVE injects icons and indicators directly into the rendered page to provide visual feedback about the accessibility of the content. WAVE identifies a wide range of accessibility errors and features, including:

  • Errors: Indicates accessibility violations that need immediate attention.
  • Alerts: Highlights potential accessibility issues that require manual review.
  • Features: Shows accessibility features that are present on the page, such as ARIA landmarks and headings.
  • Structural Elements: Displays the underlying structure of the page, including headings, lists, and tables.

WAVE is a quick and easy way to get a visual overview of the accessibility of a web page. To use the WAVE extension, simply click on the WAVE icon in your browser toolbar while viewing the page you want to evaluate.

Diving Deeper: Addressing Common Accessibility Issues

Alright, let's talk about some common accessibility pitfalls you might encounter in the "Record a Goose" project and how to tackle them:

  1. Insufficient Color Contrast:
    • The Problem: Text is difficult to read because the color of the text is too similar to the background color.
    • The Solution: Use a color contrast checker (like the one built into Devtools or online tools) to ensure that the contrast ratio meets WCAG (Web Content Accessibility Guidelines) standards. Adjust the colors accordingly. You want to aim for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
  2. Missing or Poor Alternative Text for Images:
    • The Problem: Images lack alt attributes, or the alt text is not descriptive enough. Screen reader users won't know what the image is about.
    • The Solution: Add meaningful alt text to all images. The alt text should describe the content and function of the image. If the image is purely decorative, use an empty alt attribute (alt="").
  3. Lack of Keyboard Navigation:
    • The Problem: Users can't navigate the website using only the keyboard.
    • The Solution: Ensure that all interactive elements (links, buttons, form fields) are focusable and have a visible focus indicator. Use proper HTML semantics (e.g., <button> for buttons, <a> for links) to ensure that elements are naturally focusable. You might need to use JavaScript to manage focus in more complex scenarios.
  4. Inadequate ARIA Attributes:
    • The Problem: ARIA (Accessible Rich Internet Applications) attributes are missing or used incorrectly.
    • The Solution: Use ARIA attributes to provide semantic information to assistive technologies when HTML alone is not sufficient. For example, use aria-label to provide a label for a button that doesn't have visible text. However, avoid overusing ARIA. Use native HTML elements whenever possible.
  5. Missing or Incorrect Heading Structure:
    • The Problem: The heading structure (<h1>, <h2>, <h3>, etc.) is illogical or missing. This makes it difficult for screen reader users to understand the page's organization.
    • The Solution: Use headings to create a clear and logical structure for your content. Start with an <h1> for the main title, and then use <h2>, <h3>, etc., for subheadings. Don't skip heading levels (e.g., don't go from <h1> to <h3>).

The Review Process: Sharing and Learning

This project is the review! By actively participating in identifying and discussing accessibility issues, you're not only honing your skills but also contributing to the learning of your classmates. The goal is to foster a collaborative environment where everyone can learn from each other's experiences and perspectives.

Resources to Level Up Your Accessibility Game

Here are some extra resources to boost your accessibility knowledge:

Submission Time: Show Off Your Detective Work

To submit your findings, write up your discoveries, proposed solutions, and discussions in a thread within your class channel. Remember, quality over quantity! Provide detailed explanations and reasoning behind your suggestions. Screenshots or code snippets can be helpful in illustrating the issues and solutions you've identified.

Time Investment

You have a maximum of 2 hours to dedicate to this task. Use your time wisely to explore the application, identify key accessibility issues, and collaborate with your classmates to find effective solutions. Remember, this is a learning opportunity, so focus on understanding the underlying principles of accessibility rather than just rushing through the process.

Let's Make the Web More Accessible!

This "Record a Goose" project is a fantastic opportunity to learn about web accessibility in a practical and engaging way. By using the tools and techniques discussed, you can help make the web a more inclusive place for everyone. So, grab your tools, put on your detective hat, and let's get started!