A11y Slacker archive 2015-11-12

zakim-robot

Nov 12 00:06

[fstorr] @dpeter: I recommend the Rosenfeld book but you’re not going to find code examples and projects to build in there. But if you are looking for info to help with strategies it’s worth getting.
zakim-robot

Nov 12 00:08

[fstorr] Anyone else noticed the VoiceOver bug with Safari and the range input type? It doesn’t announce whole numbers, rather it announces percentages that are vaguely near the integer you were expecting. Tested on latest Safari and VoiceOver on El Cap.
zakim-robot

Nov 12 00:22

[fstorr] Oh, and add to the fun, if you use the <output> element to display the value of the range slider, Chrome announces the value twice if you use the keyboard to move slider. It doesn’t do it it you use the mouse to move it.
MichielBijl

08:49

@fstorr, as far as I know; that is how it's supposed to work.
MichielBijl

08:49

You can set your own text to be announced in aria-valuetext
MichielBijl

08:49

http://www.w3.org/TR/wai-aria-1.1/#aria-valuetext
LjWatson

08:50

@fstorr @michielbijl yes, aria-valuetext gives the thing it's human readable form, aria-valuenow its machine readable value.
MichielBijl

12:57

Question, my current project has a survey page. This survey includes a question that is divided into 5 separate questions. Each question asks you for a rating (from 1 (bad) to 6 (good)).
MichielBijl

12:57

The bad to good stuff is on the top, the question to the left, and the rating radio buttons to the right of the questions
StommePoes

12:58

yeah this is my cookie question
StommePoes

12:58

the legend or p+aria-describedby has to have the real question
MichielBijl

12:58

My thought was to put this in a table (not sure about semantics there). And possible link the label that is around a radio button to the question to the left and rating to the top via aria-describedby
StommePoes

12:58

the radio labels can only have what they represent
MichielBijl

12:59

The whole thing is in a fields with a legend
StommePoes

12:59

I think the explanation that you're rating a series of things from a scale of x to y is a form exaplanation that's a separate thing people have to read first.
StommePoes

12:59

Yeah but long legends are a bitch/annoying
MichielBijl

13:00

Yeah I'm now questioning the whole markup
StommePoes

13:00

It's like here you have first a (maybe long) instruction/explanation (5 questions rating thingies)
StommePoes

13:00

you'd need like a legend or p+aria per thingie being rated
StommePoes

13:00

so I'd think multiple groups, possibly multiple fieldsets
StommePoes

13:00

I used to nest fieldsets in questions like these
StommePoes

13:01

but I'm not sure if today that's verbosity hell

MichielBijl

13:04

<fieldset>   <legend>Question 1</legend>   <p>Please rate the following kittens</p>   <table>     <thead>       <tr>         <td></td>         <th id="rating-1">Bad</th>         <th id="rating-2">Sort of bad</th>         …         <th id="rating-6">Good</th>       </tr>     </thead>     <tbody>       <tr>         <th id="option-1">Kitten 1</th>         <td>           <label aria-describedby="option-1 rating-1">             <input type="radio">           </label>         </td>         <td>           <label aria-describedby="option-1 rating-2">             <input type="radio">           </label>         </td>         …       </tr>       …     </tbody>   </table> </fieldset>

StommePoes

13:04

<fieldset outer><legend>In the following 5 questions, please rate your satisfaction from x to y where x== crappy and y== awesome for that item</legend>
<fieldset inner #1><legend>I thought the chocolate chip cookies were:</legend><input type="radio" id="cookie0"><label="cookie0">0</label>... x however many...</fieldset inner #1>
... fieldset 2, 3, 4,5...
</fieldset>

Might be verbose as hell but it's the first thing I would test
StommePoes

13:04

Ha, interesting route around headers attibrutes
MichielBijl

13:05

I haven't tested that
MichielBijl

13:05

Not sure what that would do in tables mode
StommePoes

13:05

the p may still need aria-hookage for the AT who don't do object nav
StommePoes

13:05

well it would give you table navigation
StommePoes

13:06

but it wouldn't prevent you from checking a radio, but it may remove normal keyboarding radio button group navigation... they're now not in a radio group but a table.
MichielBijl

13:06

Haha, sure, but in terms of announcing the content
StommePoes

13:06

