Visual Accessibility

[varjmes]

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!

[varjmes]

I decided to play around with some colour values a little to see what better contrast could look like. These are no means final suggestions, but just something to give an idea.

This is a great tool to work out if your design has a good contrast ratio: http://leaverou.github.io/contrast-ratio/#

I changed the button color to: #1B8143 and the input text and border to #555. The placeholder text for the element is still an issue because you can't style this in a way that is cross-browser compatible, but you can do it for some browsers using this: https://css-tricks.com/snippets/css/style-placeholder-text/

On hover, I gave the button a colour of #312B81.

I applied the same styling/colours to the items in the 'congratulations' box.

I also decided to put back in the default styling of element outlines. Outlines are very important for visual feedback and I do not think they are very ugly :)

[varjmes]

There is of course, still improvements to be made:

Awesome ratios from the tota11y tool.

[gr2m]

wow, amazing work @Charlotteis!