A11y Slacker archive 2015-11-18

garcialo

Nov 18 00:15

@cameron Not natively, but there is a great add on that will add that. http://addons.nvda-project.org/addons/focusHighlight.en.html
garcialo

06:25

I'm going to be in the SFO area (staying with friends in San Mateo) first week in December. Anyone in the area and want to grab lunch/dinner sometime? =)
MichielBijl

08:51

I'm in Arnhem and Ede all week, anyone in the area want to grab lunch/dinner? =p
MichielBijl @MichielBijl is just goofing around, sorry @garcialo
garcialo

13:41

@MichielBijl Goofing about lunch/dinner is very insulting in America. I am disappoint.
MichielBijl

14:16

I would never! I was goofing about the location.
garcialo

14:16

Ah, location goofing is totally not completely insulting.
MichielBijl

14:16

Although the Dutch—looking at our local food—don't care that much about food.
garcialo

14:16

hah
MichielBijl

14:17

Except voor stroopwafels; those are delicious
powrsurg

14:20

For our search section we have a fieldset with a legend that says "Search Catalog", a single text input and then a submit button. Would it be appropriate to set an aria-labelledby equal for the text field to be the label, or should we use aria-label to give a different name?
powrsurg

14:21

I feel weird doing the aria-label version, but the aria-labelledby method would result in two elements (the fieldset and the input) having the same accessibility name, wouldn't it? Isn't that bad form?
garcialo

14:22

I'd say that's not really the best use of a fieldset.
garcialo

14:22

And effectively, even if you're using ARIA to provide the programmatic label, you're still using the fieldset for the visible label.
garcialo

14:24

If you're already fine with having a visible label, I'd just use a <label> and not use the fieldset.
powrsurg

14:25

Intellectually, I agree with you. But I think everyone likes the design of it with how browsers actually deal with fieldsets and legends
garcialo

14:26

The design?
garcialo

14:26

You mean, using a fieldset because of how it looks?
powrsurg

14:27

I guess I can re-style it all to do that. I've just never been great with replicating having an element placed over a border and have the line not go through it
powrsurg

14:27

Well, we have a form with one fieldset, a legend, and then the input and submit button
powrsurg

14:30

This is one of those things where I'm fixing something that has been live for a while (at least a year before I was hired) that's just been bothering me. As I talk it out here I'm realizing yeah, there is more wrong here than I was thinking. We don't really need the fieldset and should ditch it and the legend and simply use a label instead
garcialo

14:30

Then yes, I would just add the programmatic label.
powrsurg

14:30

:: hangs head ::
garcialo

14:30

Since there is already a visible label, I can see the argument for using aria-labelledby
garcialo

14:31

But it would be just as fine to use aria-label
garcialo

14:31

imo
garcialo

14:32

Heck, it's a search field with a visible label. You could even use title
garcialo @garcialo pauses for the audible gasp.
powrsurg

14:36

:: gasp ::
powrsurg

14:38

hmm, can't an accessible name come from a placeholder?
garcialo

14:38

no
garcialo

14:38

I mean, technically...yes
garcialo

14:38

WCAGically? no
powrsurg

14:38

I really need to bookmark the docs on how accessible names are calculated
garcialo

14:39

Well, using a placeholder opens you up to more issues.
garcialo

14:40

I'm saying that according to WCAG, you can use a title as the label for that field.
powrsurg

14:40

