A11y Slacker archive 2016-02-11

jkva
Feb 11 07:49

aria-checked="mixed": The checkbox is partially checked
jkva
Feb 11 07:49

awww yisss
jkva
Feb 11 07:50

Exactly what I was looking for =)
zakim-robot
Feb 11 07:57

[jitendra] https://twitter.com/jitendravyas/status/697686841386905600
MichielBijl
Feb 11 08:34

@jkva original name for that value was aria-checked=shaken-not-stirred, but was decided that mixed described them both pretty well.
jkva
Feb 11 08:35

@MichielBijl : Thank the lord for smart working groups! =P
MichielBijl
Feb 11 08:38

Ha. Did you know there is a proposed attribute of display-or-not in the editors draft :P
MichielBijl
Feb 11 08:38

CSS that is.
jkva
Feb 11 08:38

Gonna have a look...
jkva
Feb 11 08:39

I certainly wouldn't mind a :visible pseudoselector
MichielBijl
Feb 11 08:40

:)
jkva
Feb 11 08:41

Guh. SarcasmDetector.init() keeps triggering E_INSUFFICIENT_COFFEE
MichielBijl
Feb 11 08:44

Catch.all()?
StommePoes
Feb 11 09:09

display: schroedinger
MichielBijl
Feb 11 10:43

Ha
stevefaulkner
Feb 11 11:41

@jnurthen updated with issue found JAWS/chrome and also linked to powermapper results for both patterns (show no problem with <img title="poot">)
stevefaulkner
Feb 11 11:51

https://www.paciellogroup.com/blog/2016/02/short-note-on-use-of-alt-and-the-title-attribute/
StommePoes
Feb 11 12:03

I like this rant about randomly gathering UX data might be totally shitty http://eev.ee/blog/2016/02/10/we-have-always-been-at-war-with-ui/ and it made me think about how we use metrics esp wrt any disabled users we can measure
FlorianBrinkmann
Feb 11 12:10
Hey! I’d like to write an article about a11y aspects which every site should meet with short instructions, how a user can test his own site. Points that come to my mind are the following:

accessible with keyboard

color contrasts

dont’t highlight links only with a different color

test “specific” components (like a SVG list …) or the whole site with a screen reader

It should not (and can’t) treat every aspect of a11y, but the most important. My question: Which items would you add to the list above as fundamental a11y aspects?
sophieschoice
Feb 11 12:11

Hi all :) what do you think of this responsive menu from Hongkiat? http://media02.hongkiat.com/responsive-web-nav/demo/index.html
MichielBijl
Feb 11 12:22

FlorianBrinkmann, might be worth to look at: https://www.marcozehe.de/2015/12/14/the-web-accessibility-basics/
MichielBijl
Feb 11 12:23

And I'd add validate your HTML. Which isn't a11y specific, but can bring up a lot of errors and warning that help all users (and thus improve usability/accessibility).
MichielBijl
Feb 11 12:23

dont’t highlight links only with a different color
MichielBijl
Feb 11 12:23

That is actually fine, as long as there is enough contrast between the link and the text colour :)
FlorianBrinkmann
Feb 11 12:45

Okay thanks @MichielBijl :)
MichielBijl
Feb 11 12:45

Side note: I've been told there are only about 20 colours that offer enough contrast between text, links, and background.
FionaTG
Feb 11 12:55

@FlorianBrinkmann Maybe form fields having associated labels?
FlorianBrinkmann
Feb 11 13:00

Will add it @FionaTG!
powrsurg
Feb 11 14:24

http://www.quirksmode.org/blog/archives/2016/02/chrome_change_b.html article on Chrome making a recent change that makes JS working with pinch-zoom difficult. Most alarming from a11y is the line of thought that "(as evidenced by most modern mobile sites disabling pinch zoom)." being part of the motivation for the change
powrsurg
Feb 11 14:27

thanks for the credit @stevefaulkner
stevefaulkner
Feb 11 14:27

@powrsurg guessing thats you on twitter?
powrsurg
Feb 11 14:28

yes
stevefaulkner
Feb 11 14:28

:+1:
powrsurg
Feb 11 14:33

Some of the people in the bug tracker made comments about how Chrome doesn't reflow the page when pinch-zoom occurs ... which is true for Chrome, but isn't true for Opera, and I believe HTC and a few chinese based browsers that I gave up on trying to test with because I couldn't understand any of the UI ...
powrsurg
Feb 11 15:00

that said, the owner of the bug report does not advocate zoom-locked sites, but disagrees with letting a site reflow its layout when zoom occurs. Should that be the case?
MichielBijl
Feb 11 15:24

Site reflow?
MichielBijl
Feb 11 15:24

Like if everything is done in EM's?
jasonday
Feb 11 15:40

