A11y review - not identified as WCAG

[CalvinRodo]

Major:

• When form validation fails in a browser that has JavaScript enabled, the focus order is reset to the start of the page. I’d recommend using JS to automatically focus onto the validation error message if errors are detected upon submitting the form.
• On the first page, the “Are you a Canadian stuck abroad?” summary’s linked area covers the entire width of the content. So the big empty space beside that summary is like an invisible link that might accidentally get activated by certain users (like touch screen users that touch what they thought was an empty white space). I’d recommend reducing the linked area to just the summary (i.e. triangle and “Are you a Canadian stuck abroad?” text).

Minor

• In the first page, focusing onto the “Are you a Canadian stuck abroad?” summary causes an orange focus outline to appear around that text. But the outline doesn’t cover the summary’s entire linked area. Specifically, the triangle beside the text and the giant empty space to the right of it are beyond the boundaries of the focus outline. I’d recommend reducing the linked area to just the triangle and text and adjust the outline to encompass both of those.

• The page template’s <footer> element lacks a heading. I’d recommend adding a visually-hidden H2 heading to the start of it.

• The form validation error message’s red box appears before the H1 heading in the content area. That seems to make for a strange content flow. I’d recommend placing it after the H1 heading.
  Leftover from Andrew’s initial feedback: When you tab to, and activate a link that takes you elsewhere on the same page (ex: “Skip to main content”), when your focus lands on the target element, the visual focus indicator disappears until you hit tab again.

• Leftover from Andrew’s initial feedback: When I get to the last page, (Check back in a few weeks), I’m told “You missed a couple questions at the beginning. Start over to get your full results.” But I’m not told which ones I missed. I should be told. Ideally I should be given a link to go back to those pages. I wonder if this is when I was checking clicking “Next” without selecting a radio button. I eventually did select a radio button each time in order to make it to the next page. So, there may be a back-end bug here.

Very minor:

• The first page’s title is “Find financial help during COVID-19 — Find financial help during COVID-19”. That’s redundant/repetitive. I’d recommend changing the first page’s title to “Find financial help during COVID-19”. So basically, don’t prepend the H1’s content to the page title if it’s identical to the second half of the title. The other pages’ titles are fine and can stay as-is.
• The results page’s decorative black and white arrow images are using both aria-hidden="true" and alt="" attributes. That’s fine, but aria-hidden="true" is redundant. The alt="" attribute is already enough in and of itself to denote that that an image is decorative and is the more traditional way of doing it. I’d recommend removing aria-hidden="true" from those arrow images.
• The page template’s FIP link uses an aria-label attribute called “Government of Canada”. But the image itself already uses an alt="Government of Canada" attribute. I’d recommend removing the link’s aria-label attribute since it’s redundant.
• HTML sectioning elements are unused in the first and last pages’ main content. I’d recommend wrapping sectioning elements (such as <section>) around pairs of lower-level headings (<h2> and below) and their associated content (including subsections) to better convey the content’s structure.
• If a user visits the “Skip to main content” link on any of the form pages (like lost job), #content will appear at the end of the page’s URL. That’s fine, but in all subsequent step pages, #content will be retained and focus will default to the content area in each page. I don’t know if that’s necessarily a bad thing (it lets the user get straight to the point – which could arguably be beneficial), but it seems like unexpected behaviour. I don’t have a recommendation for this. Just wanted to point it out.
• The “Back” link is the first thing in the question pages’ element. Is that wise? It might be more appropriate to place it in the header area or move it after the H1 heading (at least in code… might be possible to retain the pre-existing visual layout with flexbox CSS). Just food for thought.
• Every page’s meta description is coded as “[ALPHA] Find financial help during COVID-19”, which is less specific than the page titles. Just wanted to point it out. This has no impact on users.