diff --git a/content/posts/website-best-practices.gmi b/content/posts/website-best-practices.gmi index 0d933c0..76be171 100644 --- a/content/posts/website-best-practices.gmi +++ b/content/posts/website-best-practices.gmi @@ -774,9 +774,39 @@ Too much lossy SVG compression can sometimes *reduce* the effectiveness of gzip ## Layout -This is possibly the most subjective item I'm including, and the item with the most exceptions. Consider it more of a weak suggestion than hard advice. Use your own judgement. +Page layout should be simple, predictable, consistent, familiar, and static. Avoid anything too unusual, since novelty could introduce a learning curve. -The first or second heading in the DOM, and the highest heading level, should be the page title marking the start of your main content (i.e. it should come after the site title, site navigation links, etc). If this is impossible, consider adding a "skip link" instead. Visually-impaired users generally prefer navigating by headings, but screen reader beginners still benefit from a skip-link. +### Accessible skimming + +Keep the source order, DOM order, and visual order identical to ensure consistent behavior when navigating with the mouse, keyboard, assistive-technology, et al. Doing so should also result in a logical "Tab" order. + +One of the Web Content Accessibility Guidelines lists multiple criteria related to identifying and skipping sections of your pages: + +=> https://www.w3.org/TR/WCAG22/#navigable WCAG 2.2 Guideline 2.4 Navigable + +This guideline exists for good reason: + +* Users of switch access controls find it slow and frustrating to navigate long lists of focusable items. +* Screen readers make it difficult to consume poorly-organized content non-linearly. +* Clients that don't support CSS can't prioritize content using a supplied stylesheet. + +=> https://en.wikipedia.org/wiki/Switch_access Switch access on Wikipedia + +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