a11y issues

[LauraLangdon]

We'd been waiting to fix some minor a11ywatch warnings until the new website launched (turned out not to matter since the docs pages didn't change with respect to these issues), so we can address these now. And more urgently, the a11ywatch CI test failed for PR #179 for error 5 on this list:

• 1. {"code":"WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail","context":"<span class=\"DocSearch-Button-Placeholder\">Search</span>","message":"This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.27:1. Recommendation: change text colour to #000610."

• 2. "recurrence":0,"runner":"htmlcs","selector":"#__docusaurus > nav > div:nth-child(1) > div:nth-child(2) > div > button > span:nth-child(1) > span","type":"error","typeCode":1},{"code":"WCAG2AA.Principle1.Guideline1_3.1_3_1.H48","context":"<div class=\"home__flagship__item\"><a href=\"/sat\" class=\"link\"><im...</div>","message":"If this element contains a navigation section, it is recommended that it be marked up as a list."

• 3. "recurrence":0,"runner":"htmlcs","selector":"#__docusaurus > div:nth-child(4) > main > div > div > div:nth-child(2) > div > div:nth-child(2)","type":"warning","typeCode":2} {"code":"WCAG2AA.Principle1.Guideline1_3.1_3_1.H48","context":"<div class=\"home__flagship__item\"><a href=\"/atmo\" class=\"link\"><i...</div>","message":"If this element contains a navigation section, it is recommended that it be marked up as a list."

• 4. "recurrence":0,"runner":"htmlcs","selector":"#__docusaurus > div:nth-child(4) > main > div > div > div:nth-child(2) > div > div:nth-child(1)","type":"warning","typeCode":2} {"code":"WCAG2AA.Principle1.Guideline1_3.1_3_1.H48","context":"<div class=\"navbar__items navbar__items--right\"><a href=\"https://suborbital.dev.../</div>","message":"If this element contains a navigation section, it is recommended that it be marked up as a list."

• 5. "recurrence":0,"runner":"htmlcs","selector":"#__docusaurus > nav > div:nth-child(1) > div:nth-child(2)","type":"warning","typeCode":2},{"code":"WCAG2AA.Principle1.Guideline1_4.1_4_10.C32,C31,C33,C38,SCR34,G206","context":"<a href=\"#\" class=\"skipToContent_fXgn\">Skip to main content</a>","message":"This element has \"position: fixed\". This may require scrolling in two dimensions, which is considered a failure of this Success Criterion."

• 6. "recurrence":0,"runner":"htmlcs","selector":"#__docusaurus > div:nth-child(2) > a","type":"warning","typeCode":2},{"code":"WCAG2AA.Principle1.Guideline1_4.1_4_3_F24.F24.FGColour","context":"<span id=\"docusaurus-base-url-issue-banner-suggestion-container\" style=\"font-weight: bold; color: green;\">/</span>","message":"Check that this element has an inherited background colour or image to complement the corresponding inline foreground colour."

• 7. "recurrence":0,"runner":"htmlcs","selector":"#docusaurus-base-url-issue-banner-suggestion-container","type":"warning","typeCode":2},{"code":"WCAG2AA.Principle1.Guideline1_4.1_4_3_F24.F24.FGColour","context":"<span style=\"font-weight: bold; color: red;\">/</span>","message":"Check that this element has an inherited background colour or image to complement the corresponding inline foreground colour."

• 8. "recurrence":0,"runner":"htmlcs","selector":"#docusaurus-base-url-issue-banner > p:nth-child(3) > span","type":"warning","typeCode":2}],"issuesInfo":null,"lastScanDate":"Tue, 04 Oct 2022 16:37:47 GMT","online":true,"pageLoadTime":{"color":"#A5D6A7","duration":350,"durationFormated":"Lightning Fast"},"url":"https://docs.suborbital.dev/"},"message":null,"success":true}

Edit: The issues above were on A11yWatch's end and were resolved by PR #181. Remaining are actual a11y issues on our end, listed here:

• ERROR WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  <span class="DocSearch-Button-Placeholder">Search</span>
  This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.27:1. Recommendation: change text colour to #000610.

• WARNING WCAG2AA.Principle1.Guideline1_3.1_3_1.H48
  <div class="home__flagship__item"><a href="/sat" class="link"><im...</div>
  If this element contains a navigation section, it is recommended that it be marked up as a list.

• WARNING WCAG2AA.Principle1.Guideline1_3.1_3_1.H48
  <div class="home__flagship__item"><a href="/atmo" class="link"><i...</div>
  If this element contains a navigation section, it is recommended that it be marked up as a list.

• WARNING WCAG2AA.Principle1.Guideline1_3.1_3_1.H48
  <div class="navbar__items navbar__items--right"><a href="https://suborbital.dev...</div>
  If this element contains a navigation section, it is recommended that it be marked up as a list.

• WARNING WCAG2AA.Principle1.Guideline1_4.1_4_10.C32,C31,C33,C38,SCR34,G206
  <a href="#" class="skipToContent_fXgn">Skip to main content</a>
  This element has "position: fixed". This may require scrolling in two dimensions, which is considered a failure of this Success Criterion.

• WARNING WCAG2AA.Principle1.Guideline1_4.1_4_3_F24.F24.FGColour
  <span id="docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;">/</span>
  Check that this element has an inherited background colour or image to complement the corresponding inline foreground colour.

• WARNING WCAG2AA.Principle1.Guideline1_4.1_4_3_F24.F24.FGColour
  <span style="font-weight: bold; color: red;">/</span>
  Check that this element has an inherited background colour or image to complement the corresponding inline foreground colour.

@hola-soy-milk and I met today and resolved the first; I'll keep working on the rest. This issue is secondary on my to-do list, so progress may be slow.