The Ultimate WordPress Accessibility Guide

Web accessibility is a guiding principle that no disability should prevent any user from accessing the information, tools, applications, or platforms on the World Wide Web. It’s an important consideration in reducing barriers to service for individuals with physical, cognitive, situational, and social-economic disabilities.

The World Wide Web Consortium (W3C) has developed universal standards for web accessibility to guide businesses as they try to accommodate every user accessing their websites.

In this blog, we discuss what web accessibility is, why it is important, how accessible WordPress is right ‘out of the box,’ and what you can do to make your own website more accessible.

Table of Contents

• What is web accessibility?
• The four principles of web accessibility
• Different types of disabilities impacting web access
• Examples of assistive technology
• The shared benefits of accessible web design
• Business benefits of accessible web design
• How accessible is WordPress “out the box?”
• How to make your WordPress site accessible
• Common WordPress accessibility pitfalls

What is web accessibility?

Web accessibility means that websites and other technologies are designed and developed so that people with disabilities can easily use them. It means they can perceive, understand, navigate, interact, and even contribute to the world wide web, regardless of their cognitive, physical, or socio-economic limitations. The World Wide Web Consortium (W3C) is an international community that works to develop universal standards for web accessibility.

What are the four principles of web accessibility?

The Web Content Accessibility Guidelines (WCAG) define how content on the internet can be made more accessible for people with a wide range of disabilities. These guidelines are organized using four core principles, which form the acronym POUR.

• Perceivable: Your information, and the components your users interface with, have to be presented in ways that allow them to perceive and comprehend the information, regardless of their disabilities. This means including text options for images, providing time-based media alternatives (such as an audio track for a video), and ensuring adaptable and distinguishable content. An example of a component that may not be as distinguishable to someone with poor visibility is the structure of a content piece where different sized text is used to indicate headings and subheadings. Ensuring this structure is described in text format (to be understood by a text reader, for example) is one way to create perceivable content.
• Operable: The interface components, as well as the navigation, have to be operable to all users. In other words, it cannot require the user to interact with it in ways they are unable to. Considerations include keyboard accessibility, ways to help users navigate easily, various input modalities, and providing enough time for users to read and use the content. This also includes not designing content that has been shown to cause seizures, such as flashing or blinking content.
• Understandable: Your information and the user interface must be presented in ways the user can understand; the user should understand the user interface as well as the information presented. Solutions involve readable text, web pages that operate predictably, and assistance for users to avoid and correct mistakes.
• Robust: The presented content has to be robust enough so that a wide variety of assistive technologies and user agents can reliably interpret the information. Assistive technology should convey your content accurately without having to form assumptions or leave gaps in the content. Applying this principle includes making sure your web pages and content are compatible with current users and assistive technology, as well as future users and assistive technologies.

What are the different types of disabilities that impact access to the web?

A variety of disabilities can impact a user’s web access, resulting in different accessibility needs.

• Visual: Visual disabilities encompass a wide range of vision loss, from mild vision loss in one eye to complete vision loss in both eyes. Some individuals may be color blind or sensitive to certain colors, as well as brightness.
• Cognitive, learning, and neurological: Cognitive, learning, and neurological disabilities include neurological disorders, such as memory impairments, autism spectrum disorder, and seizure disorders, as well as behavioral disorders, such as ADD/ADHD, and mental health disorders, such as schizophrenia and anxiety. Some people may have difficulty processing sensory information that includes learning disabilities such as dyslexia.
• Auditory: Auditory disabilities, similar to visual disabilities, encompass a wide range of hearing impairments, from mild hearing loss in one ear to complete hearing loss in both ears.
• Physical: Physical disabilities include many disorders which result in weakness and limitations of muscular control. This can include involuntary movements, paralysis, joint disorders such as arthritis, pain that restricts movement, and lack of coordination. It also includes people who have had amputations and are missing fingers or limbs.
• Speech: Speech disabilities can include the complete inability to speak (muteness), stuttering, or weakness in the muscles required for speech. Muteness can have many causes, such as cognitive impairments or the inability to learn how to speak, and several mental disorders.
• Economic disadvantages: While people with economic disadvantages might not fall under disabilities per se, it can present many difficulties with accessibility. This includes using an older computer or technology, users with slower internet connections, and even limited data.
• Limitations with a device’s functionality: This is another constraint for web accessibility. A user trying to browse a website using a feature phone (i.e., a model that isn’t a smartphone) won’t necessarily be able to access rich content, such as embedded videos, on the site. 