I know it will need sufficient contrast (since most browsers don't seem to do so)
MichielBijl

14:42

@powrsurg that is something @stevefaulkner proposed a while back—acc name from placeholder.
MichielBijl

14:42

Only if none of the other variants are available of course.
garcialo

14:42

Yeah, it'd better than nothing.
garcialo

14:42

it'd BE better than nothing
powrsurg

14:44

yeah, I feel like there are A LOT of sites that don't do jack that this would at least make them a little better if they had it

MichielBijl

14:44

<fieldset aria-labelledby="search-label">     <label>         <span id="search-label">Search Catalog</span>         <input type="search">     </label>     <button type="submit">Search</button> </fieldset>

garcialo

14:44

But it's more than just the contrast. =(
MichielBijl

14:45

Something like that is what you meant with the labelled by thing right?
garcialo

14:45

I don't think so; you forgot the legend =p
garcialo

14:45

He said he had one.
MichielBijl

14:46

Why bother with a legend if you can use the label?
MichielBijl

14:46

O right.
MichielBijl

14:46

Then the other way around?
garcialo

14:46

How do you do that fancy formatting? =p
MichielBijl

14:46

If that is all the markup you have for that field it doesn't really matter design wise.
powrsurg

14:46

http://codepen.io/powrsurg/pen/LpaWXm
powrsurg

14:46

that's what we had right now
MichielBijl

14:46

With triple tack thing
MichielBijl

14:47
MichielBijl

14:47

`````````
MichielBijl

14:47

Those things :P
garcialo

14:47
mrr? hello?
how do I escape this madness?
garcialo

14:47

ah, I see
garcialo

14:48

ouch

MichielBijl

14:48

Simplified:

<fieldset>   <legend>     <span>Search Catalog</span>   </legend>   <div>     <div>      <input type="text">     </div>     <input type="submit" value="Search">   </div> </fieldset>

MichielBijl

14:48

So there is no label at all?
MichielBijl

14:49

Why not change that div around the input to a label and link that to the legend?
garcialo

14:49

yeah, based solely on how many divs there are for every little thing, I'd just use aria-label or title to provide the label.
powrsurg

14:50

Correct. I was asking should I add an aria-label (or title I guess), or would it be acceptable (my gut says no) to put an id on the legend and use aria-labelledby ... or I guess it could have a visually hidden label

MichielBijl

14:50

So:

<fieldset>   <legend id="search-legend">     <span>Search Catalog</span>   </legend>   <div>     <label aria-labelledby="search-legend">      <input type="text">     </label>     <input type="submit" value="Search">   </div> </fieldset>

garcialo

14:50

You can put an id on the legend and do labelledby.
powrsurg

14:50

a label can be labelledby something?
MichielBijl

14:50

Sure
garcialo

14:50

That just seems like it would make it even more confusing.
MichielBijl

14:50

It's doesn't have the same “label” meaning.
MichielBijl

14:51

But yeah, could be confusing.
garcialo

14:51

Could be?
powrsurg

14:51

(btw, how are you entering HTML in here so simply?)
MichielBijl

14:51

With the magic of copy paste.
MichielBijl

14:51

And the help of those tack things `
powrsurg

14:51

oh, heh. I was thinking there was another service
garcialo

14:51

trip-tacks!
MichielBijl

14:52

If you put three in a row and put your code between you can do multi row code.
MichielBijl

14:52

Markdown format
powrsurg

14:52

nice
powrsurg

14:52

why is that span needed?
MichielBijl

14:52

Don't know how it'll look in Slack though.
MichielBijl

14:53

That span was already in your code.
garcialo

14:53

It'll probably be fine; I'll check it out real quick.
MichielBijl

14:53

All I did was remove a bunch of attributes to make it cleaner for example purposes.
powrsurg

14:53

... yeah ... damn Drupal. Literally didn't see that
powrsurg

14:53

I really wish they didn't make us come in an hour earlier today. I need more coffee
powrsurg

14:53

yes
garcialo

14:54

Yeah, it's fine in Slack. Doesn't have the text highlighting, but definitely better contrast.
MichielBijl

14:55

Cool :)
MichielBijl

14:55

Why is the legend absolutely needed?
MichielBijl

14:55

Cause I still like this:

MichielBijl

14:55

<fieldset aria-labelledby="search-label">     <label>         <span id="search-label">Search Catalog</span>         <input type="search">     </label>     <button type="submit">Search</button> </fieldset>

MichielBijl

14:56

Just because it's fewer code
MichielBijl

14:56

*less code?
MichielBijl

14:56

I don't know…
MichielBijl

14:56

less code/fewer lines of code
garcialo

14:56

It's "needed" for how it looks.
garcialo

14:56

In this case.
MichielBijl

14:57

Ah. Okay, but you can position the label/span thingy the same.
MichielBijl

14:57

Depends on the design I guess.
MichielBijl

14:57

Pretty sure it's doable.
garcialo

