Web accessibility, where to start?

Accessibility was a hot topic at WordCamp Europe 2018. It was a reminder to all of us that our websites – including our content – shouldn’t just be about looking and sounding beautiful. Moreover, this was a sentiment echoed by  some speakers’ workshops. Those workshops addressed prototyping and testing accessibility, and on the main stage – Berlin-based WordPress contributor and web designer, Maja Benke gave a broad overview of accessibility considerations, tips, testing tools, and resources.


Maja covered the different types of disabilities such as those that affect a person’s vision, movement, remembering, hearing, mental health, and activity. Nevertheless, she pointed out that accessibility isn’t just important for people with permanent disabilities but also temporary, changing or situational ones. Even a sports injury such as a broken wrist can be classed as a disability, bringing with it accessibility challenges, as the person may now experience discomfort to use a computer mouse.

“Design is not art. Design is making sure your site is usable by users.”

While on pre­vi­ous WordCamp edi­tions, inclu­siv­i­ty and usability have been framed main­ly around acces­si­bil­i­ty, this time there was a sub­tle shift towards design think­ing and embrac­ing the full human diver­si­ty when solv­ing prob­lems. WordPress itself is has put together a “Make WordPress Accessibility” Team to increase the accessibility of WordPress core and resources. But still, why is it important to think about it from a website owner’s perspective?

What is Website Accessibility in the first place?

Some people may think website accessibility is just another buzzword these days as not everyone has a firm grip on what that term means.

Website accessibility refers to the inclusive practice of actively designing, developing, and creating content in such a way that it does not deter any person from interacting with the website, regardless of their platform, browser type or their capabilities. Accessibility is usability under a microscope. More specifically, website accessibility aims at making sure that all Internet users can equally perceive, understand, navigate, and interact with the Web. Notably, it focuses on people that have disabilities that impede their cognition, vision, hearing, and movement. It is a way of rethinking your approach to design and development, where you go beyond just the base level of access to information.

It’s easy to think of accessibility as a ‘nice to have’ when designing, but following minimum accessibility standards is actually a lawful thing to do. In the United States, many websites exist within categories that are legally required to be accessible. Many other countries have similar laws. Several organizations, including the W3C, have developed standards that website designers can apply to ensure that all visitors can make full use of the information and functionality of a website. W3C also notes that website accessibility is not solely for those with permanent disability limitations.

That’s a small picture. It is also beneficial for users with limiting situations and impairments such as:

  • Those using mobile phones, navigations, smartwatches, smart TVs, and other devices with small screens, different input modes, etc.
  • Elderly individuals with varying and changing abilities due to aging.
  • People with “temporary disabilities” including broken limbs, sprains, concussions, lost glasses, or a medical condition.
  • People with “hidden” disabilities such as a person with epilepsy or seizure disorder.
  • “Situational limitations” – temporary disabilities that create barriers. Examples may relate to the prevailing circumstances such as in bright sunlight. Situations such as holding a baby in one hand while trying to type with the other or being in an environment where you cannot listen to audio, such as public transportation.
  • Circumstances that include mobile devices and device limitations, such as having no mouse, or constraining circumstances, such as interacting with a poorly designed website (e.g., a web site requiring Javascript when such cannot be used in places such as on a public library computer or a public hotel computer), etc.
  • Individuals experiencing slow Internet connection, or who have limited or expensive bandwidth due to the deficient Internet telecommunications infrastructure in their geographic location.

Essentially, there are various situations and scenarios we need to consider when creating content and context online. Addressing the needs of people with disabilities can improve usability for everyone, including people experiencing situational disabilities.

The importance of creating a web that is accessible to anyone and everyone has always been emphasized by the inventor of the World Wide Web itself:

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect” – Tim Berners Lee.

Website accessibility should be about making something valuable, not just accessible, to as many people as we can. Accessibility is about all of us.

Why Accessibility Matters?

Usability and user experience are integral to a consumer’s decision journey. As the Internet continues to evolve, there’s a significant amount of users that cannot “access” the wealth of information available online. Whether out of circumstance, choice, or context people are diverse. As people use different approaches and tools to read and operate interfaces, what the interface offers each user should be comparable in value, quality, and efficiency. The World Wide Web Consortium (W3C)  developed guidelines to safeguard the accessibility of a website: the Web Content Accessibility Guidelines: WCAG. We are currently at version 2.1, published on 5 June 2018.

There are 3 levels:

A – basic accessibility

AA – the worldwide standard also used for government, public service websites and WordPress core

AAA – for dedicated software

Your business can greatly benefit from improving the web accessibility of your website, provided if you understand it correctly. When adding the user’s ability to create different personas in web accessibility, we can start by considering the impairment categories outlined by W3C:

  • Auditory
  • Cognitive
  • Neurological
  • Physical
  • Speech
  • Visual

Accessibility enhances responsiveness

Accessibility enables users to navigate your site the way they want or need to, rather than forcing them to engage in a way that you favor. Well-designed websites can be responsive to a user’s device as well as to a user’s needs.

Accessibility is good for SEO

When your website is accessible, it opens your site to a broader audience and is good for SEO/search crawler bots/Google rankings. It is important to note that Search Engine Optimization (SEO) and website accessibility are not the same things. And although, web accessibility is not a direct ranking factor, incorporating elements of accessibility aligns with many core search engine optimization techniques.

Almost without exception, Google encourages websites with accessibility techniques included in the metadata, content structure, semantics, functionality, visual design, and development which will get better results in organic search. Why? Search engine crawlers can’t see or hear, neither can make sense of graphical elements, and they only use a keyboard to navigate the page, similar to many people with disabilities. They will parse your site in the same ways that a screen reader or people with disabilities will — neither can make sense of graphical elements, and both rely on document structure to navigate the page and determine relevance. And while this benefits people with vision, hearing, and motor skill limitations, it can also help site visitors with cognitive challenges like dyslexia and English as a Second Language (ESL).

Being accessible wins loyalty and trust

Accessibility shows professionalism. Not many people go the extra mile when it comes to accessibility. This means any improvements you make show you’re committed to providing a better experience.  It brings comfort and ease of access to people with disabilities who, in fact, are more likely to engage in online shopping activity than the average person. By forming this connection with your company early on, such customers will build brand loyalty and be more likely to recommend you to their friends and family.

Accessibility optimization often leads to cleaner interfaces, more straightforward navigation, and other elements that work well in improving the overall user experience. Hopefully, in turn, that’ll lead to an increase in brand reputation, and consequently, customer loyalty.

Accessibility has increased audience reach

People with disabilities are a significant community. According to data sourced from CDC, almost one-in-five American adult citizens have hard of hearing and nearly one-in-ten adults have trouble with vision. The hard number just for these disability categories alone is more than 64 million individuals. The US Census Bureau states that 19% of the United States population identifies as having some disability, which is roughly 57 million people. If you consider a global audience, you are talking about 15% of the world’s population. That’s about 1 in 7 people on Earth or one billion people according to the World Health Organization (WHO) . That is a considerable number of people who could benefit from an accessible website right from the start, so you can’t ignore them. Keep in mind, the official numbers do not even include people that either do not identify as having a disability or those populations that could benefit from accessible websites, such as English as a second language (ESL) users and the aging population. So the number of people needing accessible websites, in reality, could be much higher. That’s an incredible customer base to be missing out on.

We may not realize this now, but population aging is set to become one of the most significant social alterations in the age of humankind. That growing group of “silver surfers” is getting more and more familiar with the Internet, using mobile devices and setting up their websites. It’s essential that older users have their accessibility needs met.

Strategy for Accessible websites

In most cases, it’s practically impossible to create an accessible website for everyone. However, it is possible to improve the experience for many people by making a few simple adjustments to your website’s design.  Before we dive into the specifics, we recommend you take a look at the Web Content Accessibility Guidelines (WCAG) 2.0 put together by the World Wide Web Consortium (W3C).

Write a clearer copy

The understandability of the information written on your website depends upon clear and simple writing  for easy comprehension. It will help people with cognitive disabilities, people who aren’t native speakers, users on mobile devices—and it’ll make your imposed ideas clearer for everyone.

Use headings correctly

Screen readers pay attention to header tags to navigate content and use them as clues about the importance of information, and the structure of the content on a page. By using headings (<h1>, <h2>, etc.) correctly and strategically, the content of your website will be well-organized and easily interpreted by screen readers. Don’t skip a heading level, and don’t use them out of order just because it looks good visually (which can confuse screen reader users); instead, create a new CSS (Cascading Style Sheets) class to style your text.

Use tables appropriately

In the past, using tables for website layout was a common practice. However, screen readers aren’t able to distinguish between a table that contains data, and a table used for layout purposes. Whenever a screen reader encounters a table, the user will be informed that there is a table with “x” number of columns and rows, which distracts the user from the content. As a result, improperly used tables create unnecessary complexity and confusion for visitors using screen readers.

Spell out the acronym or abbreviation in full

Beyond structure, content clarity is important, and acronyms can set up additional and unnecessary barriers. The first time you use an abbreviation, acronym, or initialism be sure to spell it out, write it in full. This should be a writing habit for everyone. It wouldn’t hurt to write it again on another part of the content.

Ironically, in the world of accessibility, the most common abbreviation one will encounter is “a11y” either used as a hashtag or as an adjective. A11Y stands for accessibility – the 11 refers to the eleven letters between the A and the Y in the word “accessibility.”

Add keyboard navigation to notifications

Make sure notifications that appear in the interface are visually perceptible which requires proactive discovery by screen reader users. ARIA (Accessible Rich Internet Applications) live regions are simple mechanisms that fill this gap and provide a way to programmatically expose dynamic content updates in a way that can be announced by assistive technologies — without user interaction, under certain conditions.

Include video files captions

Pre-recorded videos with audio content should also include text description for text-reading apps with the addition of text that explains the media type and content.

You’re aware that the video content you are presenting will be consumed on mobile devices, which may be in public spaces where people might prefer to view the content without being antisocial. For smaller viewports, the sound should be switched off and captions activated by default.

Add image Alt text

Alt attributes – or ‘tags’ – are elements describing the contents of an image. It’s easy to throw a one-word description alt-text on an image and call it a day, but this is not best practice for creating accessible sites. The main idea is that you should be able to visualize an image through the use of alt-texts. This is especially important for informative images (such as infographics). Search engines can use the information to figure out what an image is about and better understand it’s surrounding content. More importantly, alt text enables visually impaired users to understand the message conveyed by the use of images on the page using screen readers. If a picture is the only content of a link, the screen reader will read the file name if alt text is not provided. Avoid filling this space with keywords, rather than describe the image presented. For even better user experience, make sure the image Alt Text flows smoothly with the context of the page content.

Choose engaging & accessible typography

Readability of content is probably the main goal for almost every website. Fonts that are very elaborate or ornate can be difficult to read or see clearly as the letter shapes are not well defined or regular in shape and size. The same applies to handwrite style fonts, which are very popular in a lot of communications.

It is not only crucial that the typography of your site is visually and functionally correct, but the copy should also be descriptive. This is good practice for SEO, and it also improves the experience for people who have difficulty remembering or have visual impairments.

Use color with care

A somewhat significant part of the population has difficulty differentiating between colors due to physical issues. This disability is known as color blindness, and it’s more prevalent in males. In fact, the most common form of color deficiency, red-green color deficiency, affects approximately 8% of the population. Using only colors such as these (especially to indicate required fields in a form) will prevent individuals with color vision deficiency from adequately understanding your message. A form that uses colors such as these to identify required fields will pose a problem for visitors who are color blind, or those using a screen reader. Other groups of people with disabilities, particularly users with learning disabilities, benefit significantly from color when applied to distinguish and organize your content.

