Sympa Accessibility Issue - 15 - No clear visual focus indicator when accessing elements by keyboard.

[rm1-uiuc]

The University of Illinois at Urbana-Champaign, Technology Services Accessibility Testing team conducted an Accessibility Review of Sympa on September 25, 2023 and found 26 issues that need to be fixed to make the interface accessible for visual impaired users.

Version

6.2.72

Installation method

Source Package

Expected behavior

Using a Screen Reader, there needs to be a clear visual focus indicator when access elements by keyboard.

Actual behavior

There is no clear visual focus indicator when accessing elements by keyboard. Users with poor vision would not understand where the current focus is. In the screenshot below, my current focus is on word prixlist, but since it doesn’t have a focused box/border around the element, it is not distinguishable.

WCAG Level AA 2.4.7 Focus Visible)

Fig 17 Focus indictor issue.

Steps to reproduce

Sympa Accessibility Issue -15 was determined by manual functional testing performed by the user navigating with keyboard only or using assistive technology such as screen reader. See attached review for more info on specific location in interface.

Additional information

Attached is the Accessibility Review conducted on Sept 25,2023
Tech Services Review - Accessibility Evaluation Report for Sympa.pdf

[ldidry]

I quickly tried some CSS rules:

#sympa-top-bar menu .menu li:not(.active) > a:not(.button):focus {
    background: #6A5687 !important;
}
a:focus {
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

@ikedas @racke, could you test them and tell what do you think of them?

Same question for @rm1-uiuc if you can test them with a Sympa.

[ikedas]

I have a question: What style should we adopt for "focus indicator"?

• G149 and so on provide some examples.
• G165 suggests that default focus indicator for the platform should be used.
• G195 suggests that author-supplied, visible focus indicator should be used.

[ikedas]

I realized that removing these lines recovers the default focus indicator:

sympa/default/web_tt2/css.tt2

Lines 202 to 205 in 4f62c3a

	a:focus {
	outline: 0;
	text-decoration: none;
	}

With Chrome it works as below:

[rm1-uiuc]

The default focus indicator should not be relied upon, as the default indicator in some browsers is not easily perceivable by some users with visual impairments.

[ikedas]

The default focus indicator should not be relied upon, as the default indicator in some browsers is not easily perceivable by some users with visual impairments.

Could you please present an easily recognizable one across browsers? I rather think that the arbitrary focus indicator designs that, instead of the default one, vary from application to application will confuse users.

[ikedas]

If no good alternative can be found soon, we'd be better to adopt the default one for the time being.