This is a repository showing a web site with accessibility problems and possible fixes for them. It is used in a video class on Skillshare.

You can take the Product Management: Tools for Improving Product Accessibility if you want to, or use this repository for your own training needs.

The page with errors example is the one shown the class and features a few issues to find out using automated accessibility tools and developer tools built into the browser.

If you want to read up what the problems are without finding out yourself, you can check the error explanation page.

The fixed page example has most of the problems fixed and is a good resource to look at as an inspiration how to create your own solutions for the problems.

• Visual Studio Code is an open source editor with lots of excellent extensions we're using in this course.
• Microsoft Edge Developer Tools
• Accessibilty Insights is a free extension for Chromium based browsers that allows you to run an automated test on any web site to find accessibility problems. You can also run a full audit on products and use ad-hoc tools to visualise accessibility problems. Accessibility Insights is used inside Microsoft to ensure the compliance of all products with legal accessibility requirements.
• Webhint is a service and NPM package that test web products automatically for issues concerning accessibility, inter-browser compatibilty, security, performance and app-readiness. It is highly customisable, open source and available as an extension for Visual Studio Code and browsers.
• Fixing the contrast of an element in DevTools is an explanation how to fix contrast issues in a document.
• Viewing the CSS of an element using the Inspector tool
• Change the state of an element in DevTools
• Simulate reduced motion in DevTools
• Simulating color themes in DevTools