Fix accessibility issues on homepage and individual article pages

[barrymcgee]

Why:

Accessibility can nearly always be improved. This site was already built with accessibility clearly in mind but I noticed some remaining issues flagged in my aXe accessibility browser plugin so I thought I'd address them.

Fixes #2159

What's being changed:

• Removed aria-hidden link wrapping the Github logo mark in the site header from the tab index so it's no longer keyboard accessible. This means keyboard users will skip straight to the next link around 'Github docs' which is the same.
• Make headings semantic and ensuring they only increment by one sequentially while maintaining the current visual styling.
• Wrap sidebar navigation in <nav> sectioning element to confer semantic meaning.
• Fix up incorrectly nested <ul>'s in the sidebar navigation
• Fix up duplicate nested <main> elements on article pages - there should only be one per page.

Each commit for each change has a link containing full supplementary rationale.

The biggest remaining issues are coming from the third party Agolia search box which is out of my control and there are also some color contrast issues but that will require collaboration and sign off from a designer.

Lighthouse Accessibilty score on production:

Lighthouse Accessibilty score on this Heroku demo:

Check off the following:

• All of the tests are passing.
• I have reviewed my changes in staging. (look for the deploy-to-heroku link in your pull request, then click View deployment)

Not applicable:

• For content changes, I have reviewed the localization checklist
• For content changes, I have reviewed the Content style guide for GitHub Docs.

[welcome]

Thanks for opening this pull request! A GitHub docs team member should be by to give feedback soon. In the meantime, please check out the contributing guidelines.

[janiceilene]

@barrymcgee Thanks so much for opening a PR! I'll get this triaged for review 💖

[github-actions]

This PR is stale because it has been open 7 days with no activity and will be automatically closed in 3 days. To keep this PR open, update the PR by adding a comment or pushing a commit.

[barrymcgee]

Holiday break 🎅

[github-actions]

This PR is stale because it has been open 7 days with no activity and will be automatically closed in 3 days. To keep this PR open, update the PR by adding a comment or pushing a commit.

[barrymcgee]

Bumping this once more as we're now just out of the holiday period and I'm hopeful it might get reviewed this week.

[heiskr]

👋🏼 Hi @barrymcgee , this looks pretty great. I think this checks one or two boxes in #141 as well.

We have an automated accessibility script we run once a day, pa11y-ci in the repo as well. I checked out this branch and ran npm run pa11y-test on it. I'm seeing the form issue you've mentioned:

 • This form does not contain a submit button, which creates issues for those
   who cannot submit the form using the keyboard. Submit buttons are INPUT
   elements with type attribute "submit" or "image", or BUTTON elements with
   type "submit" or omitted/invalid.

   (html > body > main > div:nth-child(1) > header > div:nth-child(2) > div >
   div > div > div:nth-child(2) > div:nth-child(2) > form)

   <form class="mb-0"> <div id="search-input-contai...</form>

I think this is coming from https://github.com/algolia/instantsearch.js/. That said, the actual form element in question is here:
https://github.com/github/docs/blob/main/includes/search-form.html So I think we could move up the aria-hidden to the form element and no longer get that message.

But this is definitely an upgrade as is.

[barrymcgee]

@heiskr Thank you for your review! I've made your suggested change and the pa11y-test check now passes without error.

[heiskr]

It looks like the heading level change had the side effect of breaking a few "rendering" tests

[barrymcgee]

@heiskr Sorry, now rebased and all fixed up.

[github-actions]

Thanks very much for contributing! Your pull request has been merged 🎉 You should see your changes appear on the site in approximately 24 hours.

[chiedo]

Thanks for the contribution @barrymcgee!