What

Think about a label as you would a luggage label. It contains information about your suitcase, maybe a name, maybe an address. There are visible and hidden labels. So in the instances of our label being tied onto the handle is visible. On the other hand if it was placed inside it would be hidden.

  • Visible Labels: These are textual descriptions displayed next to elements like buttons, checkboxes, images, and form fields.They are directly visible to all users, not just those using screen readers.
  • Hidden Labels: These are attributes like alt texts for images and title attributes for links. They are not visible on the page but are accessible to screen readers, providing textual descriptions of the element.

Why

Labels help screen readers in the following ways:

  • Understanding Page Content - Labels provide crucial context for screen reader users, allowing them to understand the function and purpose of various elements. For example, a label next to a "Submit" button tells the user what will happen when they click it.
  • Enhanced Navigation - Descriptive labels on links and navigation menus help screen reader users understand the structure of the webpage and navigate efficiently.
  • Improved Search - Proper use of labels with relevant keywords can help search engines understand the content of your website, potentially improving your search ranking and making your website more discoverable to screen reader users searching for specific information.
  • Accessibility Compliance - Using labels properly is essential for complying with accessibility guidelines like WCAG 2.1, which aim to make websites accessible to everyone.

How

Best Practices for Label Use:

  • Be concise and clear - Keep labels short and to the point, accurately describing the element's function.
  • Use relevant keywords - When appropriate, include relevant keywords in labels, especially for links and images, to improve search accessibility.
  • Avoid generic labels - Don't use generic terms like "click here" or "image." Always describe the specific action or content.
  • Write for the user - Think about what information would be helpful for a screen reader user to understand the element.
  • Use proper nesting - For complex elements with multiple parts, ensure labels are nested logically to provide clear context.

Examples of Good and Bad Labels:

  • Good: "Submit Order Form" (button label) - this informs the user of the action
  • Bad: "Click Here" (button label) - this provides no information

  • Good: "Image of a snowy mountain range" (alt text for image) - this provides the user a textual description of the image
  • Bad: "Image" (alt text for image) - this provides no information