<$select> and Web accessibility

[st...@sunypoly.edu]

Hi, 

Would anyone know how to make the <$select> generate html that would meet standard Web accessibility requirements? 

Thanks,

//steve.

[TonyM]

Steve,

I do not know, but looking at an accessible version of the html <select> tag may provide a start.

Tony

[st...@sunypoly.edu]

OK, that would make sense. I think it might be relatively simple; just requires a tooltip perhaps. 

Would clonining https://tiddlywiki.com/#%24%3A%2Fcore%2Fmodules%2Fwidgets%2Fselect.js and then modifying it so that <$select-accessible> accepted a tooltip? Something like  

<$select-accessible tooltip="Here is the tooltip"/>

or something like that would work?

(Naturally, I have absolutely no idea how to do this...)

//steve.

[TonyM]

steve,

If accessibility primarily needs a tooltip

• Perhaps using or upgrading the select widget to also use the following may be the best path
• https://tiddlywiki.com/#tv-wikilink-tooltip%20Variable

Alternatively what about placing along side your select widget an empty button with a tooltip?

Regards

Tony

[st...@sunypoly.edu]

Tony wrote: Alternatively what about placing along side your select widget an empty button with a tooltip?

Tony, I think you've got it!

Paste this in a new tiddler (for example, at TiddlyWiki.com)

<$button tooltip="This select widget displays a list of the tags in this wiki">

<$select  tiddler=<<qualify 'select-demo'>> default='HelloThere'>

<$list filter='[all[shadows+tiddlers]tags[]sort[title]]'>

<option value=<<currentTiddler>>><$view field='title'/></option>

</$list>

</$select>

</$button>

• Does anyone use TiddlyWiki with reader software that could tell us if this works?
• Has anyone run a TiddlyWiki through any Web Accessibility tests (or know how?), to see if this feature would be considered accessible?

Thanks!

//steve.

[Jeremy Ruston]

I think we really need to add a tooltip attribute to the <$select> widget. I'll look at it as soon as I can (unless any other developers want to have a go at a PR?),

Best wishes

Jeremy

--

Jeremy Ruston

jer...@jermolene.com

https://jermolene.com

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/49ae200f-15a3-454c-87e7-574f4615dfa3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Thomas Elmiger]

Hi all,

My proposal would be to wrap the select in a visible label-tag:

<label>This select widget displays a list of the tags in this wiki

<$select  tiddler=<<qualify 'select-demo'>> default='HelloThere'>
<$list filter='[all[shadows+tiddlers]tags[]sort[title]]'>
<option value=<<currentTiddler>>><$view field='title'/></option>
</$list>
</$select>

</label>

Accessibility concerns:

• Why would you hide important information from sighted users?
• Accessibility of tooltips for mobile users?

This seems to be a standard conformant solution: https://stackoverflow.com/questions/10129696/html-can-i-use-label-element-with-select

Demo: https://telmiger.glitch.me/#Label%20for%20select

All the best,

Thomas

[Jeremy Ruston]

I think we really need to add a tooltip attribute to the <$select> widget. I'll look at it as soon as I can (unless any other developers want to have a go at a PR?),

I’ve added the “tooltip” attribute to the select widget:

https://github.com/Jermolene/TiddlyWiki5/commit/477c41f84304ed83245c87068dba3695a5053d62

The update will be available at https://tiddlywiki.com/prerelease in 6 or 7 minutes,

Best wishes

Jeremy.

[st...@sunypoly.edu]

Thanks, Jeremy. Will test and let you know, but it works on the pre-release site. I update our wiki and send it off to be inspected :) //steve.