loading...

Introduction to Web accessibility and usability

ziizium profile image Habdul Hazeez ・5 min read

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

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.

Color picker in firefox developer tools
Color inspector in Firefox Developer tools

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.

A site rendered with JavaScript shows a blank page when the user has JavaScript turned off
A site rendered with JavaScript shows a blank page when the user has JavaScript turned off

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
Accessibility tool in Firefox 72 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:


Up next color theory.

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Posted on by:

ziizium profile

Habdul Hazeez

@ziizium

I teach and write code with interests in Web Development, Computer Security, and Artificial Intelligence.

Discussion

markdown guide