A11y Slacker archive 2016-08-26

luis garcia

@garcialo
Aug 26 00:18

It is AAA most of the time. The sentence, paragraph, heading (maybe another thing or two) can technically provide the context. And those are usually there.
zakim-robot

@zakim-robot
Aug 26 00:45

[michiel] Just watched Bill & Ted's Excellent Adventure.
[michiel] Most excellent movie ever
zakim-robot

@zakim-robot
Aug 26 02:42

[blink183] Sharing a Google Doc from the BrailleNote Touch with a sighted collaborator
[caesar] So it's kinda like the inverse of the password field :)
Ian Devlin

@iandevlin
Aug 26 07:17

Morning!
I have a question, which is something I have never even thought of asking before, and I suspect the answer is obvious but I am not sure of the answer so I am happy to ask the question and appear dumb.
luis garcia

@garcialo
Aug 26 07:19

Go ahead and ask. I promise to happily answer and appear dumb.
Ian Devlin

@iandevlin
Aug 26 07:20

I know that screen readers etc. read out web content, and whilst I am assuming that people who require such tools use the keyboard to input data to websites where required, using what the screen reader tells them to know where they are and what they should be entering, but are there any other things that people use for entering data?
@garcialo Ha thanks! :D
luis garcia

@garcialo
Aug 26 07:20

Do you mean other than keyboards?
Ian Devlin

@iandevlin
Aug 26 07:21

Yes.
luis garcia

@garcialo
Aug 26 07:22

Ah, well there are braille...I think they're referred to as keyboards, switch devices, those machines with like pictograms of stuff and the user has to pick them. There are also programs like Dragon which are speech driven.
Ian Devlin

@iandevlin
Aug 26 07:23

Ah interesting. And do we as developers have to do anything special to help facilitate such devices, or does using correct semantic markup help all these devices too?
luis garcia

@garcialo
Aug 26 07:24

You don't need to do anything special to cater to the different types; no. Following the guidelines should be sufficient in most cases.
Ian Devlin

@iandevlin
Aug 26 07:25

Cool, thank you for the answer @garcialo!
luis garcia

@garcialo
Aug 26 07:25

That said...there are some design things that can be useful as well. Like putting similar information close together would help people that use screen magnifiers so they don't have to pan so much when zoomed in to like 300%
I guess more related information rather than "similar"
It's a little late here. :p
Ian Devlin

@iandevlin
Aug 26 07:30

:D
Thanks again! It is quite early here so I will not judge.
luis garcia

@garcialo
Aug 26 07:30

Awesome.
I'm waiting on laundry because I forgot about it until right when I needed to get to sleep, so feel free and ask any other questions. :D
Ian Devlin

@iandevlin
Aug 26 07:32

So basically you are bored? :D
luis garcia

@garcialo
Aug 26 07:32

Nah, I'm reading stuff and writing stuff, but it's not a high priority.
Ian Devlin

@iandevlin
Aug 26 07:35

Ah...
Using the time wisely then!
luis garcia

@garcialo
Aug 26 07:36

Yeah, but brain being a bit flimsy.
Ian Devlin

@iandevlin
Aug 26 07:37

Here's another question then: what is the most accessible way to enter a date on a website, be it on a mobile device or a desktop/laptop? Are input fields the way to go, or are calendar widgets also used?
luis garcia

@garcialo
Aug 26 07:38

Well, even the calendar widget is going to be an input.
At work, we're actually working on updating our Date Picker pattern.
Whether you use a plain input or a calendar widget though really depends on what information you're gathering.
And there's going to be a lot of personal preference involved as well. Not sure there would necessarily be one that's more or less accessible that others if all implemented well.
Ian Devlin

@iandevlin
Aug 26 07:40

This is something we are looking to do too, and I have been asked how can we improve this to make it more accessible, and at the moment there is no input field only a button that opens an inaccessible calendar widget. My opinion is let's add an input field, and that will be done, but it will take some time as of course loads of changes need to be made to handle different date formats.
I work for trivago by the way, so the dates are check in and check out dates for a hotel search.
luis garcia

