WAI-ARIA for DataTables (jQuery plug-in)
theallan
I'm the author of an HTML table "enhancing" plug-in for jQuery called
DataTables ( http://datatables.net ). I'd really like to increase the
accessibility of the tables generated by DataTables and its various
controls using ARIA, but as I am completely new to this particular
field, I was wondering if anyone would be able and willing to give me
some guidance on how ARIA should be applied?
One of the things I don't want to do just blindly add attributes and
end up with something that that would hinder accessibility rather than
help it! For example should every TD element in the table be given a
'gridcell' role, or is this considered superfluous, and that would
only be needed when using DIVs to make a grid?
Many thanks,
Allan
david bolter
I briefly inspected the accessible tree Firefox builds for the example table on the front page of your website and it looks pretty good since you are using native HTML well. You don't need to add ARIA semantics redundantly in this case since the table structural elements already have the semantics implicitly.
You are correct that divs and the like would require ARIA.
I'm afraid that's all I check into for now, but I encourage you to treat learning ARIA and accessibility like you would treat learning CSS or cooking. You'll need to try it out to make sure it is working as expected. Here is a handy page for helping bootstrap testing with NVDA: http://webaim.org/articles/nvda/
Hope this helps.
Cheers,
D
--
You received this message because you are subscribed to the Google Groups "Free ARIA Community" group.
To post to this group, send email to free...@googlegroups.com.
To unsubscribe from this group, send email to free-aria+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/free-aria?hl=en.
david bolter
(Vincent, I sent you an invite to join the group)
Cheers,
David
Can't post to the group for some reason, but my comments below.Have to disagree with you David. Allan, you mentioned that you'd like to increase the accessibility using ARIA. Before looking at ARIA you want to make sure accessibility sans ARIA is good. All your controls don't seem to be tab navigable and the state is not identified. That is, you can't sort any of the columns unless you have a mouse.
How do I know if I click on the sort buttons, it will sort ascending, descending, alphabetically, etc.?
The Show (number) entries drop-down is tab navigable but you must click enter after selecting a number which is not very intuitive.
The pagination could be in an un-ordered list.
Some ARIA comments
When you start typing in the search field you have no idea what changes are going on down below.
I noticed that that sort state is identified in the lower left hand corner. This might be a good place to use role=alert or role=status. Read up on those two and determine what is best for the application.
It looks like table can do a lot of stuff, so I'm not sure what ARIA would make sense when/where. I would start looking at http://www.w3.org/TR/wai-aria/roles#grid and get more familiar so you can start experimenting and see what if anything makes sense. I wrote a jQuery sortable table plugin a while back that had accessibility built in. Will look for it tonight and let you know if I find it.
--
WebHipster Interactive, ltd.
Vincent Young - Principal
742 N SweetzerWest Hollywood, CA 90069
p: 614.607.3400
f: 339-674-3400
e: vyo...@webhipster.com
w: http://www.webhipster.com
--
WebHipster Interactive, ltd.
Vincent Young - Principal
742 N SweetzerWest Hollywood, CA 90069
p: 614.607.3400
f: 339-674-3400
e: vyo...@webhipster.com
w: http://www.webhipster.com
theallan
Thanks very much for your replies! I really appreciate it.
I've put in a couple of modifications to DataTables to try and
increase its basic keyboard accessibility, without any ARIA attributes
yet, as Vincent suggested. You can see the result here:
http://datatables.net/dev/accessibility/DataTables/examples/basic_init/zero_config.html
. Sorting and paging can now be performed using just the keyboard,
although I don't have any tags to say what actions will be performed
when activated. Would that just be a title attributes, or does that
then fall into ARIA's "described-by" or a role attribute?
> The Show (number) entries drop-down is tab navigable but you must click enter after selecting a number which is not very intuitive.
The behaviour appears to be slightly different in Firefox and Webkit.
In Webkit pressing the arrow keys will "open" the select menu,
resulting in a view much like if you clicked on it. Then to select an
item use the arrow keys and hit enter. In Firefox, it won't open the
drop down list, but also it won't fire a 'change' event until the
element loses focus or the enter key is pressed. How do you recommend
a select list would normally be dealt with?
> The pagination could be in an un-ordered list.
I've just put them into A tags for the actual 'buttons', but certainly
they could be put into an unordered list - my only concern would be
that this would require everyone updating to this latest DataTables to
include additional CSS (I'm trying to avoid breaking older installs at
the moment...).
Related to this, I can almost guarantee that if I release this, one of
the first questions would be "how do I remove the focus border". I
know that you can set outline:none, but that also impacts
accessibility since you now don't know what is focused. Is there a
recommended way to deal with this as well?
> I wrote a jQuery sortable table plugin a while back that had accessibility built in. Will look for it tonight and let you know if I find it.
That sounds fantastic - thanks very much!
Regards,
Allan
> >>http://www.w3.org/TR/wai-aria/roles#gridand get more familiar so you
> >> can start experimenting and see what if anything makes sense. I wrote a
> >> jQuery sortable table plugin a while back that had accessibility built in.
> >> Will look for it tonight and let you know if I find it.
>
> >> On Tue, Dec 6, 2011 at 1:13 PM, david bolter <david.bol...@gmail.com>wrote:
>
> >>> Hi Allan,
>
> >>> I briefly inspected the accessible tree Firefox builds for the example
> >>> table on the front page of your website and it looks pretty good since you
> >>> are using native HTML well. You don't need to add ARIA semantics
> >>> redundantly in this case since the table structural elements already have
> >>> the semantics implicitly.
>
> >>> You are correct that divs and the like would require ARIA.
>
> >>> I'm afraid that's all I check into for now, but I encourage you to treat
> >>> learning ARIA and accessibility like you would treat learning CSS or
> >>> cooking. You'll need to try it out to make sure it is working as expected.
> >>> Here is a handy page for helping bootstrap testing with NVDA:
> >>>http://webaim.org/articles/nvda/
>
> >>> Hope this helps.
>
> >>> Cheers,
> >>> D
>
> >>> On Tue, Dec 6, 2011 at 3:27 PM, theallan <allan.jard...@gmail.com>wrote:
>
> >>>> Hello all,
>
> >>>> I'm the author of an HTML table "enhancing" plug-in for jQuery called
> >>>> DataTables (http://datatables.net). I'd really like to increase the
Scott González
> The pagination could be in an un-ordered list.I've just put them into A tags for the actual 'buttons', but certainly
they could be put into an unordered list - my only concern would be
that this would require everyone updating to this latest DataTables to
include additional CSS (I'm trying to avoid breaking older installs at
the moment...).
Related to this, I can almost guarantee that if I release this, one of
the first questions would be "how do I remove the focus border". I
know that you can set outline:none, but that also impacts
accessibility since you now don't know what is focused. Is there a
recommended way to deal with this as well?
It's ok to turn off the native focus ring in your stylesheet as long as you're careful to implement some other styling that provides the same feedback. You'll also want to consider supporting high contrast mode if you go that route.
Vinnie Young
<th class="ui-state-default" rowspan="1" colspan="1" style="width: 176px;">
<div class="DataTables_sort_wrapper" tabindex="0" role="button">Rendering engine <span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"><img src="images/ui-icons_888888_256x240.png" alt="Sorted - Sort Ascending" title="Sorted - Sort Ascending" /></span>
</div>
</th>
So, the div has the tabindex. This way we can apply role=button and assistive technology will convey it as a button. If the tabindex is on the TH and we put role=button we might not retain the assistive properties of a TH.
For the image I am using this technique:
http://css-tricks.com/examples/CSSClip/ or http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp
The reason is because when you turn on high-contrast mode in windows, background images are hidden. The problem here is that those directional images convey meaning here; letting the user know which and what direction a column is sorted.
ALT is added to the image which let's screen readers know how a column will be sorted and the TITLE is added for visual users. Both obviously change as you sort.
Column that are not sorted could have ALT and TITLE value of... Not Sorted - Sort Whatever?
These seems to make sense to me and where I would probably start off and then add more ARIA from here.
Other suggestions welcome.
--
Vinnie Young
<table role="grid">
<tr role="row">
<th class="ui-state-default" tabindex="0" role="columnheader" aria-describedby="rendering-engine-button">
<div class="DataTables_sort_wrapper">Rendering engine
<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n">
</span>
</div>
</th>
</tr>
</table>
Let's get some suggestions going.
James Nurthen
<tr>
<th class="ui-state-default" tabindex="0" scope="col" aria-describedby="rendering-engine-button" abbr="Rendering engine">
<div class="DataTables_sort_wrapper">Rendering engine
<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n">
</span>
</div>
</th>
</tr>
</table>
Ramón Corominas
Vinnie Young
I don't like using abbr for this purpose because it goes against the spec: http://www.w3.org/TR/html4/struct/tables.html#adef-abbr
I'm not getting the repeating. What browser/at and versions are you using?
Vinnie Young
James Nurthen
James Nurthen
columnheader was added so that when focusing the header "columnheader" is announced. I guess this is a bad practice? The role="row" was added because it is required when using "columnheader" and I was just messing around with role="grid". Can others please confirm this is a bad idea.
grid is an interactive control which contains cells of tabular data arranged in rows and columns, like a table."Vinnie Young
OK, final stab at this:
<table role="grid">
<tr role="row">
<div class="DataTables_sort_wrapper"><span id="rendering-engine">Rendering engine</span>
<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n">
</span>
</div>
</th>
</tr>
</table>
theallan
Based on this, and my (limited) knowledge of ARIA, I've made a number
of modifications to DataTables to introduce various new attributes. I
wonder if I might be able to get some feedback about if I've taken the
correct approach with the various components:
http://datatables.net/dev/accessibility/DataTables/examples/basic_init/zero_config.html
.
What I've done is to:
- Ensure that each of the table controls have has a "aria-controls"
attribute pointing at the table
- The table itself is described by the information element at the
bottom left of the table
- Assigned a role of "grid" to the whole component (I know there was
some discussion before about if 'grid' is appropriate in this case -
the spec says "A grid is an interactive control which contains cells
of tabular data arranged in rows and columns", which seems to fit with
DataTables).
- Pagination buttons have been assigned as a button role and added
in text to say what they do
- The headers have aria-sort (as required) and aria-label attributes
What do you all think?
Many thanks,
Allan
On Dec 7, 11:57 pm, Vinnie Young <vinnieyou...@gmail.com> wrote:
> Sorry about the abbr, forgot about how the image in the cell would get
> read! Using these roles do give context for screen reader users when
> focusing these elements. The spec also states: Authors *MAY* make cells
> > On Wed, Dec 7, 2011 at 14:19, Vinnie Young <vinnieyou...@gmail.com> wrote:
>
> >> columnheader was added so that when focusing the header "columnheader" is
> >> announced. I guess this is a bad practice? The role="row" was added
> >> because it is required when using "columnheader" and I was just messing
> >> around with role="grid". Can others please confirm this is a bad idea.
>
> > role of grid is defined in aria as
> > "A grid is an interactive control which contains cells of tabular data
> > arranged in rows and columns, like a table."
> > Only the header part here is interactive.
>
> > Further in the grid definition
> > "To be keyboard accessible<http://www.w3.org/TR/wai-aria/terms#def_keyboard_accessible>,
> > authors *SHOULD* manage focus of descendants for all instances of this
> > role <http://www.w3.org/TR/wai-aria/terms#def_role>, as described in Managing
> > Focus <http://www.w3.org/TR/wai-aria/usage#managingfocus>."
> >>> Seehttps://www.w3.org/Bugs/Public/show_bug.cgi?id=13614
>
> >>> Regards,
> >>> James
>
> >>> On Wed, Dec 7, 2011 at 12:57, Vinnie Young <vinnieyou...@gmail.com>wrote:
>
> >>>> So, did some testing. Maybe the following makes more sense:
>
> >>>> <table role="grid">
> >>>> <tr role="row">
> >>>> <th class="ui-state-default" tabindex="0" role="columnheader"
> >>>> aria-describedby="rendering-engine-button">
> >>>> <div class="DataTables_sort_wrapper">Rendering engine
>
> >>>> <span class="DataTables_sort_icon css_right ui-icon
> >>>> ui-icon-triangle-1-n">
> >>>> <img id="rendering-engine-button" src="
> >>>>http://a.fsdn.com/sd/topics/google_64.png" alt="Currently Sorted
> >>>> – Click to Sort Ascending" title="Currently Sorted - Click to Sort
> >>>> Ascending" />
> >>>> </span>
> >>>> </div>
> >>>> </th>
> >>>> </tr>
> >>>> </table>
>
> >>>> Let's get some suggestions going.
>
> >>>> On Wed, Dec 7, 2011 at 11:00 AM, Vinnie Young <vinnieyou...@gmail.com>wrote:
>
> >>>>> Down arrow on drop down is OK in Webkit. Title text is usually not
> >>>>> read by screen readers, but good visual cues for sighted users. A possible
> >>>>> option for the table headers that are sortable:
>
> >>>>> <th class="ui-state-default" rowspan="1" colspan="1" style="width:
> >>>>> 176px;">
> >>>>> <div class="DataTables_sort_wrapper" tabindex="0"
> >>>>> role="button">Rendering engine <span class="DataTables_sort_icon css_right
> >>>>> ui-icon ui-icon-triangle-1-n"><img src="images/ui-icons_888888_256x240.png"
> >>>>> alt="Sorted - Sort Ascending" title="Sorted - Sort Ascending" /></span>
> >>>>> </div>
> >>>>> </th>
>
> >>>>> So, the div has the tabindex. This way we can apply role=button and
> >>>>> assistive technology will convey it as a button. If the tabindex is on the
> >>>>> TH and we put role=button we might not retain the assistive properties of a
> >>>>> TH.
>
> >>>>> For the image I am using this technique:
> >>>>>http://css-tricks.com/examples/CSSClip/or
> >>>>>http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replac...
>
> >>>>> The reason is because when you turn on high-contrast mode in windows,
> >>>>> background images are hidden. The problem here is that those directional
> >>>>> images convey meaning here; letting the user know which and what direction
> >>>>> a column is sorted.
>
> >>>>> ALT is added to the image which let's screen readers know how a column
> >>>>> will be sorted and the TITLE is added for visual users. Both obviously
> >>>>> change as you sort.
>
> >>>>> Column that are not sorted could have ALT and TITLE value of... Not
> >>>>> Sorted - Sort Whatever?
>
> >>>>> These seems to make sense to me and where I would probably start off
> >>>>> and then add more ARIA from here.
>
> >>>>> Other suggestions welcome.
>
> >>>>> 2011/12/7 Scott González <scott.gonza...@gmail.com>
Vinnie Young
Just be aware, some older assistive technology will not understand aria, but if you're OK with that things like aria-sort="ascending" are a great add. The absolute best thing you can do is to test this in a screen reader. Turn off your monitor, listen to what comes out, and determine if you understand what is going on. I would suggest starting off with the latest stable NVDA and Firefox. It is difficult to test for accessibility without testing with the latest stable JAWS and IE. Each screen reader has documentation on navigating.
Couple notes:
I know ARIA is a bit beastly, but if you read it closely you will start to get it. For instance, you can't use role=columnheader without using something like role=row and you can't use role=row without using something like role=grid.
<tbody aria-live="polite" aria-relevant="all"> aria-live and aria-relevant will be effective when used with a role such as alert.
- role=alert -> when stuff inside this element changes notify user
- aria-live=polite -> tell them something changed only after you have finished speaking whatever you are currently speaking
- aria-relevant -> If ELEMENTS or TEXT CHANGES, let em' know.
<tbody aria-live="polite" aria-relevant="all" role="alert">
- So, this is something you'd really want to test... lots would start getting read when the data is sorted.
aria-label="Activate to sort column" - You're going to find that this is all that gets read and what is really important is the header text gets read. Also, a user is not just sorting a column they are sorting it in a particular way. Go ahead and let them know. It's know an extra word, i.e. ascending, descending, etc.
First experience with ARIA and you're off to a good start. This isn't an easy or well defined example, so keep at it!
theallan
I've made a couple of changes based on your suggestions:
1. The TR elements in the header will now all get role=row - to allow
the correct nesting of the TH's columnheader role. The whole lot is
within a DIV with role=grid, so I think this works.
2. I've added role="alert" as you suggested, and equally as you noted,
there are no shortage of updates when you start manipulating the
table! If I remove this, how do you actually access the table with a
screenreader? I couldn't figure out how to do that - would a tabindex
on the table element itself be useful rather than an alert role? I had
assumed that the aria-controls attribute might help, but I don't see
that actually doing anything in the screen readers I've been trying
(Jaws, NVDA, VoiceOver and ChromeVox).
3. I've made the column headers more relevant to describe what an
action on them will cause the table to do (i.e. the next sorting type)
and also include the column title. The reason I hadn't included the
column title initially was that VoiceOver and ChromeVox which I had
been testing with both read the column header - didn't spot that Jaws
doesn't do that! I tell you what though, I thought working with the
differences between browsers with CSS was hard, but this is something
else...!
The update is available in the same place should yourself or anyone
else be willing to provide some further feedback on how it might be
improved further:
http://datatables.net/dev/accessibility/DataTables/examples/basic_init/zero_config.html
.
Regards,
Allan
> >http://datatables.net/dev/accessibility/DataTables/examples/basic_ini...
> ...
>
> read more »