Jesse’s note: I’m making this post “sticky” so that it’s top of mind as you make your Project 1: Principles posts. Thank you, Serena, for putting this material together.
—
Hey all! Since we’ll be using this WordPress site for many of our assignments this quarter, I thought it might be helpful to talk briefly about accessibility within WordPress.
Here are some basic best practices you can follow if you want to ensure that your posts are accessible:
Alt text
People who are blind or have visual impairments often use screen readers to access content, so it’s important to provide alt text describing each image you post. Here’s how…
- When adding a new image: After uploading, you’ll see some options on the right side, below the image title. Be sure the alt text field is filled out with a brief but accurate description of the image’s content.
- Add to an existing image: You can click on the image itself, then the edit button, OR go to Media in the left menu to access older images. Fill in the alt text field.
Headings
Headings are used to tell screen reading software how to navigate a website. Make sure you are only using headings in a post to indicate hierarchy. Never use headings for visual effects, because screen reading software will assume it’s the next organizational section of the webpage.
- If you need to make text bold or enlarge it, add pull quotes, etc, you can do it by clicking on the “text” tab and manually writing inline CSS.
The blockquote function (quotation mark icon in your rich text editor) is a great alternative.
- You can also take advantage of post formats. In the currently used theme (Twenty Seventeen), there are eight different post formats that provide different styling options. You can view them here by clicking on “Open Live Demo” and then “News”.
Carousels
Avoid carousels (also called sliders or slideshows) to display images. Most are awful for accessibility and fail to increase engagement with content. Consider an image gallery or use images within/between text paragraphs instead. Learn more at shouldiuseacarousel.com.
That’s it from me! Want to learn more about accessibility in WordPress? This handbook is a good place to start. Need help writing effective alt text? WebAIM has a great guide.
Want to experience navigating websites with screenreading software on your phone?
iOS: Settings > Accessibility > Voiceover
Android: Settings > Accessibility > TalkBack
If you have anything to add to this post, feel free to comment below, email me, or message me in Slack. 🙂