From 53f4aedf457fe027865eeb173b69b4f7367c4c0f Mon Sep 17 00:00:00 2001 From: Rohan Kumar Date: Sat, 26 Mar 2022 12:31:48 -0700 Subject: [PATCH] info for sec-tests, switch-access, keybot. --- content/posts/website-best-practices.gmi | 31 +++++++++++++++++++++--- content/posts/website-best-practices.md | 26 ++++++++++++++------ 2 files changed, 47 insertions(+), 10 deletions(-) diff --git a/content/posts/website-best-practices.gmi b/content/posts/website-best-practices.gmi index d0bb5ff..6b243d8 100644 --- a/content/posts/website-best-practices.gmi +++ b/content/posts/website-best-practices.gmi @@ -53,7 +53,11 @@ All of the simplicity in the world won't protect a page from unsafe content inje => https://testssl.sh/ testssl.sh => https://webbkoll.dataskydd.net/ Webbkoll -Mozilla's HTTP Observatory offers a subset of Webbkoll's features but it also gives a beginner-friendly score. Most sites should strive for at least a 50, but a score of 100 or even 120 shouldn't be too hard to reach. +If your OpenSSL (or equivalent) version is outdated or you don't want to download and run a shell script, SSL Labs' SSL Server Test should be equivalent to testssl: + +=> https://www.ssllabs.com/ssltest/ SSL Server Test + +Mozilla's HTTP Observatory offers a subset of Webbkoll's features and is a bit out of date, but it also gives a beginner-friendly score. Most sites should strive for at least a 50, but a score of 100 or even 120 shouldn't be too hard to reach. => https://observatory.mozilla.org/ HTTP Observatory @@ -274,7 +278,7 @@ It might seem odd to create a lossless WebP from a lossy PNG, but I've found tha In general, avoid using inline images just for decoration. Only use an image if it has a clear purpose that significantly adds to the content in a way that text can't replace, and provide alt-text as a fallback. Any level of detail that isn't necessary for getting the point across should be removed with lossy compression and cropping. Some conventional wisdom for image compression doesn't hold up when compressing this aggressively; for instance, I've found that extremely aggressive dithering and PNG compression of small black-and-white images consistently surpasses JPEG compression. -If you want to include a profile photo (e.g., if your website is part of the IndieWeb), I recommend re-using one of your favicons. Doing so should be harmless since most browsers will fetch and cache favicons anyway. +If you want to include a profile photo (e.g., if your website is part of the IndieWeb and uses an [h-card](https://microformats.org/wiki/h-card)), I recommend re-using one of your favicons. Doing so should be harmless since most browsers will fetch and cache favicons anyway. If you really want to go overboard with PNG optimization, you can try a tool like Efficient Compression Tool: @@ -348,6 +352,7 @@ Achieving this type of layout entails using the WCAG 2.2 techniques C27 as well => https://www.w3.org/WAI/WCAG21/Techniques/css/C27.html C27: Making the DOM order match the visual order => https://www.w3.org/WAI/WCAG22/Techniques/css/C6 C6: Positioning content based on structural markup + ### What about sidebars? Sidebars are probably unnecessary, and can be quite annoying to readers who re-size windows frequently. This is especially true for tiling window manager users like me: we frequently shrink windows to a fraction of their original size. When this happens on a website with a sidebar, one of two things happens: @@ -363,6 +368,18 @@ Common items in sidebars include tag clouds, an author bio, and an index of entr Don't boost engagement by providing readers with information they didn't ask for; earn engagement with good content, and let readers navigate to your other pages *after* they've decided they want to read more. +### Accessible skimming + +Keeping an identical source order, DOM order, and visual order should also result in a logical tab-order. Just to be sure, always test the order of keyboard-driven focus. + +Measuring tab-order is nice, but it doesn't go far enough. Users of switch access controls find it slow and frustrating to navigate long lists of focusable items. + +=> https://en.wikipedia.org/wiki/Switch_access Switch access on Wikipedia + +Screen readers make it difficult to consume poorly-organized content non-linearly. The list goes on: nearly every reader reliant upon assistive technologies struggles to skim through poorly-organized pages. + +Related items need to be semantically grouped together. Group navigation links together in