1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-27 14:12:09 +00:00

Add missing screenshot of focus indicators

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

BIN
assets/p/focus.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
assets/p/focus_dark.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
assets/p/focus_dark.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

View file

@ -1116,9 +1116,13 @@ kbd {
### Focus indicators ### 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. 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.

View file

@ -1086,9 +1086,16 @@ kbd {
### Focus indicators ### 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. 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.