Visual & Accessibility Improvements

Hey Hey! I took a look.

Usability wise: great, simple, nice. Noticed a few bugs visually (Chrome):

1. On Mobile devices, the links would look better aligned left 2. The text in the 'amount' input box gets cut off a lot. Mobile & Desktop. Issue #18 3. The about page calls this app 'Stracker', so should the title say 'Stracker' too? _Edit: I opened #21 to change the lone 'Stracker' to 'Tracker'_ 1. On larger-than-mobile, the nav links are not aligned to the top of the header and it looks a little odd. 2. Particularly on mobile, the two links look too close together. Capitalising "About" and changing the email to "Account" might help this. 1. The thin orange text on a white background is not contrasted well enough, meaning it is potentially difficult to see for folk with visual impairment. Could we use a darker orange? 1. There are number of links not visible to the user (such as the log-in/forgot password links when signed in) that are still visible to screenreaders. This will offer a sub-optimal experience to those using assistive technologies. Using `aria-hidden="true"` can hide something from a screenreader so that it will not be read out. It might not work on all devices, but these are the trade offs we make when we build Single Page Web Apps. Aria-hidden should hopefully fix it for most people. http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/

I hope this make sense. Didn’t PR it myself but can help if needed 🌞

[NickColley]

I think we’ve addressed everything here, going to close out, if there’s any more let’s keep them in small actionable issues.

thanks @Charlotteis @jsimplicio 💌 👍

[NickColley]

Did some digging and came across https://vimeo.com/117614181.

The way they describe solving the problem is as follows:

• Create a container in the page that is never added/removed with the aria-live attribute on it, this is our announcement container.
• Create an ‘announce’ script that can update that announcement container with content that the screenreader will automatically read without altering focus.
• To simulate a new page, update the document.title and send ‘document.title + page loaded’ to the announce script which is similar to what happens when you trigger a real page load.
• Might be worth pushing to the browser history here so the back button works.

Let me know if someone else wants to have a bash at it otherwise I’ll implement 😸