WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Help needed to integrate aXe webdriverjs into selenium

for

Number of posts in this thread: 3 (In chronological order)

From: Mohith BP
Date: Tue, Nov 13 2018 4:00AM
Subject: Help needed to integrate aXe webdriverjs into selenium
No previous message | Next message →

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: Marcy Sutton
Date: Tue, Nov 13 2018 12:14PM
Subject: Re: Help needed to integrate aXe webdriverjs into selenium
← Previous message | Next message →

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 ADDRESS REMOVED = wrote:
>
> Send WebAIM-Forum mailing list submissions to
> = EMAIL ADDRESS 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 ADDRESS REMOVED =
>
> You can reach the person managing the list at
> = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Accessible table where some data spans multiple columns
> Date: November 13, 2018 at 12:45:34 AM PST
> To: = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
> Date: Mon, Nov 12, 2018 at 2:10 PM
> Subject: [community] Tenon-UI - a11y-oriented React component library
> To: = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> OCAD UNIVERSITY
> 100 McCaul Street, Toronto, Canada, M5T 1W1
> www.ocadu.ca<;http://ocadu.ca/>;
>
> > Inclusive Design Community ( = EMAIL ADDRESS REMOVED = )
> > https://lists.idrc.ocadu.ca/mailman/listinfo/community
>
>
>
>
> From: Mohith BP < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of glen walker
> Sent: Tuesday, November 13, 2018 7:03 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> 415.624.2709 (o)
> www.LevelAccess.com
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Isabel Holdsworth
> Sent: Monday, November 12, 2018 3:41 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>>> 415.624.2709 (o)
>>> www.LevelAccess.com
>>>
>>> -----Original Message-----
>>> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf
>>> Of Sonja Weckenmann
>>> Sent: Friday, November 09, 2018 3:50 AM
>>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>>
>> www.bitvtest.de | www.bik-für-alle.de | www.dias.de
>> Twitter: @bitvtest
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
> > > >
>
> > > >

From: Mohith BP
Date: Tue, Nov 13 2018 10:44PM
Subject: Re: Help needed to integrate aXe webdriverjs into selenium
← Previous message | No next message

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 ADDRESS 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 ADDRESS REMOVED = wrote:
>>
>> Send WebAIM-Forum mailing list submissions to
>> = EMAIL ADDRESS 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 ADDRESS REMOVED =
>>
>> You can reach the person managing the list at
>> = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>> Subject: Re: [WebAIM] Accessible table where some data spans multiple
>> columns
>> Date: November 13, 2018 at 12:45:34 AM PST
>> To: = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>> Date: Mon, Nov 12, 2018 at 2:10 PM
>> Subject: [community] Tenon-UI - a11y-oriented React component library
>> To: = EMAIL ADDRESS REMOVED =
>> < = EMAIL ADDRESS 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>> OCAD UNIVERSITY
>> 100 McCaul Street, Toronto, Canada, M5T 1W1
>> www.ocadu.ca<;http://ocadu.ca/>;
>>
>> >> Inclusive Design Community ( = EMAIL ADDRESS REMOVED = )
>> >> https://lists.idrc.ocadu.ca/mailman/listinfo/community
>>
>>
>>
>>
>> From: Mohith BP < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
>> glen walker
>> Sent: Tuesday, November 13, 2018 7:03 AM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>> 415.624.2709 (o)
>> www.LevelAccess.com
>>
>> -----Original Message-----
>> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
>> Isabel Holdsworth
>> Sent: Monday, November 12, 2018 3:41 AM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>>>> 415.624.2709 (o)
>>>> www.LevelAccess.com
>>>>
>>>> -----Original Message-----
>>>> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf
>>>> Of Sonja Weckenmann
>>>> Sent: Friday, November 09, 2018 3:50 AM
>>>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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
>> >>
>>
>> >> >> >> >
> > > > >