Responsive mortgage calcultaor

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted 18 days ago

  This challenge is a great one to learn and practice how to make forms accessible. There are some problems in your solution so far, and some potential improvements.

  1. All inputs must have a label. In some of these instances you've included a label element but not linked it to the input properly with for.
  2. The clear all button should be inside the form because it is the reset for the form. The heading can move inside it too.
  3. I would make all of those elements you have with the spacer class aria-hidden="true" and instead include that information as visually-hidden (sr-only) text in a span inside the field label. This will ensure that screen reader users get the same information at an appropriate time, just as anyone else would.
  4. When linking inputs and error messages, there are more accessible patterns than you are using currently. The requirements are for all users to (a) know an error has occurred and (b) have that error linked programmatically to its input. I recommend you wrap each error in an extra element. Give each a unique ID and an aria-live="assertive". Then add aria-describedby on each input referencing the ID of the error wrapper.
  5. The form should have a novalidate attribute on it because you're using custom validation.
  6. I'm not sure why you're not using the required attribute? It's fine to use aria-required but that's only usually used when using non-native HTML elements (i.e. it's used on generic elements that have had their role changed).
  7. On submission, if an error is present, move focus to the first field which has the error. This solves multiple problems because it means the field and error will scroll into view as well as ensuring people are ready to correct their error.
  8. It is essential to include clearly visible focus-visible styles on all interactive elements. As a keyboard user I need to know where I am on a page. But you have set outline to 0 and not added any custom focus-visible styling on the radios so I'm immediately lost.
  9. "Mortgage type" is not a label element. That's invalid. Why not use a fieldset and legend for this instead of role and aria-labelledby?
  10. The results container should be an aria-live not just the numbers inside it. For an aria-live region to function it must already be registered as one (i.e. not display: none at the start). And on the first content change all of that results information should be announced to screen readers.
  11. The results card should be a description list or table. The text and numbers are key value pairs that are designed to be understood as a pair.
  12. General pointer: Try not to include empty divs with classes for styling purposes. You actually want a border for that grey line, or pseudo element, not a whole extra div.
  13. Why is there some duplicate content in there with the class "display-switch"? You shouldn't need that.
  14. Don't forget to remove console logs from your code.

  Marked as helpful

  1