This is a repository of my (Jose Nicolas Mora) completion of the MDN Accessibility Troubleshooting Assessment.
In this project we are presented with a fictional nature site displaying an article about bears. The original webpage has multiple accessibility issues, and my task was to explore the existing site and fix several of them.
The website was tested for accessibility using the NVDA screenreader tool.
Check out my LinkedIn
The accessibility improvements include:
- Improved color contrast
- I also added a better, more suitable color scheme.
- More semantic html tags.
- Skip to main content link.
- More accessible images with alt text and figure tags.
- Text representation of text file to make audio player more accessible to screenreader users.
- The audio player is now more accessible to users that are using older browsers that dont support HTML5 audio.
- The input element in the search form now has label only accessible to screenreaders.
- The two elements in the comment form have better labels.
- Show/hide comment control button is now key-board accessible.
- Comments are tabbable to improve screenreader accessibility.
- Table is now more accessible to screenreader users.
- Data rows and columns are better associated.
- Table summary was added.
The old webpage is located in the original-webpage-poor-accessibility folder. Open its index.html file to open it.
The new webpage is located in the improved-webpage-better-accessibility folder. Visit the deployed webpage, or open its index.html file to open it.
- HTML5
- CSS3
- Javascript
- WebAIM Contrast Checker
- Coolors.co color scheme generator
- NVDA Screenreader Tool