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. These workshops addressed the accessibility of prototyping and testing, 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 various types of disabilities such as those that affect a person’s vision, movement, remembering, hearing, mental health, and activity. Nevertheless, she pointed out the fact that accessibility isn’t of importance only for people with permanent disabilities but also for those with temporary, changing or situational ones. Even a sports injury like a broken wrist could be seen 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 has put together a “Make WordPress Accessibility” Team in order to increase the accessibility of WordPress core and resources. Still, why is it so important to look at it from a site owner’s perspective?

• 1. What Is Website Accessibility?
• 2. Why Accessibility Matters?
• Enhances responsiveness
• Accessibility is good for SEO
• Wins loyalty and trust
• Has increased audience reach
• 3. Strategy for Accessible websites
• Write a clearer copy
• Use headings correctly
• Use tables appropriately
• Spell out the acronyms in full
• Add keyboard navigation to notifications
• Include video files captions
• Add image Alt text
• Choose accessible typography
• Use color with care
• Ensure good color contrast
• Use descriptive links
• Underline links
• Make website keyboard-navigable
• Design for low bandwidth
• 4. Test Your Website for Accessibility

 

What is Website Accessibility in the First Place?

Some people may think website accessibility is just another buzzword in present days, as not everyone knows exactly what the term means.

Website accessibility is about the inclusive practice of constantly designing, developing, and adding content in a specific way, so it doesn’t 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 are able to equally understand and interact with everything on the Web. Notably, it focuses on people with disabilities, impeding their cognition, vision, hearing, and movement. It is a way of rethinking your approach to the designing and developing of your website so that you go beyond just the most common level of information access.

It’s easy to think of accessibility as something “nice to have” when it comes to designing, but following minimum accessibility standards is actually a lawful thing to do. In the United States, there are lots of sites in existence within categories, legally required to be accessible for special people. There are many countries with similar laws. Multiple organizations, with the inclusion of the World Wide Web Consortium (W3C), took the needed time to develop certain standards that can be applied by web designers. Those standards would ensure that every visitor is able to fully use the functionalities and view the information on the website. W3C also mentions that website accessibility is not solely for the people who have permanent disabilities.

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 that are results of aging.
• People with “temporary disabilities”. Those include broken limbs, sprains, concussions, lost glasses, or some kind of 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 something in one hand while trying to type with the other or being in somewhere you are not able to listen to audio or watch video files to their full potential (e.g. public transportation).
• Circumstances that include mobile devices or device limitations, for example having no mouse, or other ease of access limitations, such as interacting with a site that is poorly designed (e.g., a site requiring Javascript when such cannot be used in places where it’s not available).
• Individuals experiencing bad connection, expensive or limited bandwidth because of the deficient Internet telecommunications infrastructure in their geographic location.

Essentially, there are various scenarios that have to be considered when there is content creation and publishing them online. Addressing disabled people’s needs will actually improve usability for everybody, including those that are experiencing situational disabilities.

The importance of building an all-accessible web has always been the goal of the World Wide Web inventor himself:

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

Website accessibility needs to be about making valuable things accessible for all. Accessibility is and always should be about everyone.

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 because of certain conditions, choices, or even contexts, people are different. People go with diverse approaches and tools for better overall comprehension of interfaces. With that said, what those interfaces offer each user the chance to compare them in value, efficiency, and quality. The W3C developed certain guidelines for safeguarding website accessibility – the Web Content Accessibility Guidelines (WCAG). Its current version is 2.1, published on 5 June 2018.

There are 3 levels:

A – basic accessibility

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

AAA – mainly for dedicated software

Your business can greatly benefit from improving the web accessibility of your website, provided if you understand it correctly. When we add the user’s capability to create different personas in web accessibility, we can begin with considering every impairment category that already has been outlined by W3C:

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

Accessibility Enhances Responsiveness

Accessibility enables the user to navigate through your site in the way they wish, rather than making them engage in a way that’s convenient to you. Well-designed websites are responsive to a user’s needs in addition to their device.

Accessibility is Good for SEO

When your site is accessible, it opens up 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 aren’t the same things. And although web accessibility isn’t one of the main ranking factors, involving elements of accessibility is something that connects with many core SEO techniques.

