Focus indicators are invisible when using forced colors

Seirdy

This is an accessibility issue related to forced colors.

Steps to reproduce:
Do either of the following:
- Go to Firefox preferences > General > Manage Colors > set "Override the colors specified by the page" to "always". I can confirm that this triggers the issue.
- Windows-only: enable Windows High-Contrast Mode. I haven't tried this, but I imagine it would trigger the same issue.

Now, try navigating the site by tabbing. With or without keyboard shortcuts enabled, there is no way to tell which element is focused. Also, the on/off toggle for the "Noncommercial" lens looks empty.

Visit the settings page; the "Session link" is impossible to read.

Expected behavior:

The focus indicator should be visible, using browser default focus or foreground colors. This is possible by making the focus indicator an outline or by making it a normal element that inherits the canvas text color. (Unrelated: the "off" state looks like a "disabled" state)

Debug info:
Firefox 100/Fedora 36/International/US-WEST

Image/Video:

SERP with the first result selected; the selection is invisible:

Account settings session link section:

Tangential: I really think Kagi would benefit from a proper a11y audit, the earlier the better (so that there's less legacy hard-to-change stuff when it happens; bolting a11y onto an already existing product is way harder/costlier than integrating it from the get-go).

Seirdy

I've confirmed that this issue appears on Windows High Contrast mode as well. All the same problems appear.
Windows 10 Enterprise 21H1, Microsoft Edge Canary 103.0.1264.1 and Firefox Developer Edition 101.0b9.

Many users rely on forced colors to set their own color preferences across programs and websites. This is useful for many types of neurodivergencies which can make someone vulnerable to overstimulation (manifestations of autism and anxiety are the most common) and vision deficiencies. I'm one such user; I've been resorting to the mouse up till now, but it's been frustrating.

Seirdy

The crystal ball popup is also difficult to use. One common technique is to add a transparent border to elements; users with default settings won't notice them, but users with forced-colors will have colors overridden and will see the borders. A transparent border around the selected website ranking adjustment (and maybe the whole popup) would be ideal.

Currently I make do by looking at the pointer; the pointer is not a hand on the currently-active option, but turns into a hand on the other options.

This forced-colors screenshot of the crystal ball popup shows the five options for "website ranking adjustment" without highlighting the selected option:

z64

@Seirdy Just wanted to say thanks for this excellent report! As noted we are looking into this, and any other a11y tweaks we can make to make Kagi as usable as possible.

Seirdy

@z64 This issue isn't solved yet. Many menus still distinguish the currently focused item only using a color change. It's particularly true for menu items. I've attached a couple screenshots:

Lens dropdown:
lens selector under search bar with a dark theme

Result menu:
3-dot popup menu for a result with the same issue

I'd suggest using Kagi for a day with forced-colors enabled; there are other issues too, and it's generally quite an eye-opening experience. Working well in forced-colors is also generally a good indication that the site is likely to work well with different forms of color vision deficiency and passes several WCAG A requirements.

Seirdy

Seirdy @Vlad would you suggest I open a new ticket?

georgee

Seirdy Thanks for the report.
No need for a new ticket.