Thanks to the free livestream, I joined bloggers, digital marketers, content specialists, designers, and developers around the world last week at WordCamp Europe 2019 to learn and talk about WordPress.
The conference was held in Berlin, Germany. With a six hour difference, I knew I had to plan carefully what sessions I could attend.
I focused on accessibility, content, and user experience sessions that didn’t require me to get up at 4:00am in the morning.
One session I didn’t want to miss was the Accessible Content session by Maja Benke.
Here are my notes from her talk.
Accessible Content
- Why does accessible content matter? From Steve Krug, author of Don’t Make Me Think:
The one argument for accessibility that doesn’t get make nearly often enough is how extraordinarily better it makes some people’s lives.
How many opportunities do we have to dramatically improve people’s lives just by doing our job a little better?
- For a site to be accessible, the design, development, and content on the site need to be accessible.
- Accessible content can be consumed by as many people as possible, no matter their situation, goals, skills, or needs
- To better understand disabilities, access needs, and common barriers people face on the web, check out Accessibility Personas.
- Use semantic structure. Rather than bolding text, use HTML headings.
- Only use one h1 per page, don’t skip headings. Always start with h1, next is h2 (don’t use h3 before h2),
- Avoid using headings for style, because you like the way it displays.
- In Gutenberg, you will be warned if you use more than one h1 on a page.
- Know when to use unordered lists and ordered lists. Use unordered lists when the order doesn’t matter. Use ordered lists where order matters. Example: a recipe.
- Accordions can be helpful to organize a question and answer or frequently asked questions content section. Tables are useful for organizing complex content
- However, if not coded correctly, accordions and tables can be challenging for screen reader users. Note: Gutenberg Table Block is not currently accessible (in WordPress 5.2, plans are for it be accessible in WordPress 5.3).
- Useful resources about accessible tables and accessible accordions by Graham Armfield.
- Establish a style guide for your content; don’t overuse italics and strong styliing.
- Avoid using all capitals for words, rather, use them for abbreviations and acronyms. Note: screen readers read out capital letters one-by-one. If you want uppercase for words, use CSS.
- Craft your words with easy and plain language. Keep your content clear, simple, and short. Provide useful tips or hints.
- Provide a summary of important information at the top of your content (personal comment: the Nielson Norman Group does this regularly on their articles
- Write clear link text that makes sense out of content. Avoid “Click here” for link text. Did you know screen reader users can ask for a list of all links on a page? Imagine hearing Click here over 20 times on a page.
- Example of link text: Use “Contact us” instead of “Click here.”
- Avoid opening links in a new tab. You’re taking away choice from the user. Also, it breaks the back button. An exception: links on a form with help tips (always notify the user when you plan to open a new tab).
- Emojis can help people better understand emotion. Emojis are accessible in apps and native programs, they’re read out. However, they’re not accessible by default in websites.
- Be mindful that emojis can be easily misunderstood.
- In your images and graphics, avoid relying on color alone for information. Use a combination of color with texture or pattern.
- Add alternative text for your images, not needed for background images.
- PDFs can be challenging to make accessible (glad to hear Maja’s comments that PDFs are not her favorite). Semantics, headings matter in PDFs.
- Avoid auto-start for video and audio. Add captions for video, transcripts for audio.
- YouTube auto captions aren’t perfect, but they provide a good base for you to download, edit, and update captions.
- Animated GIFs don’t provide any user control; use videos instead. If you must use a GIF, only allow it to loop once.
Social Media Conversation
Here’s some of the Twitter conversation during her presentation.
Thanks @MajaBenke for your wonderful talk at #WCEU about #accessibility pic.twitter.com/G86Zkx8ePJ
— Wendy @ WordCamp Europe – Berlin 🇩🇪 (@wendyweel) June 21, 2019
Track 2: Still need a reason to make your content accessible? Consider this quote from Steve Krug, says @MajaBenke: “The one argument for accessibility that doesn’t get made nearly enough is how extraordinarily better it makes some people’s lives.” #WCEU pic.twitter.com/ePawQwoYfd
— WordCamp Europe (@WCEurope) June 21, 2019
A wall of text is hard to read. Use headings to break up your text into more easily readable sections. ~ @MajaBenke #WCEU
— Deborah Edwards-Onoro (@redcrew) June 21, 2019
How to persuade clients to make their websites accessible? Here’s @MajaBenke with a pretty convincing argument: “Google is the biggest blind user of the web.” Thanks for the great talk! #WCEU
— ALEX VON EFF (@voneff) June 21, 2019
Accessible content with @MajaBenke. The use of accessibility personas can help you gain an empathic understanding of user needs. #WCEU #accessibility #a11y pic.twitter.com/XfI7fJZESE
— Linnea Nordström (@LinneaAFN) June 21, 2019
Learning about #Accessibility Personas for better #Website content with @wp1x1 at #WordCamp #Europe in #Berlin. #WCEU #A11y … pic.twitter.com/7FQFXQwnMF
— Ralf Wiechers (@drivingralle) June 21, 2019
Thank you for your great talk on #a11y @MajaBenke! We weren’t aware that gifs are not accessible, so this is something we will be mindful of now.👍🏻#WCEU pic.twitter.com/pgvxBGhJzU
— RAIDBOXES (@RAIDBOXES) June 21, 2019
Thank you to Maja Benke for uploading her presentation slides on Slideshare. Check the section at the end for general resources about accessibility as well as WordPress accessibility.