Web accessibility principles ask us to consider the workaround. A great example of a workaround for limitations caused by economic disadvantages is Facebook’s solution for when users have run out of data but still want to keep connected via the social media platform.

If you have no data or access to wifi, you can still browse Facebook in free mode. Free mode displays post text, comments, and links while restricting those data-hungry elements, such as images or videos.  

Other web accessibility solutions include using assistive technologies.

What are some examples of assistive technology used for accessing the internet?

There are numerous software and hardware technologies that people with disabilities can utilize to access the web.

• Screen readers: These are helpful for users who have significant vision impairment; they help users listen to content on a web page, rather than trying to read it. Screen readers can also be used by individuals who have never learned how to read.
• Screen magnification software: This type of software enlarges screen content for users who have partial vision impairment to be able to read it more easily. It helps track a mouse cursor more easily and, depending on the product, also enables users to change how colors appear on a screen, invert colors, and even apply tinting.
• Alternative input devices: These devices allow users with physical or cognitive impairments to access the web as an alternative to the typical mouse and keyboard. Such devices include head pointers, motion or eye tracking, speech input software, large-print, tactile keyboards, and single switch entry devices.

The shared benefits of accessible web design

You don’t necessarily have to have a disability to benefit from easier access to the internet. Web accessibility comes in handy whether you are temporarily disabled (nursing a broken arm, for example), have expensive or limited bandwidth, slow internet speed, or are growing older, with changing abilities. 

Another universal web accessibility consideration is how compatible a website is for different devices being used to access websites. Users access the internet from a range of different technologies, including smartphones, tablets, smart TVs, and smartwatches. How accessible your website’s content is for each of the device types will impact traffic to your site and influence conversions. 

What are the business benefits of accessible web design?

There are several benefits to your business by having accessible web design. Beyond ranking higher in search engines and avoiding fines or lawsuits, it also provides a better user experience.

Why should web accessibility be a priority for business owners?

Your website is often the first point of contact with a potential customer. In today’s day and age, online users expect quick access to the information they need – attention spans are short, and consumers are more than spoiled for choice when it comes to service provider options. If your web pages load too slowly, your site is difficult to navigate, or your communication isn’t clear, don’t expect them to stick around to buy from you or find out more about your services.

Having an easily accessible site is, therefore, an essential customer service tool. 

Some additional benefits of web accessibility include:

• Avoid ADA lawsuits: Web accessibility lawsuits are rising, and even though Congress and the courts are still clarifying how the Americans with Disabilities Act (ADA) applies to website accessibility, ensuring your website meets standards put forth by the WCAG can prevent any legal headaches, now or in the future.
• Reach more customers regardless of ability: As the number of people living with disabilities continues to grow, it’s smart business to make sure your website complies with web accessibility standards. According to the Centers for Disease Control and Prevention (CDCP), as of September 2020, 26% of adult Americans were living with some form of disability, which directly impacts their everyday functionality. That’s one in four American adults and 61-million people. In practical terms, businesses that ignore or sideline this section of the population will miss out on potential customers and revenue.
• Elevate overall site user experience: Even for users without any disabilities, web accessibility provides a better user experience. Many of the recommended web accessibility features are helpful to mobile device users too. And an easily navigable website is appreciated by almost everyone.
• Boost SEO efforts (accessibility & SEO are co-dependent): Accessibility features, such as metadata, allow search engines to crawl and index your website easily, as well as more accurately. And accessible websites that provide better user experiences and faster loading speeds often rank higher in search engine rankings.

