When I read the short summary of Martin Stehle’s presentation from the WordPress Accessibility Day schedule page, I knew I didn’t want to miss his talk.
I’m always interested in learning how I can improve my coding for WordPress sites.
Stehle’s presentation focused on more technical aspects to create accessible WordPress sites. He spoke about Web Content Accessibility Guidelines (WCAG) and techniques, HTML, and WordPress functions.
His presentation was intended for:
- Frontend developers
- Theme authors
- Plugin authors
Stehle is a longtime web accessibility consultant, developer of WordPress themes and plugins as well as a core WordPress contributor.
Here are my notes from his presentation.
Essential HTML Tweaks for Accessible Themes
- First rule: define the page language so the application knows which language the web page uses. In HTML, use the
langattribute in thehtmlelement. Example:<html lang="pt-BR">In WordPress, it’s a function call in header.php,<html <?php language_attributes(); ?>> - When you change language within text or on a page, be sure to specify the language change on the HTML element using the
langattribute. You can usespanwhen the text is within a sentence or other element (for example, a paragraph element when the entire paragraph is in another language). - Meaningful page titles help the user identify the web page. (Success criterion 2.4.2, conformation level A)
- Use the
titleelement to describe the page, make sure the title is unique, and makes sense out of context. In WordPress, you can automate and sanitize the page title in theme setupadd_theme_support( 'title-tag' );. Stehle recommends you review the WordPress core code for info on filters and error messages. - A web page isn’t only a purely visual mouse-controlled interface. It consists of content and interactive elements controlled by different technologies for different ways to present that content.
- Text is king: every browser and device can deal with text. When you have content, make sure it’s available in text format (example: transcripts for audio and captions for video).
- Always provide structure for your content. Be sure to separate content from design.
- When a web page isn’t accessible with a keyboard, it’s not accessible at all. Always make sure your site works with the keyboard. Test your page with the keyboard, don’t use your mouse.
- For continuous text, make sure the structure of the content is available in HTML. Visual formatting with CSS is not sufficient, use HTML elements to create headings (
h1toh6), lists (ul,ol,dl), and associate form fields with labels (label). - Did you know screen readers can get a list of headings from a page? Meaningful headings allows the blind user to quickly understand the content on the page.
- Use HTML elements to mark emphasized or special text. Example:
blockquote,strong,sub - Provide clear indication that a form control is required within the label or at the beginning of the form (with clear explanation if something like an asterisk is used to indicate required form control). Avoid using color alone to indicate required fields on forms.
- Provide description of groups of related fields with
fieldsetandlegend - For tables, use table markup to present info. Avoid using table markup for layout purposes.
- Use the
summaryattribute to provide overview of data tables< - Associate data table captions with the
captionelement - Associate data cells with header cells with the
idandheadersattributes - Use the
scopeattribute to associate header cells and data cells in data tables - Is content in a meaningful order? A meaningful sequence of content is available not only visually but is accessible for assistive devices. To test: linearize your content by disabling CSS in your browser or use Textise.
- Provide a transcript for multimedia content, use the
trackto offer captions in videos - For images, use the
altattribute for theimgelement, images used in submit buttons, and forareaelements of image maps. - Craft meaningful alt attributes for images. Think of how you might explain an image in a phone call with a friend. Use an empty
altattribute for decorative images. - Provide skip link options for users to bypass blocks (navigation, main content, sidebars)
- Write meaningful link text that makes sense out of context. Avoid “click here,” “read more,” and “here” for link text. Use the same link text for the same targets.
- Make sure your focus order is logical and usable. Create a focus order in source code that is the same as visual order.
The captioned presentation has been published on YouTube for your viewing. Stehle has published his slide presentation on Slideshare.