@garcialo
Aug 26 07:40

Ah, for those, I would personally prefer using a date picker
Specifically so users can do stuff like choose "third Friday of month to following Monday"
without having to know the specific dates
Ian Devlin

@iandevlin
Aug 26 07:42

And how can that be made accessible to users who cannot see the date picker?
luis garcia

@garcialo
Aug 26 07:43

Well, you'd announce the date they're on when they're traversing the calendar.
So, a screen reader user would arrow over to Friday with the right arrow key
Ian Devlin

@iandevlin
Aug 26 07:43

And arrow keys are the expected key to use to change dates, and not tab?
luis garcia

@garcialo
Aug 26 07:43

Then use down as it went to later dates...if it spills over into the next month, they've gone too far, so they could then hit up arrow once to get the "last Friday of month"
yeah, it's like any other widget
Tab takes you into or out of it and arrow keys to navigate once you're inside it
like a Select dropdown
or a set of Radio buttons
Ian Devlin

@iandevlin
Aug 26 07:44

I have never written a widget to do this, so this is interesting to know.
And on mobile? The same?
luis garcia

@garcialo
Aug 26 07:45

well, it probably wouldn't work as well on mobile
mostly because most users (disabled or otherwise) don't use keyboard on mobile...that said, it should still definitely be supported
and on mobile you would probably end up having a different input
although I guess you could make a mobile datepicker widget...hmmm
we haven't gotten to the mobile stuff with our pattern yet; but I'll explore it a bit
Ian Devlin

@iandevlin
Aug 26 07:47

Yeah, this is what we're starting with at the moment and I am not sure what the best practice is so I am trying to find out.
luis garcia

@garcialo
Aug 26 07:48

also mobile isn't my expertise or focus...my initial thought is it would be like a full screen take over when choosing the date...very similar to an iPhone...desktop? is that what they call them?
then the user could swipe in directions to change the selected date or maybe explore with their finger to select one
Ian Devlin

@iandevlin
Aug 26 07:50

But if they can't see it to swipe...
luis garcia

@garcialo
Aug 26 07:50

swiping would just traverse; have you used VoiceOver on iOS?
Ian Devlin

@iandevlin
Aug 26 07:50

No I haven't, this probably doesnt help! :D
luis garcia

@garcialo
Aug 26 07:51

do you have an iPhone?
Ian Devlin

@iandevlin
Aug 26 07:51

I am not an iOS user, but I do have access to a few of course in the office.
luis garcia

@garcialo
Aug 26 07:51

Settings > General > Accessibility > VoiceOver and turn it on
Ian Devlin

@iandevlin
Aug 26 07:52

Will do, but cannot right now.
luis garcia

@garcialo
Aug 26 07:52

then go to the Home screen (duh, that's what they're called) and swipe right and left. you'll get the gist of it at that point
Ian Devlin

@iandevlin
Aug 26 07:52

Ok, thanks.
Ian Devlin

@iandevlin
Aug 26 08:39

Is your laundry done? :D
zakim-robot

@zakim-robot
Aug 26 10:03

[michiel] Morning all
Ian Devlin

@iandevlin
Aug 26 10:20

Morning
Well, it's afternoon now.
zakim-robot

@zakim-robot
Aug 26 10:30

[michiel] Still 11:30 here :P
Fiona Holder

@FionaHolder
Aug 26 10:31

Yep, I had to double check to see where the day had gone!
zakim-robot

@zakim-robot
Aug 26 11:21

[dean] Bunch of accessibility improvements in the latest Craft - https://craftcms.com/news/accessibility-improvements
Ian Devlin

@iandevlin
Aug 26 11:49

Depends on where you are I guess!
zakim-robot

@zakim-robot
Aug 26 11:53

[michiel] Sunny UK
Fiona Holder

@FionaHolder
Aug 26 12:11

Yep, but stuck in the office all day -grumble-
zakim-robot

@zakim-robot
Aug 26 12:26

[michiel] works in the garden <3
[michiel] Although I'll be stuck in a train this afternoon.
Ian Devlin

@iandevlin
Aug 26 12:26

