Introduction to Web Accessibility

• Accessibility, Introduction

5 min. (1038 words)

introduction-to-web-accessibility

Accessibility is essential for developers and businesses who want to make a high-quality website and reach as many people as possible. It is often being referred to as A11y, which is an abbreviation of the word accessibility itself.

A is the beginning of the word,

11 represents letters in the middle, and

y at the end of the word.

When you work with accessibility in mind, it will improve the experience of everyone who uses your website.

A great website should be accessible to as many people as possible, regardless of their hardware, software, language, location, or ability. Many companies and developers are not sure why they should invest their time to make their website and digital content accessible. But, it is important and actually can be seen as a competitive advantage for their business. Here are some of the reasons:

  1. Leads to good practices

    Resulting in semantic and better mark-up for SEO.
  2. Helps to avoid legal concerns

    In the year 2000, The Sydney Organizing Committee for the Olympic Games has to paid AUD 20,000 because the official website failed to supply adequate accessibility to the blind user. Read the full story here.
  3. Enhance your brand

    Implementing accessibility will increase the positive image of a company with their diversity and inclusion efforts.
  4. Extend market reach

    1.3 billion people (15% of the world’s population) with a disability and people with low bandwidth connections, older technologies, and temporary disability (like losing their glasses) will be able to use your website.

Disabilities can affect people in different ways. In this article, we will discuss web accessibility for three types of disability: vision disability, hearing impairment, and mobility and cognition disability.

Vision disability

Photo by Edi Libedinsky on Unsplash

Most of the web content and navigation are designed for visual interaction. So, I believe your website already has a beautiful and functional design. However, to offer accessibility for people with various types of visual disabilities, you need to take a couple of things into considerations.

  1. Color blindness

    The most common example is the blindness of red and green. There is also a case of monochrome vision. Check the contrast of your website when designing by desaturating it.
  2. Poor eyesight

    Maybe you often see people with poor eyesight squinting their eyes when reading an article on their phone or computer. So, to make a better experience for them, avoid using fixed size for text, adjust the size according to the screen size. Give users the option to resize the text as well.
  3. Low vision

    Low vision conditions like cataracts and glaucoma can cause a blurry-vision. Make sure your website works with the screen-reader app. For instance, by using captions or alternate attribute (alt) for your HTML image element. To simulate the low vision situation, you can add a blur filter to your website content. At this point, you won’t be able to see the content of your website. Now, try to use the screen-reader app to navigate your site by hitting cmd f5 to enable the built-in VoiceOver tool for Mac or download the NVDA VoiceOver tool for Windows.

Other things you can do to improve the visual accessibility of your website are using regular text instead of an image as text, and not using scrolling/running and flashing text.

Hearing impairment

Photo by Christian Wiediger on Unsplash

If you have audio-visual contents on your website, try to add a visual aid. Considers the following:

  • For podcast content, you can add a transcript.
  • For video content, you can add both subtitles and a transcript.
  • You should also consider setting the audio levels carefully and consistently.
  • Allow for mono audio, if possible, to support users with a hearing aid device.

Mobility and cognition disability

Photo by Kaitlyn Baker on Unsplash

There are several types of mobility and cognition disabilities, such as Cerebral Palsy, Stroke, and Parkinson. To make your website accessible to people with these disabilities, you should:

  • Provide a keyboard-friendly content. Make sure your user can access the entire content of your websites using a keyboard. If possible, support an alternative to handle drag-and-drop or any gestural input.
  • Provide enough time for users to complete the action (read or click) for slider/carousel type content.
  • Minimize the number of steps to accomplished a task by adding keyboard shortcuts, simplifying the UI.
  • Provide a large clickable area.

Depending on the target audiences of your website and where you live, there will be a couple of different guidelines you can adopt.

  1. WCAG (Web Content Accessibility Guidelines)

    WCAG is the international accessibility guidelines from W3C WAI (Web Accessibility Initiative).
  2. US Rule Section 508 standards

    If you work with the US federal agency, you should follow these standards as well.

WCAG 2.0 has been gaining traction globally as the go-to web accessibility requirements. Most likely because it was created by the world’s experts, the documents are well organized, and it covers a wide range of disabilities.

Note: There is a newer version which is WCAG 2.1 that was published on 5 June 2018. It will extends WCAG 2.0 to 13 guidelines and 78 success criteria. I will update the list to WCAG 2.1 later. Please wait for the update.

