search

styled-components / styled-components-website

The styled-components website and documentation
https://styled-components.com
MIT License
612 stars 436 forks source link

Increase Accessibility #904 #910

Open Mish2j opened 1 year ago

Mish2j commented 1 year ago

what needs to be done:

  1. add names to buttons
  2. form elements do not have labels
  3. links do not have names

1 and 3 have been completed. For 2 there is no elegant way to add labels on form elements, since the form element (textarea) is a child element of the "LiveEditor" component imported from "react-live-runner".

quantizor commented 1 year ago

This is looking pretty good to me, the only comment I have is we might want to just use title instead of aria-label so you get the nice hovertext as well for non-screen readers

Mish2j commented 1 year ago

This is looking pretty good to me, the only comment I have is we might want to just use title instead of aria-label so you get the nice hovertext as well for non-screen readers

Hi @probablyup, thanks for the feedback. I'll work on this in the next few days... Regarding the title attribute, I think it would be better to have both title and aria-label since title is not always reliable as stated on W3.org

The title attribute can also be used to identify form controls. This approach is generally less reliable and not recommended because some screen readers and assistive technologies do not interpret the title attribute as a replacement for the label element, possibly because the title attribute is often used to provide non-essential information. The information of the title attribute is shown to visual users as a tool tip when hovering over the form field with the mouse.

Let me know what you think...