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?
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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 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.
Originally published Mar 25, 2020 1:20:28 PM, updated April 16 2020