Making Accessible WordPress Websites in the Full Site Editor
Danielle Zarcaro
August 15, 2022
Danielle Zarcaro (she/they)
LinkedIn: https://www.linkedin.com/in/danielle-zarcaro/
Facebook: �https://www.facebook.com/pbwebd
Overnight Website: https://overnightwebsite.com
Paperback Web Development: https://paperbackweb.dev
Slides: https://overnightwebsite.com/wpa11ymeetup
Code in screenshots: https://github.com/PBwebD/wpa11ymeetup
Today’s Topics
FSE = Full Site Editing or Full Site Editor
Benefits to FSE Approach
from developer’s perspective
Disclaimer
The full site editor is not fully accessible.
Keyboard Users & Semantic Elements
Keyboard Users & Semantic Elements
Skip Links
All you need is a <main> element on the page.
Keyboard Users & Semantic Elements
Navigation Block
Navigation blocks are keyboard accessible. The work is done for you.
Keyboard Users & Semantic Elements
Navigation Block
You can also make a more advanced navigation layout and it will still be accessible.
Keyboard Users & Semantic Elements
Button Block
Button blocks have machine-readable text and are the correct markup.
Keyboard Users & Semantic Elements
Spacer & Separator Blocks
Empty div is not an ideal way to handle space, but it is aria-hidden and correct semantic choices.
Keyboard Users & Semantic Elements
Element Selection
Use case: if you have a completely blank template available, this is a great way to make all options available.
Images
Images
Alt Text
More obvious area to add alt text with a link for more information.
Images
Featured Image and Image Block
Empty alt for empty image placeholders or decorative images.�
Include width and height.
Images
Image Block with Default Image
Include an image block with a placeholder and provide an alt tag where appropriate.
Heading Order & Font Sizes
Heading Order & Font Sizes
Heading Order in Code
Still adding headings, divs, and paragraphs to the page.
Consider heading order.
Heading Order & Font Sizes
Heading Order in Block Editor
The block editor will show some information about the page as well as notices about headings out of order.
Heading Order & Font Sizes
Typography in Block Editor
Class- and style-based approach to typography.
Heading Order & Font Sizes
Typography in Block Editor
Select options without typing in all caps or using headings for style.
Heading Order & Font Sizes
Controlling Typography
You can set values or disable options in theme.json.
Color Contrast
Color Contrast
Color Selection Tool
Can set a specific color palette.
Can limit options and disable areas of color selection.
Color Contrast
Hover States
Can set default hover states.
Currently can’t edit these in the block editor.
Color Contrast
Global Style Variations
Default (Dark Mode)
Black & White (Light Mode)
Default (Dark Mode)
Black & White (Light Mode)
Color Contrast
Warnings in Block Editor
Default (Dark Mode)
Black & White (Light Mode)
Most accurate when text & background are both defined.
Otherwise, it’s based on what it thinks is background or text.
In Review
Links & Resources