Missing alt text and form labels on docs website
As part of Write The Docs 2020, I ran the following accessibility test on a page on our documentation website: https://wave.webaim.org/report#/https://docs.gitlab.com/ee/user/project/integrations/prometheus.html
I've submitted gitlab-docs!1058 (closed) to add alt tags to the Tanuki logos (easy fix!) but there are a couple of issues that I'm unsure how to fix.
The search box in the top navigation bar is missing a form label
Seems like a relatively easy fix, but could affect the layout.
Their suggested solution: If a text label for a form control is visible, use the element to associate it with its respective form control. If there is no visible label, either provide an associated label, add a descriptive title attribute to the form control, or reference the label(s) using aria-labelledby
. Labels are not required for image, submit, reset, button, or hidden form controls.
The permalink icons on subheadings are empty links
The checker notes they contain no text. (These icons appear on mouseover.)
Their suggested solution: Remove the empty link or provide text within the link that describes the functionality and/or target of that link.
Collapsible version history blocks have empty buttons or no text
See https://docs.gitlab.com/ee/user/project/integrations/prometheus.html#determining-the-performance-impact-of-a-merge for an example of a collapsible version information listing. The buttons are empty / have no value text.
Their suggested solution: Place text content within the <button>
element or give the <input>
element a value attribute.
Extra credit
The onmouseover empty-link issues with subheadings are happening on about.gitlab.com too.