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

Shorten some unnecessarily verbose alt-text

Browse source 
The same necessary information is conveyed, but now it's shorter. Also
removed some extra redundant information.
This commit is contained in:
Rohan Kumar 2022-04-22 08:49:27 -07:00
parent 6aa7656411
commit d3806e630c
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
2 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -359,7 +359,7 @@ In-page search (e.g., using "Ctrl + f") has been a basic feature in document rea
Web pages that hide content behind "show content" widgets are difficult to search through: users need to toggle "show content" for each item they wish to search. Often, in-page search highlights are hidden; Reddit's atrocious redesign is a serious offender.
=> gemini://seirdy.one/misc/find.png searching for the word "good" in the phrase "I wonder how much good a" when a "see more" link obscures the words "good a", before and after revealing the hidden text. From the Reddit redesign.
=> gemini://seirdy.one/misc/find.png searching for the word "good" in the phrase "I wonder how much good a" when a "see more" link obscures the match, before and after revealing the hidden text. From the Reddit redesign.
If you need to hide some content for performance reasons, I described a less hostile way to do so in the "other ways to defer content" section.
@ -1035,7 +1035,7 @@ This indentation provides important non-interactive negative space. Readers with
Readers who double-tap to jump or zoom can't do so if there's no screen region that's "safe to tap":
=> gemini://seirdy.one/misc/touch_targets.png Phone screen with three "touch target" rectangles on top of each other, separated by blank sections labeled "space". Image from Axess Lab.
=> gemini://seirdy.one/misc/touch_targets.png Phone screen with three "touch target" rectangles atop each other, separated by blank sections labeled "space". Image from Axess Lab.
Having clearly distinguished links also helps users decide safe places to tap the screen. See the "In defense of link underlines" section for more information.
@ -1194,7 +1194,7 @@ The default focus indicators are hard to see in certain browsers (e.g. Firefox a
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.
=> gemini://seirdy.one/misc/focus.png Two screenshots of a 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.

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

@ -385,7 +385,7 @@ In-page search (e.g., using <kbd>Ctrl</kbd> + <kbd>f</kbd>) has been a basic fea
Web pages that hide content behind "show content" widgets are difficult to search through: users need to toggle "show content" for each item they wish to search. Often, in-page search highlights are hidden; Reddit's atrocious redesign is a serious offender.
<figure>
{{<picture name="find" alt="searching for the word \"good\" in the phrase \"I wonder how much good a\" when a \"see more\" link obscures the words \"good a\"">}}
{{<picture name="find" alt="searching for the word \"good\" in the phrase \"I wonder how much good a\" when a \"see more\" link obscures the match.">}}
<figcaption>
Searching for the word "good" before (above) and after (below) a "see more" link is clicked. Both situations show a match, but only one of them allows us to view the match. Both screenshots are from the Reddit redesign.
@ -1004,7 +1004,7 @@ Excessive indentation can [make reading difficult](#indented-elements) for narro
For now, I've decided to keep some indentation on list elements (`<ol>`, `<dl>`, `<ul>`) since I often fill them with links (see this article's [table of contents](#TableOfContents) for an example). This indentation provides important non-interactive negative space. Readers with hand tremors depend on this space to scroll without accidentally selecting an interactive element; <span itemprop="citation" itemscope itemtype="https://schema.org/BlogPosting"><span itemprop="publisher">Axess Lab</span> described the issue in {{<cited-work name="Hand Tremors and the giant button problem" url="https://axesslab.com/hand-tremors/" extraName="headline">}}</span>. Readers who double-tap to jump or zoom can't do so if there's no screen region that's "safe to tap".
<figure>
{{<picture name="touch_targets" alt="Phone screen with three \"touch target\" rectangles on top of each other, separated by blank sections labeled \"space\"">}}
{{<picture name="touch_targets" alt="Phone screen with three \"touch target\" rectangles atop each other, separated by blank sections labeled \"space\".">}}
<figcaption>
Image credit: Axess Lab
</figcaption>
@ -1144,7 +1144,7 @@ kbd {
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.
<figure>
{{< picture name="focus" alt="Two screenshots of a focused link, one with a thin dotted outline and one with a thick solid outline." >}}
{{< picture name="focus" alt="Two screenshots of a link: one with a thin dotted outline, one with a thick solid outline." >}}
<figcaption>
Top: a screenshot of Firefox's default focus indicator. Bottom: the focus indicator after my adjustments.