Google encourages most websites by using accessibility techniques that are included in the metadata, semantics, content structure, visual design, visual design, and development which will get better results in organic search. You ask why? Because search engine crawlers are unable to see or hear, neither can make sense of graphical elements, and they only use a keyboard to navigate the page, similar to visitors 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 limitations in vision, hearing, and motor skill, it’s also helpful for the site visitors that are struggling because of dyslexia and English as a Second Language (ESL).

Being Accessible Wins Loyalty and Trust

Accessibility shows professionalism. Not many people are willing to go that needed an extra mile when it comes to site accessibility. This means that any kind of enhancement you make shows you’re committed to the provision of a better experience. It brings much comfort and ease of access to visitors with disabilities who, actually, are much more likely to go with the option of online shopping, rather than going to a traditional store. 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 usually leads to much cleaner interfaces, more straightforward navigation system, and other elements working well for the improvement of the overall user experience. Hopefully, with time, that would lead to the increase of brand reputation, and naturally, customer loyalty.

Accessibility has Increased Audience Reach

People with disabilities are more than you might think and they are very strong as a community. According to data taken directly from CDC, close to one-in-five American adult citizens have hard of hearing and nearly one-in-ten adults are experiencing trouble with vision. The raw number for those disability categories alone is more than 64 million individuals. The US Census Bureau states that 19% of the US population identifies as having some kind of disability. This is about 57,000k people. If we consider the global audience, we would be talking about roughly 15% of the global population. That’s about 1 in 7 people on Earth or 1 billion according to the World Health Organization (WHO). We can all admit that’s a considerable number of individuals who would benefit from easily accessible websites right from the beginning, thus they should not be ignored. With that said, those official numbers don’t even include all the people who either do not identify as disabled or the populations that would benefit from having accessible websites, such as ESL users and aging people. All this means that the number of people in need of those accessible websites could actually be exponentially 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 also have their accessibility wishes granted.

Strategy for Accessible Websites

In most cases, it’s practically impossible to build a website that’s accessible to everyone. However, it is still within your capabilities to improve the user experience for many visitors by making even a few simple tweaks on your website’s design. Before we dive into specifics, it’s recommended for you to take a look at the WCAG 2.0 put together by the 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 everyone that has cognitive disabilities, those who are not native speakers, mobile device users, in addition to making your imposed ideas clearer for everyone.

Use Headings Correctly

Screen readers always pay attention to the header tags to navigate content and use them as clues about the importance of data, and the content structure a certain page. With the use of headings (<h1>, <h2>, etc.) in the most strategic and correct way, the content of your website would be well-organized and quite easily interpreted by the screen readers. With that said, you should not skip heading levels, or use them out of order just because it looks good visually (which is confusing for screen reader users); instead, create a new CSS class for the style of your text.

Use Tables Appropriately

In older days, the usage of tables for website layouts was commonly practiced. However, screen readers are not able to find the differences between a table that contains data and such that is used for layout purposes. Whenever a screen reader finds a table, the user will be informed about such with “x” number of columns and rows, which could distract them from the content. As a result, the improper use of tables leads to unnecessary complexity to the website and confusion for visitors that use screen readers.

Spell Out the Acronym or Abbreviation in Full

Beyond structure, the clarity of your content is vitally important. Acronyms can set up additional barriers, which would be completely unnecessary. 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 used abbreviation one would encounter is “a11y”, which is either used as a hashtag or an adjective. A11Y stands for accessibility – the 11 refers to the eleven letters that stand between the A and the Y in “accessibility”.

Add Keyboard Navigation to Notifications

Make sure that all notifications appearing in the interface of your website are visually perceptible. This needs proactive discovery by users with screen readers. Accessible Rich Internet Applications (ARIA) live regions are simple mechanisms that fill the gap and ensure there is a way to programmatically expose dynamic content updates in a way that could be introduced 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 viewed on mobile devices, which could be in public spaces where users might want to view the content without having to be antisocial. For smaller viewports, you should consider switching the sound off and activate captions by default.

Add Image Alt Text

