speech synth a11y edits #340
Conversation
|
|
||
| input[type="text"]:focus, | ||
| select:focus { | ||
| border: 2px solid #ffa940; |
There was a problem hiding this comment.
I noticed that the range inputs don't have a focus state in these updates. It doesn't look like you can put a border on them, cross-browser, so I'd propose making the focus state for the selects and range inputs:
outline: 1px dashed #fff;
outline-offset: 1px;
Would need to be tested in all the high contrast themes on Windows, not sure if the outline will disappear on the light HC themes.
| @@ -19,40 +19,40 @@ | |||
| </div> | |||
| <div id="container"> | |||
| <div id="text-container"> | |||
| <input type="text" name="textToSpeech" id="js-text-to-speech"> | |||
| <input type="text" name="textToSpeech" id="text-to-speech" placeholder="Enter some text to turn into speech" aria-label="input text"> | |||
There was a problem hiding this comment.
@dstorey I feel like this could have a more descriptive aria label but not sure what suggestion to make that wouldn't be redundant with the placeholder. Do you have any ideas?
There was a problem hiding this comment.
@melanierichards @dstorey what if I change the placeholder text to an example phrase, and then use the current placeholder text as the aria-label.
From w3:
"Check that the value of the aria-label attribute properly describes the purpose of an element where user input is required"
placeholder
"Represents a short hint (a word or short phrase) intended to aid the user with data entry."
There was a problem hiding this comment.
Yeah, that sounds good to me!
|
@melanierichards @dstorey focus styles on the range have been added + modified for the select. Aria-label and placeholder updated. Still need to test in HC. |
ststimac
force-pushed
the
speechsynth-a11y
branch
from
a1633f1
to
d1de8e6
Compare
|
Made adjustments for high contrast. Also messed something up when I tried to update from remote. Had to fix a bunch of conflicts that don't relate to this demo. |
|
I feel like we've run into one of those fussy situations whereby making something more accessible for some we risk making it a little more confusing for others, in that it could be likely for someone to mistake the placeholder text for a filled-in value. My suggestions would be:
|
|
OK, added the label and added "example" to the beginning of the placeholder. |
|
@ststimac cool! There's a conflict in the microphone.html file, and possibly others, but otherwise this will be good to go. |
|
OK, should be good to go. |
| @@ -6,8 +6,8 @@ | |||
| <meta name="keywords" content="performance, settimeout, setimmediate, yielding, javascript, es5, ecmascript"/> | |||
| <meta name="og:title" content="JavaScript yielding"/> | |||
| <title>Efficient Script Yielding in JavaScript</title> | |||
| <link rel="stylesheet" href="https://edgeportal.blob.core.windows.net/media/demotemplate.css"/> | |||
| <link rel="stylesheet" href="styles/demo.css"/> | |||
| <link rel="stylesheet" type="text/css" href="//edgeportal.blob.core.windows.net/media/demotemplate.css"/> | |||
There was a problem hiding this comment.
These are not needed as CSS is the only kind of stylesheet.
|
@dstorey removed those type="text/css" |
This PR takes care of the following speech synthesis demo a11y issues:
#183
#218
#232
#285
I also cleaned up the CSS & updated units from px to rem to be consistent w/other demos.
@dstorey @melanierichards