When you get focus to a cell the label should still be able to do its thing correctly, what I wonder is if that radio being selected prevents the others in the row from being selectable (as you'd get with a radio button group)
StommePoes

13:07

I've built tables in forms but those were with text inputs and this worked fine in JAWS and Orca back in the day
StommePoes

13:07

But haven't tested radio groups before. I'm thinking you might lose some radio-group abilities, and if you forced that away with aria radio-group role setting it might ruin the whole point of the table.
StommePoes

13:08

So I'd build my version and your table and run through both in a couple of readers. One might just obvs make more sense. I'm guessing the form-base one will work better, but... testing needed.
MichielBijl

13:09

Yeah I like your nested fields markup
StommePoes

13:09

Bleh, I'm dealing with the issue of showing charts and graphs, where the point is to test someone's ability to read a chart or graph... where having a textual version somewhere would defeat the purpose (like someone's supposed to know that the red line means company x's profits increased in the 90's... I think we could only safely offer a table-version and make the user determine what happened via that. But trends in a table are harder than visual trends)
StommePoes

13:10

I've done the nested fields thing before but that was tested back when JAWS 8 or 9 was a thing, and no other readers were tested at the time.
StommePoes

13:10

Back in my first web job, yikes.
MichielBijl

13:10

Time for a revisit ;)
StommePoes

13:10

Yeah, but again no radio groups were involved.
MichielBijl

13:12

I have some logic to work on. So I'll put this on hold, but will get back to it tonight/tomorrow. I'll create both markup versions. If anyone is interested/wants to help that would be great :) I can do Safari 9/VoiceOver.
MichielBijl

13:12

Oh, and can do some Orca testing, but not really sufficient with that yet.
StommePoes

13:17

If you throw up a non-codepen version (plain web page) I can test JAWS 15, NVDA (still getting the whole forms/non forms modes straight) and probably some orca testing though I'm also pretty passive with it (I tend to use Orca mostly to just read whole pages to me because i'm lazy/have sore eyes, rather than a lot of navigation)
StommePoes

13:17

One thing to know about Orca is that like VO it has object navigation. There's also a focus mode, and since I think 3.18 there's a way to make focus mode sticky on or off (necessary for weirdo application pages like GMail) and I keep needing to look up how to mess with that sticky mode.
MichielBijl

13:21

That would be sweet.
MichielBijl

13:21

Here is another markup idea:

MichielBijl

13:21

<fieldset>   <legend>Question 1</legend>   <p>     Please rate the following kittens from 1 (meh) to 5 (OMG SO CUTE!)   </p>    <ol aria-hidden>       <li id="rating-1">Meh</li>       <li id="rating-2">I've seen better</li>       <li id="rating-3">Cute!</li>       <li id="rating-4">It's super cute</li>       <li id="rating-5">OMG SO CUTE!</li>   </ol>    <fieldset>     <legend>Rate kitten 1</legend>     <ol>         <li><label aria-describedby="rating-1"><input type="radio" value="1"></label></li>         <li><label aria-describedby="rating-2"><input type="radio" value="2"></label></li>         <li><label aria-describedby="rating-3"><input type="radio" value="3"></label></li>         <li><label aria-describedby="rating-4"><input type="radio" value="4"></label></li>         <li><label aria-describedby="rating-5"><input type="radio" value="5"></label></li>     </ol>   </fieldset> </fieldset>

MichielBijl

13:22

Not sure about AT hiding the list with ratings, but that would be communicated via the labels. So might be verbose to not hide them.
MichielBijl

13:22

Again, this would benefit from testing.
MichielBijl

13:22

I'll whip something up.
StommePoes

13:27

Is that relying on the idea that describedby should override hidden? Cause why not just pull the ol offscreen instead (and maybe after the questions)
MichielBijl

13:27

Oh, and @StommePoes, if you change the /pen/ part in a CodePen url to /debug/, you get a frameless version :)
StommePoes

13:27

Gitter has higlighted one of my posts in pink and now it keeps scrolling it down. No idea why.
StommePoes

13:28

I'm not able to delete it either. Annoying.
MichielBijl

13:28

Or the /details/ part if it's linked to the details view.
MichielBijl

13:28

Frame version: http://codepen.io/Michiel/pen/mbHCx, non frame version: http://codepen.io/Michiel/debug/mbHCx
StommePoes

13:28

If you've got no text in the labels, why not just an aria-labelledby directly on the inputs?
StommePoes

13:28

It counts in WCAG as a labelling method
StommePoes

13:29

Besides, demo questions should not be cuteness of kittens, but their softness. $husband and I regularly do walks around the neighbourhood and we pet all the local cats and rate their softness.
StommePoes

13:30

Though I've never touched anything under a 6 unless you count Sphinxes
MichielBijl

13:38

Good points
MichielBijl

13:39

