At any given time, there is an army of future web designers and developers itching to learn the trade and jump knee deep into the industry. Many of these people are self-taught, like myself, and we all know that there are many other things on your mind as you attempt to break into a new field while attempting to fit in with the locals. Things like creating good-looking and functional designs, finding clients (and pleasing said clients), “How much should I charge?”, and running the business operations many freelancers suddenly realize is part of their everyday business affairs, among other things.
Or maybe you’re just someone that has fallen into the critical job of updating and maintaining a website that has been handed off to you, and you don’t know the first thing about building a website? At this point you’re just hoping to get an understanding of basic HTML and the way the web works, let alone trying to account for overly technical things.
Either way, with all these factors it’s not surprising that something like ensuring that you’re developing an accessible website may get left behind. But it’s critically important for those who do not have all the advantages of the average person has when simply browsing the web, staring at the computer screen in front of them. Luckily for us all, some minor revisions to the way we work can make a big difference.
“The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.”
— Tim Berners-Lee
For Your Consideration
While none of us are perfect, there are simple solutions to get a foothold in creating a more accessible website that we can all add to our daily workflows. And as stated before, these points aren’t just important for web developers either, as a larger number of companies and institutions hand off the critical job of content creation and editing to whomever fits the bill or volunteers to do so.
I’ve broken this information up into three (mostly) independent chunks of text based on the differing roles of those who may come across this article in the future, so feel free to jump right to the good stuff:
For Web Designers
Many times the last thing on a designer’s mind is creating an accessible website, but it’s critically important.
The modern web designer is nearly extinct, that is, one who strictly designs and doesn’t actually code anything up, but given that they do still exist somewhere, I’d like to separate out information for both design and front and back end work, since they are different beasts.
It is easy as a designer to think only in the one perspective, that of a creative who is out to envision the greatest, most unique web design the world has ever seen. And that’s great! Accessibility guidelines are certainly not in place to restrict this freedom, but instead make certain that your subtle off-black on black color scheme can even be seen by all audiences.
Some important things to note when designing a website:
- Color Contrast – As stated above, this one is important. While a majority of us are no longer sitting in front of one of those horrible CRT monitors of the past, color is still handled slightly differently between systems. Sometimes color subtle color variation, which seemed perfectly fine on a design-oriented machine, becomes muddy or indistinguishable on another. So forget your ideas of yellow text on a lime green background and do something else. As you could fathom, there are ideal contrast ratios listed in the WCAG guidelines to take into account, as well a variety of tools to help out, such as WebAIM’s Color Contrast Checker or Acart Communication’s Contrast Checker.
- AA Compliance – 4.5:1 for body text; 3:1 for heading/large text
- AAA Compliance – 7:1 contrast for body text; 4.5:1 for heading/large text
- Link Effects – While on the modern web, most linked items are no longer underlined, it’s still an important tool to use when creating the hover effects of links and possibly the easily forgotten “visited” link styling. Whether that means underlining them with a specific color, or doing some other stylistic trick like only on hover, it’s important to remember the “underline equals link” convention, and try not to utilize underlined text in any other context.
For Web Designers & Developers
While government websites are currently required by law to hit a certain accessibility milestone (at least in the U.S.), it is certainly an honorable goal at any business or institution to consider adopting the same rules for your own public websites. Especially at educational institutions, like where I currently work, as accessibility is becoming a larger issue as time progresses.
“The most important blind visitor to your website is Google! In the same way that creating accessible web pages helps disabled person access your content, it also helps Google index your pages so that the right people can find your service or product.”
— Jim Byrne, Founder of Guild of Accessible Web Designers
Some checkpoints to keep in mind when developing websites in the future or tweaking existing sites to conform:
- Web Standards – Let’s face it, the standards are there for a reason, and building and validating your HTML and CSS can go a long way as the first step when working on accessibility conformance. Not only does properly formatted code load quicker, but also can prevent oddball cases that might cause quirks of errors in some systems, causing them not to display properly or at all.
- Read up on accessibility compliance – Get as familiar as possible with WCAG, ARIA, and Section 508. Doing this will enable you to develop more accessible websites from the get-go! The basics are that the W3C’s accessibility guidelines are presented as stepping stones. While all are equally as important if you’re looking for complete compliance, the W3C has separated the checklists in order to provide three levels of compliance that build upon the others: A, AA, and the coveted AAA status.
- A Compliance: A Web content developer must satisfy this checkpoint. Otherwise, one or more groups will find it impossible to access information in the document. Satisfying this checkpoint is a basic requirement for some groups to be able to use Web documents.
- AA Compliance: A Web content developer should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint will remove significant barriers to accessing Web documents.
- AAA Compliance: A Web content developer may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint will improve access to Web documents.
- Turn off the CSS – This might sound weird, but the need for stylesheets is purely for the eye so those with visual disabilities don’t need to worry about them at all. The important thing to note when doing this is the order of your elements. Does the navigation come before the content? Do headers properly stack? What is the tab order? Is your content still easy to parse? There are many questions to ask here, but luckily if you’re used to building on the web, this should all come naturally.
- Accessibility Scanners – Seriously. If you can spare the change every month or annually, nothing beats an automated piece of software continuously checking your entire website, either on a schedule or on-demand as needed. These places specialize in getting in all the nooks and crannies and do not stop until you want to weep. But that’s a good thing. I can count the number of issues I wasn’t even aware was an issue until having the opportunity to use some of this software, and it’s been a critical piece of my monthly workflow since then. I’ve personally used both Siteimprove and SortSite and both have their strengths and weaknesses (and prices…) but there are others as well, included some great free options, like WAVE.
For Web Content Editors
You were likely just handed the job of managing content on the website, but there are some easy things you can do to help out too.
- Provide Descriptions & Labels – The absolute basics, but as good a place to start as any. Providing a descriptive text for photos or images on your website can go along way to improving your site’s basic accessibility. Not only do these things provide more context to what people are actually looking at (as this can also be used for image captions), but they provide people with visual impairments the ability to understand what that image element is actually there for. An infographic, for example, would be utterly useless without providing the a useful description on the information contained or providing the information in hard text format as well. I see it all the time, people not understanding that text embedded inside of an image is not searchable and not accessibility-friendly at all, if no other text is presented with it.
- Headers – Well-laid plans by a savvy web developer can certainly help with this one, but ultimately it often falls back on the shoulders of those who create the content. Structuring your headers properly on your website can help users with disabilities ascertain the nature of the information they are browsing and provide better context for skimming through it. They know that information is always broken up into more manageable and browse-able chunks and the mechanism for doing so is by utilizing headers and other important callout elements.
- Useful Link Text (Not “Click Here”) – One of the most common annoyances still seen around the web to this day is the use of the classic and highly useless “click here” link text to point visitors to some piece of information or action. Instead, you should use a useful call to action or link up the actual text of a link being referenced to prompt your users to click. You don’t need to provide prompts to users for how to use a link and their computer by saying “click” anything, only present them the link in the context of the information you’re presenting. So instead of: “Please fill out our contact form. Click here.” it should most definitely be: “Please fill out our contact form.”
- PLEASE remove that Word junk! – You may not know it, but when you copy and paste from Microsoft Word, you’re carrying over an absolute ton of junk styles in the source code, which if you use a visual WYSIWYG editor, you may never even know. Lots of modern day editors actually have a “Paste from Word” button built in due to the issue (which usually to works somewhat successfully) but the key to making everyone’s life easier is to just build into your workflow the use of a program like Clean Text (Mac) or the any of the online Word clean up tools, such as Word2CleanHTML.
Wrapping Up
While I am by no means an expert on accessibility standards, I have experienced firsthand the effort of trying to make a massive website conform, which is what prompted this post to exist in the first place. I hope that some of the information presented here can help those of you working on the web everyday to work to continually improve your website’s accessibility and try to make for a better experience for those disadvantaged.
Feel free to weigh in on anything I may have overlooked or misrepresented.
