diff --git a/assets/p/focus.png b/assets/p/focus.png new file mode 100644 index 0000000..a7175bf Binary files /dev/null and b/assets/p/focus.png differ diff --git a/assets/p/focus_dark.png b/assets/p/focus_dark.png new file mode 100644 index 0000000..e843f34 Binary files /dev/null and b/assets/p/focus_dark.png differ diff --git a/assets/p/focus_dark.webp b/assets/p/focus_dark.webp new file mode 100644 index 0000000..b512a2a Binary files /dev/null and b/assets/p/focus_dark.webp differ diff --git a/content/posts/website-best-practices.gmi b/content/posts/website-best-practices.gmi index c81eb03..8320e4c 100644 --- a/content/posts/website-best-practices.gmi +++ b/content/posts/website-best-practices.gmi @@ -1116,9 +1116,13 @@ kbd { ### Focus indicators -The default focus indicators in certain browsers are hard to see, especially when the focused element has a border (see the "Color overrides and accessibility" section). +The default focus indicators are hard to see in certain browsers (e.g. Firefox and WebKit), especially when the focused element already has a border. We can override them to make them more accessible. -(TODO: add a screenshot). +Here's a screenshot demonstrating what I mean: + +=> gemini://seirdy.one/misc/focus.png Two screenshots of a focused link, one with a thin dotted outline and one with a thick solid outline. + +The top image is a screenshot of Firefox's default focus indicator. The bottom image is the focus indicator after my adjustments. On one hand, users who need enhanced focus visibility may override the default focus indicators in their browser preferences; I'd like to support such overrides. On the other hand, relying on these customizations would violate the "accessible by default" directive. This would exclude Tor Browser and fingerprinting-averse readers, as well as anybody who has to borrow a machine or browser they don't own or haven't customized yet. This is another one of the few areas where I'd recommend overriding browser default stylesheets. diff --git a/content/posts/website-best-practices.md b/content/posts/website-best-practices.md index 62a2a88..d5d403d 100644 --- a/content/posts/website-best-practices.md +++ b/content/posts/website-best-practices.md @@ -1086,9 +1086,16 @@ kbd { ### Focus indicators -The default focus indicators are hard to see in certain browsers, especially when the focused element already has a border. +The default focus indicators are hard to see in certain browsers (e.g. Firefox and WebKit), especially when the focused element already has a border. We can override them to make them more accessible. -(TODO: add a screenshot). +
+{{< picture name="focus" alt="Two screenshots of a focused link, one with a thin dotted outline and one with a thick solid outline." >}} +
+ +Top: a screenshot of Firefox's default focus indicator. Bottom: the focus indicator after my adjustments. + +
+
On one hand, users who need enhanced focus visibility may override the default focus indicators in their browser preferences; I'd like to support such overrides. On the other hand, relying on these customizations would violate the "accessible by default" directive. This would exclude Tor Browser and fingerprinting-averse readers, as well as anybody who has to borrow a machine or browser they don't own or haven't customized yet. This is another one of the few areas where I'd recommend overriding browser default stylesheets.