fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-23 21:02:09 +00:00
Code Issues Projects Releases Wiki Activity

Add missing screenshot of focus indicators

Browse source
This commit is contained in:
Rohan Kumar 2022-04-14 22:51:05 -07:00
parent 00da18b36e
commit 107643dfb5
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
5 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/p/focus.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
assets/p/focus_dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
assets/p/focus_dark.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

8
content/posts/website-best-practices.gmi
View file

@ -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.

11
content/posts/website-best-practices.md
View file

@ -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).
<figure>
{{< picture name="focus" alt="Two screenshots of a focused link, one with a thin dotted outline and one with a thick solid outline." >}}
<figcaption>
Top: a screenshot of Firefox's default focus indicator. Bottom: the focus indicator after my adjustments.
</figcaption>
</figure>
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.