What are the consequences of not being serious about accessibility?

Neglecting your website’s accessibility can leave your business open to lawsuits and complaints, which will cost your you both time and money. Additionally, you will lose a significant number of people who could be potential customers – simply because they cannot access your website easily. Not having accessibility features can also drop your search engine rankings, causing you to lose more business.

How accessible is WordPress “out of the box”?

As you may be aware, there are two different types of WordPress websites; self-hosted WordPress.org sites, and sites hosted on WordPress.com. This guide focuses on accessibility features for WordPress.org sites.

What initiatives does WordPress.org have centered on web accessibility?

Currently, WordPress does not require themes to be reviewed for accessibility unless the submitted theme uses the tag “accessibility-ready.” These themes will undergo an accessibility review to see if the minimum requirements for accessibility have been met. Themes that fail this review can still go live, but will have the accessibility-ready tag removed.

WordPress has an accessibility team that is working to make the WordPress admin area and bundled themes align with the WCAG standards. However, there are still areas that are not aligned with these standards.

What accessibility measures does WordPress do well at?

The accessibility-ready theme review process is extensive, and encourages developers to exceed the minimum requirements. WordPress.org also has resources for developing accessibility-ready themes and guidelines on required features vs. features that are recommended.

The WordPress dashboard has also seen huge accessibility improvements, including notifications that pop up when you try to incorporate something in the backend that would hinder user accessibility. For example, if you use a font that’s too light to read in combination with your background, a message will display that warns that the color combination may be hard for some people to read, and it also suggests changing your background or text color.

What areas need improvement?

One of the biggest areas for improvement is the accessibility features for WordPress plug-ins. This is more difficult for WordPress to monitor, given the sheer number of plug-ins available, as well as its open-source nature.

Some plug-ins are specifically advertised as making your site compliant with web accessibility guidelines, but recommend doing your own homework before installing these to ensure they do meet WCA guidelines.

How do I make my WordPress site more accessible?

The first thing you need to do is find out how accessible your site is right now. There are hundreds of automated tools, either online services or software programs, that can evaluate your web accessibility.

You can also conduct a basic accessibility review of your site using a guide, such as this one from the W3C Web Accessibility Initiative (WAI).

Next, you need to evaluate the scope of repairs required and develop an action plan for how you will address them. There are some sections that you should prioritize in your action plan, including:

1. Key tasks and activities on your site, including online registration, search, submit, or checkout processes.
2. Content relevant to users with disabilities, as well as content that is most frequently accessed.
3. Content already reported as inaccessible. Any issues that are submitted through your website feedback form or any user comments should be addressed promptly.
4. In-development content, such as sections of your website that you are redesigning. This way, you can avoid creating new barriers.

You should also prioritize high-impact repairs, such as features that appear on multiple or frequently-used web pages, and low-effort repairs, which require less time and cost, as well as less testing or validation.

If you are just beginning to create your web pages, you should design, write, and develop with accessibility in mind right from the start. The W3C WAI has accessibility tips specifically for designing, writing, and web development, which can assist you no matter where you are in the process or your job or area of expertise.

Finally, you can consult with WordPress accessibility experts like SiteCare. We can evaluate and test your website and help you repair any deficiencies.

Checklist of Common WordPress Accessibility Pitfalls

