Increase Accessibility #904

[Mish2j]

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]

I think you can just pass aria-label directly on LogoLink instead of using the attrs indirection:

<LogoLink aria-label="Styled Components Home Page">

[quantizor]

Same here

[quantizor]

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]

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...