search

rhymu8354 / OmniaRegna

This holds public information about OmniaRegna (https://omniaregna.com/), an online RPG. Issues for the game may be reported here or in the game itself.
8 stars 1 forks source link

Problem with labels associated with divs #278

Closed rhymu8354 closed 4 years ago

rhymu8354 commented 4 years ago

[12:33] SuchGrind: According to the spec labels shouldn't be associated with divs, so that might cause accessibility issues

SuchGrind commented 4 years ago

w3c.org on label & for attribute only associating with form-associated-elements w3c.org on form-associated-elements which lists labelable elements

Label & for attribute

  • The label represents a caption in a user interface. The caption can be associated with a specific form control, either using for attribute, or by putting the form control inside the label element itself.
  • The for attribute may be specified to indicate a form control with which the caption is to be associated. If the attribute is specified, the attribute's value must be the ID of a labelable form-associated element in the same Document as the label element.

Labelable elements

  • Denotes elements that can be associated with label elements.
  • button, input (if the type attribute is not in the hidden state), keygen, meter, output, progress , select, textarea

You might have read about aria-label as well, which can add context just for screenreaders (might not be relevant, but just to be comprehensive). aria-label unfortunately gets interpreted wildly different by different screenreaders, though you will be mostly save following the use cases in this article by David MacDonald, or by reading up about it on w3c.org.

Well supported elements

  • aria-label, aria-labelledby and aria-describedby are robustly supported for interactive content elements such as links and form controls including the many input types. They also work well on div and span elements with interactive roles such as role=link, button. By design, aria-label or aria-labelledby replace any other label text inside the element.
  • All three are OK on nav and main elements.
  • They are OK on div elements IF they have role=navigation, search, main, img.
  • They are OK on a table element (except ignored by VoiceOver on iOS).
  • aria-describedby is OK on h1, h2, h3, h4, h5, h6 elements.
rhymu8354 commented 4 years ago

Thank you for the excellent write-up. I found a small number of places where I coupled Label with elements that were not input ,select, or textarea. I decide in those cases to replace the Label with a simple span.

rhymu8354 commented 4 years ago

Most of these were in the ticket details page I was working on at the time I opened the issue.