Alt attributes (tags) are elements that help in describing the contents of an image. It’s easy to throw quick description alt-texts on your images and call it a day, but this is far from the best practice when it comes to building accessible sites. The main idea is for people to be able to visualize images via the use of alt-texts. This is especially of importance for images about any kind of data (such as infographics). Search engines are able to use the information in order to figure out what the certain image is about and how to better understand the content that surrounds it. What’s even more important, alt texts enable visually impaired users to better understand the message that’s conveyed by the use of images on the page that’s using screen readers. If a picture is a link’s only content, the screen reader will read the name of the file, in case alt text is not present. Avoid filling this space with keywords, rather than describing the image being presented. For an even better experience for all users, make sure that the image Alt Text goes smoothly with the page’s overall context.

Choose Engaging & Accessible Typography

Readability of content is probably the main goal for almost every website. Very elaborate or ornate fonts could be hard to read clearly because the letter shapes are not as defined or regular. The same goes for all handwriting style fonts, which are considered popular in several communications.

It is not only crucial that the typography of your website is correct in a visual and functional way, but the copy of that site should also be descriptive. This is a good SEO practice, which also improves the experience for people with difficulties when it comes to memory or for those who have visual impairments.

Use Color with Care

A somewhat significant number of people have difficulties when differentiating between colors because of physical issues. This disability is widely known as color blindness, and it’s common with males. In fact, the most common form of color blindness, which is the red-green color deficiency, affects roughly 8% of the population. If you go with colors such as these (especially for indicating required fields in a form) will surely prevent individuals with color blindness from understanding your message in the best possible way. A form that uses colors such as these to identify required fields would be a problem for visitors with color deficiency, or for the ones that use a screen reader. Other groups of disabled people, particularly such with learning disabilities, get a significant advantage from color when applied for distinguishing and organizing your content.

Naturally, completely designing around monochromatism is almost impossible. A good choice for you is to optimize your site, so it would be accessible for the forms of color blindness that are most common. Those targets are red and green, in addition to blue and yellow. Make sure that you work with other visual indicators, such as asterisks or question marks. Distinguish blocks of content from one to the other by using visual separation (e.g. whitespace or borders).

Ensure Good Color Contrast

When choosing the colors for your website, be as meticulous as possible about the color ratios and the contrast. Don’t rely solely on color to convey information. The contrast between a text’s foreground color and its background color can cause dramatic repercussions over your site’s legibility. 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 for addressing the loss in contrast that users can experience if they have below-average visual acuity, age-related contrast sensitivity loss, or color deficiency. Also when using interfaces outdoors, good contrast tends to lessen the impact of sunshine that can be too bright sometimes.

Use Descriptive Links

When including links in your website content, make sure you 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 “Link” in your actual links. Screen readers show users when they encounter a link. That’s exactly why you do not need to use the words “link”, “links to”, “goes to” in your link text.

Underline Links

Recently, it’s become a design trend of removing underlines on web links. Designers often discuss the fact that underlines look ugly, users say that they are distracting, and some even claim that they reduce accessibility. However, if you eliminate the underline, you would make it difficult for visitors to distinguish which bit of your website content is hyperlinked.

If you’re absolutely opposed to the use of underlines, you should look for another way to make links distinguished from the regular text (e.g. bolding).

Make Your Website Keyboard-Navigable

Users with severe dexterity and mobility difficulties, including multiple stress injuries, might be unable to use a mouse or trackpad and rely only on the keyboard. These people can access content by using the “tab” and “arrow” keys, or with the use of alternative input devices (e.g. single-switch input or mouth stick). The result would be the tab order matching the whole visual hierarchy, so keyboard-only users can navigate through site content logically.

Long pages that have lots of content should be broken down with anchor links (jump lists), helping keyboard-only users with skipping to relevant parts of the page without the need to negotiate by using other content. Provide “Skip to main content” at the top of every page, so keyboard users would not have to tab through the page navigation when they want to get to the main content.

Design for Low Bandwidth

One of the most significant factors when it comes to user satisfaction with web products is speed. Once you optimize your site or application for faster load times more people will start enjoying its use. Additionally, there are lots of areas over the world that don’t have access to a broadband internet connection — when optimizing for speed, you’re making your product much more accessible to the individuals who otherwise would be excluded because of low connectivity speed.

Test Your Website for Accessibility

Are you unsure about your website being accessible to the widest possible number of people? Test it! There is a wide variety of accessibility tools online. One of the easiest and cheapest ways of doing this is by using a free tool like WAVE.

The first step in making your website more accessible 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.