WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Help needed to integrate aXe webdriverjs into selenium

for

From: Mohith BP
Date: Nov 13, 2018 10:44PM


Hi Marcy Sutton,

Thank you for the response.
Will check out those resources and get connected in Gitter channel.

Thanks & Regards,
Mohith B. P.


On 11/14/18, Marcy Sutton < <EMAIL REMOVED> > wrote:
> 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>
>> >> >> at http://webaim.org/discussion/archives
>> >>
>>
>>
>>
>> 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
>>> >>>
>> >> >> at http://webaim.org/discussion/archives
>> >>
>>
>> >> >> >> >
> > > > >