This week, we were tasked with refactoring a webpage to conform to the generally accepted accessibility standards. This includes:
- Using semantic HTML elements (main, section, aside, header, footer etc - ref: https://developer.mozilla.org/en-US/docs/Glossary/Semantics)
- Adding alt tags to images to allow them to be read by screen readers
- Heading attributes fall in sequential order
- CSS is consolidated and well commented
- Logical structure of elements
- Modified all divs to conform to semantic equivalents where relevant
- Added alt tags to all relevant images
- Consolidated all CSS classes to generalised equivalent (e.g. content in the main section has been changed to a general class of "main-content-article" to allow for easy extensibility)
- Retained original IDs for anchor links and JS integration
- Kept Hero div with background image as this is not relevant to screen readers and does not need to be exposed