[WCAG] Accessible class for hiding important text

Feature requests
1

1) What is your original issue/pain point you want to solve?

Screenreaders need label text for all form elements.

2) Which are one or two concrete situations where this problem hurts the most?

The search box needs a label, and for that label to be hidden

3) Why is it not solvable with the Zammad standard?

Because it is missing, and the class that is already there hides from screenreaders aswell as visually.

4) What is your expectation/what do you want to achieve?

There is no class to make things hidden (for example, there should be a label on the search form, but there isn’t. We have added one locally, and it then needs to be hiddent from display, but still available for screen readers).

FYI: display:none makes a thing unavailable to assistive tech whereas this will only hide it visually.

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

diff --git a/app/assets/javascripts/app/views/navigation.jst.eco b/app/assets/javascripts/app/views/navigation.jst.eco
index 0ccebcea8..270027c88 100644
--- a/app/assets/javascripts/app/views/navigation.jst.eco
+++ b/app/assets/javascripts/app/views/navigation.jst.eco
@@ -1,6 +1,7 @@
 <div id="navigation" class="navigation vertical">
   <div class="search">
     <form class="search-holder">
+      <label class="visually-hidden" for="global-search">Search</label>
       <input id="global-search" type="search" autocomplete="off">
       <%- @Icon('magnifier') %>
       <div class="search-loader"><%- @Icon('spinner-small') %></div>
2

The accessibility will be improved with the new desktop-view.

3

Thanks for the reply @dominikklein but is there any information on the new desktop view? At present, the app is not accessible, and anything I have seen about accessibility in a rebuild appears to have been in conversation since 2020, with no updates since 2023 (zammad barrier-free? (WCAG 2.0 AA) · Issue #3067 · zammad/zammad · GitHub).

As accessible applications can be considered a legal requirement in the EU, a solution is required by us sooner (hence why for now we have patched and shared the patches we have applied for others to use).

Is there an eta on a new accessibile frontend? Is there a way for members of the community to help test/review this frontend (someone on our team would likely want to help ensure it is fit for our needs).

Dan

4

Hi @retrodans,

are the patches available as package? With patches you mean the information added to your [WCAG] tagged posts?

I am also interested in this since we are a governmental organization and need to abide to the legal requirements.

Thanks

5

Hi, so not all our changes are patches no. The way we have ours setup is that we have some patches applied for things where we really have no option but to modify core.

But in about 90% of the cases we have found, workaround can be found by adding a file such as /app/assets/stylesheets/custom/accessibility.scss using symlinks so we can update the 2 separate to one another.

1 Like
6

The new desktop view is under active development and the reason there’s no news yet is, that it simply takes time to rewrite everything. The mobile view is the PoC of it. We’re all waiting with a lot of anticipation for it as it will solve tons of issues.

We’ll have to be pastient, sorry.

7

Happy to be patient for the new version @MrGeneration but as that could be months/years off, I don’t thing that we (where I work) can wait to resolve the issues I outlined.

So maybe the solutions for users to have an accessible version of Zammad is to either:

  1. Wait until the new version (being aware this could be months/years away)
  2. Patch/hack it yourself with assistance from the tickets I have shared

As such, we can consider closing the tickets if all contrib energy is going into the new version (as opposed to feature improvements on the current version), so long as this is clear to those going to the WCAG tickets (I can copy/paste the reasoning to each of them as required).

Thanks for your time on this,
Dan