Underlining menu elements while tabbing.

[pcgamer1]

Actual Behaviour The menu elements are not underlined or show any visual change while focused on by tabbing. They are outlined with a thin border.

Expected Behaviour Show required visual changes. A thicker outline or underline will look better. According to W3C, a change in the size of the elements is preferred. I will be changing the padding of the elements along with inversion of color.

Steps to reproduce it Tab through the menu elements.

Would you like to work on the issue? Yes

[lmccart]

can you link to this W3C guideline? my understanding is that the best practice is to not modify the default css treatment. in our case, this would mean removing the outlines that are drawn on focus

[pcgamer1]

@lmccart I want to improve accessibility for the sighted keyboard users. To do this, we will need a visual indicator so that the user clearly identifies the element that is currently being focused. The following link provides the information you need : https://webaim.org/techniques/keyboard/ To do that we can have clear visible outlines. The default outline is too thin, so we can use a custom outline as suggested below.

[lmccart]

I would suggest we use the basic focus indicator provided by default by the browser. this would mean removing the styling that currently happens on focus that overrides this.

[pcgamer1]

@lmccart Yes, the default one would work fine for Chrome. I wanted to talk about a method that I have read about i.e. focus-visible. This property allows us to set a custom focus behavior only for the keyboard users. Thus, when an user uses the mouse to focus on the element he will see a normal outline that is set using focus, but the keyboard user would see a more visible outline. This is often used to improve the accessibility, because the default outlines may not be effective across all the browsers. The links to the property : https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible. @limzykenneth Please have a look at this. I would like to work on removing the custom outline and setting it to default for now.

[pcgamer1]

@lmccart , I got a bit confused between the 2 similar issues, this one is regarding the menu elements, here the default outline would work fine, I will try removing the custom one and reset it to default. I have another issue open which talks about the same problem regarding download boxes - #693, I have also noticed several elements throughout the website that don't provide a proper visible outline. The above message was regarding this issue. We can use focus-visible or other CSS solutions to improve that. https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html

[pcgamer1]

@lmccart , the default outline provided by Firefox and Internet Explorer is a thin dotted line, which is similar to what the website is currently using, to prevent this we can use a custom keyboard focus outline using the focus:visible method which will be specific to the keyboard users. Reference : https://www.washington.edu/accessibility/checklist/focus/