@powrsurg - I think I agree that a site should not reflow on zoom. This is because of context. When a user zooms in, they are zooming into the page within the current context. But if the context changes as a user zooms in, this could create confusion. Additionally, the user may lose their waypoints as that context changes.
powrsurg
Feb 11 15:47

But letting the text reflow makes it easier to read as no text goes off the screen. Simple zooming without reflow puts you in a spot where you constantly have to scroll sideways to read things. With the reflow it's an experience that is easier to read
powrsurg
Feb 11 15:47

simply check out Opera Mobile handles a page that supports pinch-zoom and watch the text to see what I mean
MichielBijl
Feb 11 15:49

Ah like that. There is a difference between page zoom and text zoom.
jasonday
Feb 11 15:49

True, but I think the user could get really lost. For example, with responsive design, you have an image that has a breakpoint with an art direction change (swap in a new image). The user zooms in on the image, and is presented with a different image. Or the user wants to zoom in on a specific chunk of text, but all the reflow actually puts that chunk of text into a different position from where they zoomed.
MichielBijl
Feb 11 15:49

Page zoom should not reflow, text zoom should.
jasonday
Feb 11 15:49

ah. gotcha.
jasonday
Feb 11 15:51

I agree @MichielBijl
MichielBijl
Feb 11 15:51

Also see this thread on the WAI IG list: https://lists.w3.org/Archives/Public/w3c-wai-ig/2016JanMar/0051.html
powrsurg
Feb 11 15:58

from my experience Opera does a good job at zooming you in to the text you actually clicked on
jasonday
Feb 11 16:00

With it built into the browser, it can probably manage it better, but cross browser implementation would require javascript/polyfills and once you start messing with scroll/window position, things start getting a little wonky
powrsurg
Feb 11 16:00

I believe visual viewport change does not affect responsive images so there shouldn't be an issue related to that. I think they based everything on the layout viewport
powrsurg
Feb 11 16:01

right, and this change by Chrome destroys the ability for there to be JavaScript/polyfills to be possible, hence it being problematic
jpdevries
Feb 11 16:05

A few weeks ago @StommePoes made a really great point about bandwidth and accessibility. That some people might be on poor connections and maybe even pay-per-byte. This has had me thinking and I wonder, is anyone aware of any proposals for a "media query” and/or some form of feature detection that allows you to know if a user is on a “capped” data plan or not? I know ideas of detecting speed have been prorposed, and those aren’t very feasible because it is “easier to predict the weather next Tuesday” than accurately detect someones bandwidth, but could we still detect in other ways how sensitive we should be on payload?
This would allow you to serve things like 2x images to retina enabled devices that are on uncapped data plans.
powrsurg
Feb 11 16:06

I'm not aware of anything YET that lets you detect bandwidth speed. You could infer things via Network Timings -- if something takes longer than X to download than assume they're on a bad connection and thus decrease things
jpdevries
Feb 11 16:11

I’m not so much interested in detecting bandwidth speed, I want to detect if they are paying a flat rate or per byte. Essentially, are the on a “data plan”.
jasonday
Feb 11 16:12

If you have enough resources (meaning $$$), you can use a cdn/asset delivery service to do compression on the fly. Akamai, etc.
MichielBijl
Feb 11 16:13

I don't think people would be happy with developers detecting how they pay for their data.
MichielBijl
Feb 11 16:13

I wouldn't be…
jpdevries
Feb 11 16:13

ya, it does pose an interesting question of whether we should just be more mindful of payload in general
jpdevries
Feb 11 16:14

my idea though is to do things like not load webfonts and such if they are, maybe with an option that uses localStorage for them to say “load full site” or something and it remembers the preference
jasonday
Feb 11 16:15

I think that we should be delivering the smallest/well performing site possible, and then a browser or other tool steps in for additional enhancements. Google compresses javascript, etc., Opera mini has it's compression algorithms, etc.
jpdevries
Feb 11 16:15

Opera Mini also blocks webfonts entirely. And there are ContentBlockers like Focus by Mozilla as well
MichielBijl
Feb 11 16:16

Long live websites without webfonts…
jasonday
Feb 11 16:16

don't get me started on webfonts...sites that use them for paragraph/content font replacement draw my ire
MichielBijl
Feb 11 16:16

And may icon fonts die already!
jpdevries
Feb 11 16:16

@jasonday ya, i’ve noticed some sites that do that might look fantastic on a retina screen and terrible on a standard 72ppi screen
zakim-robot
Feb 11 16:16

[sylvia] I think we're stuck with icon fonts for now
MichielBijl
Feb 11 16:17

How so?
jasonday
Feb 11 16:17

from a development perspective, I like icon fonts, but I know they can be a challenge for a11y
zakim-robot
Feb 11 16:17

