mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-23 21:02:09 +00:00
Balance indentation's problems against benefits
Describe how they help users with hand tremors avoid selecting interactive elements.
This commit is contained in:
parent
eb25804244
commit
3df423336c
2 changed files with 34 additions and 2 deletions
|
@ -406,6 +406,26 @@ Browser default stylesheets typically give <figure> elements extra margins on th
|
||||||
|
|
||||||
I chose to remove the margins in <figure> elements. I don't find the margins useful because I typically use them to annotate non-centered non-phrasing content, such as <blockquote> and <pre> elements, and my image-based figures tend to have longer captions. If you're reading the Web version of this page with its own stylesheet enabled, in a CSS 2 compliant browser, you might notice that the blockquotes on it are formatted with a minimal indent and a thick gray border on the left rather than a full indent. These two adjustments allow blockquotes containing bulleted lists to fit on most narrow viewports, even when wrapped by a <figure> element.
|
I chose to remove the margins in <figure> elements. I don't find the margins useful because I typically use them to annotate non-centered non-phrasing content, such as <blockquote> and <pre> elements, and my image-based figures tend to have longer captions. If you're reading the Web version of this page with its own stylesheet enabled, in a CSS 2 compliant browser, you might notice that the blockquotes on it are formatted with a minimal indent and a thick gray border on the left rather than a full indent. These two adjustments allow blockquotes containing bulleted lists to fit on most narrow viewports, even when wrapped by a <figure> element.
|
||||||
|
|
||||||
|
### When indentation helps
|
||||||
|
|
||||||
|
Excessive indentation can make reading difficult for narrow viewports, but preserving some indentation is still useful.
|
||||||
|
|
||||||
|
For now, I've decided to keep the indents on list elements such as <ol> and <ul>, since I often fill them with links. See see this article's table of contents on its Web mirror for an example:
|
||||||
|
|
||||||
|
=> https://seirdy.one/2020/11/23/website-best-practices.html#toc Table of contents
|
||||||
|
|
||||||
|
This indentation provides important negative space. Readers with hand tremors depend on this space to scroll without accidentally selecting an interactive element:
|
||||||
|
|
||||||
|
=> https://axesslab.com/hand-tremors/ Hand tremors and the giant-button-problem (Axess Lab)
|
||||||
|
|
||||||
|
On lists without visible bullets, I dropped the default indentation. I had to find other ways to ensure adequate space between links. Some examples from the Web mirror of this Gemini capsule:
|
||||||
|
|
||||||
|
=> https://seirdy.one/2020/11/23/website-best-practices.html#webmentions The webmention list below this article separates links with timestamps and some paragraph spacing.
|
||||||
|
=> https://seirdy.one/#posts The homepage posts list separates links with descriptions.
|
||||||
|
=> https://seirdy.one/2022/02/02/floss-security.html The list of related articles at the top of one of my posts does the same.
|
||||||
|
|
||||||
|
Once again, deviating from defaults created additional work to remove an accessibility hazard.
|
||||||
|
|
||||||
## Tor
|
## Tor
|
||||||
|
|
||||||
Many people use Tor out of necessity. On Tor, additional constraints apply.
|
Many people use Tor out of necessity. On Tor, additional constraints apply.
|
||||||
|
@ -615,7 +635,6 @@ This article is, and will probably always be, an ongoing work-in-progress. Some
|
||||||
* How purely-cosmetic animations harm users with cognitive disabilities (e.g. attention disorders).
|
* How purely-cosmetic animations harm users with cognitive disabilities (e.g. attention disorders).
|
||||||
* A maximum line length for readability
|
* A maximum line length for readability
|
||||||
* Best practices for combining alt-text, figure captions, and image transcripts.
|
* Best practices for combining alt-text, figure captions, and image transcripts.
|
||||||
* How users with hand tremors depend on negative space in areas with a high density of interactive elements, and where/how to provide this space.
|
|
||||||
* How exposing new content on hover is inaccessible to users with magnifiers, hand tremors, switch access, and touchscreens.
|
* How exposing new content on hover is inaccessible to users with magnifiers, hand tremors, switch access, and touchscreens.
|
||||||
|
|
||||||
## Other places to check out
|
## Other places to check out
|
||||||
|
|
|
@ -8,6 +8,7 @@ footnote_heading: Notes
|
||||||
toc: true
|
toc: true
|
||||||
tags:
|
tags:
|
||||||
- web
|
- web
|
||||||
|
- accessibility
|
||||||
- minimalism
|
- minimalism
|
||||||
title: An opinionated list of best practices for textual websites
|
title: An opinionated list of best practices for textual websites
|
||||||
---
|
---
|
||||||
|
@ -356,6 +357,19 @@ Browser default stylesheets typically give `<figure>` elements extra margins on
|
||||||
|
|
||||||
I chose to remove the margins in `<figure>` elements. I don't find the margins useful because I typically use them to annotate non-centered non-phrasing content, such as `<blockquote>` and `<pre>` elements, and my image-based figures tend to have longer captions. If you're reading this page with its own stylesheet enabled, in a CSS 2 compliant browser, you might have noticed the blockquotes on it are formatted with a minimal indent and a thick gray border on the left rather than a full indent. These two adjustments allow blockquotes containing bulleted lists to fit on most narrow viewports, even when wrapped by a `<figure>` element.
|
I chose to remove the margins in `<figure>` elements. I don't find the margins useful because I typically use them to annotate non-centered non-phrasing content, such as `<blockquote>` and `<pre>` elements, and my image-based figures tend to have longer captions. If you're reading this page with its own stylesheet enabled, in a CSS 2 compliant browser, you might have noticed the blockquotes on it are formatted with a minimal indent and a thick gray border on the left rather than a full indent. These two adjustments allow blockquotes containing bulleted lists to fit on most narrow viewports, even when wrapped by a `<figure>` element.
|
||||||
|
|
||||||
|
### When indentation helps
|
||||||
|
|
||||||
|
Excessive indentation can make reading difficult for narrow viewports, but preserving some indentation is still useful.
|
||||||
|
|
||||||
|
For now, I've decided to keep the indents on list elements such as `<ol>` and `<ul>`, since I often fill them with links (see this article's [table of contents](#toc) for an example). This indentation provides important negative space. Readers with hand tremors [depend on this space](https://axesslab.com/hand-tremors/) to scroll without accidentally selecting an interactive element.
|
||||||
|
|
||||||
|
On lists without visible bullets, I dropped the default indentation. I had to find other ways to ensure adequate space between links. Some examples:
|
||||||
|
|
||||||
|
- The [webmention list](#webmentions) below this article separates links with timestamps and some paragraph spacing.
|
||||||
|
- The [homepage posts list](https://seirdy.one/#posts) and the list of related articles at the top of [one of my posts](https://seirdy.one/2022/02/02/floss-security.html) separates links with descriptions
|
||||||
|
|
||||||
|
Once again, deviating from defaults created additional work to remove an accessibility hazard.
|
||||||
|
|
||||||
Tor
|
Tor
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -530,7 +544,6 @@ This article is, and will probably always be, an ongoing work-in-progress. Some
|
||||||
* How purely-cosmetic animations harm users with cognitive disabilities (e.g. attention disorders).
|
* How purely-cosmetic animations harm users with cognitive disabilities (e.g. attention disorders).
|
||||||
* A maximum line length for readability
|
* A maximum line length for readability
|
||||||
* Best practices for combining alt-text, figure captions, and image transcripts.
|
* Best practices for combining alt-text, figure captions, and image transcripts.
|
||||||
* How users with hand tremors [depend on negative space](https://axesslab.com/hand-tremors/) in areas with a high density of interactive elements, and where/how to provide this space.
|
|
||||||
* How exposing new content on hover is inaccessible to users with magnifiers, hand tremors, switch access, and touchscreens.
|
* How exposing new content on hover is inaccessible to users with magnifiers, hand tremors, switch access, and touchscreens.
|
||||||
|
|
||||||
Other places to check out
|
Other places to check out
|
||||||
|
|
Loading…
Reference in a new issue