Why accessible web design is not an optional extra

Accessibility is a crucial component of modern web design. Ensuring that everyone can participate in our shared online space is imperative. Accessible features on a website will engage people with disabilities, learning differences, and everyday users alike — a key part of creating an inclusive online space. 

Let’s explore the importance of accessible web design and some best practices for creating websites that are engaging to everyone.

Why accessible web design is important

Accessible web design is essential because it ensures that everyone, regardless of their abilities or disabilities, can access and use the internet. By creating websites that are accessible, we allow people with disabilities to engage with digital content, services, and products fully. This group includes people with visual, auditory, physical, cognitive, and neurological impairments.

The Internet has become an essential part of everyday life. Over the past decade, we have come to rely on the web as a primary source for business transactions, news, and entertainment. However, many users cannot fully enjoy the web unless designers and business owners are informed about accessibility needs during the development process.

One in four U.S. adults has some form of disability, according to the Centers for Disease Control and Prevention. That’s 61 million potential customers that need accessible websites, just in the United States alone!

While disabilities such as blindness and deafness certainly make the Internet harder to use, there are many other common impairments to consider:

• Colorblindness
• Light sensitivity
• Epilepsy
• Learning differences, such as dyslexia
• Broken bones
• Burn-related injuries
• Age-diminished vision
• Hearing loss
• Arthritis
• Depression
• Mobility issues

These examples make up only a partial list, but as you can imagine, nearly everyone experiences at least one of these issues at some point in their lives. From product pages to the products themselves, universal accessibility potentially benefits everyone who visits your website. 

Poorly designed websites will slow people down and make it difficult to communicate, participate in community forums, make purchases, and participate in other activities that rely on online services. A highly accessible site makes it easier for everyone to engage, share, or make a purchase on your site. 

Web content should be accessible to all, promoting inclusion, not exclusion.

A brief overview of the WCAG standard

The World Wide Web Consortium (W3C) is the international community that develops Web standards. Its mission is to define strategies, standards, and supporting resources to make the Web accessible to people with disabilities. One of W3C’s core standards is the Web Content Accessibility Guidelines (WCAG).

Many WordPress developers have used W3Cs resources to create easy plugins that teach, test, and incorporate accessibility on any WordPress site. 

The W3C’s own highly accessible website includes hundreds of resources for designers, developers, and managers. You’ll find a free introductory course to Web accessibility that’s designed for both technical and non-technical learners. A section dedicated to Accessibility Fundamentals also breaks down strategies in simple and actionable ways. 

The importance of WAI-ARIA

When implementing accessible web design, you will encounter two core accessibility standards: ARIA and WAI-ARIA. ARIA stands for Accessible Rich Internet Applications. WAI-ARIA is an acronym that stands for Web Accelerator Initiative to Independence through Augmenting Interaction. 

The WAI-ARIA is a suite of web developer tools that helps make websites more accessible to people with disabilities. It especially helps with dynamic content, and advanced user interface controls developed using HTML, JavaScript, and related technologies. Without the WAI-ARIA, certain functionality used in Web sites is not available to some users who rely on screen readers.

An introduction to screen reader accessibility

Most people with visual impairments cannot read text on a screen. Instead, they use assistive technologies, such as screen readers, to listen to the website and get basic information, such as the title and the text on a given page.

When a person with a visual impairment visits a website, their browser directs the screen reader to describe the current page. The person can then control the program using the device’s keyboard or other controls. An accessible website uses meta tags, alternative image text, and good text markup practices to ensure screen reader software has the right information to perform its function. 

Several different screen readers are available, but the most common today are built right into the operating system. Windows 11 has a fully integrated screen reader. Macs have “Voice Over” that can read the contents of a web page or offline document, as well as “Voice Control” that allows someone to control their computer via voice. Assistive technology users can also use the built-in screen readers on most smartphones and tablets.

How to examine your site’s static elements

When examining your site’s static elements, start with the obvious: 

• Page titles
• Headlines, including H1s, H2s, etc. 
• Body Text
• Image ALT text
• Image captions 

