TiddlyWiki and Accessibility

137 views
Skip to first unread message

Steven Schneider

unread,
May 8, 2020, 7:16:15 PM5/8/20
to TiddlyWiki
Hi Folks,

My university is about to launch a summer program with courses focused on the pandemic. The primary marketing/explanation materials are built in TiddlyWiki. The soon-to-be-announced link is here: https://pvfiles.sunypoly.edu/pandemic-studies.html

Our web architect identified a few issues to be resolved "in order to meet the WCAG 2.0 success criteria," and I was wondering if anyone has encountered these issues, or has any idea what is being discussed?

Here is what I've received:


Outlined below are the remaining errors being thrown by the WAVE tool. You can use the WAVE Chrome extension to replicate these errors. 
1. Document language tag
More information - https://www.w3.org/WAI/WCAG21/Understanding/language-of-page.html
Please implement a "lang" attribute within the <html> tag. The following line will be sufficient: 
<html lang="en">  
2. Empty buttons
The button tags wrapped around the SVGs for the mobile menu hamburger icons don't contain any text descriptions indicating the function of the button. This can be resolved by adding an "aria-label" attribute to the button tags. The two instances being flagged are 
  • nav.tc-menubar -> .tc-menubar-wide -> .tc-menubar-list -> .tc-menubar-narrow -> <button class>
  • nav.tc-menubar -> .tc-menubar-narrow-> .tc-menubar-list -> .tc-menubar-narrow -> <button class>  
3. Form labels
Form inputs must be properly labelled. This can be accomplished by wrapping the form labels in a <label> tag with a "for" attribute referencing the ID of the input element (Ex: <label for="select-test">This is a label</label><select id="select-test">...). This also entails that an ID attribute can be added to the control/input element. However, the label tag and its for attribute, as well as the ID attribute for the select tiddler, are not rendered when the tiddler is saved. The PickArtifactFirst and PickPerspectiveFirst tiddlers are example instances where this error is being thrown. 
An alternative method is to enable the "aria-label" attribute for the select elements.
Note: In Tiddlywiki, the solution was to add a title attribute to form control/input elements. We would like to avoid doing this if possible, as it is not recommended by the W3C - https://www.w3.org/WAI/tutorials/forms/labels/#using-the-title-attribute. 

Any help, much appreciated!

And, of course, any thoughts or suggestions on the implementation of this wiki for this app would be welcome. It's pretty basic, making use of xlsx import tool and a bunch of templates. Last step in next day is to write a link to a pre-filled google form or wordpress form as the output.

Thanks!

//steve.



A Gloom

unread,
May 10, 2020, 12:32:48 AM5/10/20
to TiddlyWiki
Cross posting this to TWDev Group

A Gloom

unread,
May 13, 2020, 10:01:01 AM5/13/20
to TiddlyWiki

Cross posting this to TWDev Group


Because I believe this involves core programming and if I'm understanding correctly, I believe this could hinder some organizations from using TW if they're required to follow accessibility standards-- is this something that would stop your organization from using TW?

You could also ask at


but i believe the Dev group would get the best responses, perhaps even creating Github ussues

Reply all
Reply to author
Forward
0 new messages