accessibility: manually check these issues

[ychoy]

According to this audit report from Chrome Dev Tools:

Additional items to manually check (11) These items address areas which an automated testing tool cannot cover. Learn more in our guide on conducting an accessibility review. https://developers.google.com/web/fundamentals/accessibility/how-to-review?utm_source=lighthouse&utm_medium=devtools

• The page has a logical tab order.
  Tabbing through the page follows the visual layout. Users cannot focus elements that are offscreen.
• Interactive controls are keyboard focusable
  Custom interactive controls are keyboard focusable and display a focus indicator.
• Interactive elements indicate their purpose and state
  Interactive elements, such as links and buttons, should indicate their state and be distinguishable from non-interactive elements.
• The user's focus is directed to new content added to the page
  If new content, such as a dialog, is added to the page, the user's focus is directed to it.
• User focus is not accidentally trapped in a region
  A user can tab into and out of any control or region without accidentally trapping their focus.
• Custom controls have associated labels
  Custom interactive controls have associated labels, provided by aria-label or aria-labelledby.
• Custom controls have ARIA roles
  Custom interactive controls have appropriate ARIA roles.
• Visual order on the page follows DOM order
  DOM order matches the visual order, improving navigation for assistive technology.
• Offscreen content is hidden from assistive technology
  Offscreen content is hidden with display: none or aria-hidden=true.
• Headings don't skip levels
  Headings are used to create an outline for the page and heading levels are not skipped.
• HTML5 landmark elements are used to improve navigation
  Landmark elements (, , etc.) are used to improve the keyboard navigation of the page for assistive technology