WCAG Accessibility, labels and tooltips...

[Steven Schneider]

Hi folks. SUNY Polytechnic Institute is one of the few (only?) colleges or universities that I know of that has a tiddlywiki file in production! ----- https://sunypoly.edu/contact/offices/provost/provost/spring-2020-office-hours.html

The Web Architect, however, has questioned the accessibility of the document, in particular writing this:

WCAG dictates that any <select> elements (the faculty member select dropdown) must have a label associated with the form control. This can be accomplished by adding an ID attribute to the <select> element and using a descriptive label tag with a "for" attribute referencing the ID of the <select> element (source). Tiddlywiki does not support the use of ID, title, or aria-labelledby attributes in <$select> elements - see more. Because of this, labels cannot be configured by editing the tiddlers through the UI. However, class attributes are supported for <$select> elements, so my solution is to add a class to the <$select> element in the UI and then target this class using a javascript snippet and insert the ID. The JS snippet is below. 

<script>document.getElementsByClassName('faculty-select')[0].setAttribute("id","faculty-select");</script>

But this needs to be added to the html file (the raw wiki code), and can't, as far as I can tell, become something in the wiki itself.

Does anyone have any experience or understanding of this issue? Can't tooltips work sufficiently?

Thanks,

//steve.

 

[Thomas Elmiger]

Hi Steve,

Usually, “A label can be bound to an element either by using the "for" attribute, or by placing the element inside the <label> element” according to
https://www.w3schools.com/tags/tag_label.asp

So something like

<label>Explanation of what can be selected
<$select... >...</$select>
</label>

should be good enough?!

All the best,
Thomas