Home > Blog > What is Website Accessibility and How To Benefit From It in 2020

Blog

What is Website Accessibility and How To Benefit From It in 2020

What is Website Accessibility and How To Benefit From It in 2020

Website Optimization & Security

If you don’t know what accessibility is and how it can be useful for you, you’ve come to the right place!

According to Wikipedia, Web(site) Accessibility is the inclusive practice of creating website with design that facilitate the access to them for people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed.

To be fair, the last part is not addressed separately, as website speed is a priority anyway.Designing sites that are easily accessible to people for disabilities, however, is a trend that keeps growing and rightly so.

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Tim Berners-Lee, W3C Director and inventor of the World Wide Web

The Internet has always been a place where everyone could find their community. Making the websites accessible is the next logical step, and it should come as no surprise that many businesses are now trying to make their websites accessible.

Even if you ignore the ideology behind this trend, the business side of this matter can still present a winning argument; every business owner wants as many visitors as possible. Making your website easier to access for a specific portion of your traffic can only bring you positives and increase your revenue as logically, more people will be able to do business with you.

accessibility and seo image credit: webhostinglogic.com

Accessibility implementation also can impact in a positive way your SEO rankings. Technically speaking, modifications for accessibility and SEO sort of overlap in things like tags, alt tags, transcriptions etc, so you will benefit in more than one way if you go for this type of optimization.

The best news is that it won’t cost you that much - making sites accessible requires just easily implementable adjustments. The key is to understand the concept of accessible design, meaning to find out what makes the navigation of your website difficult for certain people.

Once you get a good idea of what the underlying issues are, you can then address them by following techniques and standards that are already well defined.

Web Accessibility in a few paragraphs

We already said that the Internet is trying to be as inclusive as possible, meaning that for the online communities (especially the niche ones, united by a specific interest) doesn’t matter if their users have any kind of physical limitation.

On the contrary, they try to make it as easy as possible for their peers to join, guided by the idea that the Web should work for all people, regardless of their capabilities, hardware, software, language or location.

The statics would likely show that the Internet is used by millions of people who have special needs. In fact, the World Web Consortium (W3C) one of the most well-known internet organizations that set web standards launched an entire initiative, dedicated to this matter.

I would highly recommend that you visit this article where you will find very well synthesized information on about accessibility, but if you don’t have the time, we can quickly summarize the topic.

Some of the most common disabilities and/or conditions that affect internet usage are:

  • Visual disabilities: This refers to a partial or total loss of vision or specific disorders such as the inability to perceive color and color contrasts.
  • Hearing disabilities: This refers to hearing impairments, or the partial or total inability to hear
  • Physical Disabilities: This refers to specific disorders related to motor skills, in particular difficulties and inabilities to move specific parts of their bodies
  • Photosensitive Seizures: This refers to specific disorders and conditions such as epilepsy
  • Cognitive Disabilities: There are a lot of cognitive disorders that can make web usage difficult for the users; an example of that is the reading disorder dyslexia

Keep in mind, that from accessibility modifications also benefits people without disabilities, for example:

  • people on smaller devices such as mobile phones, smartwatches etc
  • senior people with specific difficulties due to aging
  • people temporarily restricted by physical limitations (such as a broken arm)
  • people who are trying to use their device in an inconvenient environment (mobile phone in bright sunlight)

Most of the impairments we mentioned are well-knows, therefore assistive technologies have been developed in order to help people use the internet. One of the most notable technologies that have existed for years is the text-to-speech software that vocalizes written text and its counterpart, the speech recognition software that converts speech into text.

Other include specially designed keyboards, screen enlargement applications, adapted pen grips etc.

How can you make our site more accessible?

We briefly covered the reasons why you should invest your time in making your website more accessible, but let’s reiterate for a second: the benefits you’ll reap several, aside from the purely humanistic perspective.

Before continuing with the specific steps you can take, it’s worth mentioning that choosing accessibility-oriented CMS can greatly help you with your quest.

Very few platforms are as good at this task as WordPress; while I might be biased due to my personal preference for the CMS, you should know that WordPress have their own Accessibility team, where each year thousands of users contribute to the cause .

Now, to the practical side of things - what can you do to make your site more accessible?

1.Optimize your alt tags

You’re probably familiar with the alt tags for SEO purposes, but in case you aren’t, basically, this is a tag (Alt tag stands for Alternative tag) that helps Google’s bots understand what this image represents.

