accessibilityBlogbrowserChromeedgeFirefoxInternet ExplorersafariusabilityUXWeb

Group Labels Do Not Guarantee… Uniquity?

June 22, 2019; 2 Comments

Heading this off early:

uniquity
uniq·​ui·​ty; yüˈnikwətē, -wətē, -i
Uniqueness; quality of being distinctive.

There’s a place where accessibility practitioners hang around and try to out-do one another with area of interest information of nuance. While loitering in one, a query came up about textual content fields that have the identical

This can be a dangerous concept, in fact. Do not give fields on a page the same accessible identify regardless of how they are grouped. Doing so could possibly be failures of WCAG Success Standards 2.5.three: Label in Identify, three.three.2: Labels or Directions, and four.1.2: Identify, Position, Worth (relying on how literally you learn them). On the very least, this might be a terrible consumer expertise.

However I used to be curious just how these fields may be exposed to display reader customers and whether display readers may do some additional work on behalf of users. I needed to know if display readers would current distinct names to customers by way of their very own heuristics because of grouping structure.

Perhaps relatedly, I have written about one thing comparable (however totally different) in my submit Uniquely Labeling Fields in a Table

Check Code

In my CodePen I’ve additional controls on the prime and backside of the web page to offer a place from which to test jumping into the teams. However this is the minimum code you could check the 2 grouping options.

Piggy

Doggo

See the Pen
Testing Display Reader Heuristics by Adrian Roselli (@aardrian)
on CodePen.

Conclusions

Do not rely on a gaggle label to offer a singular accessible identify for textual content fields that in any other case have the same accessible identify.

Even the heuristics constructed into display readers to get around horrible developer habits won’t save all your customers.

If as a consumer you’re caught coping with it within the wild then one of the best platform, browser, and display reader combo to make use of is Home windows 10 operating IE11 with JAWS 2018. The worst combo is every little thing on cellular or something with Narrator.

Testing Outcomes

A name badge sticker that reads “Hello, our name is Dave.”
Image by David Mulder, modified; CC BY-SA 2.0.