Naturally, designing around complete monochromatism is near impossible. What you can do is to optimize your website, so it’s accessible for the most common forms of color blindness, which target red and green, followed by blue and yellow. Be sure to work with other visual indicators, such as an asterisk or question mark. Distinguish blocks of content from one another using visual separation (such as whitespace or borders).

Ensure good color contrast

When choosing colors for your website, be meticulous about the color ratios and contrast. Don’t rely solely on color to convey information. The color contrast between a text’s foreground color and background color can have dramatic repercussions on the legibility of your site. The WCAG states that your text should have at least a 4:5:1 contrast ratio to achieve an AA rating and a 7:1 contrast ratio to achieve an AAA rating. This is intended to address the loss of contrast that users experience if they have low visual acuity, age-related loss of contrast sensitivity, or color deficiencies. Also when using an interface outdoors, good contrast lessens the impact of bright sunshine.

When including links in your content, use text that accurately describes where the link will go. Most screen readers today offer their users the option to scan within the context of the rest of the page by jumping through the links to find something that they are interested in. For all the text links, the user will only hear the text link word or phrase, no matter what content it leads to. Thus it becomes entirely useless if all the user hears is “learn more” or “click here” as this does not provide sufficient information regarding where they are directed to or navigated to. A website will be more accessible for special needs if it contains descriptive links such as “Click here to know more about this article” or “Learn more about the article.” Also, don’t use the word “Link” in your links. Screen readers tell the user when they encounter a link, so you don’t need to use the words “link” or “links to” or “goes to” in your link text.

Recently, it has become a design trend to remove the underlines from web links. Designers often argue that they look ugly, some users claim they are distracting, others even claim they reduce accessibility. However, by eliminating the underline, you are making it difficult for users to distinguish which bit of your content is hyperlinked.

If you’re strictly opposed to using underlines, find another way to distinguish the link from the regular text, such as bolding the copy.

Make your website keyboard-navigable

Users with severe dexterity and mobility difficulties, including repetitive stress injuries, may not be able to use a mouse or trackpad and rely on the keyboard instead. These people can access content by pressing the “tab” or “arrow” keys, or through the use of alternative input devices such as single-switch input or mouth stick. As a result, the tab order should match the visual hierarchy, so keyboard-only users can navigate through site content logically.

Long pages with lots of content should be broken up with anchor links (jump lists), allowing keyboard-only users to skip to relevant portions of the page without having to negotiate through other content.  Provide “Skip to main content” at the top of each page, so keyboard-only users won’t have to tab through the page navigation to get the main content.

Design for low bandwidth

One of the most significant factors in user satisfaction with a web product is speed. Optimizing your site or application for faster page and content load times means that more people will enjoy using it. There are also many areas of the globe without broadband internet connections — when you optimize for speed, you’re making your product more accessible to those who would otherwise be excluded because of lower connectivity.

Test Your Website for Accessibility

Not sure if your website is accessible to the widest possible number of people? Test it! There are a variety of accessibility tools available online. One of the easiest and cheapest ways of doing this is by using a free tool like WAVE.

The first step to a more accessible website is to evaluate its current state.

If you have any pointers on how to make your website more accessible, feel free to share those in the comments section.

Elena

Elena oversees all Marketing, Product Management and Community efforts for FastComet and is in charge of telling the brand's story. Always pitching, she’ll share the FastComet vision with anyone who’ll listen. Elena helps our customers make the most of their web sites' and focuses on our inbound marketing efforts; everything from developing new online growth strategies, content creation, technical SEO, and outreach within the FastComet community. Her background includes Sales and Customer Relationship development, as well as Online Marketing.