Web Design for Accessibility

Leroy Anderson
The Typewriter (Composed 1950 – 1st performance 1953)

The Typewriter Performance · WDR Rundfunkorchester Köln · Pinchas Steinberg · Leroy Anderson

Posted on YouTube by
Aleksandr Trofimov

I’ve been setting up the site for keyboard accessibility and ran into a problem on Safari. Using the tab button on the keyboard, the sidebar was being skipped. Turns out in Safari Settings in the Advanced Tab you have to check the box “Press Tab to highlight each item on a webpage”. The navigation works fine in Firefox, Chrome and Edge by default.
Safari Settings>Advanced Tab>Check Box – “Press Tab to highlight each item on a webpage”

As I was going through sources to add to this list of links it became a rabbit hole. I’m scoring 94-100 on Google PageSpeed insights for accessibility, which is a good start for basic settings. On some of the sites I looked at though (which had paid services coincidentally) I scored pretty bad – one of them even said my site was breaking the law, WTF.

I’ve tried to list the most helpful free sites.
— David

Resources
Microsoft – Accessibility/Disability Support
Apple Accessibility Features
AbilityNet – Digital Accessibility Free Resources
ADA – Fact Sheet – Web Content and Mobile Apps

Tools
Google PageSpeed Insights
Wave – Web Accessibility Evaluation Tool
W3 -Web Accessibility Evaluation Tools List
A11Y – Checklist

axe DevTools Browser Extensions
Firefox
Chrome
Edge

Dictation

Talk, talk, talk, it’s only talk
Comments, clichés, commentary, controversy
Chatter, chit-chat, chit-chat, chit-chat
Conversation, contradiction, criticism
It’s only talk, cheap talk
— Adrian Belew

King Crimson
Elephant Talk (1981)

Adrian Belew singing Elephant talk

Posted on YouTube by
Bill Bruford

Spoken CommandOutput
period, dot.
comma,
question mark?
exclamation point!
new lineMoves to a new line
new paragraphCreates a new paragraph
open quote
close quote
colon:
semicolon;
align centerCenters the current paragraph
indentIndents the current paragraph
decrease indentReduces indentation of the current paragraph
dollar sign$
start spellingBegins spelling mode for dictating symbols or letters
stop listeningStops dictation
start listeningStarts dictation
press alphaPresses the ‘A’ key (using ICAO/NATO phonetic alphabet)
boldToggles bold formatting
save documentSaves the document

The table shows the basic dictation commands. Using a mic hooked up to or on your computer is pure gold. Getting off the keyboard when you can saves an incredible amount of time.

It’s pretty simple, might take a few days to get it all down and get used to it but you gotta keep it up. I tend to fall off.

Spoken CommandOutput
Period or Full stop.
Comma,
Question mark?
Exclamation point or Exclamation mark!
Apostrophe
Open quote / Close quote” “
Colon:
Semicolon;
Open parenthesis / Close parenthesis( )
Dash
Ellipsis
New lineMoves to next line
New paragraphStarts new paragraph
Caps onCapitalizes first letter of each word
Caps offStops capitalization
All capsNext word in ALL CAPS
No spaceRemoves space between words
Select [word/phrase]Selects specified word/phrase
Delete [word/phrase]Deletes specified word/phrase
Delete last wordDeletes the last word
UndoReverts last action
RedoReapplies undone action
Heart emoji❤️
Smiley face🙂
Car emoji🚗
Stop dictationStops dictation
Spoken CommandOutput
Period or Full stop.
Comma,
Question mark?
Exclamation point or Exclamation mark!
Apostrophe
Open quote / Close quote” “
Colon:
Semicolon;
Open parenthesis / Close parenthesis( )
Dash
Ellipsis
New lineMoves to next line
New paragraphStarts new paragraph
Caps onCapitalizes first letter of each word
Caps offStops capitalization
All capsNext word in ALL CAPS
No spaceRemoves space between words
Select [word/phrase]Selects specified word/phrase
Delete [word/phrase]Deletes specified word/phrase
Delete last wordDeletes the last word
UndoReverts last action
RedoReapplies undone action
Heart emoji❤️
Smiley face🙂
Car emoji🚗
Stop dictationStops dictation
Spoken CommandOutput
Period.
Comma,
Question mark?
Exclamation point!
Apostrophe
Colon:
Semicolon;
New lineMoves to next line
New paragraphStarts new paragraph
Select [word/phrase]Selects specified word/phrase
Delete [word/phrase]Deletes specified word/phrase
Delete last wordDeletes the last word
UndoReverts last action
Press [key]Simulates key press
Open [app name]Opens specified app
Pause voice typingPauses dictation
Stop dictationStops dictation
Spoken CommandOutput
Period.
Comma,
Question mark?
Exclamation point!
Apostrophe
Colon:
Semicolon;
New lineMoves to next line
New paragraphStarts new paragraph
Open [app name]Opens specified app
Go backGoes back
Scroll downScrolls page down
Scroll upScrolls page up
DeleteDeletes last word or selected text
Spoken CommandOutput
Period.
Comma,
Question mark?
Exclamation point!
Apostrophe
Open quote / Close quote” “
Colon:
Semicolon;
Open parenthesis / Close parenthesis( )
New lineMoves to next line
New paragraphStarts new paragraph
BoldApplies bold to next text
ItalicsApplies italics to next text
Select [word/phrase]Selects specified word/phrase
Delete [word/phrase]Deletes specified word/phrase
UndoReverts last action
Heart emoji❤️
Smiley face🙂
Car emoji🚗
Spoken CommandOutput
Period.
Comma,
Question mark?
Exclamation point!
Apostrophe
Open quote / Close quote” “
Colon:
Semicolon;
Open parenthesis / Close parenthesis( )
New lineInserts line break in a cell (Alt+Enter equivalent)
New cellMoves to the next cell (Tab or Enter equivalent)
Select [word/phrase]Selects specified word/phrase in cell
Delete [word/phrase]Deletes specified word/phrase
UndoReverts last action
Heart emoji❤️
Smiley face🙂
Car emoji🚗

Mac – Commands for Dictating Text
Dictate Text on iPhone
Microsoft – Voice Typing
Dictate in Microsoft 365
Voice to Text on Android
Dictation – as assistive tech

I used Grok to compile the tables and set them up as .csv files, exported them to Excel, and then pasted them in the WordPress tables.

They’re all pretty similar to each other with a couple of extra commands in Excel and Word. I needed to learn how to set up tables in WordPress, so there you go.

— David