Making a site accessible to users with varying abilities is not only the right thing to do ethically, but it’s also good for business. Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. But how can a developer determine if the site they are creating will be accessible to users of all abilities? Below are a couple of ways for developers to evaluate a website’s accessibility.
Accessibility best practices for developers
Can a user with visual impairments who utilizes a screen reader navigate through your site? Can a person who can’t find their reading glasses increase the font size on your site without completely breaking the layout? What about those with limited mobility, are links and buttons large enough for them to be able to target and click them? These are some of the questions developers should be asking as they are creating a site. Because of this, it’s not enough to just make an attempt to apply some level of accessibility to a site after it’s created. Making a site highly accessible involves the basic architecture of the site through the use of semantic HTML.
According to MDN, Semantics refers to the meaning of a piece of code. There are many semantic HTML elements from which to choose when creating any page within your site. Asking oneself what the purpose of a piece of code will be when creating it will go a long way to increasing the use of semantic HTML. This, in turn, limits the use of generic elements such as <div> and <span>, which, when used gratuitously, can negatively impact a site’s accessibility and SEO. Learning semantic HTML and frequently evaluating its usage while coding will improve a site’s functionality, SEO, and accessibility.
How to test a website’s accessibility
Testing web accessibility via code reviews by an experienced developer knowledgeable in web accessibility and HTML best practices is an invaluable way to learn and grow as a developer. However, if this is not an option and one must review their own code to improve a site’s accessibility, below are some helpful methods to aid developers while evaluating their work:
- Teachers and literary experts frequently recommend setting one’s own work to the side for a while before proofreading it to provide that “fresh eyes” experience similar to that of a person unfamiliar with work reading it for the first time. It’s incredible the glaring errors that will become apparent utilizing this method.
- While evaluating your own code, seeing it in its entirety is valuable, especially when many partials are being used. It’s easy to lose semantics while working with partials in several different files. Viewing the code structure through a browser’s developer tools is a great way to see a page’s architecture in its entirety and see error messages.
- Use a checklist to evaluate your code against established standards.
- Asking oneself questions frequently such as, “can this generic <div> or <span> be something more semantic like a <p> element?”
- Utilizing testing tools that evaluate accessibility.
Useful testing tools and strategies for accessibility
An instrumental and frequently used tool developers depend upon to optimize their sites is Lighthouse, found within Chrome Developer tools. Lighthouse evaluates the code on any page and returns a detailed report with helpful suggestions. Specific elements within a page which don’t meet accessibility standards will be flagged, linked, and in many cases, a way to remedy its negative impact.
Another very effective way to evaluate if your page is usable for people with disabilities is to utilize your site as those with disabilities must. For example, turning on your computer’s screen reader (Command + F5 for Mac users) and attempting to navigate through your page with your eyes closed is better than any tool evaluation tool. By doing this, you get a feel for how visually-impaired users will experience when using your site. What about those with limited mobility or a broken mouse? Tabbing through the content via the keyboard is a way to evaluate its accessibility by gaining first-hand experience.
Testing a site through code reviews, the use of testing tools as well as utilizing your site as those with disabilities might are all effective ways to increase your site’s accessibility. If reaching the most users is a goal, accessibility should be a priority; thus, testing for a site’s accessibility is imperative.