Takeaways from Essential HTML Tweaks for Accessible Themes

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 lang attribute in the html element. 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 lang attribute. You can use span when 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 title element 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 setup add_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 (h1 to h6), 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 fieldset and legend
  • For tables, use table markup to present info. Avoid using table markup for layout purposes.
  • Use the summary attribute to provide overview of data tables<
  • Associate data table captions with the caption element
  • Associate data cells with header cells with the id and headers attributes
  • Use the scope attribute 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 track to offer captions in videos
  • For images, use the alt attribute for the img element, images used in submit buttons, and for area elements 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 alt attribute 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.

Photo of author

About the Author

Deborah Edwards-Onoro helps small businesses, consultants, nonprofits, and higher ed with creative and distinctive websites. Deborah shares her expertise with web design, user experience, and accessibility on her blog, social media, and at meetup events. As organizer of Refresh Detroit, West Metro Detroit WordPress, and Metro Detroit WordPress, she encourages members to share their knowledge and experiences. In her free time, you'll find her birding, shooting photos, reading, or watching tennis.
%d bloggers like this: