What Every Web Designer Needs to Know About Accessibility
Just like every single site on the web is different and unique, so is every single user. And, for that reason, it’s important to take into account web users’ differences when it comes to designing websites—especially for accessibility purposes.
Accessibility on the web means designing so that people’s disabilities do not hinder their ability to access a site. The Internet was created so that, in theory, every single person in the world could take advantage of its connective power. By designing with accessibility in mind, designers can ensure that they’re creating a space that can be used by every person, regardless of their physical or mental ability.
David Panarelli, our Director of Product Design at Creative Market, asks designers to think about web accessibility as something that benefits everybody—including yourself. He explains:
“One of the most important things is a broader perspective: you will, some day, face some form of ability challenges. You might need glasses, if you don’t already. You might injure your hand and experience reduced motor skills, if only temporarily. You might be colorblind, or know someone who is. If you’re fortunate enough, you will age to the point of impaired vision, hearing, motor skills, and reduced cognition— all of which are totally natural and expected. The most important thing is not to think of accessibility as something for ‘other’ people.”
So, if you’re a designer who is new to understanding accessibility and how you can better create sites that are usable by every person, regardless of any impairment they might have, this article can help you get started.
What is accessibility?
When it comes to understanding the basics, you’ll want to start with the four principles of accessibility: the 4 major design components that determine whether something is truly accessible or not. The four principles of accessibility include:
- Perceivable: The information on a website and its UI interface should be able to be perceived by all users. This means that the information should be presented in a variety of ways so that it can be understood and consumed (via text, different languages, auditorily, with video, and more).
- Operable: Accessible websites are operable, meaning everyone should be able to navigate them regardless of any disability. Users should be able to move through the website in a variety of ways, including via keyboard or with speech commands, and navigation through the site should be clear and simple, as well as free from design elements that could cause seizures or any other physical reactions.
- Understandable: When a user reaches an accessible site, they can not only perceive what’s there and operate it, they should also be able to understand it, as well. Language and usage should be comprehensible or predictable (or help should be offered if either is not straightforward) and getting help to use and understand a website should be easy in order to ensure it’s useful no matter who is using it.
- Robust: Content of accessible websites should be robust. This means that assistive technologies should be able to interpret it to help users who have particular disabilities.
What are some of the most important web accessibility guidelines?
There are many accessibility guidelines to keep track of when it comes to creating a completely accessible site. Make sure you learn and understand these 13 fundamental principles.
- Text Alternatives: Provide text alternatives to any content that isn’t text so that it is comprehensible to more people.
- Time-based Media: When media is time-based (like a captioned video), provide alternatives for those people who cannot take in the media in the time it is presented (audio content that describes video content, extended audio descriptions where pauses are insufficient, etc.)
- Adaptable: Make sure content can be presented in a variety of ways without losing any information or meaning.
- Distinguishable: Help users distinguish content from background with a variety of visual and audio techniques.
- Keyboard-accessible: Ensure that the entirety of the site can be operated from a keyboard.
- Enough Time: Allow users ample time to read, digest, or hear the content on the site.
- Seizures and Physical Reactions: The visual and auditory components of your site should be designed in a way that does not trigger seizures or other physical reactions in users.
- Navigable: Make it easy for all users to navigate through the site and determine where they are while using it.
- Input Modalities: Accessible websites should be able to be operated from a variety of input sources beyond keyboards, like pointers and motion.
- Readable: Make sure all text is readable and comprehensible.
- Predictable: Ensure that your website operates in a predictable, intuitive way to help limit confusion.
- Input Assistance: Make it easy for users to avoid making mistakes, or to correct them when they do make mistakes.
- Compatible: Try to maximize your site compatibility with current user agents (and future user agents), particularly assistive technology.
What is A, AA, and AAA conformance?
Accessibility is not just a subjective idea that Internet users and site designers can gauge based on their own opinion. There are actually official, testable criteria to determine whether a website is truly accessible. With the WCAG 2.0 Success Criteria, websites are given ratings according to their accessibility compliance, and these can elucidate ways in which you can improve your site for all users. Here are the basic rankings of accessibility conformance:
- A Rating: The basic level of conformance. No other conformance level is possible without at least satisfying all of the Level A criteria.
- AA Rating: All parts of a site satisfy both Level A compliance and Level AA compliance.
- AAA Rating: All parts of a site satisfy Level A compliance criteria, Level AA compliance criteria, and Level AAA compliance criteria.
Ten Common Mistakes to Avoid
Want to make sure you get accessibility right? Make sure you avoid these 10 common mistakes.
- Get color contrast right. It should be 4.5:1 in order to be AA compliant.
- Be careful with flashy visuals. We know it’s fun to use visuals that are eye-catching, but avoid graphics that may cause seizures. These risky visual elements include things like rapidly changing or flashing videos or motion graphics.
- Don’t forget infographics. Infographics are a great way to get information across clearly and succinctly. But don’t forget that they have to meet visual contrast requirements, as well. (See No. 1 above).
- Consider readability. Don’t use language above an 8th-grade reading level in order to make sure it’s as comprehensible to as many readers as possible.
- Be descriptive with directives. Instead of using “click here” or “learn more” for links, use descriptive words to describe the content the user would encounter if they click that link. A person using a screen reader won’t be able to tell what the links pertain to.
- UI essentials: When designing a site’s UI, make sure you design focus states.
- Error Messaging: Don’t forget to be descriptive in error messaging. Error messages shouldn’t just say that there is an error; they should describe what is wrong and how a user can fix that error.
- Avoid autoplays: Don’t autoplay video or sound. Allow users to access audio or video elements as they wish.
- Use descriptive alt tags and titles on media: The correct use of alttitles on media ensures that every person can understand what the media is depicting, whether they can see or understand it, or not.
- Consider a glossary and don’t make ideas too obscure: Sometimes you might want to use lingo or jargon from your industry, or specific to your business. However, to make sure your site’s as accessible as possible, make sure there’s a mechanism to understand unusual words like idioms and jargon. A glossary can be a useful resource.
Where can I find some good examples?
If you want some good examples of accessible sites so you can be sure you’re designing with accessibility in mind, some of the best leaders in the space are government services. Some great examples of accessible websites include:
- Government services: The team at gov.uk in England or 18f.gov in the US have created well-functioning, accessible sites.
- Educational institutions: More and more educational organizations have started to focus on making their sites accessible for all students, potential students, and visitors. Two good examples are Australian National University and Michigan State University Department of Theatre.
- Transportation companies: Many transportation companies have focused on making their sites accessible. Check out Easy Jet, Jet Blue, and Ferry NYC.
If you are planning to design an accessible website, browse through the design assets on Creative Market. Our designers have created a wide range of elements you can use in your accessible design, so you can ensure your site is aesthetically-pleasing as well as easily accessible for all types of visitors.
Products Seen In This Post: