Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MethodScript.com Accessibility - Labels are not attached to search form fields #1270

Open
LeigerGaming opened this issue Mar 11, 2021 · 0 comments
Labels
accessibility Issues related to problems with accessibility documentation

Comments

@LeigerGaming
Copy link
Contributor

The search form does not include accessible labels that can be interpreted by a screen reader.

2 violations detected:

<select id="theme-select" name="theme-select">
   <option value="default">Default Theme</option>
   <option value="Dark">Dark</option>
   <option value="Nilleke Dark">Nilleke Dark</option>
</select>
<input id="search" name="search" value="" type="search" class="sb-search-input">

Why is this important?

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

https://www.webaccessibility.com/results/?url=https%3A%2F%2Fmethodscript.com%2Fdocs%2F3.3.4%2Findex.html

@LadyCailin LadyCailin added accessibility Issues related to problems with accessibility documentation labels Mar 11, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility Issues related to problems with accessibility documentation
Projects
None yet
Development

No branches or pull requests

2 participants