Introduction to Web accessibility and usability
Tags: beginners, a11y
Published: 2020-01-30 11:39:17

---
title: Introduction to Web accessibility and usability 
published: true
description: An introduction to web accessibility and usability
tags: beginners, accessibility
series: FrontEnd Development Zero to Hero 
---
Web accessibility and usability are two __fundamental topics__ in Web development that should never be overlooked or considered an after-taught. We as Web developers are responsible for building __accessible__ and __usable__ web applications.

When we mentioned _accessible_ it means the web application should be designed with the _users_ in mind irrespective of their __device__, __browser__ or __disabilities__. If a website is not accessible there is a high chance it's not going to be __usable__.

__Accessibility is hard because you have to take a lot of things into consideration__ the least being immersing yourself in a world where you are the user of the application being developed, but if you can include your users early in the design process things will get a lot easier down the line.

Now, the question that might pop into your mind is: How can I design an accessible website?

Let's find out.

<hr>

###__Designing an accessible website__

The starting point of an accessible website is the _user interface_. Most if not all modern website has an interface which is the point of interaction between the user and the website. UI and UX designers work together to make sure the interface is easy to use and accessible.

The main job of the UX designer is to conduct research that will make the application a successful one. The results of this research are passed to the UI designer which in turn will implement the _user interface_.

What's next is to turn this interface into code and this process starts by writing semantic HTML. When you write semantic HTML you've taken another step that will make the website accessible. Now you might ask: What is semantic HTML?

Semantic HTML means using the right HTML element for the job which include but not limited to:

* The `<header>` element for headers
* The `<nav>` element for styling navigation
* `alt` text in the `<img>` tag
* `<figcaption>` for images
* `<aside>` for supplementary content like sidebars
* `<tbody>` in tables
* Hiding some elements using absolute positioning rather than `display: none` e.g form labels

The bottom line is there is a high chance that whatever you want to achieve in the website layout there is already a tag for it in HTML and these elements come with built-in accessibility features for free and screen readers and some browsers will render them correctly.

There are certain situations you won't find the appropriate tag to use then you can use the `<div>` or `<span>` elements.

Once the HTML structure is done and dusted you should use an online validator to check for errors in your code. Afterward, you proceed to add some styles using CSS which in turn brings the HTML to life while JavaScript is used for interactivity.

Throughout the entire process, there is a certain concept that you should be aware of. We've talked about it in this series but, we'll discuss here again for the sake of brevity. It is _progressive enhancement_.

###__Progressive Enhancement__

Progressive enhancement is about __changing your mindset__ by not making assumptions about the user's browsing environment. The site is designed with a __solid baseline__ experience starting with HTML that is guaranteed to run in all browsers followed by CSS for styling.

When it comes to styling you should use a color combination that's accessible. Firefox and Chrome browsers have built-in accessibility tools in their browser _Developer Tools_. How to use the tool was demonstrated in our post on [CSS colors](https://dev.to/ziizium/css-colors-7ai).

![Color picker in firefox developer tools](https://dev-to-uploads.s3.amazonaws.com/i/dnmoyrld0uqss000laqs.PNG)<figcaption>Color inspector in Firefox Developer tools</figcaption>

Mind you some browser vendors have not implemented some properties so it's best to check online using services like [Can I Use](https://caniuse.com) or in your CSS code itself using the `@supports` query.

```css
@supports (display: flex) {
  
  /**
    * Code in this section will run only if the browser supports
    * the Flexbox layout module
    */

}
```

When you do this most users browser will render your site content without issues. If you are designing a responsive site, it is best to build in a device-agnostic manner.

Up next, JavaScript for interactivity. It is best to check if the browser supports or has JavaScript enabled before trying to run any JavaScript code.

You should also note that some browser vendors have not implemented some JavaScript features so either you check by yourself in the code or you are better off using a polyfill.

```javascript
if (document.getElementById) {
    
   /**
     * The code in the section will work if the browser
     * supports the getElementById method
     */

}
```

You should be careful about using JavaScript to render critical information on your site if the user has JavaScript disabled they will lose access to the content.

And if your entire site content is generated with JavaScript, the user will see a blank page.

![A site rendered with JavaScript shows a blank page when the user has JavaScript turned off](https://dev-to-uploads.s3.amazonaws.com/i/v9vf8uximsdbvp48ivyg.PNG)<figcaption>A site rendered with JavaScript shows a blank page when the user has JavaScript turned off<figcaption>

So here is the recap of progressive enhancement:

* Start with semantic HTML
* Use CSS for styling and check if some properties are supported before using them
* If you are designing a responsive site, take the device-agnostic route
* Use JavaScript for interactivity but don't forget to check if the user has JavaScript enabled or if a certain feature is available in the browser

Congratulations if you've successfully gone through this entire procedure but as humans, we are not perfect so it's best to use _accessiblity_ checkers to make sure everything is right.

Firefox and Chromium browsers have built-in _accesibility tools_ available in the _Developer Tools_. 

![Accessibility tool in Firefox 72 Developer Tools](https://dev-to-uploads.s3.amazonaws.com/i/rqk7kiwtcukcab7kpe7p.PNG)<figcaption>Accessibility tool in Firefox 72 Developer Tools</figcaption>

Web accessibility and usability are not a one-way street and it will be of great advantage if you read further on the subject. Kindly check out the following resources:

* [Building an Inclusive Experience: Why Accessibility Matters](https://blogs.intuit.com/blog/2020/01/23/building-an-inclusive-experience-why-accessibility-matters/)
* [What a Year of Learning and Teaching Accessibility Taught Me ](https://www.sarasoueidan.com/blog/what-accessibility-taught-me/)
* [Four Ways Design Systems Can Promote Accessibility - and What They Can't Do](https://24ways.org/2019/four-ways-design-systems-can-promote-accessibility/)
* [Pro Tip: Making Images Accessible to Screen Readers Doesn't Need to be Hard](https://searchengineland.com/pro-tip-making-images-accessible-to-screen-readers-doesnt-need-to-be-hard-326820)

<hr>

Up next _color theory_.