mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-12-24 01:42:10 +00:00
Add missing screenshot of focus indicators
This commit is contained in:
parent
00da18b36e
commit
107643dfb5
5 changed files with 15 additions and 4 deletions
BIN
assets/p/focus.png
Normal file
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
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
BIN
assets/p/focus_dark.webp
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.3 KiB |
|
@ -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.
|
||||
|
||||
|
|
|
@ -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.
|
||||
|
||||
|
|
Loading…
Reference in a new issue