Improve accessibility of MooseDoc-generate websites

[cmacmackin]

Motivation

There exist a number of of Web Content Accessibility Guidelines (WCAG) developed by the W3C's Web Accessibility Initiative. These make websites more accessible to those with disabilities by ensuring content has good contrast against the background, pages are navigable using a keyboard, they are well-suited for the use of screen-readers, etc. Browsers such as Firefox can be used to check whether pages meet these standards. This reveals that there are a number of instances where the MOOSE documentation does not meet these guidelines.

Design

According to Firefox's accessibility checker, the following changes should be made to meet the WCAG.

• Add alt-text to the images linking to the GitHub repo at the top of the page.
• Remove the tabindex attribute from pre-formatted code blocks
• Increase contrast of navbar breadcrumbs in dark mode#
• Increase contrast of table of contents sidebar in dark mode
• Side navigation menu (for narrow screens) should have a link or button to close it, rather than just clicking anywhere. (not certain whether this is important)
• Images inserted with the media extension have no alt-text (not clear to me whether this is an issue with the media extension or people just haven't written any in the doc files). Also, these images are clickable even though img and picture tags don't have interactive semantics. It would be better to wrap them in a link or something which does have interactive semantics and attach the zoom feature to that.
• The arrows used to expand/collapse parameter lists in source documentation pages have insufficient contrast in light-mode.
• The expandable lists used for parameters are clickable even though lists are not considered interactive elements.
• The headline text for parameters have insufficient contrast in dark-mode.

Impact

These changes will make the MOOSE website easier to read for those with visual impairments and easier to navigate using a keyboard.