It's far too hot here today, glad to be stuck inside an air-conditioned office!
zakim-robot

@zakim-robot
Aug 26 12:27

[michiel] Well, I can work topless :P
[michiel] Maybe, if you try that, you get the work from home too!
Ian Devlin

@iandevlin
Aug 26 12:27

:D
zakim-robot

@zakim-robot
Aug 26 12:27

[michiel] Probably for someone else though :P
Fiona Holder

@FionaHolder
Aug 26 12:27

I think I'd get arrested but it may be worth a shot :P
zakim-robot

@zakim-robot
Aug 26 12:27

[michiel] Haha
powrsurg

@powrsurg
Aug 26 13:27

I had a question from the other day that I didn't see a response to that I was curious about: ARIA 1.0 vs 1.1 -- I assume most browsers and AT aim for 1.1 these days, but how does one know when certain things were required? I've not been able to find a site that is like html5accessibility that covers aria's different versions and support
zakim-robot

@zakim-robot
Aug 26 13:31

[karlgroves] 1.1 is still in Working Draft status. Given that, I wouldn’t anticipate strong support for anything that doesn’t exist in 1.0
powrsurg

@powrsurg
Aug 26 13:34

Well, the thing I was interested in specifically is when support for implied roles became a thing. We were looking at doc from 1.0 that said that role="button" was required on a button tag for aria-pressed to work
I've been following what a lot of people here have been saying about how implied roles shouldn't be necessary now, but when did it stop being necessary exactly?
zakim-robot

@zakim-robot
Aug 26 13:44

[michiel] karlgroves: ARIA WG works with various AT vendors to get stuff implemented. Everything in 1.1 needs two implementations to survive to CR/RC
[karlgroves] @michiel Do you ahve an answer for the above, then?
[michiel] I think powermapper comes closest to such a resource.
[michiel] Not sure they define the difference between 1.0 and 1.1 though.
[karlgroves] wat
[michiel] ?
[michiel] Wait. No I don't have an answer to what is required.
[michiel] Brian: that stopped in 1.1 as far as I know.
[michiel] Isn't that what jnurthen said?
powrsurg

@powrsurg
Aug 26 13:48

Right, I understand that it stopped being required as part of the spec, but when did that become a thing in actual AT?
Just because the spec allows something doesn't mean it's not still necessary to make it better for people in the real world
That's what I'm actually curious about
zakim-robot

@zakim-robot
Aug 26 13:51

[michiel] Ah!
[michiel] Don't know of anything to that regard.
James Nurthen

@jnurthen
Aug 26 15:06

This is a case of the spec catching up with the real world. No need to add role=button to use aria-pressed if using button element.
James Nurthen

@jnurthen
Aug 26 15:38

What is the best way to implement something like CSS3 speech pause-after in things that are supported by browsers?
Issue is that I have 3 spans which contain text. They are laid out in such a way that they are obviously different visual containers but when spoken by VO they all run together. I could just add some hidden text between them (<space><semi-colon>) would give a really nice audio spacing, but I'd prefer not to add hidden text to the layout.
zakim-robot

@zakim-robot
Aug 26 16:24

[michiel]
[michiel] That should do it
James Nurthen

@jnurthen
Aug 26 16:25

probably goes without saying that s probably aren't a good idea either
zakim-robot

@zakim-robot
Aug 26 16:26

[michiel] Sorry, I'm on my second beer.
[michiel] garcialo paid for it.
[michiel] Blame him.
James Nurthen

@jnurthen
Aug 26 16:28

i hope it is something decent... probably the only thing i miss about the UK is the beer
zakim-robot

@zakim-robot
Aug 26 16:28

[garcialo] hmmm…can you modify <blink> so that way the outer two will appear while the middle one is visible and vice versa?
[garcialo] is invisible*
[michiel] Set different animations for :nth-type(odd)?
James Nurthen

@jnurthen
Aug 26 16:30

@garcialo I hope you cannot do that
zakim-robot

@zakim-robot
Aug 26 16:30

[michiel] jnurthen: nah, APA from some M&S brand.
[garcialo] oh yeah, that should be done in the CSS; silly me
James Nurthen