Except for the label, because I can enlarge the touch area for the radio via the label :)
MichielBijl

13:39

So make them touchy friendly for clunky finger interfaces.
StommePoes

13:39

so what, an empty label with lots of padding?
StommePoes

13:40

(I'm looking at your last code idea, with the lists)
MichielBijl

13:42

For example :)
MichielBijl

13:49

Like how you'd make the click area on a close button larger for fingers.
fstorr

15:03

@MichielBijl @LjWatson Thanks for the replies about range input and aria-valuetext. I'm confused though. The spec for aria-valuetext says "Authors should only set the aria-valuetext attribute when the rendered value cannot be meaningfully represented as a number" and that's what I have: a range of numbers from 0–10. So it would seem that I shouldn't need that. I also don't understand why we need these extra aria attributes to hold values that are already present in my simple slider. Safari announcing 1 as 10%, 2 as 20%, etc. is surely a bug: if I specify a range of 0-10 with a step of 1 it should honor that.
LjWatson

15:04

@MichielBijl it's badly phrased.
LjWatson

15:04

It means when a number on its own would not be meaningful. For example "50" could be 50 anything, wheras 50% is meaningful.
LjWatson

15:05

So aria-valuenow="50" and aria-valuetext="50%"
zakim-robot

15:09

[allison] Hi everyone - trying to discuss contrast with a client - They seem to solely want a toggle that goes to a "high accessibility contrast mode". Would this alone still meet accessibility guidelines (http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)? I'm of the mindset that they should just meet the guidelines straight out of the gate rather than create an alternate path/experience that might get ignored down the line. If anyone has any additional resources to back this up, that'd be great.
LjWatson

15:10

@Alison ideally the primary colour scheme should meet the recommended contrast ratio.
fstorr

15:12

@LjWatson If I have a question that says "rate this tasty beer from 0 to 10" and have a range with values from 0-10, which I can do without having to add any extra aria, then I'd expect the browser to announce those values correctly and not convert them to percentages. Having to add aria to stop Safari making assumptions is very odd.
LjWatson

15:13

@fstorr it is. That sounds like it may be a bug in Safari and/or VoiceOver.
garcialo

15:15

@Alison My default position is agreeing with @LjWatson. This instance is no exception. That said, providing a way to get to a sufficient contrast version would meet WCAG. http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/G174
zakim-robot

15:22

[allison] Thanks @ljwatson & @garcialo !
MichielBijl

15:22

I agree with both, it should be the default, but it's better to have an alternative than none at all.
MichielBijl

15:24

@fstorr in your example, yes, it does make more sense to just announce the numbers. But your example is not the only use case. Not to say one should prevail the other. I for one think that defaulting to percentages being announced is better in more cases.
MichielBijl

15:25

And in most cases you'll want valuetext anyway.
fstorr

15:25

@LjWatson It works fine with Chrome and VoiceOver, so I assume it's a Safari issue. Chrome does have an oddity where moving the range slider with the keyboard announces the value of both the slider and the text in the <output> element. If you move the slider with a mouse, that doesn't happen. The fix is to hide the <output> with aria-hidden which feels like it should be fine.
LjWatson

15:26

@fstorr keep in mind that Chrome isn't officially supported with VO AFAIK.
fstorr

15:26

@MichielBijl The browser should honor what it's given. If I want percentages, or values like small, medium, or large, then I'll give it those in the correct way. But, out of the box, if the range 0-10 then the browser should announce those values.
fstorr

15:27

