Improve accessibility in docs via HTML

[mattxwang]

Based off of this comment chain in #578, I think we have a lot of work to do to improve our use of accessible HTML (and markdown-generated HTML) in our documentation. This is useful for a couple of reasons:

1. Immediately, we improve the accessibility experience for screenreader users (and SEO engines)
2. Since many users use our docs as a template, we influence downstream users of our template in the sites that they create

Thus, I'd like to see us gradually improve our codebase, primarily through semantic HTML. This includes:

• convey meaning with custom styles instead of relying on defaults (most relevant for headers generated with markdown)
  • one example here; skipping from ## to ####
• better alt text and aria-labels for non-text UI elements
  • one example is documented in Accessibility: Missing alt text on dropdowns #800

This list is incomplete; would love to have more input from the community!

[mattxwang]

Also - a bit wary in general of the effectiveness of umbrella issues like these. Happy to rescope just to semantic HTML (the original driving conversation for this issue).

[natke]

I have run the Microsoft accessibility checker on our site (which uses the just the docs template) and have hit a few accessibility issues, some of which I can fix by customization but some are in the library itself e.g.

• Title: WCAG 2.4.4,WCAG 4.1.2: Ensures links have discernible text (.site-title)
  Tags: Accessibility, WCAG 2.4.4, WCAG 4.1.2, link-name

   Issue: Ensures links have discernible text (link-name - https://accessibilityinsights.io/info-examples/web/link-name)
  
   Target application: ONNX Runtime - onnxruntime - https://onnxruntime.ai/docs/
  
   Element path: .site-title
  
   Snippet: <a href="/" class="site-title lh-tight"> <div class="site-logo"></div> </a>
  
   How to fix: 
   Fix all of the following:
   - Element is in tab order and does not have accessible text
  
   Fix any of the following:
   - Element does not have text that is visible to screen readers
      aria-label attribute does not exist or is empty
      aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      Element has no title attribute
  
      Environment: Microsoft Edge version 107.0.1418.26
  
      ====
  
      This accessibility issue was found using Accessibility Insights for Web 2.35.0 (axe-core 4.4.1), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.
  

[mattxwang]

Hi @natke, thanks for commenting. Did a quick double-check, and you're indeed correct; in 132cecf, we introduced a site.logo feature (that is not commonly used) which renders a <div> with no body text or annotation. Certainly inaccessible!

If you don't mind, could you submit a separate issue for this problem? Feel free to copy-paste what you've indicated in your comment.

If you have time, I am happy to review a PR that resolves this problem. The core comes from us using a hack-y way to render the logo image (instead of semantically using an img tag). A couple of solutions (ranging from easy to hard)

1. easy: use the site's title to label the div. we shouldn't use aria-label for this; instead, add some text to the div and make it screenreader only; rendering the site title should suffice
2. hard: refactor the site.logo implementation to use an <img /> tag instead of background CSS. the tricky portion involves keeping background compatibility. You can then make the alt tag the site title.

What are your thoughts?