Skip to main content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.

CUNY LIBRARIES ARE OPEN ONLINE! We are open online for reference & instruction. E-resources are fully available. Library buildings remain closed.

Support Students Impacted by Coronavirus Crisis Donate Now

Make sure you're counted. Fill out the census, only 10 questions. Go to https://2020census.gov
Register to Vote. Make a Voting Plan. Go to https://www.vote.org/

Accessibility Workshop for Guttman Community College: Create Accessible WordPress Guttenberg

What's on this page about WordPress Guttenberg block editor?

WordPress Guttenberg Block Editor Accessibility Instructions

Finding accessible-ready WordPress.Org themes

  1. Go to https://wordpress.org/themes/ external link.
  2. Click "Feature Filter"
  3. Check the "Accessibility Ready" box in the "Features" column
  4. Click "Apply Features"

Page or Post Title

  • The first block of every post or page is the title.
  • After that, you can use the mouse to move below the title or press the enter key on your keyboard to move down and start writing.

WordPress gutenberg title screen grab


 

Use Headings

  1. Select the plus sign to add a new block
  2. Select Heading
  3. Select Heading Level

screengrab showing where to add new blocks.

headings start image. 


Create Alt-text for Images

When adding an image look to the image settings in the Block options to add alt-text (alternative text)

screengrab showing where to add alt-text in wordpress gutenberg.


How to create Lists

  • Do not create lists or tables manually, use the built in formatting.

screengrab showing how to add a list in guttenberg


How to create accessible links

  • Highlight meaningful link text
  • Select the link icon (Ctrl + K)

  • Type in your URL in the URL box
  • Click on the arrow to activate your link

screengrab showing how to add link text in guttenberg wordpress.

  • To select where the link opens when selected, click on the 3 dots to the right of the arrow to open up the link settings.
  • Here you can decide if the link opens up in the current window/tab or in a new window/tab