Tag Archives: labels

ARIA Labels and Relationships  |  Web  |  Google Developers

using aria-label to identify an image only buttonLabels

ARIA provides several mechanisms for adding labels and descriptions to elements. In fact, ARIA is the only way to add accessible help or description text. Let’s look at the properties ARIA uses to create accessible labels.

aria-label

aria-label allows us to specify a string to be used as the accessible label. This overrides any other native labeling mechanism, such as a label element — for example, if a button has both text content and an aria-label, only the aria-label value will be used.

You might use an aria-label attribute when you have some kind of visual indication of an element’s purpose, such as a button that uses a graphic instead of text, but still need to clarify that purpose for anyone who cannot access the visual indication, such as a button that uses only an image to indicate its purpose.

Curated by (Lifekludger)
Read full article at Source: ARIA Labels and Relationships  |  Web  |  Google Developers

The art of labelling — A11ycasts #12

There’s a lot of neat tricks in this video by Rob Dodson where he focuses on accessibility tricks in Chrome’s DevTools. A few notes:

  • Chrome DevTools has an experimental feature to help with accessibility testing that you can unlock if you head to chrome://flags/ and turn on in the DevTools settings.
  • Wrapping an <input type="checkbox"> in a <label>gives the input a name of the text in the label, even without a for attribute.
  • The aria-labelledby attribute overrides the name of the element with the text taken from a different element, referenced by ID. It can even compose a name together from multiple elements, including itself.
  • Adding tabindex='0' to an element will make it focusable.


Curated by (Lifekludger)
Read full article at css-tricks

Using the fieldset and legend elements | Accessibility

Using the right HTML elements when implementing forms is essential to ensure they can be used by as many people as possible including screen reader users. In this blog Léonie explains the correct usage of the fieldset and legend elements. On GOV.UK we often use groups of related form fields, like a set of radio buttons or checkboxes. These related fields might be used to offer multiple answers to a single question, or to ask for multiple pieces of information about the same thing.

Curated by (Lifekludger)
Read full article at Source: Using the fieldset and legend elements | Accessibility

Labeled With Love, From the Notebook of Aaron Gustafson

Labeled With Love by Aaron Gustafson

This is the first entry in the series Modern Web Form Best Practices. Forms exist on pretty much every site on the web in one form or another. They are the primary mechanism by which we gather information from our users.1 Of course, before anyone can fill out a form, they need to know what it’s asking for.

Labeling is key.A few months back, I relayed a story from Facebook about how important the wording of their questions was in getting accurate responses from their users. The words we choose are incredibly important—your interface is a conversation with your users. I highly recommend reading up on that (and listening to the Radiolab episode that spurred me to write it), but I’m going to spend the remainder of this post talking about the utilitarian aspects of labels and how to use them properly in your forms.

Curated by (Lifekludger)
Read full article at Source: Labeled With Love, From the Notebook of Aaron Gustafson