fix(accessibility) Improve accessibility of the site #2274
Conversation
- increase contrast of text elements - make ui more screen readable
|
What major things are needed to pass the 80 mark? |
| @@ -39,14 +39,17 @@ export default class Navigation extends React.Component { | |||
|
|
|||
| <div className="navigation__search"> | |||
| <input | |||
| type="text" | |||
| aria-label="Search documentation" | |||
| type="search" | |||
There was a problem hiding this comment.
Usually the type search adds some extra styles or autocompletes that might not go well with the styles we have now, have you tested this change in different browsers?
There was a problem hiding this comment.
Wow. Spotted some strange artifact on Safari 11. Thank you. Will figure out how to avoid it.
| @@ -99,13 +99,13 @@ | |||
| } | |||
|
|
|||
| &.tip { | |||
| background-color: #DCF2FD; | |||
| color: #618ca0; | |||
| background-color: #eaf8ff; | |||
There was a problem hiding this comment.
Can you post a screen shot with this changes? For reviewers is hard sometimes to infer the impact of the change and checking out and building the branch is a little time consuming, thanks :)
There was a problem hiding this comment.
Here are screenshots with my changes. The changes are very subtle though :)
|
Thank you, folks for checking this out, and the great response. This PR still needs some work. |
|
Oh and I almost forgot. To make it pass the score 80 the document need <title></title> to be set, and the search input needs a label. |
|
Thanks! |
| `<h${level} class="header"> | ||
| <a class="anchor" aria-hidden="true" href="#${id}" id="${id}"></a> | ||
| <span class="text">${text}</span> | ||
| <a aria-label="${text}" class="icon-link" href="#${id}"></a> |
There was a problem hiding this comment.
Hey, guys! I've found an issue, if in ${text} will be a <a>-link, it breaks markup.
For example here at the bottom, check License.
There was a problem hiding this comment.
Hoping to take a look in a few days. Thanks
| @@ -14,7 +14,7 @@ export default ({contributors}) => { | |||
| <a key={ contributor } | |||
| className="contributor" | |||
| href={ `https://github.com/${contributor}` }> | |||
| <img src={ `https://github.com/${contributor}.png?size=90` } /> | |||
| <img alt={ contributor } src={ `https://github.com/${contributor}.png?size=90` } /> | |||
There was a problem hiding this comment.
Since there is a span just after this image, which already ready out the contributor name, I'd prefer to set role="presentation" here
Hello. This is for #2244. Audit's score went from ~50 to ~80 with this one :)