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. 

1. 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.
   
2. 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:
   1. The web accessibility auditor completes a prototype audit.
   2. The web accessibility auditor provides feedback to designers and developers.
   3. Designers select new colors if needed and developers add/remove components.
   4. The web accessibility auditor reviews the updated prototype.
   5. If new components are added during the development, the web accessibility audit will review them and provide feedback.
   6. 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. 
   7. The developers complete needed repairs. 
   8. The auditor will then review the repairs to confirm the accessibility of web design and will state that it’s ready for production. 
   9. Once accessibility is confirmed, the audit provides a detailed web accessibility audit report that can be shared with the client.
3. 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:
   1. The web accessibility auditor completes a prototype audit.
   2. The web accessibility auditor provides feedback to designers and developers.
   3. Designers and developers work together to edit the prototype and make the web design accessible.
   4. The web accessibility auditor completes a full website audit prior to deploying the website to production, and provides further feedback for repairs if needed. 
   5. The developers complete needed repairs. 
   6. 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.

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 version of a metric that measures 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. Following the web accessibility guidelines can significantly contribute to reducing this rate. The lower the bounce rate, the better, because it means people are staying on the website longer. This is often adhered to within various web entities and is incorporated within their policies pertaining to user retention.

On the contrary, a higher bounce rate indicates a poorly constructed site version, particularly if it fails to meet web accessibility standards. A website that ignores the importance of accessibility and lacks necessary elements would fit this description perfectly. Elements of a poorly constructed site include things like non-responsive design, lack of color contrast, and missing form labels.

Our primary aim 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 a staggering 71% of disabled web users will leave a website version that does not fulfill accessibility requirements. This is a large enough percentage to significantly impact the overall bounce rate. Hence, all business entities must incorporate accessibility requirements into their policies to avoid a 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 seek services elsewhere. The value of web accessibility for developers, especially in today’s digital version of the age, is undeniable. Developers take pride in crafting high-quality websites and understand that cleaner code paves the way for a faster and more proficient website. If a website’s load time is slow or it fails to rank high in search results, the development team is usually held accountable. HTML elements (code) have semantic meaning, and web entities optimize their website’s accessibility and performance by using code as intended.

Apart from reducing bugs and enhancing loading speed, semantic code also aids search engines such as Google and Bing in indexing the content, thus facilitating higher search rankings. Let’s imagine a webpage version constructed to compare web development platforms like WordPress and Shopify and how its organization of content using heads and visual elements can increase its potential visibility.

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.

1. The human eye reacts to movement (and will miss the important stuff.)
2. Too many messages equals no message.
3. The user needs to be in control.

When it comes to accessibility, a few of the common barriers that we encounter include

• Autoscrolling
  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.

Keyboard testing

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. 

Read more about web accessibility

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.

Download tips for content designers

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.”

Accessible Headings

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!