What Web Design Agencies Should Know About Web Accessibility
Web design companies are responsible for creating world-class digital products. In addition to branding, web design services include website design and development. The best web design agencies know how to create stunning websites that engage users with intuitive designs.
To stand out as a top-notch web design agency, design teams create engaging websites that drive conversions and focus on user experience. An intuitive user experience should leave a lasting impression on all users. This includes users with disabilities.
By providing a website that is accessible to all users, including those with disabilities, businesses will not only increase lead generation, drive sales, and scale up their business, but they will also comply with the Americans with Disabilities Act (ADA). The ADA requires businesses to provide equal access to their goods and services. In today’s digital age, this means providing an inclusive and accessible website.
Testing and applying accessibility
Design agencies have a few options when it comes to testing and applying accessibility.
- Use designers and developers who are trained in standards for accessible design and can verify accessibility in all stages of the development life cycle. Designers and developers should have a clear understanding of accessibility standards such as the Web Content Accessibility Guidelines (WCAG). They should feel confident in providing expectations, solutions, and audit reports.
- Hire accessibility experts such as Be Accessible to work closely with during all stages of the development life cycle. Working with an accessibility auditor throughout the entire development life cycle includes the following steps:
- The web accessibility auditor completes a prototype audit.
- The web accessibility auditor provides feedback to designers and developers.
- Designers select new colors if needed and developers add/remove components.
- The web accessibility auditor reviews the updated prototype.
- If new components are added during the development, the web accessibility audit will review them and provide feedback.
- After the website is complete and ready for production, the web accessibility auditor completes a full website audit prior to the website being delivered to the client for approval and provides further feedback for repairs if needed.
- The developers complete needed repairs.
- The auditor will then review the repairs to confirm the accessibility of web design and will state that it’s ready for production.
- Once accessibility is confirmed, the audit provides a detailed web accessibility audit report that can be shared with the client.
- Opt for a hybrid model where accessibility experts will audit prototypes and the final website. With this option, an agency has the guidance of accessibility experts at the beginning and end of the project. However, the accessibility auditor will not work continuously with the designers during the entire process.
The accessibility auditor’s goal is to provide enough feedback during the prototype audit that allows designers and developers to make the best decisions during development that will ensure accessibility in web design. An example of this process would include the following steps:
- The web accessibility auditor completes a prototype audit.
- The web accessibility auditor provides feedback to designers and developers.
- Designers and developers work together to edit the prototype and make the web design accessible.
- The web accessibility auditor completes a full website audit prior to deploying the website to production, and provides further feedback for repairs if needed.
- The developers complete needed repairs.
- The auditor will then review the repairs to confirm the website is fully accessible and ready for production.
This option works best for teams that have designers and developers that are already familiar with accessibility standards but may not be certified experts in applying accessibility and providing audit reports.
We’ve posted free resources to help you learn and apply web accessibility into your workflow.
How web accessibility benefits business owners
If you are a business owner, you may be familiar with the term bounce rate. The bounce rate of a website is the rate of how long users stay on a website. Unlike conversion rates that we want to be high, our goal is to have a lower bounce rate. The lower the bounce rate, the longer people are staying on the website.
On the contrary, a higher bounce rate indicates a poorly constructed site. A website that lacks accessibility would be considered a poorly constructed site. A poorly constructed website includes things like non-responsive design, lack of color contrast, and missing form labels.
Our goal is to keep people on our website longer so that they discover more reasons why they should choose us over our competitors. A study found that 71% of disabled web users will leave a website when it is not accessible. This is a large enough percentage to have a significant impact against the overall bounce rate. Business owners must prioritize web accessibility to avoid potential loss of customers.
How web accessibility benefits developers and Google
If your web developer argues that web accessibility does not benefit them, then it may be time to find a new developer as it is just undeniable how vital web accessibility for developers is, especially nowadays. Developers aim to create high quality websites and know that the cleaner the code is, the faster their websites will run. If a website’s load time is slow or a website fails to rank high in search results, the development team is responsible. Cleaner code means faster, high quality code. Semantically correct code is cleaner code. Accessible code is semantically correct. This means that code is written according to specifications. HTML elements (code) have semantic meaning. Developers optimize a website’s accessibility and performance by using code as it is intended.
Aside from having fewer bugs and making a website load faster, semantic code also helps search engines such as Google and Bing to index the content and achieve higher search rankings. For example, let’s say that a web page is about comparing web development platforms such as WordPress and Shopify. The page visually uses headings to organize its content. The code of the page uses paragraph tags with classes (used for targeting styles) to create the visual appearance of headings like this:
Web design accessibility must be included in every phase of development
We receive many inquiries from design agencies who need a website audit on their newly developed website. Much too often, we receive the request for a web accessibility audit after the web development is complete and ready to deliver to the client. Unfortunately, waiting until a website is completely developed to think about accessibility results in having to extend delivery dates and more out-of-pocket costs due to the extra time needed to spend repairing accessibility issues.
The best time to consider accessibility is all of the time. This includes the discovery, design, and development phases. Designers have the responsibility of providing clients with prototypes that allow for accessibility implementation. Here are a few examples of how their influence will result in a fully accessible website:
How graphic designers influence the accessibility of web design
Graphic designers play a major part in a website’s accessibility. They are laying the foundation for UI/UX and content designers. A graphic designer who understands accessibility considers things such as color, spacing, shape, and interactive functionality.
The art of color in accessible web design
One of the most important responsibilities of a graphic designer is to provide accessible color combinations. Text and interactive elements should have a color contrast ratio of at least 4.5:1. Non-text contrast for user interface (UI) components and graphics objects should have a contrast ratio of at least 3:1. Additionally, color should not be the only indicator that an element is interactive (e.g., links and buttons).
Using accessible color combinations does not mean that you cannot use red or green in your design (yes, we have had clients think that red is 100% taboo). This is great to know since red is known to trigger impulse buys, so it is definitely not a color that you want to completely eliminate. If that were the case, Coca-Cola would be in big trouble.
When you use red, green, or any other color, you need to consider both the foreground and background colors. Since red is a common color that fails when it comes to providing sufficient color contrast, and we like Coke, we will use red to show a few things to consider.
The hex code for the red used by Coca-Cola is #F40000. However, they are using #F40009 on their website so we will demonstrate with that one. When we visited Coca-Cola’s website, we were surprised not to see more red. Could it be because it does not have sufficient color contrast against the white background? If so, this is an accessibility win for Coke.
Coca-Cola also found ways to incorporate red as either decorative elements or UI components. In the images below, we see red dots implemented as a decorative element on the side of the text and a red underline used to depict which page in the navigation menu that you are currently viewing. Both of these elements meet the 3:1 ratio recommended for UI elements and graphical objects.
If you look around the Coca-Cola website, you will also notice red incorporated in various other decorative elements.
Although logos are not required to provide sufficient color contrast, it is often the colors in a logo that are implemented throughout a website. If the logo design is a part of the project, we recommend considering colors that will be easy to work with throughout all the areas of the website.
If Coke made a minor adjustment to their #F40000 red and used #E60008 instead, the red would then provide sufficient color contrast against white and allow for a wider range of usage. Can you tell which of the following images is using Coke red?
If you chose the second image for Coke red, you are correct. Now, we do not expect Coke to alter its branding color. They have too much invested in their favored Coke red. However, we do appreciate the way they have chosen to incorporate it into their website in an accessible manner.
Image Carousels (slideshows)
Carousels are an interactive functionality that almost always results in an accessibility failure. Our recommendation for carousels is: when in doubt, leave it out! We are not alone in this recommendation. Many marketing and accessibility experts agree to avoid carousels.
Whether it is for accessibility, marketing, or another accessible website design strategy, we vote image carousels a fail. In his article, Image Carousels and Sliders? Don’t Use Them. (Here’s why.), business builder Peep Laja gave three reasons why usability testing has deemed image carousels bad for website design accessibility.
- The human eye reacts to movement (and will miss the important stuff.)
- Too many messages equals no message.
- The user needs to be in control.
When it comes to accessibility, a few of the common barriers that we encounter include
A user needs a way to start and stop content from scrolling and the ability to control the speed at which content is changing. This is especially important for people who are distracted by movement or need more time to read and understand the content.
- Keyboard functionality
All functionality of the carousel must be operable by keyboard. Otherwise, keyboard only users such as those who use screen readers cannot interact with the controls.
- New content not presented
When a screen reader user selects an option to view the next slide, they need to be notified that the new content appeared. Our visually impaired testers in our usability lab almost always completely miss carousel content due to not knowing that new content was added to the page.
Web page real estate is precious. As graphic designers decide the best elements to include in their designs, space should not be wasted on carousels. The user interface (UI) designer will be extremely grateful that they do not have to try to implement an accessible carousel.
How user interface (UI) and user experience (UX) designers influence web accessibility
UI and UX designers or UX service providers should review prototypes to consider how they will implement each element in an accessible way. If they notice elements that they cannot provide in an accessible way, they should provide feedback to the graphic designer who then needs to design another option.
Once the accessibility web design is approved and ready for development, the UI and UX designer must take extra care to ensure styles and functionality account for the widest range of users. Performing keyboard and screen reader testing during the UI and UX phases will prevent having to redesign elements after accessibility auditing is complete on the final website.
Testing for keyboard accessibility is vital during development. Each interactive element must be accessible with a mouse and a keyboard. For example, a mouse user will simply click on links, form fields, and buttons to interact with a web page. A keyboard-only user will use the TAB key on the keyboard to bring focus to interactive elements. Once the desired element receives focus, the ENTER or SPACEBAR key is used to activate or interact with the element.
Tabbing through the active elements of each page will show UI and UX designers where attention is needed to improve accessibility. A visible focus identifier, such as an outline or underline, should appear on each active element as it receives focus.
Screen reader testing
UI and UX designers also need to test using a screen reader. JAWS and NVDA are the most popular screen readers available. JAWS requires a paid subscription and NVDA is free. VoiceOver for iOS and Talkback for Android are also free and especially useful for mobile testing.
In addition to designers testing with screen readers, visually impaired users familiar with screen readers should also perform screen reader testing. Accessibility is about real people, and as such, we should always include real people in our usability testing.
How content designers (copywriters) influence web accessibility
Content designers, better known as copywriters, are responsible for creating engaging content that is relevant, meaningful, and useful. With content at the core of every website, it is vital that everyone has access to content that is to-the-point and memorable. Accessible content attracts people instead of interrupting them.
Copywriters carefully select keywords and phrases that drive engagement. In order to write content with accessibility in mind, some of the things that copywriters need to consider include link text, headings, lists, and table usage.
Accessible link text
One of the most common mistakes we find when evaluating a website for accessibility is inaccessible link text. In order for hyperlinks and buttons to be accessible, the text must be descriptive of its purpose. The text should be descriptive enough that users understand the link’s purpose without having to read all of the content on the page.
Here are a few examples of non-descriptive link text:
- Read more (What am I going to read more about?)
- Learn more (What am I going to learn more about?)
- Link (Are you just showing me what a link looks like?)
- Here (Yes, I’m here. Now what?)
- Click here (Why?)
How can copywriters improve these inaccessible link examples that seem to be standard across most websites? The easiest solution is to write links or button labels that are specific. Descriptive link purposes help users to navigate around the page and know what to expect when they select a link.
For example, instead of simply saying “read more”, include what the user will read more about.
Since not all users click, avoid using “click here”. For example, if you want to provide a document that users can download, instead of using a button labeled “click here”, describe what will happen when the button is selected.
You may be thinking, wait, I see “read more” links on your website. This is where UI designers and copywriters work together. If you decide that “read more” best meets the visual needs of the website, UI designers can use techniques such as aria-labels and screen-reader-only text to increase accessibility. If you read our Blog page with a screen-reader and scan through the page links, the “read more” text actually describes what you will read more about.
For example, the “read more” link for this article reads as “Read more about what web design agencies should know about accessibility in web design.”
Just as headings allow a visual user to quickly scan a web page for the content they desire, visually impaired screen reader users will also scan a website by headings. Each time a new web page loads, a screen reader will announce the number of headings included on the page. This allows the user to understand the structure of the content.
By using shortcut keys, users will move between headings to quickly navigate through the information. A good heading structure strengthens the foundation of the website. With a structurally sound semantic foundation, users will remain engaged and have a clear understanding of your products and services.
You can read more about accessible headings structures in our article Accessible Semantic Structure: Headings.
As stated by Bill Gates, “content is king,” and to this, we add that is, as long as everyone has access to the content.
Accessibility partnership for web design agencies
What should agencies know about accessibility in web design? Basically, everything. If you are a digital design agency and are looking for an accessibility partner, we can help. Contact us today to start your web accessibility partnership and learn how having an accessibility partner will help your agency.
Start your web design accessibility partnership today!
Please complete all fields.
Web Accessibility & WCAG Compliance Checks
There are some simple checks and fixes that you can do now to increase your website’s accessibility.
Accessibility Overlays are Not a Web Accessibility Solution
Accessibility overlay companies continue to lie about the ability of their products to provide web accessibility and protect your business against legal complaints.
IRS Tax Credit to Write Off Web Accessibility Expenses
In an effort to encourage compliance with the Americans with Disabilities Act (ADA) and help provide relief to businesses who encounter web accessibility expenses, the Disabled Access Credit provides up to a $5000 tax credit for expenses related to web accessibility.