@LjWatson Indeed :(
MichielBijl

15:32

@fstorr how would you pass percentages? valuemin/now/max only accepts integers.
MichielBijl

15:32

“The value of aria-valuenow is a decimal number.” http://www.w3.org/TR/wai-aria-1.1/#aria-valuenow
MichielBijl

15:33

Wait, my mind is cluttered.
fstorr

15:36

@MichielBijl What I should have said is that I'd have to set the value of aria-valuetext to percentages, small, medium, large, etc. Because those values aren't the same as 0-10. But, in my example where I have values of 0-10, I should not have to add aria to stop a browser announcing 4 as 40%\
zakim-robot

15:37
[car] @allison: There was a conversation about convincing designers to follow WCAG for color contrast (started by @jdan https://web-a11y.slack.com/archives/general/p1446050294001708) that you might find interesting. I summarized it for my dev colleagues:

** Reasons to consider making the default theme pass WCAG 2.0 contrast guidelines:

the first sentence of the WCAG contrast guideline description: http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast.html says, "this guideline is concerned with making the default presentation as easy to perceive as possible to people with disabilities.".

can see it properly when outside in bright sunlight (particularly mobile)

shows up more clearly when display brightness setting turned way down to conserve battery

presents better in meetings when projected on a dim projector screen: https://medium.com/salesforce-ux/projectors-dont-lie-b85ef628b04

easier to read on a small screen

remember that not everybody has a retina display

blog written by a designer, includes links to tools: https://viget.com/inspire/color-contrast

try it! You may like it! :)

Also, I recently saw this conversation on an accessibility list, and this is what changed my mind from "sure, just make a new theme" to "you know, with a bit more effort, we could make the default better for everyone":
[person 1]: I like to make the distinction between sufficient_ contrast and _high contrast.
The former applies to all content, always - and the latter is is the case for vision outside of the "normal range", where "normal range" is all the way up to 80/20
[person 2]: I love that distinction between “sufficient” and “high” contrast!
I’ve had some designers ask me in the past about creating a separate high contrast mode for their sites.
I’m adamantly against that because usually their idea of “high contrast mode” means “minimum viable contrast to meet WCAG 2.0”, and the “normal” mode is very low contrast.
I much prefer that normal mode meets WCAG 2.0 AA, and if users prefer/need more contrast, they can use their operating system’s high contrast functionality.
stevefaulkner

15:37

@LjWatson It works fine with Chrome and VoiceOver, so I assume it's a Safari issue. Chrome does have an oddity where moving the range slider with the keyboard announces the value of both the slider and the text in the <output> element. If you move the slider with a mouse, that doesn't happen. The fix is to hide the <output> with aria-hidden which feels like it should be fine.

output has a default of aria-live=polite which is implemented in some browsers, may be why. Note the appropriateness of this is under discussion
LjWatson

15:37

MichielBijl I'm not sure that assuming a slider is in percent is a good thing.
stevefaulkner

15:40

@StommePoes don't fixate on the group example, it could have been 5 paragraphs in the group, its just an example of how flowto works not how group works
MichielBijl

15:40

@fstorr @LjWatson yes I'm coming around to that. I have no good examples to test with.
stevefaulkner

15:40

@MichielBijl same goes for you :-)
MichielBijl

15:40

@stevefaulkner has spoken!
stevefaulkner

15:43

@StommePoes have added paragraphs of lorem ipsum into "group" http://s.codepen.io/stevef/debug/PPXZWY does that help?
MichielBijl

15:45

Why is the image in a paragraph?
MichielBijl

15:45

That always seems redundant to me. Is it not?
MichielBijl

15:45

Are there any good arguments for/against?
StommePoes

15:46

I guess if group's just there so there's someone with a roley-enough role to get aria-label, I wonder if a better example would be closer to what a dev might be trying to solve with it, where they maybe don't have the option to just throw grue's onto stuff
stevefaulkner

15:46

@MichielBijl i give up
StommePoes

15:46

lawlz
MichielBijl

15:46

Haha
garcialo @garcialo congratulates @MichielBijl on breaking @stevefaulkner
MichielBijl

15:47

Haha, not sure I should be proud of that.
MichielBijl

15:47

@stevefaulkner that's not a knock against the example, just something I see more often and am just not sure about.
StommePoes

15:47

re the slider issue I wonder if lots of devs who have and want to stick with numbers are going to, by default, write a bit of redundant redundancy code that simply grabs the aria-value and stuffs it into the aria-text (since to me all I can see is the difference between them is one's a int or float? and the other is a string)
MichielBijl

15:47

Not even sure if it makes a difference.
garcialo

15:48

It shouldn't make a difference either way.
garcialo

15:48

You might as well put it in an empty span or div
StommePoes

15:48

and if there's an output it seems sad to have to aria-hidden it if as a dev you want to follow the principle of "aria-hidden goes on stuff meant to be hidden from All The Users"
stevefaulkner

15:48

not broken, but having a lie down after being lead off into weeds by dutch fuckers
StommePoes

15:48

outputs being generally meant to be viewed by All The Users
StommePoes

15:48

Steve dude you just need to relax like dutch fuckers
StommePoes

15:49

smoke something
MichielBijl

15:49

Take some of those weeds
StommePoes @StommePoes takes a "high contrast" button and changes the text to "fix this broken website"
MichielBijl @MichielBijl takes a low contrast heading and changes the font to Comic Sans.
stevefaulkner

15:52

@fstorr related bug https://www.w3.org/Bugs/Public/show_bug.cgi?id=26135
StommePoes

15:52

I was watching @getify's talk about breaking the broken web, and he was thinking of letting users decide how much jazzy crap they want in their web pages. We could go further: upon URL request, ask the user, do you want 1) the crappy 15MB graphical orgasm version or 2) the normal and readable version or 3) the I'm-in-a-hotel version
MichielBijl

15:53

Option 3 would just output a transcript in txt
MichielBijl

15:54

Something I came across today: http://techcrunch.com/2014/11/29/peering-into-the-minds-of-the-4-3-billion-unconnected/
MichielBijl

15:55

Very interesting.
garcialo

15:55

For those interested, I just checked with CCA2 and @stevefaulkner has sufficient contrast with his background.
stevefaulkner

15:56

@garcialo careful fella ;-)
StommePoes

