Skip to content functionality

[joelit]

When browsing the Skosmos pages with either vocabulary list, vocabulary info, search results or concept info, the browser focus should go first to the skip to content -link in:

Skosmos/view/light.twig

Line 23 in d633b60

<div id="skiptocontent">

This does not happen in practise, as the focus is moved to the search field first. The culprit seems to be docready.js, which alters the focus in various ways, e.g.

Skosmos/resource/js/docready.js

Line 1109 in d633b60

if ($('.search-result-listing').length === 0) { $("#search-field").focus(); }

This issue was split from #1036 #1037 #1038 & #1039

[osma]

Related discussion on SO: https://stackoverflow.com/questions/2180645/is-automatically-assigning-focus-bad-for-accessibility

[osma]

The more modern way to implement autofocus would be to use the autofocus attribute in HTML5 instead of JavaScript. But regardless of the autofocus implementation, it causes accessibility concerns.

My current understanding is that autofocus should be used very sparingly - only on pages whose primary purpose is text input (e.g. Google homepage style search, login forms, contact forms).

I propose dropping the autofocus JS code from the docready.js script in Skosmos and, if necessary, using the autofocus attribute on pages that really deserve it - I think only the contact form qualifies.

Some more background reading:

• https://www.brucelawson.co.uk/2009/the-accessibility-of-html-5-autofocus/
• https://www.samanthaming.com/tidbits/42-html5-autofocus/#accessibility-concerns
• warning of usability and accessibility should be added to section of autofocus attribute whatwg/html#4575

[joelit]

Thanks, I'll give it a read-through!

I was thinking of handling the focus order through HTML, as I don't see a reason why the tabindex wouldn't be enough for the search field.