WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Help needed to integrate aXe webdriverjs into selenium

for

From: Marcy Sutton
Date: Nov 13, 2018 12:14PM

Hi Mohith,

The axe-webdriverjs library requires Node.js, as that is how it injects into the page. There is an open source axe Selenium Java project you could check out: https://github.com/dequelabs/axe-selenium-java <https://github.com/dequelabs/axe-selenium-java>

Otherwise, the best place to get help with axe implementations is in our Gitter channel: https://gitter.im/dequelabs/axe-core <https://gitter.im/dequelabs/axe-core>

Hope that helps!

Marcy Sutton | Developer Advocate | 206-819-8408
Deque Systems - Accessibility for Good
deque.com <http://deque.com/>;

> On Nov 13, 2018, at 11:00 AM, <EMAIL REMOVED> wrote:
>
> Send WebAIM-Forum mailing list submissions to
> <EMAIL REMOVED>
>
> To subscribe or unsubscribe via the World Wide Web, visit
> http://list.webaim.org/mailman/listinfo/webaim-forum
> or, via email, send a message with subject or body 'help' to
> <EMAIL REMOVED>
>
> You can reach the person managing the list at
> <EMAIL REMOVED>
>
> When replying, please edit your Subject line so it is more specific
> than "Re: Contents of WebAIM-Forum digest..."
> Today's Topics:
>
> 1. Accessible table where some data spans multiple columns
> (Jeremy Echols)
> 2. Re: Accessible table where some data spans multiple columns
> (Philippe Vayssi?re)
> 3. Fwd: [community] Tenon-UI - a11y-oriented React component
> library (Brandon Keith Biggs)
> 4. Help needed to integrate aXe webdriverjs into selenium (Mohith BP)
> 5. Re: Accessible table where some data spans multiple columns
> (Birkir R. Gunnarsson)
> 6. Re: Accessible table where some data spans multiple columns
> (glen walker)
> 7. Re: Accessible table where some data spans multiple columns
> (Jeremy Echols)
> 8. Re: Accessible table where some data spans multiple columns
> (glen walker)
> 9. Re: Accessible dragon drop component? ? some questions
> (Bryan Garaventa)
>
> From: Jeremy Echols < <EMAIL REMOVED> >
> Subject: [WebAIM] Accessible table where some data spans multiple columns
> Date: November 12, 2018 at 12:24:07 PM PST
> To: WebAIM Discussion List < <EMAIL REMOVED> >
>
>
> I'm trying to figure out how to make a table read the headers properly when a data cell spans multiple columns. We have a data table (gist URL below) where we're describing fines for library resources, and some of the fines are the same across multiple groups, so naturally we used "colspan" to make it clear that the information pertains to multiple groups. Unfortunately, when I tested this out with NVDA, it only read the first pertinent header for the data. I'm not sure why this is happening, as the markup looks correct to me.
>
> Any ideas what's going on? Is this an NVDA bug or am I missing something obvious?
>
> Gist URL: https://gist.github.com/jechols/8e1d447e98c9c40e24e114e80a5c5b7b#file-table-html
>
>
>
>
> From: Philippe Vayssière < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Accessible table where some data spans multiple columns
> Date: November 13, 2018 at 12:45:34 AM PST
> To: <EMAIL REMOVED>
>
>
> Hi,
>
> headers and cells should be associated via the id and headers attributes mechanism (even better if you can simplify your table and not have colspan and rowspan. If).
> WCAG Techniques H43 and F90 are relevant here:
>
> * H43: Using id and headers attributes to associate data cells with header cells in data tables <https://www.w3.org/WAI/GL/WCAG20-TECHS/H43.html>
> * F90: Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes <F90: Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes>
>
> This bookmarklet by Gez Lemon may help verifying the tedious – and prone to error – work of adding headers: <http://juicystudio.com/article/complextableinspector.php>;
>
>
> Philippe
>
> Le 12/11/2018 à 21:24, Jeremy Echols a écrit :
>> I'm trying to figure out how to make a table read the headers properly when a data cell spans multiple columns. We have a data table (gist URL below) where we're describing fines for library resources, and some of the fines are the same across multiple groups, so naturally we used "colspan" to make it clear that the information pertains to multiple groups. Unfortunately, when I tested this out with NVDA, it only read the first pertinent header for the data. I'm not sure why this is happening, as the markup looks correct to me.
>>
>> Any ideas what's going on? Is this an NVDA bug or am I missing something obvious?
>>
>> Gist URL: https://gist.github.com/jechols/8e1d447e98c9c40e24e114e80a5c5b7b#file-table-html
>>
>
>
>
>
>
> From: Brandon Keith Biggs < <EMAIL REMOVED> >
> Subject: [WebAIM] Fwd: [community] Tenon-UI - a11y-oriented React component library
> Date: November 13, 2018 at 2:28:51 AM PST
> To: WebAIM Discussion List < <EMAIL REMOVED> >
>
>
> Hello,
> Just thought people would like to know about this new accessible framework
> in React:
> https://github.com/tenon-io/tenon-ui
> Thanks,
>
> Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
>
>
> ---------- Forwarded message ---------
> From: Harnum, Alan < <EMAIL REMOVED> >
> Date: Mon, Nov 12, 2018 at 2:10 PM
> Subject: [community] Tenon-UI - a11y-oriented React component library
> To: <EMAIL REMOVED> < <EMAIL REMOVED> >
>
>
> Released in 1.0 as of today:
>
> Docs: https://tenon-ui.info/
> GitHub repo: https://github.com/tenon-io/tenon-ui
>
> Released by the development team behind the https://tenon.io/ accessibility
> testing tool.
>
> I haven't seriously used React in a few years but I know the mindshare and
> adoption of it is, shall we say, significant in the web development world,
> so this looks like an important effort.
>
> ALAN HARNUM
> SENIOR INCLUSIVE DEVELOPER
> INCLUSIVE DESIGN RESEARCH CENTRE, OCAD UNIVERSITY
>
> E <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
> OCAD UNIVERSITY
> 100 McCaul Street, Toronto, Canada, M5T 1W1
> www.ocadu.ca<;http://ocadu.ca/>;
>
> > Inclusive Design Community ( <EMAIL REMOVED> )
> > https://lists.idrc.ocadu.ca/mailman/listinfo/community
>
>
>
>
> From: Mohith BP < <EMAIL REMOVED> >
> Subject: [WebAIM] Help needed to integrate aXe webdriverjs into selenium
> Date: November 13, 2018 at 3:00:56 AM PST
> To: WebAIM Discussion List < <EMAIL REMOVED> >
>
>
> Hi Folks,
>
> I am trying to integrate aXe webdriverjs into existing automation
> framework. However I am hitting road blocks as the documentation
> suggests to use node.js with jasmine.
> As I have no experience with Node.JS.
>
> The current environment I am running is Eclipse and Selenium with
> webdrivers for Chrome and Firefox.
>
> Would like to know the experience of integrating aXe webdriverjs into
> existing automation framework.
>
> Thanks & Regards,
> Mohith B. P.
>
>
>
>
> From: "Birkir R. Gunnarsson" < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Accessible table where some data spans multiple columns
> Date: November 13, 2018 at 6:43:29 AM PST
> To: WebAIM Discussion List < <EMAIL REMOVED> >
>
>
> Simple data tables do not need headers.
>
> The default behavior of data tables where regular table cells span
> multiple columns however is to associate the first column header with
> that cell (tested with NVDA and Jaws).
> As already pointed out, you can force associating all the headers with
> a cell using the headers attribute (assign a unique id to each header
> and use the headers attribute on the cell to announce them).
> That's probably your best best short of trying to reorganize the whole table.
>
>
>
> On 11/13/18, Philippe Vayssière < <EMAIL REMOVED> > wrote:
>> Hi,
>>
>> headers and cells should be associated via the id and headers attributes
>> mechanism (even better if you can simplify your table and not have
>> colspan and rowspan. If).
>> WCAG Techniques H43 and F90 are relevant here:
>>
>> * H43: Using id and headers attributes to associate data cells with
>> header cells in data tables
>> <https://www.w3.org/WAI/GL/WCAG20-TECHS/H43.html>
>> * F90: Failure of Success Criterion 1.3.1 for incorrectly associating
>> table headers and content via the headers and id attributes <F90:
>> Failure of Success Criterion 1.3.1 for incorrectly associating table
>> headers and content via the headers and id attributes>
>>
>> This bookmarklet by Gez Lemon may help verifying the tedious – and prone
>> to error – work of adding headers:
>> <http://juicystudio.com/article/complextableinspector.php>;
>>
>>
>> Philippe
>>
>> Le 12/11/2018 à 21:24, Jeremy Echols a écrit :
>>> I'm trying to figure out how to make a table read the headers properly
>>> when a data cell spans multiple columns. We have a data table (gist URL
>>> below) where we're describing fines for library resources, and some of the
>>> fines are the same across multiple groups, so naturally we used "colspan"
>>> to make it clear that the information pertains to multiple groups.
>>> Unfortunately, when I tested this out with NVDA, it only read the first
>>> pertinent header for the data. I'm not sure why this is happening, as the
>>> markup looks correct to me.
>>>
>>> Any ideas what's going on? Is this an NVDA bug or am I missing something
>>> obvious?
>>>
>>> Gist URL:
>>> https://gist.github.com/jechols/8e1d447e98c9c40e24e114e80a5c5b7b#file-table-html
>>>
>>
>> >> >> >> >>
>
>
> --
> Work hard. Have fun. Make history.
>
>
>
>
> From: glen walker < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Accessible table where some data spans multiple columns
> Date: November 13, 2018 at 7:02:42 AM PST
> To: WebAIM Discussion List < <EMAIL REMOVED> >
>
>
> In general, as stated already, the <th scope=row/col> works great for
> associating headers with data cells. The id/header attributes aren't
> normally needed.
>
> And spanned row or column headers also works pretty well. But in your
> case, none of your headers are spanned but rather the data cells are
> spanned. One could argue that maybe the screen reader should figure out
> that a data cell that's spanned has multiple headers, but in the meantime,
> the headers attribute fixes the problem. I tried a quick test with JAWS on
> IE and NVDA on firefox and the following read multiple column headers.
>
> 1. Added an ID to each column header.
> 2. Added a header attribute to two of the data cells (just to test those
> two - I didn't update the entire table). It's only needed for the spanned
> cells.
>
> However, visually, I find the table hard to scan because there is no
> consistent cell shape. I can't read a column header and then scan down to
> find the fee. So while spanned data cells might seem like a good idea in
> this case to convey that all the different headers have the same charge,
> I'm not sure that's conveyed very well.
>
>
> <thead>
> <tr>
> <th scope="col" id="col1">Borrower type/Material type</th>
> <th scope="col" id="col2">Faculty/Staff</th>
> <th scope="col" id="col3">Grad Student or Honors Student</th>
> <th scope="col" id="col4">Undergrad or Community Ed.</th>
> <th scope="col" id="col5">Member, UO Alum Assoc.</th>
> <th scope="col" id="col6">Oregon Card and NCU</th>
> </tr>
> </thead>
>
> ...
> <tr>
> <th scope="row">General Materials</th>
> <td style="text-align: center;">No general fines<br>
> $5/day recall fine (max=$20)</td>
> <td colspan="4" style="text-align: center;" headers="col3 col4 col5
> col5">$0.50/day (max=$20)</td>
> </tr>
> <tr>
> <th scope="row">Summit Loans</th>
> <td style="text-align: center;">$0.50/day (max=$20</td>
> <td colspan="2" style="text-align: center;" headers="col3 col4">$0.50/day
> (max=$20)</td>
> <td style="text-align: center;">NA</td>
> <td style="text-align: center;">NA</td>
> </tr>
>
>
>
>
> From: Jeremy Echols < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Accessible table where some data spans multiple columns
> Date: November 13, 2018 at 7:25:55 AM PST
> To: WebAIM Discussion List < <EMAIL REMOVED> >
>
>
> Interesting. I knew about associating multiple headers, but didn't know that was necessary just for colspans. I also didn't really see the table as being confusing, but now that you point that out, it does indeed seem a little difficult to navigate.
>
> Thanks for all the info everybody!
>
>