This is also true for assistive technologies, that use the same mechanism, so for example, a screen reader will check the image alt tag and describe what this image is about. This would be otherwise impossible since technology is still unable to “see” and understand an image the same way a human being does.

So, whenever you place an image, add also a well-thought, descriptive alt tag:

people working on design

For example, you can publish the image indicated above and write as an alt tag "people working together on design"

This is a perfect example of how optimizing your site for better accessibility can also boost your rankings in Google, since this is one of the best-known good SEO practices.

2.Construct keyboard-friendly navigation

This is a simple, yet often overlooked step. The basic premise is that your user must be able to use your website without a mouse and easily access menus, pages, links etc.

The reason for this is that a big chunk of the assistive technologies we mentioned rely on keyboard-only navigation.

keyboard-friendly web design

This is something you can easily check on your site - simply remove your mouse. In order to navigate the site, use your Tab key - as you can see from the image above, there will be a visual indication at what element you're currently "pointing". Whenever you want to open or click on it, simply use the Enter.

If you find yourself having difficulties accessing specific areas of your site, research how to address the situation (you can find an excellent article on Keyboard Accessibility here)

3.Use captions for your video

In the same manner alt tags are crucial to visually impaired users, captions are essential when it comes to accessibility for users with impaired hearing. While there is a technology of creating automatic subtitles (an example of that is the one Youtube uses for their videos), it still not widely-spread, nor very good. Automatic subtitles are often really bad, so make sure to create proper subtitles and upload them to your videos.

Again, as with image alt tags, you will find that captions can positively affect SEO, since Google bots will be able to “read” the information that you offer in that video when they crawl your site.

4.Avoid dynamic content

Dynamic content refers to content that changes without a page reload. An example of that are carousels whose different items won’t be loaded all immediately, and the screen reader will typically “read” the content of a page entirely once it’s loaded and won’t go back.

dynamic content example

There are methods for the site to inform the respective assistive tool, but it can be complicated and it will require additional work.

If you want to go for this, you could use the attriutes known as ARIA landmarks. They are tags you can add on your page in order to notify the assistive technology of the dynamic content you have. The other advantage of the ARIA landmarks is that it allows the user to go to the specific content, without having to go through the entire menu

The accessibility team of WordPress released a very useful manual on the ARIA landmarks that can be found here

5. Use the H tags (headers) properly

Another matter that overlaps with SEO optimization is the proper use of headers when structuring your content. The W3 released a great insturctional material on header use, so make sure to read it, if you are not familiar with the H tags.

Correct use of headers will make your content easier to understand for technology such as screen readers and help them place proper accents whenever needed, as well as facilitate in-page navigation.

For example, there should be only one H1 tag per page, indicating the page’s title. For subheadings, you should use H2, H3 and so on.

6. Skip the tables

People love tables, and understandably so - displaying data in tables makes it neat and easily readable to the average user due to the visual facilitation.

That being said, for accessibility purposes try to keep the tables as simple as possible. If you can, avoid them entirely (except for tabular data) - don’t use them for list, layots etc as this confuses assistive technologies devices.

In case you’d like to keep a more complicated table on your site, it would be a good idea to use the guide provided by the W3 Consortium

7.Consider carefully your color palette

We’ve covered issues related to total lack of vision, but you need to keep in mind there are a lot of users with an impaired vision which have only partial disabilty.

Therefore, another visual priority in order to make the design more accessible is to use proper contras, meaning dark color against light ones.

So if you have, for example, a light background, don’t use light color for your text as well - while it may seem reasonable in terms of color combination, the poor contrast is a killer of good readibility.

poor readibility and contrast

8. Optimize your site for speed

This is extremely useful advice, no matter what, but it’s also highly related to accessibility. We’re all used to our high-speed internet connection, yet in some places, you will find a very slow connection which makes it difficult, if not impossible for your site to load.

Google has been battling to push faster website speed for years and it seems that this is another reason for that. In fact, they announced that soon a new “badge of shame” will be released in order to mark slow websites, apparently another sign of their serious attitude toward site speed.

Of course, the topic is too broad to cover in one simple paragraph, but don’t worry - we’ve covered it in another article, so if you want to read more on how to make your site faster, check our Website Optimization section.

high-performance hosting

Don’t forget that fast hosting is also part of the equation, so make sure you are using a high-performance hosting service for your sites as well.

Conclusion

The Internet is getting bigger and bigger every day, and users keep upping their standards. Going that extra mile can make a significant difference for your business!

Back to top