[Reminder for myself] Improve A11Y in the deck options

[Anon_0000]

This is just a reminder for myself, so that I do not forget about it. I’d like to work on these things in the coming weeks and will open PRs once ready.

The Issues

Accessibility issues using Google’s scanner:

• Touch targets should be larger (aim for 48dp, most of which are around 22dp)
• Some of the ‘reset’ buttons are detected as being visible by the tool, therefore probably also by screen readers
• Contrast on the switches isn’t ideal

My first change would be adding affordances so ‘New cards/day’ etc… appears clickable on mobile, since we don’t have ‘mouseover’ events.

Posted by @David.

Source

david-allison

david-allison

Planned ToDos

• Increase touch target. E.g. add min-height and min-width to the wrapper of the input switches, then align with display: flex; align-items: center;

• Investigate the reset buttons. It appears they just use opacity: 0;. I’d possibly apply something like display: none;, which hopefully solves the issue.
  EDIT: A PR has been opened: [A11Y] FIX: revert button is visible for screenreaders by GithubAnon0000 · Pull Request #4174 · ankitects/anki · GitHub

• Increase switch contrast. I assume a darker gray or even almost black would suffice.
  EDIT: I opened a PR: Ally fix border ratio too low by GithubAnon0000 · Pull Request #4175 · ankitects/anki · GitHub

• Investigate good ways for affordances (making it obvious that the links are clickable). Desktop anki might benefit from this change as well, since a lot of users had no idea the strings were clickable (according to a poll from, I believe, @Expertium)

[sorata]

@Anon_0000

making it obvious that the links are clickable

underlining can be a decent indicator in my opinion

[Anon_0000]

@David

Things like New cards/day have spin-boxes, that show spinners to increment / decrement the values. Do they have to have a minimum touch target of 48px as well? Or only the spin-box itself?

Edit: I also might need your help to test if the reset button solution works, once I open a PR.

[David]

Note: I was using https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor&hl=en

What I mentioned were Android-specific guidelines, and there are exceptions and caveats [I believe iOS uses 44px]. You’d want to check WCAG to see how/whether the guidelines differ when using a keyboard & mouse.

We can, and probably should move a lot of these fixes to be touch-only, as they will lead to lower information density on the screen

Tapping on the input text opens the standard Android input for numeric text, and we have a custom up/down stepper which we could use

The up/down arrows on New Cards/day aren’t currently visible on my alpha of AnkiDroid (~25.06b6; Tablet; emulated on my MacBook), so I wouldn’t worry about it. Accessibility guidelines are typically win-win, as they help avoid misclicks, but given there’s multiple ways to modify the numeric inputs, I would focus on more pressing issues.

Accessibility designing – Material Design 3

I like the underlined text which occurs when someone hovers over the option names, and would check whether making this always visible on mobile would resolve the issue.

---

For contrast: see if it makes sense (using the WCAG contrast checker), or whether the automated tool is mistaken

[Anon_0000]

@David

I like the underlined text which occurs when someone hovers over the option names, and would check whether making this always visible on mobile would resolve the issue.

I can do that. But it’s not the prettiest:

Maybe someone that sees this has a good looking example they could share (or some ideas in general)?

[sorata]

make it a faintly coloured solid line (dotted looks bad)

[Anon_0000]

Like this?

(If this is done, should the hover be changed to solid as well?)

[sorata]

yes, but I dont know if this helps in anything. people literally look at the ? icon without figuring out its supposed to show a pop-up.

[BrayanDSO]

some shade of gray, something like the switch thumb disabled color, broader stroke, and a little downwards

[Anon_0000]

Something like this?

The color is set by --fg-subtle and is #737373. I could change the variable, but that would change every element that uses this variable. I could also replace the variable with the color of the “swtich thumb”, which would look like this:

[sorata]

on a different note, we should use colors from catapuccin, given anki cards are just web pages, and the rest of the app is becoming an web app.

[ZornHadNoChoice]

Please bear in mind that underlines don’t work well with some languages, like Arabic. The lowered lines suggested in the last image are a bit better.

[Anon_0000]

Would do you use in arabic instead?

[ZornHadNoChoice]

Umm, nothing? I haven’t seen bold, italic or underline being used in Arabic. Colors can be used.

[Anon_0000]

So you’d use something like this?

Why are underlines an issue btw? Do they interfere with the letters?

[ZornHadNoChoice]

Arabic uses dots under/above certain letters. So an underline doesn’t look right.

You can use lines that are low enough to not interfere with these dots.

[Anon_0000]

@ZornHadNoChoice

You can use lines that are low enough to not interfere with these dots.

I faintly remember pushing a PR because there was a language where characters were stacking and thus changing the needed line-height.

I assume if I set the line lower, there will still be languages were it causes problems, then. Using the blue color to indicate a link looks quite bad though.

Affordance clearly is more complicated then expected. Especially since styling the strings as buttons would make it look out of place.

What else could we use? text-decoration cannot be used, color might look very out of place, box-shadow looks weird too.

Something like this looks clickable, but out of place too:

.setting-title.svelte-11kx1hj {
    cursor: help;
    background-color: #eff7ff;
    border-radius: 0.6em;
    padding: 0.2em 0.8em;
    border: 1px solid #98a2ad;
}

Clearly I’ve yet to learn a lot about design. I’ll need the help from the community for this one.

[ZornHadNoChoice]

What about a brief “onboarding”?

[ZornHadNoChoice]

@Anon_0000

I faintly remember pushing a PR because there was a language where characters were stacking and thus changing the needed line-height.

That was a month ago "type to answer" box not high enough to display diacritics - #3 by Anon_0000 (I think).

[ZornHadNoChoice]

I don’t remember where I first saw this idea.