WCAG 2.0 was published on 11 December 2008. It has four principles as the foundation for web accessibility:

  1. Perceivable

    Users must be able to perceive the information being presented.
  2. Operable

    Users must be able to operate the interface.
  3. Understandable

    Users must be able to understand the information as well as the operation of the user interface.
  4. Robust

    Users must be able to access the content as technologies advance.

Across these principles, there are 12 guidelines and 61 testable success criteria provided to allow WCAG 2.0 to be used where requirements and conformance testing are necessary, such as in design specification, purchasing, regulation, and contractual agreements. In order to meet the needs of different groups and different situations, three levels of conformance are defined:

  1. Level A

    Most basic web accessibility features
  2. Level AA

    Biggest and most basic common barriers
  3. Level AAA

    The highest level of accessibility

My recommendation for the conformance level you should meet on your website is Level AA, which satisfies all the Level A and Level AA success criteria. The checklist below is designed to fulfill this level.

You can see the checklist here.

If you already have a Notion account, you can duplicate the page to check the list and adjust it to your needs.

For the official list of WCAG 2.0 requirements, click here.

62 comments

  2. Hmm it seems like your blog ate my first comment (it was extremely long) so I guess I’ll just sum
    it up what I had written and say, I’m thoroughly enjoying your
    blog. I too am an aspiring blog writer but I’m still new to
    the whole thing. Do you have any recommendations for inexperienced
    blog writers? I’d really appreciate it.

  4. Good day I am so happy I found your website,
    I really found you by accident, while I was researching on Askjeeve
    for something else, Anyhow I am here now and would just like to say thanks
    a lot for a marvelous post and a all round entertaining blog (I also love the theme/design),
    I don’t have time to read through it all at the minute but I have book-marked it and also added your RSS feeds,
    so when I have time I will be back to read a great deal more,
    Please do keep up the excellent work.

  6. It’s in fact very complicated in this full of activity life to
    listen news on TV, therefore I just use web for that purpose, and take the most up-to-date information.

  7. Hmm is anyone else having problems with the images on this blog loading?
    I’m trying to figure out if its a problem on my end or if it’s the blog.
    Any responses would be greatly appreciated.

  8. I was very pleased to uncover this website. I wanted to thank you for your time
    for this fantastic read!! I definitely appreciated every bit of it and I have you book marked to see new stuff
    on your web site.

  9. Thank you a bunch for sharing this with all of us you really know what you are speaking approximately!
    Bookmarked. Kindly additionally visit my website =).
    We may have a hyperlink trade agreement between us

  14. This is really interesting, You are a very skilled blogger.
    I have joined your feed and look forward to seeking more of your excellent
    post. Also, I’ve shared your site in my social
    networks! ps4 https://j.mp/3nkdKIi ps4 games

  21. When someone writes an post he/she maintains the plan of a user in his/her brain that how a user can know it. Therefore that’s why this piece of writing is perfect. Thanks!|

  24. Asking questions are really nice thing if you are not understanding anything totally, except this piece of writing provides nice understanding yet.|

  25. It is appropriate time to make some plans for the future and it’s time to be happy.
    I have read this post and if I could I desire to suggest you some interesting things or suggestions.
    Maybe you could write next articles referring to this
    article. I want to read even more things about it!

  26. Having read this I thought it was really enlightening. I appreciate you finding the time and effort to put this informative article together. I once again find myself spending way too much time both reading and leaving comments. But so what, it was still worthwhile!|

  28. Right here is the perfect website for anyone who really wants to find out about this topic. You understand a whole lot its almost hard to argue with you (not that I personally would want to…HaHa). You certainly put a fresh spin on a subject that has been discussed for decades. Great stuff, just wonderful!|

  29. Greetings from Florida! I’m bored at work so I decided to check out your website on my iphone during lunch break. I love the knowledge you present here and can’t wait to take a look when I get home. I’m amazed at how quick your blog loaded on my mobile .. I’m not even using WIFI, just 3G .. Anyways, excellent blog!|

  32. An impressive share! I’ve just forwarded this onto a friend who has been doing a little research on this. And he actually ordered me breakfast simply because I stumbled upon it for him… lol. So let me reword this…. Thank YOU for the meal!! But yeah, thanks for spending some time to discuss this topic here on your web page.|

  34. Undeniably believe that which you said. Your favorite reason appeared to be on the net the simplest thing to
    be aware of. I say to you, I definitely get annoyed
    while people consider worries that they just do not know about.

    You managed to hit the nail upon the top and also defined out the whole thing without having side-effects , people can take a signal.
    Will probably be back to get more. Thanks

  35. Hello there, just became alert to your blog through Google, and found that it’s truly informative. I’m going to watch out for brussels. I’ll be grateful if you continue this in future. Lots of people will be benefited from your writing. Cheers!|

  38. magnificent put up, very informative. I’m wondering why the other specialists of this sector don’t understand this. You should proceed your writing. I’m sure, you have a great readers’ base already!|

  39. It is perfect time to make a few plans for the long run and it is time to be happy. I have learn this post and if I may I want to recommend you few fascinating things or tips. Perhaps you can write subsequent articles regarding this article. I wish to read even more issues about it!|

  41. With havin so much content do you ever run into any problems of plagorism or copyright violation? My site has a lot of unique content I’ve either written myself or outsourced but it looks like a lot of it is popping it up all over the internet without my agreement. Do you know any methods to help reduce content from being stolen? I’d certainly appreciate it.|

  42. I think everything said was actually very reasonable. But, what about this? suppose you added a little information? I ain’t saying your information is not good, but what if you added a post title that makes people desire more? I mean BLOG_TITLE is kinda boring. You could glance at Yahoo’s home page and watch how they create post titles to get people interested. You might try adding a video or a related pic or two to get people excited about what you’ve got to say. Just my opinion, it might bring your posts a little livelier.|

  44. It’s truly a nice and helpful piece of information. I’m satisfied that you shared this useful info with us. Please keep us informed like this. Thanks for sharing.|

  45. Does your site have a contact page? I’m having problems locating it but, I’d like to shoot you an email. I’ve got some suggestions for your blog you might be interested in hearing. Either way, great site and I look forward to seeing it develop over time.|

  47. Excellent goods from you, man. I have understand your stuff previous to and you are just extremely wonderful. I really like what you have acquired here, really like what you’re stating and the way in which you say it. You make it entertaining and you still care for to keep it smart. I can’t wait to read far more from you. This is actually a tremendous site.|

  49. I have been exploring for a bit for any high-quality articles or weblog posts in this sort of area . Exploring in Yahoo I eventually stumbled upon this web site. Studying this information So i am satisfied to convey that I’ve a very just right uncanny feeling I found out just what I needed. I such a lot for sure will make sure to do not fail to remember this website and give it a glance on a relentless basis.|

  50. I’m not that much of a online reader to be honest but your blogs really nice, keep it up! I’ll go ahead and bookmark your site to come back later on. All the best|

  51. We stumbled over here by a different web address and thought I may as well check things out. I like what I see so now i’m following you. Look forward to finding out about your web page again.|

  52. Hey there! This is kind of off topic but I need some guidance from
    an established blog. Is it difficult to set up your own blog?
    I’m not very techincal but I can figure things out pretty fast.
    I’m thinking about making my own but I’m not sure where to begin. Do you have any tips or suggestions?

    With thanks

  53. Its like you read my mind! You seem to know so much about this, like you wrote the book in it or something. I think that you could do with a few pics to drive the message home a bit, but instead of that, this is excellent blog. An excellent read. I’ll certainly be back.|

  55. Howdy just wanted to give you a quick heads up.
    The text in your article seem to be running off the screen in Chrome.
    I’m not sure if this is a formatting issue or something to do with web browser compatibility but
    I thought I’d post to let you know. The layout look great though!
    Hope you get the problem resolved soon. Many thanks

  57. Woah! I’m really digging the template/theme of this site.
    It’s simple, yet effective. A lot of times it’s tough to get that “perfect balance” between superb usability
    and visual appearance. I must say you’ve done a excellent job with this.
    In addition, the blog loads super quick for me on Firefox.
    Superb Blog!

  59. Hey there I am so happy I found your weblog,
    I really found you by accident, while I was browsing on Digg for something else, Regardless I am here now
    and would just like to say many thanks for a tremendous post and a all round
    interesting blog (I also love the theme/design), I don’t
    have time to look over it all at the moment but I have saved
    it and also added in your RSS feeds, so when I have time I will be back
    to read a great deal more, Please do keep up the
    great jo.

  62. Hello, Neat post. There is an issue with your web site in web explorer, may test this?

    IE nonetheless is the market chief and a huge part of other folks will omit your excellent writing because of this problem.

Leave a Reply

Your email address will not be published.