A11y Slacker archive 2017-02-23

zakim-robot

@zakim-robot
Feb 23 00:21

[herin] Hi, I have a question on Tables.
A Table has 10 rows out of 70 rows on current display with pagination links for the rest.
There is also a visual display saying "Showing 1 to 10 of 70 entries"
What will be the best way to associate this information to the Table when the user enters into the table?
[caesar] Just a guess... not sure if this works, but aria-describedby in the <summary> of the table>
zakim-robot

@zakim-robot
Feb 23 00:27

[herin] @caesar : summary is used to explain the column structure for the complex tables. And also summary is an attribute in table tag. I am afraid of using captions and summaries for something other than intended use.
I tried <table aria-describedby="tablestatus"> and it works.
[herin] Thanks for the hint
zakim-robot

@zakim-robot
Feb 23 00:37

[herin] Doesn't seem to work in all instances.
[herin] Found this :https://www.w3.org/WAI/tutorials/tables/caption-summary/
zakim-robot

@zakim-robot
Feb 23 00:48

[herin] When the summary attribute is present in the table, the Aria-desecribedby is notpicked by the screen reader;
[herin] Only when summary is not there it works.
[herin] http://maxdesign.com.au/jobs/sample-accessibility/07-tables/09-summar-options.html
[caesar] Ah yes summary is just an attribute. Then <caption>?
[caesar] Just spitballing
[herin] Yes.. in my instance, I need to use the Caption and aria-describeby as this is not a very complex table
[herin] :)
zakim-robot

@zakim-robot
Feb 23 03:49

[herin] Buttons and Links - Do you have any best articles that helps me to convince my team?
[herin] Buttons used as links and Links styled as buttons...
[herin] What's the general rule you advise?
[herin] @karlgroves : I read your article. It was a good one. http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/
[karlgroves] Thanks!
[herin] Select links inside the Tables as buttons - Can they be forgiven?
[karlgroves] ?
[karlgroves] Not sure what you mean
zakim-robot

@zakim-robot
Feb 23 03:57

[herin] A Table with 10 rows... There are "select" Anchors with role="button" and opens up another page that details the page.
In concept this is linking to a page with more details. But, it's also an action that you are selecting 1 row out of 10 rows.
[herin] When testing with NVDA - elements list, they are not displayed as these are buttons
[herin] What is your recommendation?
[herin] I see your point...
Will this control be used to initiate an immediate action?
Is the action to navigate to another page?
[herin] and another one
[herin] Displaying windows used to gather input or making choices, even if they are secondary commands
zakim-robot

@zakim-robot
Feb 23 04:02

[herin] Will this be making choice? and hence be left as a button?
[herin] Thanks for the article.. I read the TL;DR
Srinivas Yedhuri

@sri429
Feb 23 06:58

Whats the latest way to hide content only to non screen reader users.
I am still using css clip method but that deprecated. Got a chance to update our base css.
zakim-robot

@zakim-robot
Feb 23 13:43

[michiel] @sri429: Until CSS’ speak property gets wide support clip is still the preferred method.
powrsurg

@powrsurg
Feb 23 14:38

Anyone have a suggestion for making https://newsignature.github.io/us-map/ accessible
making each state tabbable
zakim-robot

@zakim-robot
Feb 23 14:51

[sophieschoice_slack] stupid question: if I as a sighted user tab around in a webpage, and I see focus changing with each tab in the order that I want it, does it mean it will be that way for screenreader-user too? Even if you haven´t used tab-index or other magic?
Fiona Holder

@FionaHolder
Feb 23 14:52

@sophieschoice _slack Yes, it's exactly the same keyboard interaction
zakim-robot

@zakim-robot
Feb 23 14:53

[frippz] I’ve been looking at using role="tooltip" for word explanations in an ebook, but getting screen readers to optionally read such tooltips have proven difficult. Anyone have any previous experience with this?

Seems Voice Over for one only reads tooltips if they are linked with aria-describedby on focusable elements.

I realise that using links as wrappers would work, but it offers an awful user experience with the screen reader announcing links all the time.
powrsurg

@powrsurg
Feb 23 15:00

Is the <a> element in an SVG the only way to make something tabable? For what we want it'd be more analog to a <button> tag if this was straight HTML since we want it to perform an action, not take them to another page
zakim-robot

@zakim-robot
Feb 23 15:51

[tink] You can use tabindex, which works in some browsers.
[tink] I *think with the exception of the MacOS browsers... but don't have access to my test data here to be sure.
powrsurg

@powrsurg
Feb 23 16:14

I thought so, but it seemed to not work ... though that could have been with the library's detection code. Either way, updating the third party library will be fun ...
Srinivas Yedhuri

@sri429
Feb 23 17:53

@sophieschoice not sure if i got your question right. but one thing to remember is screen reader gives the users much better sophisticated way of navigating a page. they can jump to the last heading, any link on the page without actually tabbing through the entire page.
they have their shortcuts like h to jump between headings on a page by jaws. they dont need to tab till the section they want comes in the tab order
Q: How good is the current state of accessibility for the default html 5 video control?
zakim-robot

@zakim-robot
Feb 23 17:58

[albert] @powrsurg open states has an svg they use for this. its not set up for functionality like you speak of, but its open source and you can rip it out and apply what you like. you can see it in action here: https://openstates.org/
Srinivas Yedhuri

@sri429
Feb 23 17:59

Q2: Is there any issue with drop downs <select> and label for. The accessibility name is always computed to the current value even if a valid label is present. tested with chrome inspect.exe, accessibility checker, dev tools etc
powrsurg

@powrsurg
Feb 23 18:57

@sri429 in what regards?
https://gist.github.com/powrsurg/c9bdd3611cdb62269e75 I put this together when I was working on html5 video accessibility. Includes some browser keyboard shortcuts and a few popular video players
It seems to have lost the keyboard controls for Chrome and Safari, which I knew I had done at the time
powrsurg

@powrsurg
Feb 23 19:02

@jalbertbowden well, ideally you shouldn't want to rip a library apart, save to fix it and do a pull request.
zakim-robot

@zakim-robot
Feb 23 19:05

[sophieschoice_slack] @fionaholder Thank you!
[albert] @powrsurg ideally, for sure. but open states is a massive project that has nothing to do with what you want/need. just throwing the option out there
powrsurg

@powrsurg
Feb 23 22:13

So we got something working with external JS that also runs. I told our dev that he should include a focusable skip-to link to skip over the map so someone doesn't always need to tab over all 50 states. That made me wonder should we also add another one to let you get back to the front of the map if you're shift+tabbing? Do people tend to do that?
zakim-robot

@zakim-robot
Feb 23 22:16

[albert] sounds ideal

Sean Elliott

@seanus1138

Feb 23 23:33

Is there a suggested aria mark up for mega menus anywhere??
Im using the following for a simple drop down:

<ul aria-expanded="false" aria-label="Sub Menu" id="sub-menu-1" role="menu"> <li><a href="#" aria-role="menuitem">Who we are</a></li> <li><a href="#" aria-role="menuitem">What we do</a></li> <li><a href="#" aria-role="menuitem">Why</a></li> </ul>

But im unsure of what is the best mark up for a mega menu, currently i have:

<div aria-expanded="false" aria-label="Mega Menu" id="mega-menu-1" role="menu">     <div class="mega-menu_column">         <p id="mega-menu-1_h1"><a href="#">Drivers</a></p>         <ul role="menu" aria-labelledby="mega-menu-1_h1">             <li><a href="#" aria-role="menuitem">Link</a></li>         </ul>     </div>     <div class="mega-menu_column">         <p id="mega-menu-1_h2">Iron/Combo Sets</p>         <ul role="menu" aria-labelledby="mega-menu-1_h2">             <li><a href="#" aria-role="menuitem">Link</a></li>         </ul>     </div>     <div class="mega-menu_column">         <p id="mega-menu-1_h3">Wedges</p>         <ul role="menu" aria-labelledby="mega-menu-1_h3">             <li><a href="#" aria-role="menuitem">Link</a></li>         </ul>     </div>     <div class="mega-menu_column">         <p id="mega-menu-1_h4">Hybrids</p>         <ul role="menu" aria-labelledby="mega-menu-1_h4">             <li><a href="#" aria-role="menuitem">Link</a></li>         </ul>     </div> </div>

Can any offer up some advice?

zakim-robot

@zakim-robot
Feb 23 23:45

[caesar] I thought you were going with the Adobe one for reference?
Sean Elliott

@seanus1138
Feb 23 23:46

I have been using it but that doesnt have all the aria roles applied for even the main menu bar part, so im doubting if it should trust it hahaha
zakim-robot

@zakim-robot
Feb 23 23:48

[caesar] Well you know the first rule of ARIA: don't use ARIA. Hahaha
[caesar] So long as AT announce the roles and states correctly, ARIA may not be necessary
[caesar] I can't see anything structurally wrong with your code, but without he scripts and CSS it's a bit hard to evaluate.
Sean Elliott

@seanus1138
Feb 23 23:51

fair enough, thanks, i might post up an example at some point today

Gitter Channel Archive 23rd of February 2017