Answers

• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  November 2021

  Hi Ray,

  Many thanks for your message! I completely agree with how important accessibility is and we've put a lot of work into DataTables core and other parts of our software to make sure they are accessible.

  SearchPanes is relatively new, so it hasn't received the same amount of attention in that regard. None of us on the team use accessibility enhancing software, so I always hesitate to just bang in some aria labels and call it done! I would much rather have some input from the accessibility community on what we should do to the software to make it actually useable for them, rather than just checking off a few boxes.

  Do you use assistive software on a day to day basis yourself? Any guidance you can give us, or introduce us to those who might give us feedback so we can improve the software, would be very welcome indeed.

  Allan
• Ray.Garza Posts: 5Questions: 1Answers: 0

  November 2021

  Hi Allen,

  I personally do not use assistive software on a regular basis other than adjusting the font size larger. When coding, I do check my work with a combination of Siteimprove (chrome plug in) web scanning and as well as SonarCloud CI pipeline scanning. We also check for proper tabbing through the application and use good descriptions in the aria-labels. Sometimes we will use a screen reader as another check of the descriptions we use in the labels.

  All is referenced to the the w3.org website. I'll go here if I need some code examples or for an understanding of a particular topic. To us, this is the Bible that we need to follow.

  https://www.w3.org/WAI/design-develop/ is also a great website for developers, check it out if you haven't already.

  If there is anything I can do to help, please let me know.

  You can also reach out to my supervisor, Christopher Jasinski at Christopher.Jaszinski@utrgv.edu. He is aware of our accessibility needs on our software that we produce.

  Thanks,

  Ray Garza
  Web Software Engineer
  University of Texas Rio Grande Valley
• pweil Posts: 12Questions: 2Answers: 0

  December 2022

  @Ray.Garza It looks as though all you need to do is add a label (or aria-label) for the input. Very straightforward. At the same time, removing the placeholder would definitely enhance accessibility. While technically "valid", placeholders are notoriously problematic for AT users, and should not be used as a substitute for labels.

  Thanks,

  Peter Weil
  Web Developer
  University of Wisconsin–Madison
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  December 2022

  Hi Peter,

  Many thanks for your feedback on this. Taking this example which has a DOM structure of:

  

  You would suggest adding the aria-label attribute to the input in addition to the placeholder? We actually use the placeholder to show the title for the column that the specific pane is operating on, so dropping it would (ironically) be bad for accessibility for those who aren't using AT.

  Allan
• pweil Posts: 12Questions: 2Answers: 0

  December 2022

  Hi Allan,

  As I tried to explain, placeholders should not be used as substitutes for labels (or label-like purposes).

  To indicate the title of the column the pane is associated with, I suggest using a more semantic element, such as a h2, h3, etc.

  As for the input, I take it that you do not want to visually display a label for design reasons. While label elements are generally preferable, if the visual design does not accommodate one, then aria-label is a suitable substitute. If you use an h2 or h3 as already suggested, then you can use aria-labelledby and reference the id of the hN element. Kill two birds with one stone.

  And drop the placeholder attribute (make that three birds).

  As for why placeholder should be avoided, please see:

  https://html5accessibility.com/stuff/2021/02/14/re-upped-placeholder-the-piss-take-label

  https://www.deque.com/blog/accessible-forms-the-problem-with-placeholders/

  https://www.smashingmagazine.com/2018/06/placeholder-attribute/

  I hope this helps,

  Peter