15:56

Yeah @brucel twotted that and it made me think of me (not new to tech but very new to smartphones) and my uncle in the States (never really used a computer much and still has no idea what he should do with one...his mobile phone is barely a feature phone)
StommePoes

15:56

@michielBijl option 3 is exactly what you'd want in that instance.
StommePoes

15:57

But I think the best thing about such a button (or browser setting so people who don't give any shits can set it once and forget) is if we could measure how often people clicked the option 1
StommePoes

15:57

Maybe would let people know whether or not their 15MB retina images with parallax and WebGL animations were appreciated or "meh"
StommePoes

15:57

or "set my laptop on fire"
fstorr

15:59

@MichielBijl @LjWatson @stevefaulkner Hacked-together range slider example: http://codepen.io/fstorr/full/VvqaVm/
StommePoes

16:00

if via gitter I play with it using keys, am I supposed to see a new value on the right/at the end?
StommePoes

16:01

Using IE11
StommePoes

16:01

using mouse I get a tooltip with current value
fstorr

16:02

No idea what happens inside gitter, especially on IE. If you look at it on codepen, you should see a value at the end.
StommePoes

16:02

Ah FF is updating it, must be IE and ranges
StommePoes

16:03

Nothin in IE, and it should support onInput so maybe it's the range it has trouble with
StommePoes

16:03

I know in IE9 they added input listeners and some small bugs like backspace didn't trigger the event
stevefaulkner

16:04

@fstorr aria-live="off" may be the solution to the double announcement
StommePoes

16:04

lemme try with IE + NVDA
stevefaulkner

16:04

on the <output>
StommePoes

16:05

in NVDA exploring it as text didn't interact (normal I guess, I except form controls to stuff me into forms/focus mode), tabbing to it showed no visible number in IE but did correctly announce the value
StommePoes

16:05

FF just did everything right.
fstorr

16:06

@stevefaulkner That works and is better than aria-hidden="true". Thanks :)
StommePoes

16:08

So @stevefaulkner is there coming something similar in NVDA regarding the aria-flow[] stuff?
stevefaulkner

16:10

@Stommepes the only AT that currently supports flowto is JAWS, the only browser that implements (AFAIK) is Firefox, I have raised it as a possible solution to defining and implementing something new that is not implemented at all yet
stevefaulkner

16:11

@fstorr np
stevefaulkner

16:13

acc support in IE is crappy and NVDA does not always try to hack around the crap
StommePoes

17:10

Man I really hope the edge team and uia people can get that shizzle working
powrsurg

19:45

Is Edge somewhat usable from an AT standpoint with today's updates?
powrsurg

21:45

When guidelines like 508 and the like talk about letting the user disable animation do they mean you should provide some feature that will do things like disable all CSS keyframes/animation, disable any JavaScript that causes movement like making an element slide up/down, or causing the page to scroll smoothly? Basically letting the user reset to the type of changes one could make to a web page back in 2000 (that is, things happening instantly)?
fstorr

22:25

Does 508 say to disable animation? I can see "When animation is displayed, the information shall be displayable in at least one non-animated presentation mode at the option of the user" which isn't the same because, and I've seen this recently, you can have a separate "accessible" site without animation and therefore be in compliance with 508.
powrsurg

22:48

§1194.21 (h) When animation is displayed, the information shall be displayable in at least one non-animated presentation mode at the option of the user.
powrsurg

22:49

sorry, wrong paste
powrsurg

22:50

http://www.digitalgov.gov/2013/06/26/making-multimedia-section-508-compliant-and-accessible/ "Give users the choice of turning off animations and displaying information from the animations in other method;"
zakim-robot

23:18

[fstorr] The "and" in that is very interesting. Because that makes an application that has a standard site with animation that can't be turned off, and which uses an animation-free "accessible" site as at "get out" as non-508 compliant.

Gitter Channel Archive 12th of November 2015