@jnurthen
Aug 26 16:31

always better to make things blink using CSS
zakim-robot

@zakim-robot
Aug 26 16:31

[garcialo] “always better to make things blink” -@jnurthen
[michiel] :nth-child(2) { animation-delay: .1s }, :nth-child(3) { animation-delay: .2s }, :nth-child(4) { animation-delay: .3s }, etc
[michiel] >:)
[michiel] Haha
[michiel] Luis, you should get a ban on quoting people.
[garcialo] I should be banned, it is true
[michiel] “Luis, you should get a ban”—Michiel
James Nurthen

@jnurthen
Aug 26 17:30

anyone got any ideas for the following....
have a custom element which is really hard to make natively accessible to VO. What I want to do it put a native html element underneath it and use that to echo the output to the custom element. So AT users control the native element but visual users get extra visual candy. I make the visual element aria-hidden so it doesn't get exposed - but all the semantics are there in the real html element
(the particular case is an input type=range cause i want the swipe up/down behaviour with VO which is impossible to replicate using aria stuff)
James Nurthen

@jnurthen
Aug 26 17:40

the problem is that when using explore by touch i get the VO error earcon when touching on the hidden element. What I want to happen is that in this case focus goes to the thing below it.
zakim-robot

@zakim-robot
Aug 26 17:43

[michiel] Nice one hmig!
James Nurthen

@jnurthen
Aug 26 17:44

i guess there is no point in asking any questions here on a Friday :)
zakim-robot

@zakim-robot
Aug 26 17:50

[michiel] If you get answer, I'm interested in finding the solution.
[michiel] What is it that needs eyecandy anyway?
[michiel] You style range inputs.
[michiel] Ana Tudor did a whole bunch on CodePen.
James Nurthen

@jnurthen
Aug 26 17:52

it is a time picker
zakim-robot

@zakim-robot
Aug 26 17:53

[michiel] Is it a range slider to select your birth date?
[michiel] =D
James Nurthen

@jnurthen
Aug 26 17:53

LOL
zakim-robot

@zakim-robot
Aug 26 17:54

[michiel] Why's wrong with a simple input?
James Nurthen

@jnurthen
Aug 26 17:54

the UX folks don't like it
zakim-robot

@zakim-robot
Aug 26 17:54

[michiel] Type=datetime or whatever the current name for it is.
[michiel] Ah
James Nurthen

@jnurthen
Aug 26 17:55

that is ok on mobile but when you need something x-platform you need to code something for desktop as that isn't implemented most places
zakim-robot

@zakim-robot
Aug 26 17:55

[michiel] True.
[michiel] Can you share a screenshot or something?
James Nurthen

@jnurthen
Aug 26 17:56

no
:)
i'm scouring the web for something similar
zakim-robot

@zakim-robot
Aug 26 17:57

[michiel] You can send it to oraclessupersecrettimpicker@agosto.nl :P
James Nurthen

@jnurthen
Aug 26 17:58

LOL - it will be Open source eventually but until released can't share
zakim-robot

@zakim-robot
Aug 26 18:00

[michiel] Here is the collection, comes with a warning that most are broken though :(
[michiel] http://codepen.io/collection/DgYaMj/
zakim-robot

@zakim-robot
Aug 26 21:55

[emplums] hah @marcysutton I was just bugging Tim about fixing the react-simple-dropdown so it can be more accessible and asking him if could make a PR and he sent me this Fauntleroy/react-simple-dropdown#19
[emplums] looks like you’re already on it (if he gets his shit together)
zakim-robot

@zakim-robot
Aug 26 22:12

[marcysutton] haha
[marcysutton] i was going to make some contributions to it, but I got really sidetracked trying to get the environment set up
zakim-robot

@zakim-robot
Aug 26 22:28

[emplums] yeah i’m just trying to get a freaking title tag to show up on the trigger and it’s not behaviing
[marcysutton] i was going to add focus management to it for my talk this morning but I gave up and stuck with my 3rd-party frankenstein example...which is inspired by real world events =D

Gitter Channel Archive 26th of August 2016