Joshua's Docs - Accessibility (a11y) in Web Design - Notes & Quick Ref
Light
help

Resources

What & Link Type
up your a11y Guide

Using Emoji

I love the use of Emoji as a design shortcut, especially for personal projects. Lightweight vector icon that is baked into the system and matches the user's OS styles? Yes please! However, there are some important a11y concerns.

General rule of thumb:

  • Wrap with <span></span>
  • Modify span, if...

    • Purely decorative (isn't part of the content)

      • Add aria-hidden="true" to span
      • Omit label & role
    • Part of content / conveys meaning

      • Add role="img"
      • Add aria-label="{emojiShortName}"
      • Do not use aria-hidden

Example:

My face when my code worked: <span role="img" aria-label="face with tears of joy">😂</span>

💡 Tip: If you are using a lot of emojis in your project, you might want to extract this pattern into a component, or use a pre-built component (such as a11y-react-emoji for React).

Note: Emoji can have multiple text strings associated with their Unicode entry; the official title (English only, permanent), alias, and - most commonly used for aria-label and display - the CLDR short name.

Forms

Label Grouping and Associations

Every form input (aka form control) should generally have a label, which describes its purpose. There are a few ways to associate a label with a control element, which is outlined in detail here (and here), but I'll summarize below:

  • Explicit Linking

    • Option: Use <label for="{idOfInput}">{descriptiveText}</label>

      • It is OK to hide this element for those that can visually infer purpose without it. But you might be better off with below approach in that case.
    • Option: Use <input aria-label="{descriptiveText}" />

      • Good for if you don't want a visual label
    • Option: Use <input aria-labelledby="{idOfElement}" />

      • The element you reference by ID should contain th descriptive text itself
      • Good for when you have an existing (non-label) element you want to reuse the text from, as both a visual element and assistive text
    • Not recommended: <input title="{descriptiveText}" />
  • Implicit Association

    • Option: Use <label> as container for input & text

      <label>
      	Favorite food:
      	<input type="text" />
      </label>
    • (For buttons only): Enclose text in button element: <button>{descriptiveText}</button>

🤔 What about placeholder values?

  • Although they can be combined with label features, in general you are better off just using labels
  • Even for sighted users, the placeholder attribute is usually not great to use from a UX perspective, since it doesn't play nice with translations and disappears as soon as the user types
Markdown Source Last Updated:
Tue Sep 29 2020 06:23:47 GMT+0000 (Coordinated Universal Time)
Markdown Source Created:
Tue Sep 08 2020 05:02:54 GMT+0000 (Coordinated Universal Time)
© 2020 Joshua Tzucker, Built with Gatsby
Feedback