👋 This repository contains a demo web page that intentionally implements bad accessibility practices. It's designed to be used in accessibility awareness workshops and training sessions to showcase common mistakes developers make when accessibility is not a priority.
You can find this as part of one of my videos on YouTube—check it out on my channel!
The demo page in this repository intentionally includes the following accessibility issues:
- 🚫 Missing alt text on images: The images don't have alt attributes, making them inaccessible to screen reader users.
- 👀 Poor color contrast: Some text has low contrast with its background, making it difficult to read for people with low vision.
- ⌨️ No focus indicators: Interactive elements don't show visual focus indicators, making it impossible to navigate via keyboard.
- 📋 Inaccessible forms: Form fields lack proper labels and ARIA attributes.
- 🔇 Interactive elements that don't work with screen readers: Custom UI components that aren't built with accessibility in mind.
- 🎨 Use of only color to convey information: Status indicators that rely solely on color differences.
- 🔄 Inconsistent or illogical heading structure: Heading levels skip from h1 to h3, then to h4, h5, and h6.
- 🌐 No lang attribute in the HTML tag: Missing language declaration.
- 📢 Dynamic content not announced to assistive technologies: No ARIA live regions for dynamically added content.
- ⏭️ No skip link: No way to bypass repetitive navigation menus.
- Open
index.htmlin your browser to view the inaccessible page. - Try navigating the page using only your keyboard (Tab key).
- If possible, test the page using a screen reader.
- Use browser developer tools to inspect accessibility issues.
Accessibility Insights is the recommended tool for manual accessibility verification of this demo page. It helps identify accessibility issues that automated tests might miss and provides guidance on fixing them.
-
Accessibility Insights for Web (recommended for this demo):
- Install the extension from Chrome Web Store or Microsoft Edge Add-ons
- Once installed, you'll see the Accessibility Insights icon in your browser toolbar
-
For other platforms, visit accessibilityinsights.io to download:
- Accessibility Insights for Windows
- Accessibility Insights for Android
This repository includes an automated accessibility testing workflow using axe-core, which runs on every push to the main branch and on pull requests.
The automated tests:
- Use axe-core, a leading accessibility testing engine
- Check the deployed web page for WCAG 2.1 compliance issues
- Generate detailed reports of any accessibility violations
- Comment on pull requests with accessibility test results
- Fail the workflow if critical accessibility issues are found
For Pull Requests:
- The workflow automatically comments on PRs with accessibility test results
- Comments include a summary of violations and actionable next steps
- Comments are updated if the tests are run again on the same PR
For detailed analysis:
- Navigate to the "Actions" tab in the GitHub repository
- Select the "Accessibility Testing" workflow
- Choose the most recent workflow run
- Review the test output in the "Run axe-core accessibility tests" step
- Download the detailed JSON report from the "Artifacts" section
To run the same accessibility tests locally:
- Install Node.js and npm
- Install the required tools:
npm install -g @axe-core/cli http-server
- Start a local server in the repository root:
http-server -p 5500 . - In another terminal, run the accessibility tests:
axe http://localhost:5500 --exit
After installing Accessibility Insights for Web:
-
FastPass (quick assessment):
- Click the Accessibility Insights icon in your browser toolbar
- Select "FastPass" from the menu
- Click "Start" to scan the current page
- Review automated checks and tab stops results
-
Assessment (comprehensive evaluation):
- Click the Accessibility Insights icon
- Select "Assessment" from the menu
- Click "Start assessment"
- Follow the guided process to perform manual checks
- Complete all test steps for a thorough evaluation
-
Ad hoc tools (focused testing):
- Click the Accessibility Insights icon
- Select specific tools like "Color", "Headings", or "Landmarks"
- These tools help analyze specific aspects of the page
- Failures: Review each failed check to understand what accessibility issues exist
- Instances: Examine specific elements that are causing accessibility problems
- How to fix: Follow the provided guidance to address each issue
- Why it matters: Learn why each issue is important for accessibility
- During development when implementing or modifying UI components
- Before submitting a pull request that includes UI changes
- As part of code review for UI-related changes
- After fixing automated accessibility test failures
- Before major releases or deployments
This repository includes a dev container configuration with Live Server extension:
- Open the repository in Visual Studio Code with the Dev Containers extension installed.
- When prompted, click "Reopen in Container" or use the command palette:
Dev Containers: Reopen in Container. - Once the container is built and running, click "Go Live" in the status bar to start the Live Server.
- The page will automatically open in your browser and refresh when changes are made.
This demo is available on GitHub Pages once the GitHub Actions workflow has completed. The site will be deployed at: https://0GiS0.github.io/github-copilot-loves-accesibility/
This demo is intended to be used as an educational tool to help developers understand common accessibility mistakes and the importance of designing and building with accessibility in mind from the start.
This project intentionally violates accessibility best practices for educational purposes. The code in this repository should not be used as a reference for building accessible web applications.