Scale and scope often conspire to make the Internet seem universal — ubiquitous devices and improving connections allow anyone, anywhere to access online sites, services and solutions, right?
Not quite.
Here’s why. While common website graphic design elements such as bold graphics, nested menus and engaging text content work for most of your visitors, there’s a large segment — up to 25% of the population — that may experience difficulty using your website due to conditions like colorblindness or limited fine-motor control.
Web accessible graphic design looks to break down these barriers by creating sites that are both universal and usable. But what does this mean in practice? In this accessible graphic design guide, we’ll cover five key topics:
- Accessible web and graphic design basics
- Best practices for accessible web design
- Potential graphic design pitfalls
- Great accessible design examples
- Tools to help you design more accessible websites
Let’s get started.
.png)
Website Accessibility Checklist
This checklist will help you make the following more accessible on your website:
- Web Pages
- Navigation
- Video & Media
- And More!
Download Free
All fields are required.
Accessible Web and Graphic Design Basics
Accessible graphic design helps ensure that your website is easy on the eyes — and easy to navigate — for the largest number of users possible. This is just good business; with 25% of prospective customers potentially unable to access your site without accessible design, you can boost both revenue and reputation by improving overall accessibility.
Straightforward design changes that can improve website accessibility include:
- Contrast and color — Text and background colors that lack contrast are hard to read; use tools like Web AIM’s contrast checker to see how your design stacks up.
- Keyboard utilization — Can you easily navigate your website using only keyboard commands? If not, consider a redesign — visitors with fine motor disruptions won’t stay long if they can’t quickly access information.
- Text scalability — WordPress sites natively allow text scale and zoom multiple devices, which is essential for users with vision impairments or difficulty reading. Check out this WordPress accessibility guide for more tips.
Legislation is also changing to make accessible graphic design is a priority. In the United States, for example, Section 508 of the Rehabilitation Act“requires federal agencies to develop, procure, maintain and use information and communications technology (ICT) that is accessible to people with disabilities.”
While private companies don’t share the same legal obligation, many now use Section 508 to inform website design choices and align with federal best practices.
In Europe, meanwhile, a recent update to the EU Web Accessibility Directive specifies that all public sector websites and applications in EU member states must meet accessibility standards or risk monetary fines — again, private companies are not bound by this directive but many are choosing to update their graphic design policies.
Best Practices for Accessible Graphic Design
Three design best practices can help you capture the broadest group of users possible, according to the University of Washington. Let’s break down each one.
1. Accessibility
Accessible graphic design specifically considers the needs of those who encounter difficulty in viewing and using web pages. The Web Accessibility Initiative offers a variety of tools and resources to help improve website access.
2. Universality
Universality extends the idea of accessibility to everyone. Instead of designing one page for typical users and then multiple iterations for differently-abled visitors, this best practice focuses on delivering design and content that’s accessible to everyone. In many cases, the changes needed to deliver this kind of universality are minimal but provide a significant boost to the number of potential site visitors.
Not sure what universal design looks like? Consider the real-world example of automatic sliding doors. Anyone can use them, but they make life significantly easier for those with mobility challenges. The same applies to websites; just a few changes to text or color can make your design more universal without adding extra layers of complication or cost.
3. Usability
Last but not least is usability. Here, the goal is to make your website design as usable as possible in addition to being universal. Consider text size and color. If you significantly increase the size of all text on your website and use highly-contrasting colors, you’ve created a universal design.
But is it usable? For some, the text will be too bright and too large; for others, it may still need to be scaled up. By making text size and color adjustable, meanwhile, you provide the ideal combination of accessible, universal and usable design.
Potential Graphic Design Pitfalls
While there’s no “right way” to create accessible graphic design, basic principles — as noted above — do apply. But it’s also worth watching out for these potential design pitfalls.
Limited text
Every graphical element needs a text alternative. Not only does this help visitors who rely on text descriptions, it can also help your site rank higher in search engine ratings. Use this HTML code to include alternative text.
Missing semantics
Semantic markup elements help identify meaning and context, allowing search engines and assistive technologies to find relevant content quickly. Use elements including <header>, <main>, <footer>, <nav>, <time>, <code>, <aside>, and <article> to improve overall accessibility.
In-field form labels
When asking users to fill out registration, newsletter, contact or sponsorship forms, make sure to put labels outside their respective fields. Labels inside text boxes are often missed thanks to grayscale coloring, and users with processing challenges may find it difficult to follow the form’s intent.
Website Accessibility Checklist
This checklist will help you make the following more accessible on your website:
- Web Pages
- Navigation
- Video & Media
- And More!
Download Free
All fields are required.
Great Accessible Graphic Design Examples
Not sure what great accessible design looks like? We’ve got you covered with these two accessible graphic design examples.
Deque Systems
The website of this digital accessibility company includes alternative text for all images, keyboard navigation aids and structural markup language to identify key contextual elements.
Parramatta Park
Here, color contrast makes this website accessible to everyone, including those with vision issues. The font selection also makes the text box easy to read.
Resources to Help Design More Accessible Websites
While it’s possible to create accessible graphic design from the ground up, you can also streamline the process with great tools and resources.
EqualWeb
EqualWeb can improve your accessible graphic design with just a single line of code. Try out their auto remediation widget for free, then select the plan that best matches your needs. Their “Small” plan is $29 per month and includes up to 100 pages and 10,000 monthly visits, while their “Medium” plan costs $39 per month for 1,000 pages and 100,000 visits.
Stark
Stark includes a contrast checker, colorblind simulator, color suggestions and seamless export functions to empower accessible graphic design. Pricing for their “Pro” plan — which includes rapid contrast checking and access to new updates — is just $2 per month.
The A11Y Project
The A11Y Project is a free code and resource repository to help you improve design accessibility and create websites that deliver value for all users.
Accessible graphic design lets you reach more users, more quickly. Boost your brand impact with accessible, universal and usable design choices.
