From cb0e8a4be95edc8344dd636303abb75a776624e4 Mon Sep 17 00:00:00 2001 From: Rohan Kumar Date: Sun, 27 Mar 2022 17:19:13 -0700 Subject: [PATCH] Mention some suggestions from Fedi Future updates: add braille displays & clear lang. Testing: mention zoom levels and caret navigation. --- content/posts/website-best-practices.gmi | 19 ++++++++++++------- content/posts/website-best-practices.md | 20 ++++++++++++-------- 2 files changed, 24 insertions(+), 15 deletions(-) diff --git a/content/posts/website-best-practices.gmi b/content/posts/website-best-practices.gmi index d52d038..90009f0 100644 --- a/content/posts/website-best-practices.gmi +++ b/content/posts/website-best-practices.gmi @@ -626,17 +626,18 @@ These tests start out pretty reasonable, but gradually get more ridiculous. Once 2. Test using the Tor browser with the safest security level enabled (disables JS and other features). 3. Load just the HTML. No CSS, no images, etc. Try loading without inline CSS as well for good measure. 4. Print out the site in black-and-white, preferably with a simple laser printer. -5. Test with a screen reader. -6. Test keyboard navigability with the tab key. Even without specifying tab indices, tab selection should follow a logical order if you keep the layout simple. -7. Test in textual browsers: lynx, links, w3m, ELinks, edbrowse, EWW, Netrik, etc. -8. Read the (prettified/indented) HTML source itself and parse it with your brain. See if anything seems illogical or unnecessary. Imagine giving someone a printout of your page's along with a whiteboard. If they have a basic knowledge of HTML tags, would they be able to draw something resembling your website? +5. Test with accessibility aids such as screen readers, magnifiers, and switch controls. +6. Ensure the page responds correctly to browser zoom. No sizes or dimensions should remain "fixed" across zoom levels. +7. Test keyboard navigability with the tab key and with caret navigation. Even without specifying tab indexes, tab selection should follow a logical order if you keep the layout simple. +8. Test in textual browsers: lynx, links, w3m, ELinks, edbrowse, EWW, Netrik, etc. 9. Test in an online website translator tool. -10. Test on something ridiculous: try your old e-reader's embedded browser, combine an HTML-to-EPUB converter and an EPUB-to-PDF converter, or stack multiple article-extraction utilities on top of each other. Be creative and enjoy breaking your site. When something breaks, examine the breakage and see if you can fix it by simplifying your page. -11. Build a time machine. Travel decades--or perhaps centuries--into the future. Keep going forward until the WWW is breathing its last breath. Test your site on future browsers. Figuring out how to transfer your files onto their computers might take some time, but you have a time machine so that shouldn't be too hard. When you finish, go back in time to meet Benjamin Franklin: +10. Read the (prettified/indented) HTML source itself and parse it with your brain. See if anything seems illogical or unnecessary. Imagine giving someone a printout of your page's along with a whiteboard. If they have a basic knowledge of HTML tags, would they be able to draw something resembling your website? +11. Test on something ridiculous: try your old e-reader's embedded browser, combine an HTML-to-EPUB converter and an EPUB-to-PDF converter, or stack multiple article-extraction utilities on top of each other. Be creative and enjoy breaking your site. When something breaks, examine the breakage and see if you can fix it by simplifying your page. +12. Build a time machine. Travel decades--or perhaps centuries--into the future. Keep going forward until the WWW is breathing its last breath. Test your site on future browsers. Figuring out how to transfer your files onto their computers might take some time, but you have a time machine so that shouldn't be too hard. When you finish, go back in time to meet Benjamin Franklin: => https://xkcd.com/567/ xkcd: Urgent Mission -I'm still on step 10, trying to find new ways to break this page. If you come up with a new test, please share it: +I'm still on step 11, trying to find new ways to break this page. If you come up with a new test, please share it: => mailto:~seirdy/seirdy.one-comments@lists.sr.ht Mailing list for this website @@ -647,6 +648,10 @@ 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). * 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. +* Notes on improving support for braille displays. +* How to work well with caret-based navigationnavigation. +* Ways to improve comprehension by readers who struggle to understand non-literal language (cognitive disabilities, non-native speakers unfamiliar with idioms, etc.). I might wait until this W3C draft specification matures and its vocabularies gain adoption before going in depth: +=> https://w3c.github.io/personalization-semantics/help/index.html Personalization Help and Support 1.0 ## Other places to check out diff --git a/content/posts/website-best-practices.md b/content/posts/website-best-practices.md index 137dea1..3f0cbc3 100644 --- a/content/posts/website-best-practices.md +++ b/content/posts/website-best-practices.md @@ -531,18 +531,19 @@ Your page should easily pass the harshest of tests without any extra effort if i These tests start out pretty reasonable, but gradually get more ridiculous. Once again, use your judgement. 1. Evaluate the heaviness and complexity of your scripts (if any) by testing with your browser's JIT compilation disabled.[^4] -2. Test using the Tor browser with the safest security level enabled (disables JS, SVG, and other features). +2. Test using the Tor browser with the safest security level enabled (disables JS and other features). 3. Load just the HTML. No CSS, no images, etc. Try loading without inline CSS as well for good measure. 4. Print out the site in black-and-white, preferably with a simple laser printer. -5. Test with a screen reader. -6. Test keyboard navigability with the Tab key. Even without specifying tab indexes, tab selection should follow a logical order if you keep the layout simple. -7. Test in textual browsers: lynx, links, w3m, ELinks, edbrowse, EWW, Netrik, etc. -8. Read the (prettified and indented) HTML source itself and parse it with your brain. See if anything seems illogical or unnecessary. Imagine giving someone a printout of your page's `` along with a whiteboard. If they have a basic knowledge of HTML tags, would they be able to draw something resembling your website? +5. Test with accessibility aids such as screen readers, magnifiers, and switch controls. +6. Ensure the page responds correctly to browser zoom. No sizes or dimensions should remain "fixed" across zoom levels. +7. Test keyboard navigability with the tab key and with [caret navigation](https://en.wikipedia.org/wiki/Caret_navigation). Even without specifying tab indexes, tab selection should follow a logical order if you keep the layout simple. +8. Test in textual browsers: lynx, links, w3m, ELinks, edbrowse, EWW, Netrik, etc. 9. Test in an online website translator tool. -10. Test on something ridiculous: try your old e-reader's embedded browser, combine an HTML-to-EPUB converter and an EPUB-to-PDF converter, or stack multiple article-extraction utilities on top of each other. Be creative and enjoy breaking your site. When something breaks, examine the breakage and see if you can fix it by simplifying your page. -11. Build a time machine. Travel decades--or perhaps centuries--into the future. Keep going forward until the WWW is breathing its last breath. Test your site on future browsers. Figuring out how to transfer your files onto their computers might take some time, but you have a time machine so that shouldn't be too hard. When you finish, go back in time to [meet Benjamin Franklin](https://xkcd.com/567/). +10. Read the (prettified/indented) HTML source itself and parse it with your brain. See if anything seems illogical or unnecessary. Imagine giving someone a printout of your page's along with a whiteboard. If they have a basic knowledge of HTML tags, would they be able to draw something resembling your website? +11. Test on something ridiculous: try your old e-reader's embedded browser, combine an HTML-to-EPUB converter and an EPUB-to-PDF converter, or stack multiple article-extraction utilities on top of each other. Be creative and enjoy breaking your site. When something breaks, examine the breakage and see if you can fix it by simplifying your page. +12. Build a time machine. Travel decades--or perhaps centuries--into the future. Keep going forward until the WWW is breathing its last breath. Test your site on future browsers. Figuring out how to transfer your files onto their computers might take some time, but you have a time machine so that shouldn't be too hard. When you finish, go back in time to [meet Benjamin Franklin](https://xkcd.com/567/). -I'm still on step 10, trying to find new ways to break this page. If you come up with a new test, please [share it](mailto:~seirdy/seirdy.one-comments@lists.sr.ht). +I'm still on step 11, trying to find new ways to break this page. If you come up with a new test, please [share it](mailto:~seirdy/seirdy.one-comments@lists.sr.ht). Future updates -------------- @@ -552,6 +553,9 @@ 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). * 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. +* Notes on improving support for braille displays. +* How to work well with caret-based navigation. +* Ways to improve comprehension by readers who struggle to understand non-literal language (cognitive disabilities, non-native speakers unfamiliar with idioms, etc.). I might wait until the W3C [Personalization Help and Support 1.0](https://w3c.github.io/personalization-semantics/help/index.html) draft specification matures and its vocabularies gain adoption before going in depth. Other places to check out -------------------------