14:57

Yeah.
powrsurg

15:01

The reason for the legend and such comes from Drupal's automatic markup
garcialo

15:02

Ah, I see.
powrsurg

15:02

I can add attributes on stuff, or I have to do a lot of re-coding to do things manually to get it done the right way ...
MichielBijl

15:03
The blue/large part is the title, the tiny grey text is some sort of reference code.
http://dir.agosto.nl/dump/Screen%20Shot%202015-11-18%20at%2015.59.13.png

How should this be marked up?

<h2>Title text <small>FAQ-000001</small</h2>

Or:

<h2>Title text</h2> <p>FAQ-000001</p>

Or:

<h2>Title text</h2> <p><span class="hidden someway">Reference code:</span>FAQ-000001</p>

Or (although I'm not sure in what order content/label are read):

<h2>Title text</h2> <p aria-label="Reference code">FAQ-000001</p>

Or:

…
MichielBijl

15:03

@powrsurg in that case I would just label the label with labelledby >:)
garcialo

15:04

@powrsurg I vote aria-label!
MichielBijl

15:04

I would agree with that if labelledby would cause too much confusion.
MichielBijl

15:05

Not sure how an aria-label on a label wouldn't, but I digress.
garcialo

15:05

Yeah, there's already a bunch of other extraneous tags in there. Might as well make it simple.
powrsurg

15:05

I ... would need to figure out how to make drupal apply ids to the legend and not the fieldset element to go with aria-labelledby ...
garcialo

15:05

Or title!
powrsurg

15:06

or title
powrsurg

15:06

really, anything that changes the markup for the legend ...
MichielBijl

15:06

Is title exposed for labels?
garcialo

15:06

You can use a title as a label in some cases.
garcialo

15:06

And be all legit with WCAG

powrsurg

15:07

  $form['search'] = array(     '#title'         => 'Search Catalog',     '#description'   => '',     '#tree'          => FALSE,     '#type'          => 'fieldset',     '#collapsible'   => FALSE,   );

powrsurg

15:08

that's how Drupal even generated the fieldset and created the title
powrsurg

15:08

er legend
MichielBijl

15:09

Hmm, my aria-label thingy overwrites the paragraph content.
garcialo

15:13

You have fiber? I'm jealous
powrsurg

15:16

@MichielBijl I would go with your third option
garcialo

15:16

agreed
MichielBijl

15:16

And so I will :)
garcialo

15:16

Assuming there isn't appropriate context provided in the precedding heading
garcialo

15:16

wait, I don't know how to spell
MichielBijl

15:17

No that screenshot text translates to “Where does my fibre connection come into my home”

powrsurg

15:17

<h2>Title text</h2> <p><span aria-label=":Reference code:"></span>FAQ-000001</p>

garcialo

15:17

Yeah, that's what I figured it meant =p
powrsurg

15:18

er take out the first : in that
MichielBijl

15:18

Hmm, that only saves on the class.
powrsurg

15:18

aria-label="Reference code: ">
powrsurg

15:18

it's another option at least
MichielBijl

15:18

True that
MichielBijl

15:19

I'm not sure. I dislike empty elements. But that is just a personal thingy I guess.
MichielBijl

15:19

Semantically they're the same (in theory at least)
powrsurg

15:19

the hidden text method might actually hurt you in terms of SEO if this is on a public page
MichielBijl

15:20

Hmm, really?
MichielBijl

15:20

I'm a SEO noob, so have no clue.
powrsurg

15:21

well, when text is hidden from the user search engines may think you're cloaking. It's probably fine for a little bit here and there but it is a potential risk
powrsurg

15:22

they see it as simply text that is only read by search engines and not meant for uses. I think with the normal stuff you'd probably do it might actually be able to tell you're actually trying to make the site accessible so you wouldn't get penalized much, if any, but it's possible
powrsurg

15:22

of course, who knows lately since googlebot now actually internally renders the page like it would in chrome ...
MichielBijl

15:28

Thank you for the advice. I used the aria label way.
MichielBijl

15:28

Just to be safe.
MichielBijl

15:30

The hidden text way would clarify things if CSS is turned off, but I'm unsure how important that is.
powrsurg

