Here is the list of accesibility violations –
- the characters have a low color contrast ratio, people with visual impairments
or color-blindness will find it very difficult to navigate.
- Heading elements are not in a sequentially-descending order
- no any required ARIA attributes
- no accessible names that convey their purpose.
- ARIA IDs are not unique
- input type='image' elements do not have [alt] text
- The title gives screen reader users an overview of the page is not proper, and search engine users rely on it heavily to determine if a page is relevant to their search.
- Captions make video elements usable are not providing critical information such as who is talking, what they're saying, and other non-speech information.
Things needs to be changed:
- Make sure all text on pages meets the minimum color contrast ratios specified by WCAG:
3:1 for text that is 18 pt, or 14 pt and bold
4.5:1 for all other text
- Modify Headers' order
- Add ARIA Attributes
- add names
- Add unique id's
- Add description images
- Give proper title
- Add video's captions
- Added 2 variables css