December 7, 2018
Five easy ways to design websites for accessibility.
Brandon Rich | UI/UX Web Designer
Designing for accessibility is building digital content that can be used by people who may have disabilities. Disabilities could range from being visual like color blindness, issues controlling motor functions, auditory, or speech.
There is no doubt that accessibility is becoming increasingly important within the last year. In the U.S. alone, 19% of the population has a disability of some form and many of them experience serious challenges when trying to research information online.
There have been a growing number of lawsuits, many within the healthcare industry, in the last couple years trying to push for improved web accessibility. There have been at least 814 cases in 2017 where the defendants' websites are allegedly in violation with the Americans with Disabilities Act (ADA).
Why is accessibility important?
Accessibility is especially important in healthcare, entities need to provide the same services across the board no matter the person or their disability. Title III of the ADA requires "places of public accommodation" to be accessible, and prohibits discrimination based on disability.
These five guidelines are easy to implement and will help designers working within healthcare to meet ADA compliance by getting closer to achieving level AA of the Web Content Accessibility Guidelines (WCAG 2.0).
1. Make sure there is enough contrast for your text
Color contrast is important and often overlooked when designing online materials. Seeing text that is difficult to read on a particular background color can be frustrating and, in many cases, impossible depending on the user’s vision impairment.
According to the WCAG (Level AA compliance), the contrast ratio between text and the text's background should be at least 4.5 to 1. These requirements are more forgiving the bolder and larger the font is. If the font is at least 24px or 19px bold the minimum contrast ratio needed drops to 3 to 1.
Checking for color contrast is a simple process. I recommend using WebAIM color contrast checker which will quickly show you what the contrast ratio of the foreground and background is and if they pass WCAG AA or WCAG AAA compliance. This is a great tool for fine tuning a color and seeing the contrast ratio change in real time in order to meet the 4.5 to 1 or 3 to 1 contrast ratio requirements.
Another great tool for checking contrast and HTML site structure once a site has gone through markup is WAVE or Siteimprove Chrome Plugin. These tools will give you a comprehensive look at aria-labels present on the page or any missing information that is needed to meet accessibility requirements. The tools will auto scan your page to catch issues that you may have overlooked or didn't even realize were issues.
These accessibility website scanning tools can be a nice starting point for anyone who finds WCAG requirements and techniques documents to be overwhelming.
2. Indicate important information using more than color alone
Color is an important asset for designing web content, improving its usability, enhancing aesthetic appeal, and its accessibility. However, some users have a hard time perceiving color or have limited color vision. This can be especially true for senior users.
Communicating important information and interactive elements across the site should avoid using color as the only visual cue. Just like foreground and background contrast ratios, interactive elements only distinguished by color can be misunderstood or missed completely.
Using an indicator for an interaction can help elements stand out from other items on the site. For example, alerts for required fields or an error being shown for filling out a form incorrectly can be colored red but consider using labels, icons, text underlines, or font-weights to help create a visual queue for the user in addition to color.
Source: Understanding WCAG 2.0: Use of Color
3. Design with clear focus states to help users understand where they are
I'm sure many of you have noticed the default blue outlines browsers use when focusing a particular element on a webpage. Sometimes designers feel inclined to hide these or minimize how obvious the focus state is because they don't like how they look. If you don't like the way the focus state looks, always replace it with something that fits into your design instead of getting rid of it.
Most people are familiar with using the tab key to navigate to the next link on a webpage, but some people rely on their keyboard to navigate through the entire webpage at all times. Any noticeable visual change to an element can indicate a focus state and will help a person know which element has the keyboards focus as they navigate the webpage.
Designing user interfaces that can be easily controlled by a keyboard in a logical order should be a priority during the design phase.
Source: Understanding WCAG 2.0: Focus Visible, Understanding WCAG 2.0: Focus Order
4. Use labels to help users understand inputs and avoid mistakes
When designing a webpage, and trying to improve responsive usability, it's tempting to streamline the space you use and visible information. This can cause designers to drop the <label> off of their forms and rely on the placeholder text to act as the label. In most cases placeholder text can be hard to read and colored in a light gray that does not meet required contrast ratios. The <label> is very important and is what screen readers use to provide context for form elements.
However, that does not mean we have to give up on our label free dreams of streamlined form elements stacked and organized uniformly. We can still find a balance and visually hide <label> with CSS without removing it from the document flow, meet proper contrast ratios for placeholder text, and include the <label> for screen readers.
Source: WebAIM Creating Accessible Forms , Understanding WCAG 2.0: Labels or Instructions
5. Write good alt text for images
Users with low vision often make use of a screen reading software to "read" the web. When the screen reader lands on an image, it looks for alt text that it can read to the user. If it finds no alt text on the image, it will often just say "image", leaving the user in the dark with what the image is about or if it is associated with understanding the meaning of the webpage or story.
It's important to set the alt text to something that is descriptive and helps explain what is going on in the photograph instead of including something like "photo of two people and phone". For example, if you have an image of two people looking at a cell phone and one of them is playing a game on the phone, your alt text would look something like "One person excitedly playing a game on a phone while another person stands by happily spectating".
Source: Understanding WCAG 2.0: Using alt attributes on img elements
Conclusion
If you follow these guidelines you will find yourself closer than ever to meet level AA Web Content Accessibility Guidelines.
When you first look at the WCAG Quick Reference Guide it can appear overwhelming or hard to implement all of the guidelines on top of your existing process. The reality is adding accessibility to your process is easy and only takes a couple of days and some useful tools to get started.
As designers, it is important to not only think about how we can incorporate these guidelines into our process but push and promote the application of accessibility standards. Our goal is to create interesting, engaging, and beautiful ways to digest information. It's also our responsibility to make sure all people can access information and use a website no matter their abilities, education, age, or location.
Helpful Tools:
