Accessible Web Development

Creating accessible sites with WordPress and WooCommerce

To contribute to the ‘Accessibility Days 2018‘, an awareness event for software developers, designers, manufacturers, and others, that takes place in Bologna, on May 19th and 20th, Rafael Minuesa will be giving a lecture on how to create accessible sites with WordPress and WooCommerce.

Last year we prepared a Slide Presentation on the same topic, but unfortunately Rafael wasn’t able to attend. However we will be reusing some of that material, specifically the introduction that deals with statistical facts on the number of users around the world who suffer from some kind of disability, to help put the issue into perspective, and that we have embedded below again:

 

Below are some of the additional topics we would like to cover this year.

Accessible Markup, such as:

  • ARIA Landmark HTML5 sectioning elements
    • <header>
    • <nav>
    • <main>
    • <aside>
    • <footer>
  • CSS class screen-reader-text
    • To hide text from vision that is useful only for screen readers users
    • To skip links for keyboard navigation before the link get focus
  • Web forms
    • Provide instructions
    • Label controls for input fields
    • Group controls with fieldsets and legends
    • Accessible notifications (error and success messages)

Dos and Don’ts on Accessible Web Design, including:

  • Text style and layout
  • Font size
  • Resize text
  • Color Schemes
  • Color Contrast

Accessible Content, that covers the use of:

  • Descriptive link texts
  • Link destinations
  • Headings
    • One unique H1 per page, post or archive describing what the page is about
    • H2 through H6 to divide sections of the page
    • Don’t skip or mix up headings.
  • Alt text for images

We will also explain what kind of tools we can use and how to test our WordPress sires and WooCommerce stores for accessibility. Since we are using the WordPress platform most of these tools come in the form of plugins such as:

  • WP Accessibility Plugin enables skip links with WebKit support, adds language and text direction attribute, adds an outline to the keyboard focus state for focusable elements, provide a toolbar toggling between high contrast, large print, and desaturated (grayscale) views of your theme, and enforces the use of alt attributes on images.
  • Access Monitor’ schedules accessibility site audits weekly and reports a list of different accessibility issues.
  • Accessibility Widget’ adds a sidebar widget to change text size in your WordPress or WooCommerce site, allowing you to resize the content inside HTML and CSS tags, set font sizes, set controller text, or set tooltip text on mouse hover.

Finally, we will introduce some of the Testing and Development Tools that can be used to test your WordPress and WooCommerce website accessibility for different target groups, such as:

  • WAVE (Web Accessibility Evaluation Tool) that inspects any given web page and produces a Summary that lists Errors, Alerts, Features, Structural Elements, HTML5 and ARIA, etc.
  • Tota11y that will show errors covering multiple topics from headings, to contrast and form labels.
  • Tenon.io provides automated testing, and can be integrated into WordPress with the plugin Access Monitor
Facebooktwittergoogle_plusredditmailFacebooktwittergoogle_plusredditmailby feather

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.