Some accessibility items

[knod]

Some accessibility items that need addressing. For standard keyboard interaction, see https://webaim.org/techniques/keyboard/.

• [ ] More contrast needed for hover and other interactions, including (now issue #852):
  • [ ] General nav bar
  • [ ] Form section nav bar
  • [ ] Spouse vs. other member drop down in 'Household' form section
• [x] More visible :focus styling. [Being stewarded by knod right now]
• [ ] Income inputs are waaaaaay too much to tab through. We need to figure out something with arrow buttons... somehow... Really not sure how. Maybe we need to break them up into different sections and be able to skip to the next section somehow? :/
• [ ] Spouse/member drop down sometimes doesn't drop when user navigates to it.
• [ ] Spouse/member drop down chosen item sometimes doesn't switch when it should.
• [x] ~The buttons on the home page seem to get tabbed over twice.~ [Now #841]
• [ ] When a modal is open, things underneath still get tabbed over (not sure if that's fixable).
• [x] The new focus style from #811 isn't working within modals. [knod]
• [x] Do labels need to have a for attribute that'll connect them to their ui element in order to be read properly by a screen reader? [yes]
• [ ] Add a for attribute to labels to match their form input names. I think for ManagedNumberField we can give the same name to all the inputs. Worth a try.
• [ ] Add aria labels and descriptions (https://www.w3.org/WAI/tutorials/forms/instructions/)

[knod]

I'm doing some work on the focus visibility part. Either this issue can be for multiple people, or we can break it into individual issues (possibly as folks come along and are interested in moving it forward).

[dylanesque]

I'll start looking for contrast issues and knock those out.

[knod]

Do labels need to have a for attribute that'll connect them to their ui element in order to be read properly by a screen reader?

[dylanesque]

Do labels need to have a for attribute that'll connect them to their ui element in order to be read properly by a screen reader?

"Whenever possible, use the label element to associate text with form elements explicitly. The for attribute of the label must exactly match the id of the form control.", from the W3C Accessibility Tutorial, so yes, we absolutely should be using the for attribute.

https://www.w3.org/WAI/tutorials/forms/labels/

[knod]

Awesome! Thanks @dylanesque !