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

Embed url input field misses an associated label #1409

Closed
afercia opened this issue Jun 23, 2017 · 0 comments
Closed

Embed url input field misses an associated label #1409

afercia opened this issue Jun 23, 2017 · 0 comments
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes).

Comments

@afercia
Copy link
Contributor

afercia commented Jun 23, 2017

All form controls need to be properly labeled.

The current rendered markup for an embed url field is:

<form>
  <input type="url" value="" class="components-placeholder__input" placeholder="Enter URL to embed here…">
  <button type="submit" class="components-button button button-large">Embed</button>
</form>

Visually:

screen shot 2017-06-23 at 17 39 28

One option could be to simply use the visible text (in the example above: "Cloudup URL") as label for the input field.
Worth reminding, according to the WordPress accessibility coding standard, labels should be explicitly associated (use for/id attributes and not wrapping the field). See https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/#labeling

@afercia afercia added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Jun 23, 2017
@afercia afercia changed the title Embed url input field miss an associated label Embed url input field misses an associated label Jun 29, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes).
Projects
None yet
Development

No branches or pull requests

1 participant