HTML Validity and Accessibilty

HTML Validity and Accessibilty

tangerinetangerine Posts: 3,342Questions: 35Answers: 394

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>');

Replies

  • allanallan Posts: 61,449Questions: 1Answers: 10,055 Site admin

    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

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394
    edited January 2021

    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?

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394
  • allanallan Posts: 61,449Questions: 1Answers: 10,055 Site admin

    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

This discussion has been closed.