ARIA roles & HTML semantics for a more accessible experience

[varjmes]

Hello! I am here to deliver some lovely accessibility to my-first-hoodie!

• 0389ffc: adds a language attribute to the app, so a screenreader knows what pronunciation to use when reading it out loud
• 92399e5: turns the main header div into an actual header element and adds the appropriate banner aria role
• b80eec3: adds an aria role of "main" to the main content. Ideally I would have changed the div to a main element, but this is not supported by IE.
• b828e01: I have set the code block to be contained in an aside element because I do not believe this counts as main content, I've also added the complementary aria role.
• acf11e3: adds the correct aria role to the footer
• c02152d: adds a hidden label linked to the todo input box, so VoiceOver reads a better explanation of what it does (also, all form elements should have labels to be good valid HTML)
• 6af3a64: fixes a typo within a code comment

I've done a series of small commits, so if anyone doesn't agree with one of them I can take it out easily :)

There are a couple of more complex things I'd like to do in future PRs like letting the user know that they have successfully submitted/finished/deleted their todo, perhaps with use of ARIA live regions.

[varjmes]

I hope I got the commit messages right, @gr2m :dancer:

[gr2m]

you're a commit super :star2:

[gr2m]

you just won the price for the best explained PR in Hoodie History :tada:

Looks all good to me :+1:

[gr2m]

merged via d337367

[boennemann]

@Charlotteis Thanks for all of this :tada:

Your explanations are so good that we should ingrain them into the history of this project :) I don't know what you're using for git, but let's suppose it's the command line:

Instead of doing git commit -m "the message" you can just do git commit, which then opens your editor of choice, which again makes it easy to enter the summaries you're using now as the first line and the entire explanation right below that as the commit message body. Here is an example of what that looks like.

Thanks :sparkling_heart:

[varjmes]

@boennemann Thanks!

I do actually use Gitx sometimes if I want to do longer commit messages (it's also just a great GUI for git), though primarily I use the command line. I try not to write messages that are too long because I know some people frown upon them. I will endeavour to do longer explanations where needed, particularly for accessibility stuff! :tada: