Website adaptation for people with disabilities: Provide a valid label for form fields

[DarWik]

Tool: https://www.webaccessibility.com/results/?url=http%3A%2F%2Fncov-dashboard.herokuapp.com%2F

When on-screen labels are present, they must be programmatically associated with form fields. When on-screen labels are not present, form fields must be given an accessible label.

When form fields do not have a programmatic (accessible) label, assistive technologies may incorrectly render the label or provide no label at all to users. When labels are not present or are incorrect, users of assistive technologies may not be able to complete a form.

The HTML5 specification has a new form field attribute called placeholder. This represents a label or hint, such as a word or short phrase, that is assigned to a form field such as an input field. The label or hint appears within the form field and goes away when users start typing. When the placeholder attribute is used, the label or hint may not be detected by assistive technologies. Therefore, developers should provide off-screen text in the label element of the form field or provide a title

Violations Identified (2)
<a data-original-title="Info" data-content="Global cumulative growth in cases since collection of data started. Defaulted to logarithmic y-scale" title="" data-trigger="focus" data-toggle="popover" role="button" tabindex="0" class="btn btn-sm btn-light"><i aria-hidden="true" class="fas fa-info text-dark"></i></a>
<a data-original-title="Info" data-content="Daily time series of cases. Bars can be stacked for relative adjacent comparison by toggling 'confirmed' cases." title="" data-trigger="focus" data-toggle="popover" role="button" tabindex="0" class="btn btn-sm btn-white"><i aria-hidden="true" class="fas fa-info"></i></a>