These are the most crucial elements of any page. Make sure page titles are relevant and specific. Likewise, headlines must be specific. Links should provide context, so instead of phrases like “Read More” it’s better to use something like,  “Learn More about Accessibility.”. Body text must be error-free, and for images, ALT text should concisely describe what is shown in the image. 

In the example above, you can see the ALT text embedded in the page source code. It clearly explains the illustration, giving screen readers crucial details for describing the image aloud. 

In WordPress, making static elements accessible is incredibly easy. The developers who update the WordPress core have published Accessibility Coding Standards, and everything from themes to the block editor were developed with accessibility in mind.  

To truly transform your website into an accessible one, you’ll also want to examine the following elements on your site. The same rule applies here. All elements should be relevant and specific: 

• Footer – All critical pages, such as Contact Us and Privacy Policy, should be linked with clear anchor text.
• Header – All links must work properly, and header images should make text and icons stand out. 
• Navigation – Keep drop-down menus simple, and avoid too many layers of navigation. 
• Sub-navigation – Must be easy to find, with text that isn’t too small to read on a mobile device.
• Site search – Should be labeled with the term “Search,” or if using an icon, make sure the icon ALT text includes this term. 
• Page sections – Relevant, complementary pages should be grouped together to help users find information faster.
• Article categories and tags – Make sure every article is categorized and tagged with relevant words or phrases.
• Forms – Ensure each form field is clearly labeled, and check for voice-to-text functionality. 
• Maps – Use dynamic map plugins that connect with GPS programs, rather than static JPGs. 
• Embedded content – Make sure all embedded iFrames, videos, and external dynamic content works properly on desktop, mobile, and in all popular browsers. 

Fonts should be easy to read in both large and small sizes. Download a screen reading extension for your browser. Close your eyes, and fire it up. If you are confused about what’s on your page, an impaired user will be, too. 

Keyboard operations — more than shortcuts

Many people with disabilities use alternative input methods, such as a mouse, keyboard, voice, or a mouth stick to navigate a computer or a smartphone. But these methods are not just “shorthand” for clicking or tapping. A person who struggles to use a mouse can still navigate using the keyboard, for example.

Some people with disabilities use the following key operations:

• Home key – The home key (or arrow key) can be used as a cursor control to move the focus to the first element that matches the current selector (such as a heading).

• End key – The end key can be used to advance the focus to the first element after the one currently under the cursor.

• Page up/down key – The page up/down key can be used to increase/decrease the amount of text shown on a page, for example when examining a blog post.

• Plus sign (+) – The plus sign can be used to zoom in on a page, for example, when examining a website’s content.

Test your website in multiple browsers, to make sure that these common functions work properly. 

Using color and sound to add clarity, not confusion

Accessible design does not mean inventing new techniques or using obscure techniques. It means using color, contrast, and other content elements to add clarity for everyone.

Color and images should not be the only way to show functionality. A great example is hyperlinking within a block of text. Links should be both a different color and underlined or otherwise styled differently for maximum accessibility.

An accessible heading should be large enough to see clearly on small screens. For example, a heading on a page should be bright, bold, and easy to read. It should also be error-free, so that screen readers will have clear pronunciation (for example, “website design” not “we bsite de sign”).

Higher contrast colors help the visually impaired see your website clearly. Avoid background colors that are too similar to the color of your icons and text. 

When using elements on your page with sound, like videos or embedded music, the sound should never play automatically. It’s critical that the user can control the playback, to avoid playing over sound readers. Surprise noises on a page can also be startling and confusing, so use visual cues on the page to help users know when sound is available, and let them choose when to play.

Remember that screens today come in all shapes and sizes, so you may need to create a different layout for vertical mobile vs. wide desktop screens. When you have a wide rectangular image on a desktop page, you will need to re-crop it to be square on mobile devices. Likewise, tall vertical photos look great on mobile phones but tend to overwhelm the user if stretched across the entire desktop page.

Access for everyone, everywhere

Accessible websites improve communication and inclusion for everyone. It will encourage inclusion and reduce frustration for all visitors, including those with disabilities. People with disabilities use accessible websites to communicate, participate in the community, shop, and more. By following these best practices, you can ensure that your accessible website is user-friendly and easy to navigate.

Have you discovered some accessibility best practices while building websites? Give us your tips in the comments below.