Small accessibility fixes

[oliverjam]

I noticed a couple of little things to think about:

1. Images containing text are not generally a good idea. If you do need to do it (e.g. because you can't create the same effect with webfonts and CSS) then make sure all the text in the image is reflected in the alt attribute. Right now a non-sighted user is missing out on the "Post your pet pictures" instruction (so might have no idea what your app is even for)
2. Conversely, don't go overboard on providing excess labelling. The "Sign up" and "Log in" links have text content that explains what they do. A non-sighted user will hear this and know where the link will take them, so you probably don't need an extra aria-label that provides the same info in a more verbose way. Bear in mind that screen reader users already get a little overwhelmed by how much stuff gets read out to them on the average page. Anything you can do to reduce this noise is helpful.
3. Don't forget to link help text with the associated input using aria-describedby. You've got it on the Log In password input but not the email one

[oliverjam]

A good example of 2) here:

week4-milly-paolo-orian/routes/profile.js

Line 33 in ff05340

<button type="submit" aria-label="Click button to Submit">Submit</button>

Screen readers already tell the user what element they are on, and even prompt them to interact with it. So for example if I use Voiceover to focus this button I hear:

"Click button to submit, button"
"You are currently on a button, inside web content"
"To click this button press Control-Options-Space"

It would be a lot less verbose for me to sit through if the button's label was just "Submit" 😅