5 Ways Developers Can Make Websites More Accessible

Written by Santiago Castro
Tutorials

It’s an understatement to say that in today’s world, being online is a necessity. Culture, entertainment, and even essential services have been online for years. And since the beginning of the worldwide COVID-19 pandemic, many services that were provided online as an option--such as banking, or even shopping--now rely on the internet entirely to provide total service to customers.

So imagine if you didn’t have access to the internet. Imagine if because of a temporary or permanent challenge, disability, or illness, you were unable to use the internet as it currently is set up. What would you do? How would you navigate this reality?

For a large percentage of the world’s population, this is part of their everyday life. In fact, according to the World Health Organization, 15% of the world’s population lives with some kind of disability, and up to 4% live with severe limitations on mobility and visual function. That means 3,120,000,000 people might struggle to access this page right now.

Solving accessibility challenges for these users is an important part of what a web developer does. Below, we explore five important keys to ensuring a website is built with accessibility in mind.

#1. Do an accessibility check

The first step to ensuring your web page or online software is accessible is to do an accessibility audit. While there is a range of products and services available to help web developers check the accessibility of their projects a number of principles should be kept in mind when evaluating accessibility.

First, identify what kind of accessibility you are targeting. Some to consider include hearing and sight limitations, age, physical disabilities, color blindness, and cognitive challenges.

Each of these may require a different approach. But in general, a developer should think through this motto from FreeCodeCamp: “Accessibility is the art of making your product usable by everyone.”

Can your website be seen, read, accessed, understood, navigated, and used by those who can’t follow standard patterns of sight, comprehension, hearing, etc?

Remember: you have to know what you’re solving for before you solve it. So start with asking these questions, and then explore some of the following solutions to solve that challenge.

#2 Start with simple and accessible

The internet is full of examples of accessible web pages, and some are better than others. When you’re beginning a project and keeping accessibility in mind, try to find a high-quality template from an existing and similar project which has already solved your accessibility challenges, and start with this.

Luckily, more and more frameworks and libraries exist which provide access to such templates and materials. We suggest Bootstrap as a place to start. Their pledge to create and uphold accessibility as a principle means they not only have a variety of option to help a developer begin projects on a strong footing where accessibility is concerned, but they offer transparency when the material they host doesn’t live up to this standard--so you’ll know what to use, and what to avoid.

#3 Make everything keyboard functional

As web accessibility expert and developer extraordinaire Adrian Roselli once said: “Everybody is a keyboard user when they are eating with their mouse hand.”

Without making light of disability, it’s important to remember that accessibility isn’t just about those with permanent physical challenges--making your web page easier to access means it’ll be easier to access and use for everyone. Even if they just have a broken mouse.

With this in mind, make your website or app fully keyboard functional and increase access to your site significantly. When doing so, keep these principles in mind: ensure every interactive aspect of your webpage can be controlled by a key on the keyboard, make sure focused elements are highlighted, and make sure that tab order is logical and functional for all.

#4 Make it POUR

The Web Content Accessibility Guidelines (WCAG) 2.0 provides basic guidelines for making web content accessible and serves as a concrete starting point for developers when they want to ensure their properties are ahead of the curve where access is concerned.

One resource they provide is this helpful (if cheesy) acronym to keep in mind when developing accessible webpages. If you want your webpage to be accessible to all, ensure it is P.O.U.R.:

  • Perceivable: users should be able to access their senses to perceive every aspect of content and display
  • Operable: every aspect of the site (all features, all text, all images) should be operable by all users, regardless of the manner in which they access said features
  • Understandable: the site should be easy to follow and simple to access, functionally and otherwise
  • Robust: site design should work fluidly with existing technologies and be set up to interface well with new technologies as they are developed

#5 Test often, then test again

Building for visual impairment? Test your audio. Building for the hearing impaired? Test that your video has functional captions. Worried you’re biased as a non-impaired user is keeping you from seeing things you’ve missed? Ask those who do not have that bias to get involved and help with testing.

We are already accustomed to testing our websites across desktops and laptop layout, iPad and tablet functionality, iPhone, and android differences. Testing for accessibility should feel just as important and be easily integrated into this intentionality. Don’t leave users out just because their way of interacting with the world--and the internet--is different from your own.

If you have questions about accessible web development, or if any of the above doesn’t make sense to you or your development team, don’t hesitate to reach out to Jobsity. We’ve been integrating accessibility features into our design since the day we opened our (virtual) doors. We’d love to help you ensure your project is as accessible as possible.

--

If you want to stay up to date with all the new content we publish on our blog, share your email and hit the subscribe button.

Also, feel free to browse through the other sections of the blog where you can find many other amazing articles on: Programming, IT, Outsourcing, and even Management.

Share
linkedIn icon
Written by Santiago Castro
LinkedIn

With over +16 years of experience in the technology and software industry and +12 of those years at Jobsity, Santi has performed a variety of roles including UX/UI web designer, senior front-end developer, technical project manager, and account manager. Wearing all of these hats has provided him with a wide range of expertise and the ability to manage teams, create solutions, and understand industry needs. At present, he runs the Operations Department at Jobsity, creating a high-level strategy for the company's success and leading a team of more than 400 professionals in their work on major projects.