Issue1047 wcag more semantic headings #1061
Conversation
…ue1047-wcag-more-semantic-headings
…ue1047-wcag-more-semantic-headings
…g headings to sidebar
…et missing translations
…ue1047-wcag-more-semantic-headings
…dings in alphabetical listing
Codecov Report
@@ Coverage Diff @@
## master #1061 +/- ##
=========================================
Coverage 60.32% 60.32%
Complexity 1592 1592
=========================================
Files 32 32
Lines 4429 4429
=========================================
Hits 2672 2672
Misses 1757 1757 Continue to review full report at Codecov.
|
| @@ -97,15 +97,32 @@ $(function() { // DOCUMENT READY | |||
| }); | |||
| }); | |||
|
|
|||
| var active_tab = $('li.active').attr('id'); | |||
There was a problem hiding this comment.
This (from the next few lines onwards) seems to create a different functionality for group and hierarchy tabs when navigating the tabs with a screen reader on.
When clicking a tab, the screen reader prompts the helper text only for the alphabetical listing and for the list of new concepts. The helper text is not updated when clicking the group listing or the hierarchy listing. Tested on Firefox+orca.
There was a problem hiding this comment.
That is a bit strange. I am unable to reproduce such behavior - maybe I do not have the right tools on my hand (testing everything with Windows Narrator + Edge). The reason why those two are handled differently is based on the fact that their contents are generated on behalf of a jsTree object, which complicates things. To fix some issues regarding this one should do a more thoroughly overhaul of that code base.
But please, as I am unable to reproduce this, I am asking you to subsequently raising on issue on this matter as I am a bit forced to merge this PR anyhow now.
| @@ -21,7 +21,7 @@ | |||
| <a class="prefLabel conceptlabel" href="{% if "isothes:ConceptGroup" in concept.type %}{{ concept.uri | link_url(concept.vocab, request.lang, 'page') }}{% elseif concept.exvocab is defined%}{{ concept.uri | link_url(concept.exvocab,concept.contentLang) }}{% else %}{{ concept.uri | link_url(concept.vocab,request.lang,'page',concept.contentLang) }}{% endif %}">{{ concept.label(request.contentLang) }}</a>{% if explicit_langcodes or request.queryparam('anylang') %}<span class="versal"> ({{ concept.contentLang }})</span>{% endif %} | |||
| {% endif %} | |||
| {% endspaceless %} | |||
| {% if concept.type == 'skosext:DeprecatedConcept' %}<h2 class="deprecated-alert">{% trans %}deprecated{% endtrans %}</h2>{% endif %} | |||
| {%- if concept.type == 'skosext:DeprecatedConcept' %}<span class="versal deprecated-alert">{% trans %}deprecated{% endtrans %}</span>{% endif -%} | |||
There was a problem hiding this comment.
Is this intentional? I found it strange that the alert heading was downgraded to span-stag.
There was a problem hiding this comment.
Yes, it was intentional as I wanted them to follow the correct heading structure (that is, no h2 inside h3 for example). There might be cases where this should be reverted though, I suggest raising issues as one encounters them. Anyway, the heading level should be assessed with care.
| <li id="limit"><p>{% trans "Search options" %}</p></li> | ||
| {% endif %} | ||
| </ul> | ||
| </div> | ||
| {% if letters %} | ||
| <h4 class="sr-only">{% trans "Choose alphabetical listing letter" %}</h4> |
There was a problem hiding this comment.
As a side note - it is a shame that the screen reader annotations like these only work when traversing the headers on the page with a H-key, but not when traversing clickable items with a Tab-key. However, I really think this is an issue with the screen reader, not with the Skosmos side bar's structure.
There was a problem hiding this comment.
Yes. There are ways to make this work, e.g., using aria-labelledBy or similar, I think. One solution could be changing the element structure, too. I am not an expert on this subject so I would like to learn more of the best practices how to implement such features. One thing to consider is compatibility - ARIAs may not be fully supported by every reader?
|
Kudos, SonarCloud Quality Gate passed!
|
|
Even though there are some concerns (rightfully) raised by @joelit (btw thank you for a very throughout testing!) I feel like the easiest and especially fastest way to get things on the right tracks now is to merge this and file new issues on any defects pointed out above. |
This PR adds some accessibility headings in order to address issues #1036 #1037 #1038 #1039 #1047
There are still some things left to be done. For example, this PR is missing translations for some translatable strings that were added (and some of them require a bit of tweaking anyway) and there could be better accessibility advises in many places, e.g., converting every
->(arrows) into speech.Additionally, fixes some small issues that were introduced by #1055