[sylvia] In general, though, it's a good idea to reduce payload and load time for everyone
MichielBijl
Feb 11 16:17

Well, not just a11y.
zakim-robot
Feb 11 16:17

[sylvia] Just because icon fonts are so popular among designers and developers
zakim-robot
Feb 11 16:18

[sylvia] And so tightly intertwined with widely-used frameworks
MichielBijl
Feb 11 16:18

If I use a content blocker to save my precious data, and a website uses fonts for their icons (without proper labels), I cannot use that website.
zakim-robot
Feb 11 16:18

[sylvia] I expect them to continue to be very widely used for a few years
zakim-robot
Feb 11 16:18

[sylvia] Yep. Or even if you can see the icons but can't guess what they mean
jnurthen
Feb 11 16:18

Icon fonts are great for High Contrast Mode too.
MichielBijl @MichielBijl should continue on his font awesome SVG replacement kit.
zakim-robot
Feb 11 16:19

[sylvia] Which is often my problem
MichielBijl
Feb 11 16:19

That is true, but SVG's can be made to adapt.
jnurthen
Feb 11 16:20

much harder though - and much more likely to get screwed up by developers
zakim-robot
Feb 11 16:20

[sylvia] It's better from a payload perspective, though, if you are only using one or two icons on a site
zakim-robot
Feb 11 16:20

[sylvia] No need to load all of Font Awesome
MichielBijl
Feb 11 16:20

Yeap
MichielBijl
Feb 11 16:21

@jnurthen, how so?
MichielBijl
Feb 11 16:21

currentColour all the things! No?
jnurthen
Feb 11 16:22

well - you have to do something rather than it being completely automatic :)
MichielBijl
Feb 11 16:22

Depends on how you generate your SVG :P
MichielBijl
Feb 11 16:22

Your can put currentColour declarations in your SVG.
MichielBijl
Feb 11 16:22

svg { fille: currentColor }
MichielBijl @MichielBijl goes to the pub after another job well done
jnurthen
Feb 11 16:22

and that picks up the "text color" when high contrast is enabled
MichielBijl
Feb 11 16:23

Same as icon fonts?
MichielBijl
Feb 11 16:23

Or am I talking unintelligent smiling pile of poo again?
jnurthen
Feb 11 16:23

ah maybe - i've never created them myself - just talk to the devs that do
jnurthen
Feb 11 16:24

and I have realized I can't type this morning. No coffee yet
MichielBijl
Feb 11 16:24

I was about to make some, so I'll get you a cup ;)
MichielBijl
Feb 11 16:25

If anyone knows of a good standing desk (±200$/€)
jasonday
Feb 11 16:26

https://www.autonomous.ai/desk or the varidesk alternative
MichielBijl
Feb 11 16:28

It doesn't have to transform :)
MichielBijl
Feb 11 16:29

I have a big desk for my sitting down computing needs.
zakim-robot
Feb 11 16:29

[poorgeek] I built my standing desk a few years ago IKEA. top plus 4 adjustable legs was ~$120 I think
MichielBijl
Feb 11 16:30

That sounds good and doable.
jpdevries
Feb 11 16:30

@jnurthen @MichielBijl I have been hosting a workshop on switching from iconfonts to SVG. We have open sourced the project https://www.thinkful.com/projects/grunting-icons-into-svg-sprites-573
MichielBijl
Feb 11 16:30

Cool!
jpdevries
Feb 11 16:31

if you have any questions let me know, I can probably even get trial invite links for anyone interested in attending. I’m working on hosting several a11y-ish workshops, and the SVG one is in fact one of them
MichielBijl
Feb 11 16:31

Have added that to the faa project: https://github.com/MichielBijl/font-awesome
jnurthen
Feb 11 16:32

nice - I will forward to some devs
jpdevries
Feb 11 16:33

Thanks!
jasonday
Feb 11 16:44

I'd be interested as a dev/UX/a11yslacker
powrsurg
Feb 11 17:39

We have an interface that serves multiple roles. In one spot they load an image, and an audio file, and they can type in an audio description (which we make available to everyone since sighted users could benefit from having the text as well). We're adding a new option for instead doing video. With video we allow them to upload a VTT file for the captions. We know we need to support descriptions as well. Should we allow them to upload VTT for descriptions too, or should we do something else? Part of me feels like we need consistency with the audio descriptions and let them type it in if they choose, while another part things that this really is a different use case and thus go with the VTT option
jasonday
Feb 11 18:26

can you allow either VTT or input? or can you convert input to VTT, making the implementation reliant on VTT?
powrsurg
Feb 11 18:42

So a person would have to manually type in the input for what should be in the VTT file? I don't think that would be very user friendly ...
jasonday
Feb 11 18:44

i mean, they could either do an input or at vtt file
powrsurg
Feb 11 19:02

