fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-12-25 18:22:09 +00:00
Code Issues Projects Releases Wiki Activity

Add info on line length

Browse source 
Introduce a bit more nuance into the WCAG's requirements.
This commit is contained in:
Rohan Kumar 2022-03-27 11:18:25 -07:00
parent 3df423336c
commit 6048e66d1b
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
2 changed files with 20 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -375,6 +375,18 @@ Screen readers make it difficult to consume poorly-organized content non-linearl
Related items need to be semantically grouped together. Group navigation links together in <nav> elements; sections under headings, <section> elements, or other landmarks; lists under <ol>, <ul>, or <dl>; etc. to give assistive technologies the means to skip over multiple items at once. Related items need to be semantically grouped together. Group navigation links together in <nav> elements; sections under headings, <section> elements, or other landmarks; lists under <ol>, <ul>, or <dl>; etc. to give assistive technologies the means to skip over multiple items at once.
### Line length
The WCAG recommends a max line length of 80 characters (40 characters for CJK languages) as a AAA guideline:
=> https://www.w3.org/TR/WCAG22/#visual-presentation Success Criterion 1.4.8 Visual Presentation.
However, studies seem to have mixed results; some people find it easier to read lines around 90 characters long, while others struggle beyond the 50-character mark. I think the WCAG over-simplified simplified a complex issue. Then again, the AAA level was never intended to be a requirement.
Some of my links display long link-text; short line lengths can break these link texts too much, which can slightly hurt readability. Of course, narrow viewports will obviously make short line lengths non-negotiable. I decided to give article bodies a width of 38em, which typically corresponds to just under 90 characters. I opted to use "em" instead of "ch" for consistency and for better compatibility with some uncommon browsers (NetSurf, Dillo, and others).
I also ensured that my site works very well with CSS overrides, window-resizing, zoom levels past 200%, and most "reading mode" implementations. This should help accommodate a wide range of line-length preferences while still looking accessible enough by default.
## Narrow viewports ## Narrow viewports
A single element wider than the viewport will trigger horizontal scrolling for the entire page. This is especially problematic for long pages that already require excessive vertical scrolling. A single element wider than the viewport will trigger horizontal scrolling for the entire page. This is especially problematic for long pages that already require excessive vertical scrolling.
@ -633,7 +645,6 @@ I'm still on step 10, trying to find new ways to break this page. If you come up
This article is, and will probably always be, an ongoing work-in-progress. Some areas I have yet to cover: This article is, and will probably always be, an ongoing work-in-progress. Some areas I have yet to cover:
* 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
* Best practices for combining alt-text, figure captions, and image transcripts. * Best practices for combining alt-text, figure captions, and image transcripts.
* 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.

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

@ -332,6 +332,14 @@ Measuring tab-order is nice, but it doesn't go far enough. Users of [switch acce
Related items need to be semantically grouped together. Group navigation links together in `<nav>` elements; sections under headings, `<section>` elements, or other landmarks; lists under `<ol>`, `<ul>`, or `<dl>`; etc. to give assistive technologies the means to skip over multiple items at once. Related items need to be semantically grouped together. Group navigation links together in `<nav>` elements; sections under headings, `<section>` elements, or other landmarks; lists under `<ol>`, `<ul>`, or `<dl>`; etc. to give assistive technologies the means to skip over multiple items at once.
### Line length
The WCAG recommends a max line length of 80 characters (40 characters for <abbr title="Chinese, Japanese, and Korean">CJK</abbr> languages) as a AAA guideline in [Success Criterion 1.4.8 Visual Presentation](https://www.w3.org/TR/WCAG22/#visual-presentation). However, studies seem to have mixed results; some people find it easier to read lines around 90 characters long, while others struggle beyond the 50-character mark. I think the WCAG over-simplified a complex issue. Then again, the AAA level was never intended to be a requirement.
Some of my links display long link-text; short line lengths can break these link texts too much, which can slightly hurt readability. Of course, narrow viewports will obviously make short line lengths non-negotiable. I decided to give article bodies a width of `38em`, which typically corresponds to just under 90 characters. I opted to use `em` instead of `ch` for consistency and for better compatibility with some uncommon browsers (NetSurf, Dillo, and others).
I also ensured that my site works very well with CSS overrides, window-resizing, zoom levels past 200%, and most "reading mode" implementations. This should help accommodate a wide range of line-length preferences while still looking accessible enough by default.
Narrow viewports Narrow viewports
---------------- ----------------
@ -542,7 +550,6 @@ Future updates
This article is, and will probably always be, an ongoing work-in-progress. Some areas I have yet to cover: This article is, and will probably always be, an ongoing work-in-progress. Some areas I have yet to cover:
* 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
* Best practices for combining alt-text, figure captions, and image transcripts. * Best practices for combining alt-text, figure captions, and image transcripts.
* 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.