• Alt text: Text alternatives, aka alt text, convey the purpose of non-decorative web images, including graphics, charts, or other informative illustrations. For a person who is blind and using a screen reader, alt text can be read aloud, enabling them to visualize the image. Users on mobile devices, who have turned off image downloads to increase download speed or save bandwidth, can also read the alt text and visualize the image. Alt text should not be a simple description of the image; it should describe the image function and provide a user experience similar to seeing it.
• Keyboard accessible links/menus: Keyboard access and focus allow users who cannot use a mouse to interact with the internet through their keyboard. Content and web functionality should be able to be accessed using only a keyboard. This is because many assistive technologies rely on keyboard commands. Keyboard focus indicators (the visual markers on a web element that can be manipulated using a keyboard) should follow the logical order of the different elements of your web pages and should be clearly visible as a person moves through the page.
• Color contrast: This refers to the ratio of contrast between the color of the text and the background. Nobody can read text where there is no contrast between the color of the text and the background. However, some individuals require different levels of contrast to be able to read. For example, high contrast is often needed for people with visual impairments, such as yellow text on a black background. However, someone with dyslexia could have difficulty reading text that uses bright colors, and a darker text color on a medium brown background would be more accessible. Users should be easily able to change the colors of the text and background in their browsers, and a web page should function in the same way no matter what color is used.
• Skip links: A skip link allows users to easily move past navigation links and skip to the web page’s main content. Users who only use a keyboard or a screen reader can use a skip link to move to main content sections, with fewer clicks or movements.
• Schema and metadata: Metadata, which are attributes that help browsers build out a machine-readable data structure for browsers to utilize, is key in locating and organizing content for Reader Mode. Reader Mode is a feature that allows a user to filter out non-essential page elements and distracting animations, as well as change the text or layout to improve readability. This is helpful for people with cognitive difficulties or learning disabilities because it removes any unnecessary or distracting information.
• Autoplay media/carousels: Media, such as ads, videos, or other carousels, that start automatically or are auto-updated, can cause accessibility issues for certain users. People with attention deficit disorder or visual processing disorders may not understand the information being presented or be too distracted by it, preventing them from focusing on the content they want to access. Users should be able to pause, stop, or even hide autoplay media or other carousels.
• Flashing/blinking content: Flashing or blinking content can cause seizures in individuals with photosensitive epilepsy, particularly if the content covers a large area of the screen, is very bright, and flashes more than three times in one second.
• Form labeling: Proper labeling of forms is important for accessibility because it allows users to interact with them in alternative ways, such as with voice input, using the keyboard, or a screen reader. And when the labels are marked up correctly, the label itself becomes a clickable link, adding to accessibility.
• ARIA landmarks: ARIA landmarks are attributes you can add to your site to define specific areas, such as the main content section of a page or a set of navigation links on a menu, so users with screen readers can easily navigate your site and understand what is coming next. Without these attributes, users on screenreaders will only hear a reading of a collection of links, with no indication that they are at the main navigation area for the web page.
• Fonts and typography: The size and style of the font you use for your text, as well as how it is arranged, is an important consideration in terms of accessibility. Smaller fonts can be difficult for people with vision problems to read, and cursive fonts can be difficult for many people to read, even without any disabilities. The appearance of your text needs to be legible and easy for assistive technologies to process and interpret accurately.
• Logical content/header hierarchy: Headings should be used on every page and follow a set hierarchy to structure your content and provide a logical flow. This means starting with a level one (or h1) heading, and not skipping subsequent levels as users move through your content to eliminate confusion and stress for individuals using screen readers or those who can only use a keyboard to navigate your site.
• Captions/transcriptions: Captions, which are text versions of speech and other audio content, and transcriptions, which are a complete text transcript of both the audio and visual components of content, provide access to individuals with vision and hearing disabilities. Transcripts can help users who are both deaf and blind interact with your content using refreshable Braille devices. Captions help users who have hearing difficulties understand audio content. Both captions and transcriptions should not simply relay the spoken word; they should also include descriptions of audio and visual information. For example, someone entering a room should be described in a transcript for users who cannot see what is happening.

Making sure your website is accessible to everyone, regardless of physical disability or economic circumstances, is not only good business practice, but it’s also good practice in general. You should not only approach web accessibility with the primary goal of improving search engine rankings – or avoiding lawsuits – but to provide an outstanding user experience for anyone who visits your website.

Contact SiteCare to see where you can improve your web accessibility.