Creating the code that makes a website accessible to all visitors doesn’t have to be as time-consuming or resource-intensive as you might think. All you need to do is follow some simple steps that require a little extra time and effort. But these efforts will ensure that your Web content is at the fingertips of everyone — including those with blindness and low vision, deafness, and other disabilities.
It’s up to both the developer and the client to achieve site accessibility. Although they usually work together in the planning and later stages of website creation, a developer and client also have separate responsibilities in making a site accessible. This blog post, the first in a four-part series that offers website accessibility tips for developers, will make this important part of development easy to follow. And it comes just in time for Global Accessibility Awareness Day on May 21.
Reading More Shouldn’t Take More Effort
The visually impaired rely on screen readers to help them learn what’s on a page, and to navigate a site. But without the proper code in place, a screen reader that’s reading a short list of blog posts on a landing page that will direct users to a longer list of items, will only say “read more” over and over again.
Not knowing what the “more” is, a user will probably get frustrated and go somewhere else. Fortunately, all that’s needed to get a screen reader to articulate the details that accompany the “more” is just a few snippets of code — commands that accommodate disabled people while at the same time hiding text and not cluttering up the screen for non-disabled people.
A developer simply needs to include a small snippet of code similar to:
The “read more” CSS class should include code that makes the span class invisible to sighted users but can be heard by non-sighted users. Sighted users would still see “Read More” but non-sighted users would hear “Read More about [site] Blogs.”
Alt Text Should Paint a Clear Picture
Developers should stress to clients the necessity and importance of using alt text on a webpage. It helps visually impaired visitors know all there is to know about an image.
It’s easy to overlook when constructing a webpage, but it’s super easy to include alt text in an image’s markup code. A simple description of what the image is, and its title, are all that’s needed — as seen in this example of the markup box for a photo of Attorney General Eric Holder.
Spell Out What’s Required in a Required Field
Many websites use an asterisk as a cue for people to know what’s a required field of input on a form — but that’s not the best method to reach everyone. That sort of general warning doesn’t always work with screen readers; the user will be left guessing where the required field is. Not to mention, a colorblind visitor won’t see the red or green that’s typically used to highlight the field asterisk warning.
The solution is easy. First, the code behind the field should spell out the name of the required field, and the fact that inputting information there is required — so that people using screen readers will have no doubt about what they need to do. Also, the code should inform users that an asterisk is indeed the warning that’s denoting a required field; that way colorblind visitors who can’t see the red or green text that’s often used on websites as the only type of warning won’t have to second-guess and those using a screen reader will also will know what to do.
Don’t Bury Mistakes; Put the Error Message at Top
Another thing about website forms: A visitor who errs when completing an online form should be immediately informed on the refreshed page about where they’ve made a mistake. Otherwise, a screen reader will speak the entire page again and mention the errors only when it reaches the incorrect fields. The refreshed page should instead offer — at the very top — a basic box that lists what went wrong and what is required.
That’s it for now. Stay tuned for second part of this series, as we take you, the developer, down a true and easy path to website accessibility.
