Leveling Up On WordPress Accessibility

You have the vision of an eagle. Your hands are nimble and your arms are strong. The mouse or trackpad is an extension of you, effortless and fluid.

One day, this may no longer be true. Vision and mobility impairments affect 13-16% of adult internet users, and these statistics often don’t contemplate “unofficial” disabilities tied to aging, such as decreased vision and dexterity. Add to that “short term” disabilities, like a broken arm or hand that will ultimately heal.

  • Consider Caitlin, a 30 year old web designer that is diabetic. Her blood sugar is hard to control, and on days that are bad her vision is as well.
  • Or perhaps Michael, an active and vibrant 63 year old who simply can no longer read low contrast text in your website footer.
  • Jacob is 13 and broke his arm in several places. He won’t be able to use a mouse for weeks and can’t tab through your website navigation
  • Colin is a color blind IT director who can’t see your link color.
  • Cassie has been blind since birth and uses a screen reader.
  • Marla has Parkinson’s. The tremors in her hands make clicking tiny links almost impossible.

Websites are often built by people who can see and move well for people who can see and move well. We must all do better.

When Flagship made the decision to enter the WordPress theme space, one of the core decisions the team made was to be a leader in theme quality. Flagship wants to make themes that meet or exceed WordPress coding standards in every way and adhere to every best practice.

Flagship strives to be at the forefront of WordPress theme accessibility.

All Flagship WordPress themes are built on the Compass, a starter theme developed by Flagship to leverage development best practices. Early in the development process, we wanted to be sure Compass met or exceeded accessibility best practices so we engaged Rian Rietveld, a member of the Make WordPress Accessible team, to do an accessibility audit of the framework. Any accessibility issues identified during the audit were captured, processed and addressed during the development of the Compass.

Key areas that we addressed:

  • All Flagship themes are fully capable of keyboard only navigation. This is critical for people using assistive devices or with certain types of limited mobility. We achieved this by implementing focus styles throughout the themes, using skip links, and Gary Jones contributed a custom plugin to make dropdown menus keyboard accessible.
  • Our themes use unique IDs on all elements including the WordPress search forms. The presence of IDs is critical for the creation of anchor links that are used by assistive devices.
  • Screen reader text elements are used throughout the theme on key elements. This invisible content empowers the use of screen readers. Learn more about this
  • HTML5 and CSS3 WC3 code validation. All theme code passes validation
  • Added Aria elements in the mobile navigation and the search form. ARIA enables accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more.

This is the just beginning of a continuous learning process for us. There will always be more work to do to maximize accessibility, and we are actively seeking input and help in this area.

We All Need To Support WordPress Accessibility

Web accessibility belongs to all of us. The percentage of people online quietly affected by these issues is staggering, and you can probably connect with someone with accessibility needs easily if you haven’t already just by asking some thoughtful questions.

Accessibility is something we’ve been passionate about since we started working on Flagship earlier this year. Ryan shares some personal insights on why we believe in it, and how we plan to make the web as inclusive as possible with the products we build.

One Way We Can All Help

Knowbility, a nonprofit organization with the mission of improving technology access for millions of youth and adults with disabilities all over the world, has a Kickstarter campaign: Online Training: Make Apps and Sites Accessible to All. Despite support by leaders in the web design industry, this campaign is struggling for funding. Supporting this initiative would be an excellent way to support accessibility.

Our WordPress accessibility efforts will be ongoing as we continue to learn everything possible about this important topic. If you or a friend or a family member deal with this issue, please get in touch. We would love your feedback and suggestions.

You can help by sharing this and adding to the conversation!

7 Comments

    1. Rob Neu

      Thanks Carrie! It was really important to me that we did everything we could to figure this stuff out before releasing our first themes. It wasn’t something that I had a lot of awareness about until we did that WP Bacon podcast about it a while back.

      Since then, I’ve been paying a lot more attention and learning as much as I can about how to make sure content is available to everyone. I hope more commercial WordPress product developers follow our lead and do what they can to ensure everyone has access to the websites using their products. :)

      Reply

  1. Very excellent guys! I’m so glad to see a premium theme vender with a commitment to accessibility from the ground up!

    Reply
    1. Rob Neu

      Thanks Amanda. It’s always been kind of surprising to me that more commercial WordPress vendors don’t pay attention to accessibility. There’s a large market of not only end-users out there, but also businesses and organizations which cater to those users.

      In some cases, it’s even a legal requirement that websites comply with accessibility standards, so it seems silly to ignore all these potential customers. We’re happy to do what we can to meet their needs, but we seriously hope that we’re not the only ones who embrace this stuff. An accessible web is a better web!

      Reply

      1. At UpThemes, we’re very aware of accessibility when we build themes. We’ve even gone so far as to create a Sass color scheme generator inside our themes that enforces color contrast rules so users literally cannot use poorly-contrasted text (unless they override our color schemes with custom CSS).

        A theme alone can only go so far to fix some of the a11y issues that users can stumble into with WordPress. I think the focus should be on building a more accessible WordPress, meaning from Core outward, extending to themes and plugins. While themes control a lot of the navigation and visual elements like links and buttons, WordPress (and the people using it) controls the majority of content that is being generated from the backend. This is where a11y plugins and having an understanding of how to create accessible content come into play. Users don’t understand how to write content for all audiences and that is where many of these issues occur.

        We’ve been working on this for years and it is definitely nice to see you guys join the effort.

        Reply

        1. We’re working on that over at make.wordpress.org/accessible. Glad to see you guys at UpThemes are looking out for accessibility too.

          Reply

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>