Web Accessibility for Beginners
Many frontend specific roles require knowledge that you might not have acquired without on-the-job training or by doing some extra research. Two of the most common requirements found in job descriptions — beyond the obvious HTML/CSS/JavaScript/SPA framework proficiency — are knowledge of cross-browser compatibility and web accessibility standards. In this post, I will talk about the latter.
Part of creating a great site or app is making sure all potential users can benefit, including those with disabilities. On their site, the Web Accessibility Initiative outlines their goals and provides accessibility checklists and methods for meeting these standards.
Talking about the internet and the power it has to connect, they say, it “removes barriers to communication and interaction that many people face in the physical world. However, when websites, applications, technologies, or tools are badly designed, they can create barriers that exclude people from using the Web. Accessibility is essential for developers and organizations that want to create high-quality websites and web tools, and not exclude people from using their products and services.”
Those affected can be people with “auditory, cognitive, neurological, physical, speech, [and] visual disabilities.”
Though web accessibility is often required by law, the WAI note that people without disabilities can also benefit from accessibility features.
For example, those using a mobile device or small-screen hardware might find greater ease through accessibility adjustments made for those with visual impairments. The same can be said for people who are aging, as their eyes and mobility might not be at their best. Other situational benefits from accessibility include increased access for those with poor internet connections, those in very bright areas who cannot see as well, or those in an environment where it is not suitable to listen to audio.
In order to meet all standards, there are many considerations to make, but I will highlight a few that even beginner developers can — and should, and eventually, must — implement in all their projects, whether for personal use or for large-scale production.
Some easy accessibility guidelines to follow:
When creating forms, make sure to include the “for” label. For example, if you are creating an input for users to enter their email, make sure you include a <label> tag and include for=“email” inside it.
This next one is pretty well known, as libraries and the console often throw errors and yell at you when it’s absent. With every inserted image or <img> tag, include an alt=“” attribute to describe what is depicted.
Another way to improve accessibility is through accurate and detailed HTML markup. Though you should be doing it anyway(!!!), according to the WAI, some examples that might be missed are not including role = “search” when creating a <div> in which to put your search input — in addition to the type= “search” you would include in the <input> tag. Another example is adding an <aside> tag when necessary to properly indicate a text block’s usage.
By creating your site with different technologies in mind, you may also be adhering to accessibility standards. For example, adding media queries to your CSS to ensure your text and display options adjust according to screen size is another way to make your site more accessible.
For those who have difficulty using a mouse, make sure all interactive elements are also keyboard accessible. For example, make the enter key and clicking interchangeable.
These are just a few very easy implementations that make your site more friendly for all possible users and set you on the path to being a stronger, more inclusive developer.
