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!
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of glen walker
> Sent: Tuesday, November 13, 2018 7:03 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Accessible table where some data spans multiple columns
>
> 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: glen walker < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Accessible table where some data spans multiple columns
> Date: November 13, 2018 at 8:22:16 AM PST
> To: WebAIM Discussion List < <EMAIL REMOVED> >
>
>
> Just to be clear, having a row header or column header span multiple cells
> (eg, <th scope="row" rowspan=3>) works very well, but that's because all
> the data cells are individual cells. You just have multi-level headers.
>
> What doesn't work as well is having single row headers or column headers
> (ie, no spans) but having a data cell span several cells. That's the
> scenario you have and is fixed by using the ID and HEADER attributes.
>
>
> On Tue, Nov 13, 2018 at 8:26 AM Jeremy Echols < <EMAIL REMOVED> > wrote:
>
>> 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.
>>
>>
>
>
>
>
> From: Bryan Garaventa < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Accessible dragon drop component? – some questions
> Date: November 13, 2018 at 9:21:16 AM PST
> To: WebAIM Discussion List < <EMAIL REMOVED> >
>
>
> If done intuitively, it shouldn't present any difficulties.
>
> This situation matches the guidance at
> http://whatsock.com/training/#hd12
> Which was written in colaboration with various members of the ARIA Working Group when it was written.
>
> Some parts of the tutorial are a bit dated now, but when ARIA 1.1 becomes spec I'll be revamping all of this to conform with the updated information.
>
> All the best,
> Bryan
>
>
> Bryan Garaventa
> Principle Accessibility Architect
> Level Access, Inc.
> <EMAIL REMOVED>
> 415.624.2709 (o)
> www.LevelAccess.com
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Isabel Holdsworth
> Sent: Monday, November 12, 2018 3:41 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Accessible dragon drop component? – some questions
>
> Ah, but what if there's more than one drop zone? We had a scenario just last week where there were I think 5 possible drop zones. The only way I could think to make that one work was by presenting a menu of possible drop zones when the draggable item was activated. This works well using a keyboard, but I wonder if using such a different paradigm could make things confusing for sighted keyboard users.
>
> On 09/11/2018, Sonja Weckenmann < <EMAIL REMOVED> > wrote:
>> Ok, thanks to all of you for your support!
>>
>> All the best,
>> Sonja
>>
>> Am 09.11.2018 um 17:35 schrieb Bryan Garaventa:
>>> Hi,
>>> The following article may be of help, it identifies common concerns
>>> and best practices regarding accessible drag and drop.
>>> https://www.linkedin.com/pulse/important-considerations-regarding-acc
>>> essible-drag-drop-garaventa/
>>>
>>> All the best,
>>> Bryan
>>>
>>>
>>>
>>> Bryan Garaventa
>>> Principle Accessibility Architect
>>> Level Access, Inc.
>>> <EMAIL REMOVED>
>>> 415.624.2709 (o)
>>> www.LevelAccess.com
>>>
>>> -----Original Message-----
>>> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf
>>> Of Sonja Weckenmann
>>> Sent: Friday, November 09, 2018 3:50 AM
>>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>>> Subject: [WebAIM] Accessible dragon drop component? – some questions
>>>
>>> Hi,
>>> I am looking for an accessible dragon drop example/implementation to
>>> recommend. I have come across this one:
>>> https://schne324.github.io/dragon-drop/demo/
>>>
>>> I think the first one using the "reorder"-button works quite well,
>>> but I would prefer if the reorder button would work with space and
>>> enter, do you agree? (In this example for FF only Enter works).
>>>
>>> The grab-buttons are all aria-describedby a very long help text. This
>>> gets announced after every movement. An aria-label or aria-labelledby
>>> set on the ul wouldn’t be announce, would it?
>>>
>>> A also would prefer if the screen reader would be automatically set
>>> in focus mode so that the message (and action) "Ensure screen reader
>>> is in focus mode" would be superfluous Would it be a good idea to
>>> recommend using role="application"? What would be the right place?
>>> The section-Element? To an additional div?
>>>
>>> I would appreciate any help or best practice recommendations.
>>> Thanks, Sonja
>>>
>>>
>>
>> --
>>
>> BITV-Test | BIK für Alle
>> DIAS GmbH
>> Haubachstraße 72, D - 22765 Hamburg
>>
>> Tel: +49 40 43 18 75 18
>> Fax: +49 40 43 18 75 34
>> E-Mail: <EMAIL REMOVED>
>>
>> www.bitvtest.de | www.bik-für-alle.de | www.dias.de
>> Twitter: @bitvtest
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
> > > >
>
> > > >