What Web Design Agencies Should Know About Web Accessibility

Web design agencies 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 accessibility standards 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 website is fully accessible and 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 result in a fully accessible website in the end. 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 develop the accessible website.
    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 who have designers and developers that are already familiar with accessibility standards but may not be certified experts in applying accessibility and providing audit reports.

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 during 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 web accessibility

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

We do business the right way, not just the easy way. People matter. Our planet matters. quote with red decorative dot elements.
Our company navigation menu link with red underline on hover and focus

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 logo design is part of the project, we recommend considering colors that will be easy to work with in all 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? 

#e60008 red
#f40000 red

If you chose the second image for Coke red, you are correct. Now, we do not expect Coke to alter their 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 through 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 web 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.

  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 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 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 userful. 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-lables 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 web accessibility.”

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 web design agencies know about web accessibility? 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.

Avatar for David Gevorkian

By David Gevorkian

David started Be Accessible because of his passion for website development and creating accessible products for businesses. He earned his Master’s in Business Administration from Salve Regina University in Rhode Island. David is a strong advocate for creating web interfaces and digital products usable by all people across the world.

Contact Us

Please complete all fields.

Recent Posts

team works together to create a website accessibility plan

How to Create an Implementation Plan for Website Accessibility

A website accessibility plan is a vital part of website accessibility. Businesses, government organizations, educational institutions, medical facilities, non-profit organizations, and other public entities should have a website accessibility plan in place.

Read more about How to Create an Implementation Plan for Website Accessibility

Creating Accessible and Tagged PDF Documents

Accessibility compliance is one of the many reasons that businesses elect to use PDFs to link to a document from their website.

Read more about Creating Accessible and Tagged PDF Documents

What Web Design Agencies Should Know About Web Accessibility

The best web design agencies know how to create stunning websites that engage all users with intuitive designs. This includes users with disabilities.

Read more about What Web Design Agencies Should Know About Web Accessibility