15:32

While that is more pure, how much does that happen in modern web browsing?
MichielBijl

15:37

2g/3g connections
MichielBijl

15:37

Had a webpage load adds and styles after a minute on the page a couple days ago.
MichielBijl

15:37

I started reading and left after all the crap loaded.
MichielBijl

15:37

There was like 20% screen area left after all he craptastic adds loaded.
MichielBijl

15:39

That said, we have 4g here, but if I'm in an elevator, the speed isn't all that great/might switch to 2g/3g.
dylanb

15:55

@MichielBijl I will be in Amsterdam on December 10th if you want to meet for stuff the Dutch care about - like beer
LjWatson

15:56

@MichielBijl You're in Amsterdam?
zakim-robot

15:57

[cameron] Here’s how I create a Windows accessibility testing VM: https://github.com/ckundo/a11y-testing-vms
zakim-robot

15:57

[cameron] suggestions welcome!
dylanb

16:04

Where is @MichielBijl !?!?
zakim-robot

16:40

[car] @garcialo @cameron: Thanks for pointing out the NVDA focus rectangle add-on - I love it! I often use the old Windows "inspect.exe" highlight rectangle with NVDA, but the add-on is cool because it shows you which mode NVDA is in as well. Nice.
garcialo

16:41

This message was deleted
garcialo

16:41

Argh, now I have to double check.
garcialo

16:43

Okay, I misspoke. Deleted in case anyone searches and finds it. =p
MichielBijl

16:49

@dylanb and @LjWatson I can be in Amsterdam in about two hours ;)
LjWatson

16:50

@MichielBijl will be in Amsterdam tomorrow evening to meet with my TPG friend Hans Hillen.
MichielBijl

16:52

And @dylanb that sounds great. I do have a christmas dinner thing from work though :(
MichielBijl

16:52

@LjWatson oeh, I could totally come
MichielBijl

16:52

@LjWatson oh wait. I have another dinner tomorrow with my project members
MichielBijl

16:53

@LjWatson what time do you leave/go home tired?
MichielBijl @MichielBijl damns all these dinners
MichielBijl

16:53

Or rather dinners with people I see everyday that is
LjWatson

16:53

@MichielBijl I'll just be around tomorrow evening.
MichielBijl

16:54

I could cancel on them…
LjWatson

16:54

We don't have a firm plan, but the basic idea is to meet around 6.30pm somewhere and take it from there.
LjWatson

16:55

Hang on... let's take this off channel so we don't disturb everyone :)
MichielBijl

16:55

Sounds good
garcialo

16:56

@LjWatson As if everyone on here wasn't already a little disturbed.
MichielBijl

17:09

Haha
MichielBijl

17:09

Now that's disturbing
zakim-robot

18:24

[cordelia] Hey folks, I’m working on an autocomplete text input box and struggling to get aria-activedescendant to read out in VoiceOver + Safari. It works just fine in VO + Chrome, NVDA + Firefox, and JAWS + IE. Is this a known bug?
MichielBijl

18:49

@cordelia, @heydon had a similar problem. On Twitter.
MichielBijl

18:49

I tried testing his code, but wasn't sure what was expected to be read out.
MichielBijl

18:51

Here is the tweet: https://twitter.com/heydonworks/status/666664511353548800
stevefaulkner

18:52

@MichielBijl re placeholder that's how it is implemented in most browsers http://www.html5accessibility.com/tests/placeholder-labelling.html
MichielBijl

18:54

When did they change that?
MichielBijl

18:54

Or has it always been like that?
MichielBijl

18:55

If so, the spec should reflect and the last time you asked it was a rhetorical question? :P
MichielBijl

19:13

I'm feeling like a little girl meeting hero's.
MichielBijl

19:13

And it's not even tomorrow yet.
stevefaulkner

19:15

@MichielBijl

If so, the spec should reflect

the spec that defines it does reflect it http://w3c.github.io/aria/html-aam/html-aam.html#accessible-name-and-description-calculation
MichielBijl

19:15

Or a little boy… same thing really.
MichielBijl

19:16

@stevefaulkner then I'm probably delusional.
stevefaulkner

19:16

