xQuick How To Do It

The following are helpful articles, tutorials and checklists that teach how to do something you may want to do and for me to refer to others who may want to know how too.

How To Do That Website Thing

Semantic document outlines and heading structures

Developing for Web Accessibility

Let’s Focus on Slide-Out Navigation – “Sometimes called drawers or slide-out menus, they allow for more content to be available without taking up extra space on the screen.”

How to use HTML5 sectioning elements to create useful accessible landmarks

Create accessible forms – with code

Uncanny A11Y – Extremely valuable resource help for fine tuning ARIA, alt text and much more.

Short note on content-visibility: hidden – “Testing the effect of content-visibility: hidden using a screen reader such as JAWS or NVDA and Chrome 85 turns up some interesting results.”

The difference between aria-label and aria-labelledby – “The aria-label and aria-labelledby attributes do the same thing but in different ways. Sometimes the two attributes are confused and this has unintended results.”

Headings & Accessibility – “In this article, I hope to highlight guidance in implementing headings by referring to the associated Web Content Accessibility Guidelines (WCAG) 2.1 success criteria.”

Element.focus vs aria-activedescendant – ” When you build JavaScript components, you need to manage focus for both keyboard users and screen readers.”

DOM, Grids and Reading Order for Accessibility – This is a running list of changes and warnings to help code a stable and accurate reading order for web pages.

Video – Understanding The PDF Tags Tree

Making PDF Files Accessible – “Properly structured, PDF documents can be made accessible to all site visitors, including those using a screen-reader or other assistive technologies.”

Creating Accessible Menus and Mega Menus

How to Use CSS for contrasting links colors within text for mouse over, focus states, etc.

How to Create a “Skip to Content” Link

Semantic document outlines and heading structures

Developing for Web Accessibility

Let’s Focus on Slide-Out Navigation – “Sometimes called drawers or slide-out menus, they allow for more content to be available without taking up extra space on the screen.”

How to use HTML5 sectioning elements to create useful accessible landmarks

Create accessible forms – with code

Uncanny A11Y – Extremely valuable resource help for fine tuning ARIA, alt text and much more.

Short note on content-visibility: hidden – “Testing the effect of content-visibility: hidden using a screen reader such as JAWS or NVDA and Chrome 85 turns up some interesting results.”

The difference between aria-label and aria-labelledby – “The aria-label and aria-labelledby attributes do the same thing but in different ways. Sometimes the two attributes are confused and this has unintended results.”

Headings & Accessibility – “In this article, I hope to highlight guidance in implementing headings by referring to the associated Web Content Accessibility Guidelines (WCAG) 2.1 success criteria.”

Element.focus vs aria-activedescendant – ” When you build JavaScript components, you need to manage focus for both keyboard users and screen readers.”

DOM, Grids and Reading Order for Accessibility – This is a running list of changes and warnings to help code a stable and accurate reading order for web pages.

Video – Understanding The PDF Tags Tree

Making PDF Files Accessible – “Properly structured, PDF documents can be made accessible to all site visitors, including those using a screen-reader or other assistive technologies.”

Creating Accessible Menus and Mega Menus

How to Use CSS for contrasting links colors within text for mouse over, focus states, etc.

How to Create a “Skip to Content” Link

Checklists and Cheat Sheets

Ultimate Cheatsheet Compilation

Front End Cheat Sheets

An Accessibility Statement Checklist

Scroll to top