I have just submitted #3, which adds a lot of nice small accessible features. This is good (I hope) from a usage perspective of someone using assistive devices.
However there are some visual aspects I wanted to note here that I think could do with improvement, to make the site more accessible visually. As this relates to design, I'm not the person to start changing things :)
The issues I see are as follows:
1: Contrast
There are a number of elements that have a low contrast level; this means that many people with visual difficulties may have trouble seeing elements on the page.
The a11y tool (an awesome npm package I use as part of my accessibility testing, which you may like to incorporate into your testing too!) has picked the following elements as having problematic contrast levels:
I believe this applies to the submit buttons, the "create an app" input, and the form inputs in the "congratulations" section on a successful form submission.
2: Indication of selection (focus and hover states)
Elements that are tabable/focusable must have :focus and :hover states.
- When I am clicking the buttons, there is no indication that the button is active
- When I tab to elements, like the button and links: there is no indication that I have actually done so. If I am only able to use a keyboard, I cannot tell if I am currently selecting the button, ready to submit my application creation.
Hope this helps!
I have just submitted #3, which adds a lot of nice small accessible features. This is good (I hope) from a usage perspective of someone using assistive devices.
However there are some visual aspects I wanted to note here that I think could do with improvement, to make the site more accessible visually. As this relates to design, I'm not the person to start changing things :)
The issues I see are as follows:
1: Contrast
There are a number of elements that have a low contrast level; this means that many people with visual difficulties may have trouble seeing elements on the page.
The a11y tool (an awesome npm package I use as part of my accessibility testing, which you may like to incorporate into your testing too!) has picked the following elements as having problematic contrast levels:
I believe this applies to the submit buttons, the "create an app" input, and the form inputs in the "congratulations" section on a successful form submission.
2: Indication of selection (focus and hover states)
Elements that are tabable/focusable must have
:focusand:hoverstates.Hope this helps!