how to add 'title' attribute to 'copy', 'excel', 'previous' and 'next' buttons for 508 compliance

szhou

I use datatable with 'copy', 'excel', 'print' buttons. How to add 'title' attribute to all buttons (including 'previous', '1', '2', ...'next' buttons of pagination) for 508. Below is my code:

$('#results').DataTable({
dom: 'Bfrtip',
buttons: ['copy', 'csv', 'excel', 'print']
});

Thank you so much in advance!

allan

With the buttons.buttons.titleAttr option.

Allan

szhou

Thanks a lot Allan! It works for 'Copy', 'Print', ... buttons.

Any suggestion to pagination related buttons, such as 'previous', '1', '2', ... 'next'?

allan

They shouldn't need a title attribute since they have plain text in them that is already descriptive. Any screenreader would already just read out the text shown.

Allan

szhou

Got it. Thank you again.

szhou

Good morning Allan,

Can you please instruct me how to add title attribute to 'Search' text field?
Thanks.

allan

I'm not sure why you would since it is implicitly linked with the label for that field. It doesn't seem to make sense to me to need a title there, but perhaps the screen reader you are testing with needs it? What screen reader are you using?

Allan

szhou

Good morning Allan,

The only reason is for 508 compliance. Below sample shows 508 compliant 'Search' label and text field pair:

<label for="search">Search</label>
<input type="text" id="search" title="search" />

Note. First the 'for' attribute of the label must be defined and its value must be the value of the id of text field. Second the text field must be defined 'title' attribute for screen reader.

Is there any way to configure the datatable to make its Search label and text field similar to above sample?

Thanks.

allan

The for attribute only needs to be defined for explicit labels.

The HTML5 specification says (source):

either using the for attribute, or by putting the form control inside the label element itself.

If whatever software you are using for the 508 compliance says that the for attribute is required, that's a bug in that software as the implicit label used by DataTables is perfectly valid and correct HTML for accessibility.

Allan

gregoryhd

I know this is an old topic, but it is still very valid argument. Though technically speaking implicit labels are acceptable, it is highly recommended to use Explicit over Implicit.

"Experience has shown that implicit labeling should be avoided for two reasons. First, implicit labeling is not reliably supported by many screen readers and, in particular, does not work well if explicit labels are simultaneously used anywhere on the same web page. Often, the output can be wildly inaccurate and confusing. Second, if any text separates a label from its associated form element, an implicit label becomes impractical and confusing because the label itself is no longer easily identified with the form element."

https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508-standards/guide-to-the-section-508-standards/web-based-intranet-and-internet-information-and-applications-1194-22

The goal of Section 508 and WCAG is to make websites more accessible and easier to use for all users. Even though technology has changed more than then the rules accessibility, if it is a change that is more of a standard and can improve or strengthen the experience then we should do it, especially those who need to due it which is required by law. Again, technically there is nothing wrong, and for me, my scanning software does not say it is wrong, it does warn against, as does the United States Access Board.

allan

Thanks for pointing me to that - I hadn't seen that before. I've marked this for change in DataTables 2. I'll post back here when that change is committed in.

Allan