Web Accessibility (What? Why? & How?)

Posted in: Web Development | 0

What is Web Accessibility?

Image showing people with different type of disabilities

Web development from my perspective is not only about representing digital contents online with some fancy animations and graphics.

Web accessibility is simply making web contents more accessible. As a web designer and developer, it is our duty to design the Web so that everyone can use it, especially people with disabilities. This include people with blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these.

Therefore, web accessibility is to ensure that these people does not feel any barriers preventing them from interacting or accessing our websites.

Why is Web Accessibility important?

Image showing accessibility icon in HTML tags.

Web accessibility is vital in order to provide equal access and equal opportunity to people with diverse abilities. Moreover, let us not forget that according to the AODA (Accessibility for Ontarians with Disabilities Act) which was introduced by the government of Ontario, accessibility standards were introduced (and the clock is ticking).

I would like to point out that along with having an accessible website, it overlaps with many other best practices such as responsive web design which is device independent, usability design for older users and search engine optimization (SEO). SEO is about making your website being found by as many users as possible.

Studies have reported that accessible websites have better search results and come with a reduced maintenance cost and increase audience reach, among other benefits.

How to make your Web content more accessible?

The focus of web accessibility is often in regards to the things that happen in HTML, CSS, or JavaScript after your site has been designed visually. Ideally, accessibility should be a part of your visual design process itself.

Here are some brief points to take into consideration when designing and developing your site:

Image showing a diagram of components involved to writing accessible codes.

  • Place your main content in your html nearer to the top than your sidebar content.
  • Always have some content above the fold. The fold is the boundary beyond which the page is hidden.
  • Make sure your HTML is valid HTML. Writing valid code makes it easier for screen readers, browsers, and search engines to correctly interpret your page.
  • Favour semantic tags where needed to describe your content.
  • Ensure that all content and design fit into a logical heading structure.
  • Avoid using colors to indicate important content on a webpage. Also, provide a good contrast between font colors and background colors.
  • Use adequate font size, and ideally avoid going below 12pt.
  • Ensure link text makes sense on its own, rather than having “click here” as link text all the time.
  • Ensure that form controls have descriptive labels, instructions, and validation/error messages.

The above mentioned guidelines are definitely not an exhaustive list, but it gives you an idea of the many aspects to consider when catering for accessibility. At the same time it helps you write quality codes.

To finish, here are some additional resources and tools: