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.

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.

Mind you some browser vendors have not implemented some properties so it's best to check online using services like Can I Use or in your CSS code itself using the @supports query.

@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.

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.

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.

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
• What a Year of Learning and Teaching Accessibility Taught Me
• Four Ways Design Systems Can Promote Accessibility - and What They Can't Do
• Pro Tip: Making Images Accessible to Screen Readers Doesn't Need to be Hard

Up next color theory.