How to Design an Accessible & Inclusive Website

Why an Accessible Website Matters

Inclusivity 

Inclusivity is vital regarding website accessibility as it allows all users to access the same knowledge shared on companies' websites, regardless of their needs. Ultimately, it fosters a community where everyone can access resources and services offered by public companies, including small businesses.

Legal Compliance

Website accessibility for individuals with disabilities is a legal requirement for businesses open to the public in the United States (SRC: ADA Compliance). Title III by the ADA prohibits discrimination of people with disabilities and requires businesses open to the public to remain accessible.  

Business Advantages 

Taking into account your website’s accessibility could pose some business advantages. For one, it demonstrates that your business has taken the time and effort to consider others with disabilities, often overlooked as a minority group. This care for the sensitivity of others is an excellent representation of your business and an opportunity to be an example to other companies in your local area. 

Another business advantage of website accessibility is from a more technical standpoint. It can help your site rank higher in search engines like Google, Bing, and Safari, which leads to greater exposure and more traffic to your website. A double win! 

Ethical Reasoning 

Designing a website that is accessible and welcoming to everyone is just the right thing to do. And hey, I get that it can be challenging and sometimes frustrating. 

Believe it or not, I redid my own business's entire branding because the original colors I chose did not contrast well and did not pass accessibility tests (try telling any designer they need to re-do branding after they spent hours developing initial concepts, and you know they are going to pull their hair out!) 

In the end, I came up with a color scheme that was even more aligned with my business. So, use it as a chance to take a step back, re-assess where you're going, and develop something even better! 

6 Points to Consider When Designing an Accessible Website

Designing an accessible website does not need to be an intimidating experience or require resources that are out of your hands. Many of the concepts and tasks needed to meet the baseline level of website accessibility are relatively straightforward. In the following 6 points, we will discuss some simple and effective ways to ensure your website is inclusive and accessible to everyone. 

1. Verify your Colors Contrast 

One of the easiest things you can do from the very start of designing your website is to ensure all the colors on your site contrast. If you are working with a UI/UX designer, they will likely already know to consider this when delivering initial concepts. If you are designing your website independently, one way to ensure your colors pass an accessibility test is to use a Color Contrast Tool, which will give you a pass or fail score. 

Once you know your colors pass the contrast checker, I suggest playing around with how you plan on mixing the colors throughout the site. What I mean by this is testing different button colors on various backgrounds and establishing your rules for what colors can be combined. Taking the time to set this up in the beginning phase of your website will help you expedite the design process later on when it comes time to create low—and high-fidelity prototypes. 

2. Structure your Headings & Content

Structuring headings and content is often a step that gets overlooked by new designers and left for developers to set up. However, an experienced designer will know the importance of structuring content while creating page designs, especially dynamic template pages like blogs and events. Heading hierarchy (or structured headings) involves six headings ranging from H1- H6, which tells screen readers how to prioritize your content and tells search engines what the main points of your content are about. 

When it comes to using headings correctly, a couple of things to consider are 1) the amount of times you use each heading and 2) the design of the headings themselves. 

Heading Structure Uses 

H1 headings are typically the title of a page or blog. There should only be one instance of an H1 per page. This tells search engines what the over-arching concept of the page is all about. H2-H6 are subheadings and should be used to help categorize and break apart the page for better understanding and usability by both people reading your content and web bots scanning your page for screen reader assistance. 

Heading Structure Design

When designing a website's headings, you’ll want to ensure they are sized correctly and that appropriate weights are applied to the text. H1s should be the largest font size, with H2-H6s cascading down from there. 

I also recommend placing a slightly more prominent weight on your heading fonts because it makes it easier for anyone reading your content to pick out the sections of your pages. Varying font families, of course, will showcase weights differently, so play around and experiment with what you can visually tell jumps out more! Don’t be afraid to choose different colors for your headings that contrast nicely with your webpage's background. 

3. Apply Alternative Text on Images

Alternative text (Alt Text) is a brief descriptive sentence that describes the intent or meaning of an image. This is helpful to people with visual impairments who may use screen readers to assist with transcribing the details of the content on a webpage. When adding new images to your website, it’s a great idea to get in the habit of adding a brief description. From an SEO standpoint, you can also use this to add keywords to the description. But, it’s important to remember that alt text is not meant to be a place to cram keywords in; it’s first and foremost meant to be used for accessibility. Respecting that rule will add much more value to your website!

4. Allow for Keyboard Navigation

Keyboard navigation is frequently used by people with disabilities who cannot use a regular mouse. This functionality allows users to use specific keys to scroll through a page, jump down on a page, click through links, and more. Some standard keyboard navigation settings include the following: 

• Tab - Navigate forward
• Tab + Shift - Navigate backward
• Enter or Spacebar for buttons - activate click-through
• Up/Down Arrows - Scroll through a page
• Space - Jump to sections on a page
• Esc - Close

5. Utilize Descriptive URL’s

A descriptive URL (Uniform Resource Locator) is a webpage's address used by browsers to access a page. When it comes to accessibility, having a descriptive URL is helpful because it provides greater context on what the page is about, especially to those who may be using a screen reader. It should not be excessively long because you also want to ensure it’s an easily shareable link. 

If you are writing a blog within a Webflow CMS collection, you can edit the URL referred to as the ‘slug.’ A good example is this article. The name of the article is ‘How to 

Design an Accessible and Inclusive Website,’ is what the the slug would automatically generate if I did not edit it (ex: /how-to-design-an-accessible-and-inclusive-website). But, because I created a unique slug, it instead reads as /accessibility-website-tips. This is a better option as it’s still descriptive and provides good context of the article, but is also easily shareable.  

6. Consider a Plugin like accessiBe

accessiBe is a website plugin that adapts to the needs of each user who visits your website. 

This is a game changer for companies looking for an automated web accessibility solution.

accessiBe has many features that can control your website through powerful AI, including updating your site’s color contrast, translating for screen readers, and even taking over keyboard navigation. It adheres closely to the standards set by WCAG & ADA, which are leading organizations regarding website accessibility compliance. Learn more about the accessiBe widget here, and start a free trial to see the powerful tool in action yourself!

How to Check Your Website Accessibility 

When it comes to checking and testing your website’s accessibility, there are a few methods you can implore. 

• You can use a third-party website accessibility checker like WAVE or SortSite by PowerMapper. 
• You can employ automated tools like the widget accessiBe.
• You can use assistive technology to test and diagnose what works on your site. This also allows you to experience your site from the view of someone with a disability. 

In Summary

There are many benefits to having an accessible website, from the inclusivity of allowing everyone equal access to information on the web to business advantages like ranking higher in search engines, which leads to more traffic to your website. 

Website Accessibility does not need to be rocket science. There are easy, actionable steps you can take today to design your website with accessibility in mind, such as choosing your colors wisely, structuring your content properly, and adding descriptive alt text.

We hope you learned some valuable information on designing an accessible website. If you have questions or more input on your experience with website accessibility, drop a comment below! We’d love to hear from you.