@MichielBijl i could not possibly comment
stevefaulkner

19:18

@MichielBijl note this does not mean it is recommended or conforming to use placeholder as label, it just means if you don't do the right thing the placeholder value is used as fallback accname
MichielBijl

19:22

I'm not sure you could say anything worse than banning me from the internet. In any case, ah, so what was the question the last time, whether it should be conforming?
MichielBijl

19:37

Anyway, meeting some TPG stars tomorrow, sorry, you didn't make the cut ;)
MichielBijl @MichielBijl actually hopes to meet @stevefaulkner one day :)
garcialo

20:39

@MichielBijl meeting @stevefaulkner is overrated.
garcialo

20:41

Here is a simulation. 1. Go to a pub. 2. Ask the bartender who the most common regular is. 3. Start a conversation.
MichielBijl

20:47

That, doesn't sound half bad actually
garcialo

20:47

I didn't say it was bad. It is enjoyable. =)
MichielBijl

20:48

Well, what if it was Steve's favourite pub and he is the most common regular.
MichielBijl

20:48

Which isn't unthinkable
garcialo

20:48

I would be surprised if he was the most common regular at only one pub.
powrsurg @powrsurg has started to bookmark some of the links @stevefaulkner has posted since they keep coming up for me and I'm never 100% on things
stevefaulkner

22:40

@garcialo you think meeting me is overrated, try being me
garcialo

23:01

Hah
StommePoes

23:09

alaska airlines seems ready to do more http://www.seattletimes.com/seattle-news/transportation/alaska-air-offers-classes-to-blind-on-navigating-planes-airports/?utm_source=twitter&utm_medium=social&utm_campaign=article_bottom @marcysutton
StommePoes

23:09

I shoulda removed all the twitter bs from the URL
StommePoes

23:09

http://www.seattletimes.com/seattle-news/transportation/alaska-air-offers-classes-to-blind-on-navigating-planes-airports/
zakim-robot

23:10

[marcysutton] Cool!!
StommePoes

23:12

It's cool, but now I want them to also offer a class for other airlines' workers so they know, for example, that blinks who can walk don't need to wait for a wheelchair to board the plane :P
StommePoes

23:12

I remember one time Jaime Teh waited for like evar to board a plane because someone was scrambling for a wheelchair for him and he was like, wut? I can haz legz
zakim-robot

23:29

[cordelia] HTML question: I have a horizontal tab UI that I’m not implementing as ARIA tabs, because clicking on a tab redirects to a new page. Each tab basically acts as a heading for the content below it, so I’m wondering what’s the best markup to use.
zakim-robot

23:31

[cordelia] I want to use <nav> for the list of tabs, but then how do I specify “This nav item is selected and is the header for the content below it”? Is using aria-labelledby on the content div the right approach? Or including a visually-hidden heading with the same text as the selected “tab”?
garcialo

23:33

Selected tab? Are the tabs not links?
zakim-robot

23:34

[cordelia] Yeah, the tabs are links in a <nav>
zakim-robot

23:34

[cordelia] But one of the tabs also acts as a heading for the rest of the page
garcialo

23:35

Yeah, that's the tricky bit. I'm trying to wrap my head around it.
zakim-robot

23:35

[cordelia] Kind of similar to the “accessible current page link conundrum” http://www.heydonworks.com/article/the-accessible-current-page-link-conundrum but in my case the link is also (visually, but not in the code) a heading
garcialo

23:35

because really, I'm thinking that the <nav> is in the <header>, but the content that would match the heading would be in <main>
garcialo

23:37

Train of thought: Maybe leave the <nav> link as just a link and have an invisible heading tag in the <main>?
zakim-robot

23:37

[cordelia] ^ That’s what I’m leaning towards.
garcialo

23:38

Mock it up!
zakim-robot

23:38

[cordelia] It’s a reusable component, so the funky thing is that someone may already put a heading in the body, making a hidden heading redundant.
garcialo

23:39

The component is the tab ui?
garcialo

23:40

Does the "active" tab look like a heading?
garcialo

23:40

You could also just have a visible heading in the content if it's not very differentiatable.

Gitter Channel Archive 18th of November 2015