I tracked the checks I ran along with their outcomes. Be happy to waste your personal time making an attempt it with other mixtures or versions.

  • Accessible identify calculation from browser:
    • Internet Explorer 11 (IE11) uses only the
    • Firefox 68 uses solely the
    • Chrome 75 makes use of only the
    • Edge uses only the
    • Safari makes use of only the
  • Utilizing JAWS 2018.1808.10
    • Tab ↹ and Shift + Tab ↹ by means of web page:
      • IE11 pronounces group label when placing concentrate on first encountered subject in group.
      • Firefox pronounces group label when putting give attention to first encountered area in group.
      • Chrome proclaims group label when placing concentrate on first encountered subject in group.
      • Edge doesn’t announce group label for any subject.
    • Navigating by edit area (E):
      • IE11 pronounces group label for each area.
      • Firefox doesn’t announce group label.
      • Chrome doesn’t announce group label.
      • Edge doesn’t appear to help text subject navigation.
    • Utilizing CapsLock + F5 to deliver up component record:
      • IE11 pronounces group label for each subject.
      • Firefox proclaims group label for every subject.
      • Chrome proclaims group label for every area.
      • Edge does not announce group label for every subject.
    • CapsLock + Ctrl + Residence / Finish to get to first or last type factor, then using F to maneuver by way of fields:
      • IE11 declares group label for each subject.
      • Firefox doesn’t announce group label for each area.
      • Chrome does not announce group label for each subject.
      • Edge doesn’t seem to help this navigation.
  • Utilizing NVDA 2019.1.1
    • Tab ↹ and Shift + Tab ↹ by way of web page:
      • IE11 proclaims group label when placing give attention to first encountered subject in group.
      • Firefox declares group label when placing concentrate on first encountered area in group.
      • Chrome broadcasts group label when placing concentrate on first encountered subject in group.
      • Edge solely proclaims group label when putting concentrate on first encountered area in second group, so there may be a
        bug.
    • Navigating by type subject (F):
      • IE11 only broadcasts group label when putting give attention to first encountered area in second group, so there could also be a
        bug.
      • Firefox proclaims group label when placing concentrate on first encountered subject in group.
      • Chrome proclaims group label when placing concentrate on first encountered area in group.
      • Edge only proclaims group label when placing concentrate on first encountered subject in second group, so there could also be a
        bug.
    • Using CapsLock + F7 to convey up factor record:
      • IE11 doesn’t announce group label for any subject.
      • Firefox doesn’t announce group label for any subject.
      • Chrome does not announce group label for any subject.
      • Edge doesn’t announce group label for any subject.
  • Using Narrator
    • Tab ↹ and Shift + Tab ↹ by way of page:
      • IE11 only pronounces group label when putting give attention to first encountered area in second group, so there may be a
        bug (even then, it says each subject names on first area).
      • Firefox doesn’t announce any subject, continually saying No merchandise in view.
      • Chrome doesn’t announce group label for any area.
      • Edge only broadcasts group label when putting give attention to first encountered area in second group, so there could also be a
        bug.
    • Navigating by type area (E and F):
      • IE11 simply echoes the letter pressed as an alternative of navigating.
      • Firefox just echoes the letter pressed as an alternative of navigating.
      • Chrome pronounces Command not obtainable.
      • Edge solely broadcasts group label when placing concentrate on first encountered subject in second group, so there could also be a
        bug.
    • Utilizing CapsLock + Web page Up / Page Right down to navigate by sort:
      • IE11 solely declares group label when placing concentrate on first encountered subject in second group, so there could also be a
        bug.
      • Firefox doesn’t acknowledge the fields, declares something totally different on every reload of Narrator.
      • Chrome doesn’t recognize the fields, proclaims one thing totally different on every reload of Narrator
      • Edge solely pronounces group label when placing concentrate on first encountered area in second group, so there could also be a
        bug.
  • Utilizing VoiceOver macOS 10.14.5
    • Tab ↹ and Shift + Tab ↹ by means of web page:
      • Safari declares group label when putting concentrate on first encountered subject in group.
      • Chrome proclaims group label when placing concentrate on first encountered area in group.
    • Navigating by type subject (CapsLock + Command + J):
      • Safari does not announce group label when putting concentrate on any area; only pronounces group label when
        receives focus in DOM order.
      • Chrome doesn’t announce group label when putting concentrate on any subject; by no means places concentrate on
        .
    • Utilizing CapsLock + U to deliver up rotor:
      • Safari only declares group label when putting concentrate on first encountered subject in first group, so there could also be a task=”group” bug.
      • Chrome doesn’t announce group label for any subject.
  • Utilizing TalkBack Android 9
    • Swiping by means of page:
      • Firefox doesn’t announce group label when putting give attention to any subject in group.
      • Chrome doesn’t announce group label when putting concentrate on any subject in group.
    • Navigating by management:
      • Firefox does not announce group label when placing give attention to any subject in group.
      • Chrome doesn’t announce group label when putting give attention to any subject in group.
  • Utilizing VoiceOver iOS 12.3
    • Swiping via page:
      • Safari only proclaims group label when putting concentrate on first encountered area in first group, so there may be a task=”group” bug.
    • Navigating by control:
      • Safari only declares group label when putting concentrate on first encountered area in first group, so there could also be a task=”group” bug.

Tags

accessibility, browser, Chrome, Edge, Firefox, Internet Explorer, Safari, usability, UX

Different Posts

Earlier submit: Hydrox Was First to Market

Newer publish: Link + Disclosure Widget Navigation

Related posts
AdoreboardanalyticsBlogcustomer centricitycustomer experienceCXdata scienceemotion analysismarginal gains

Are Marginal Gains the Answer to Measuring Customer Experience? – Adoreboard Blog

Blog

Old Forge’s new passion: mountain biking

AdirondacksAPABlogEnvironment

David Gibson On APA Appointments; Role of Statewide Interests –

Blog

Wix Website Creator as well as to understand even more concerning