HTML Validity and Accessibilty

tangerine

The Individual Column Filters (text) example has this:

$(this).html( '<input type="text" placeholder="Search '+title+'" />' );

I suggest it needs to add this:

$(this).html('<label for="'+ title + "</label>');

allan

It would need a bit more than that I think - the for attribute needs to point at an input element's ID, which the input doesn't have here.

That said, does a placeholder not provide the same context as what a label would in this case? I'm not familiar enough with screenreaders to know what the difference is.

Allan

tangerine

Yep, sorry, I forgot to add the input Id.
I was actually running an accessibility tester across a page, and it announced "no labels for form input" which prompted my post. I haven't got to screenreaders yet, so not sure what effect placeholders have.

I had second thoughts after posting anyway, because it raises a debatable point: should it be up to a js developer to cross the t's and dot the i's for HTML accessibilty?

tangerine

SO reference for anyone interested:
https://stackoverflow.com/questions/9157867/placeholder-vs-label-for-input-in-html5

allan

Nice link - thanks! The SO thread links to this page which suggests to me that a placeholder with no label is going to be okay.

If anyone with experience using screenreaders finds this thread, your input here would be most welcome!

should it be up to a js developer to cross the t's and dot the i's for HTML accessibilty?

Good question - my line of thought is that DataTables should make the table and all components it adds to the table accessible. That way the JS dev only needs to worry about what they are putting on top or alongside DataTables.

Allan