I guess technically we could ... but I was more thinking should there be some type of text description besides VTT
powrsurg
Feb 11 19:35

http://codepen.io/powrsurg/pen/eJbXEE am I just doing something wrong? why am I not getting any captions. The VTT is served with the correct mime type, but I don't see it anywhere.
powrsurg
Feb 11 19:36

oh hey, it shows in Firefox now ...
StommePoes
Feb 11 19:57

michiel I'm going to get this one, it costs a bit more but was more what I was looking for http://www.bureausdirect.nl/profiel-zit-sta-bureau-met-slinger.html
StommePoes
Feb 11 19:57

Though the IKEA one looked fine and I've heard good reviews, I just don't want a white bureaublad
StommePoes
Feb 11 19:58

re svg icons and high contrast-- as I understand, you'll need a script detect if high contrast is on, then (manually with JS) change the fills/strokes.
StommePoes
Feb 11 19:58

if your svg's are simple, that could be pretty doable though.
jpdevries
Feb 11 19:59

@StommePoes example of changing colors of SVG graphics by using CSS Variables (bleeding edge, need Chrome or Webkit Nightly) http://codepen.io/jpdevries/pen/MKbrrX
StommePoes
Feb 11 20:09

I thought of variables, but then only if only SVGs were using them
StommePoes
Feb 11 20:09

and the same colours for everything else were other names
StommePoes
Feb 11 20:09

since they will flip on their own for Windows HC users
powrsurg
Feb 11 20:14

I believe Edge/IE, and maybe others let you specify additional CSS rules based on high contrast being on. Would that help with what you're doing?
jnurthen
Feb 11 20:15

https://msdn.microsoft.com/en-us/library/windows/apps/hh465764.aspx
powrsurg
Feb 11 20:28

Yeah, that's the media query I was thinking off. Didn't know if it was standardized yet or not
jnurthen
Feb 11 20:33

it is not
jnurthen
Feb 11 20:34

i'm not sure it is even in the CSS4 drafts
jpdevries
Feb 11 20:38

oh a media query would be awesome. I’ve been doing a settings page with a local storage so they can choose Never, Always, or Auto (uses HTML5 Luminosity API) for HC http://markup.tips/settings.html#contrast
StommePoes
Feb 11 20:53

plus it wouldn't work on other windows browsers
StommePoes
Feb 11 20:53

just ie
StommePoes
Feb 11 20:53

I would also love a mq for that
sophieschoice
Feb 11 21:10

Hi! I am Sophie, new member. Lot’s of interesting things you all are researching and doing! I hope to learn a lot here :)
powrsurg
Feb 11 21:13

welcome
MichielBijl @MichielBijl waves at sophieschoice
sophieschoice
Feb 11 22:11

Thanks :D
yohoho
Feb 11 22:48

Hi guys, for a project I am using has several buttons (built with button tags) with the default browser outline for focus events.. I'm noticing in Chrome when the button is pressed the focus outline appears momentarily which I feel doesn't add a11y value (I think?).. does anyone have any approaches on modifying this behaviour so the outline only appears for keyboard navigation?
MichielBijl
Feb 11 22:50

You could use: https://github.com/ten1seven/what-input
yohoho
Feb 11 22:54

Thanks @MichielBijl seems like just what I was looking for! :smile:
MichielBijl
Feb 11 22:55

:+1:
zakim-robot
Feb 11 23:22

[jyung] List of Profiles
zakim-robot
Feb 11 23:49

[marcysutton] This might not be a popular opinion…but does the containing action really need to be accessible from the keyboard since you already have the same link there? Seems redundant, and not needing the complexity of a listbox or tricky CSS positioning.
zakim-robot
Feb 11 23:49

[marcysutton] Oh I just saw the “right click” and context menu part.
yohoho
Feb 11 23:51

on the topic of focus outlines, is there any prevailing opinion on browser default vs. custom outline? I read somewhere leaving browser default is better as it provides a more consistent / expected experience.. but I get some pushback from the UI guys on this who would prefer something more subtle..
zakim-robot
Feb 11 23:51

[marcysutton] I’d probably go with CSS positioning so you can have a true anchor behind those two links, with text hidden offscreen. But it still seems like unnecessary complexity.
zakim-robot
Feb 11 23:52

[marcysutton] @yohoho There are gaps WRT to what you can do with custom outlines…we don’t have the same style primitives as you get with CSS outline. It’s a known issue, and hopefully getting worked on through working groups. See: https://discourse.wicg.io/t/exposing-a-users-input-modality/1067
zakim-robot
Feb 11 23:54

[marcysutton] In other words, if you suppress the default focus outline in favor of custom focus styles, you will see differences in behavior. This is why many accessibility devs prefer the default focus outline.

Gitter Channel Archive 11th of February 2016