Are Brizy Cloud Websites ADA Accessible?
Written by Connor Olson
Brizy Cloud is an excellent website builder that we, Circulation Studio, regularly use for our client’s websites. We love the intuitive and easy to use drag and drop builder, the responsive design, professional templates, and fast, cloud-based hosting.
More importantly, they have constantly been improving Brizy Cloud ever since we started using them. But today, we're not just talking about all of the things we love about Brizy. We are looking in-depth into ADA compliance - which begs the question:
Are Brizy Cloud Websites ADA Compliant?
The short answer: Not usually - unless you've already but a lot of work into making your website ADA compliant. That said, the Brizy team isn’t too far off and they may only be a few feature releases away from becoming fully compliant.
For the rest of this article, we'll be digging into
- What exactly is ADA Compliance?
- How do you test your own website for ADA compliance?
- What are some common ADA issues that Brizy Cloud websites often have?
- How do you fix those ADA issues?
More than 11,400 people filed an ADA Title III lawsuit in 2021—a 4 percent increase from 2020 and a 320 percent increase since 2013. California's 5,930 filings accounted for over half of the total nationwide and more than the other 49 states combined.
What is ADA & WCAG?
What is ADA and why do businesses need to be compliant?
The Americans with Disabilities Act (ADA) is a civil rights law that was enacted in 1990 to protect the rights of individuals with disabilities. This law mandates appropriate accommodations for individuals with disabilities so they can take part fully in the activities and services supplied by the business. It applies to businesses, government agencies, and other organizations that are open to the public.
One important aspect of ADA is the requirement for websites to be accessible to individuals with disabilities. This means that a company's website should be created so that anyone, regardless of whether they are using a computer, smartphone, or other device, can utilize the website.
It is important for a company to have an ADA-compliant website for a number of reasons. First and foremost, it’s the right thing to do. Individuals with disabilities are able to access the same information and services as everyone else. Having an ADA-compliant website can also help bring in more clients because it demonstrates the company's dedication to inclusivity and accessibility. Finally, ADA lawsuits are on the rise, as the number of lawsuits has been increasing year over year. Having an ADA-compliant website will help you avoid those lawsuits and the stress and time suck that come along with them.
What is WCAG?
The Web Content Accessibility Guidelines (WCAG) are a set of technical guidelines that provide recommendations for making web content more accessible to people with disabilities. ADA does not clearly establish technical criteria for website accessibility, so instead WCAG is used as the benchmark when assessing the accessibility of websites.
There are three levels of WCAG conformance: A, AA, and AAA. The A level is the most basic level of conformance and all A level errors must be fixed to be ADA compliant. While there aren’t any strict rules, AA is considered as the minimum level of conformance to be considered ADA compliant, so it is recommended that you fix all AA level errors. The highest degree of compliance, the AAA level, is designed for businesses that want to go beyond the minimum requirements of the AA level.
2. Are Brizy Cloud Websites ADA Compliant?
Testing Your Own Brizy Cloud Website for ADA Compliance
Before we dig too much into the common ADA issues that Brizy websites usually see, we recommend you test your own website. You can use the Userway scanner to test one of the pages on your website:
Unless you've already put a lot of effort into making your website ADA compliant, your Userway report will likely light up like a Christmas tree.
The good news: there's likely a solution in Brizy for most of the issues you see.
The other good news: we'll give you another solution for any issues that Brizy can't handle on its own.
Common ADA Issues with Brizy Cloud Websites
Below is a list of the most common ADA issues that you will see when you first run your Userway scan. You will be able to fix certain issues within Brizy, while others will require third-party software to fix. We recommend Userway and use it on our own and client websites.
I'd be willing to bet that you will see some of these issues when you run your own Userway Scan. In the next section, I'll show you how to solve each ADA compliance issue.
ADA Issues that Brizy Can Solve
ADA Issues that Require Userway
Common ADA Issues That Brizy Can Handle
Empty 'alt' attribute's value for image (or mishandled decorative image)
Description:
Checks that each image has an alt attribute with sufficient description to convey its meaning to users who cannot see it.
WCAG Level: A
Brizy's Solution:
Brizy has a section for adding Alt tags to most images. Here is how you can add Alt Text in Brizy
There are a few types of blocks in Brizy (e.g. the photo gallery) where this is not yet possible to add alt image text.
Userway Solution:
Paid Userway will identify any alt tags that are missing. It can also use AI to come up with and automatically fill in any missing alt tags.
If you have 100s of images on your website, Userway’s AI can be a quick, easy way to fill in the alt text, although we have found that some of the AI descriptions won’t make sense. So we recommend still going through and making sure the alt texts make sense.
In addition, we also recommend, over time, going into Brizy and manually entering the alt image tags. That way if you ever stop using Userway, you will still have the Alt image tags on the website.
Heading Level Skipped
Description:
Pages should be structured with clear, descriptive headings allowing users to easily find information and more efficiently navigate the page. Under the <h1> should be one or more <h2> elements. Under each <h2> should be one or more <h3> elements and so forth. Levels should not be skipped. For example, an <h1> element should not be followed by an <h3>, for example, with no intermediate <h2> element.
WCAG Level: AA
Brizy's Solution:
This is something you can easily fix within Brizy, but it can be confusing when you set to H1 styling, but the actual semantic structure doesn’t change (which I would call a good thing).
Userway Solution:
We recommend you fix this solely in Brizy.
Element lacks adequate color contrast
Description:
WCAG's SC 1.4.3 Contrast (Minimum) (Level AA) requires that the contrast ratio between text and its background be at least 4.5:1 for regular text and 3:1 for large text (18 point or larger, or 14 point or larger and bold). This helps ensure that users can easily distinguish between different elements on the website, such as text and background, which is essential for being able to use and navigate the website.
WCAG Level: AA
Brizy's Solution:
Brizy allows you to update any color on the website, so you can update this manually. Ideally, you have used the color palette across the website, so fixing the contrast issues is as simple as changing a button.
Userway Solution:
If you have a large website, going into every page and updating each minor color contrast can be a tedious effort. While we recommend making any major color/contrast changes in Brizy, Userway will often identify many minor color contrast changes. Rather than manually changing these in Brizy, you can just have Userway implement them all with a single click of a button. If you use Userway for fixing color contrast, make sure to run through website to double check that there weren't any major design issues that occurred as a result.
Visible focus indicator is missing
Description:
A visible focus indicator is typically a colored or outlined border around the element that has focus. It is important for users who navigate a webpage using keyboard shortcuts, such as tabbing through links and form elements. When a user tabs through the links or form elements on a webpage, they can see which element currently has focus by the visible indicator. Without a visible focus indicator, users may not know which element they are interacting with and may miss important information. This can cause confusion and make the website difficult to use for people with disabilities, particularly those who rely on keyboard navigation.
WCAG Level: AA
Brizy's Solution:
By default, Brizy will not have this CSS outline property in affect. However, you can easily fix this by adding site-wide CSS.
Below is sample CSS to use. Place this is the Brizy CSS Project Settings to apply it site-wide.
Userway Solution:
Userway Pro can also implement this automatically. We recommend implementing it on Brizy with custom CSS, but this is more of a preference, rather than a rule.
Common ADA Issues Where Brizy Falls Short
While Brizy Cloud does provide some accessibility features, there are limitations that make it difficult to meet the ADA & WCG compliance standards. Below is a list of common issues that you will likely see when you run your Accessibility Scan that Brizy has some trouble addressing.
The Brizy Cloud team is continually improving their platform and frequently releases updates, so it's possible these accessibility limitations may be addressed in future updates.
For now, we recommend using Userway to fix any ADA issues that Brizy can't fix on its own. It's super quick to sign up, and takes a click of a button to fix the vast majority of your ADA issues.
Skip link missing for user to skip navigation or other repetitive content
Description:
A "skip link" is a feature that allows users to quickly bypass certain sections of a website, such as the navigation menu or other repetitive content, and jump directly to the main content of the page. This is particularly useful for users who use keyboard navigation or assistive technologies, such as screen readers, to access the website.
Without a skip link, users would have to manually navigate through the repetitive content each time they visit a new page, which can be time-consuming and frustrating. By providing a skip link, the website is making it easier for users to quickly access the information they need, and can improve their overall experience while using the website.
WCAG Level: A
Brizy's Solution:
Unfortunately, Brizy offers no solution for this.
Userway Solution:
Luckily, the free (and pro) version of Userway includes this skip link feature. As soon as you embed the widget on your website, this feature will be automatically implemented.
Empty 'id' attribute
Description:
The 'id' attribute is used to define a unique identifier for an HTML element, which allows assistive technologies to identify and interact with specific elements on the page. When the 'id' attribute is empty, it means that there is no unique identifier for the element, and assistive technologies may not be able to identify or interact with it properly.
WCAG Level: A
Brizy's Solution:
This is a very prevalent issue for Brizy Cloud websites. For whatever reason, Brizy often adds IDs to the website code, even if an ID hasn't been specified. As a result, you'll often see 100s or 1000s of these empty id's across a large Brizy Cloud website. Unfortunately, Brizy doesn't offer any obvious solution to this issue.
Userway Solution:
Ideally, Brizy will remove this issue from their code in the near future. But until then, Userway Pro can remove any empty IDs attributes across your website with just the click of a button.
ARIA Labels
What are ARIA Labels?
ARIA labels are used to provide a brief and descriptive text that summarizes the purpose of the element. For example, an ARIA label could be added to a button element to indicate that it is used to submit a form. This information is then read aloud by a screen reader to the user, allowing them to understand the purpose of the button without needing to see it.
Common ADA Issues Associated with ARIA Labels
There are multiple ADA issues that arise from Brizy’s inability to add an ARIA description. Some of these issues include:
- “Link Lacks Descriptive Text”
- “New tab or window opens without warning user”
- “Links with identical targets have different descriptive texts”
- “Form field lacks a <label> element”
Form field lacks a <label> element
Description:
The <label> element is used to provide a text description for form fields, such as text inputs, radio buttons, and checkboxes. This text is then read aloud by a screen reader to the user, allowing them to understand the purpose of the form field and what information they are expected to enter. Without a <label> element, the form field may be read aloud by a screen reader as simply "edit text" or "checkbox" without any context on what it is for.
WCAG Level: AA
Brizy's Solution:
Brizy doesn’t allow for labels or ARIA labels to be added to contact forms. So unfortunately, there aren’t any obvious fixes to this issue within Brizy.
Userway Solution:
Userway will allow you to add <labels> to each form field and/or add an ARIA Label to add further description.
Links with identical targets have different descriptive texts
Description:
When links with identical targets have different descriptive texts, it can create confusion for users, particularly those who use screen readers, as they may not be able to understand the purpose or destination of the link. For example, if two links on a page both lead to the same page, but one is labeled "Schedule Appointment" and the other is labeled "Get Started", a screen reader user may have a hard time understanding that both links are going to the same page.
This can make it difficult for users to navigate the website and find the information they need. It can also cause confusion and frustration for users, which can lead to a poor user experience.
WCAG Level: AA
Brizy's Solution:
When multiple links to the same URL exist, the link or button text for each should be identical to avoid confusing users who rely on screen readers or other assistive technologies.
Userway Solution:
Alternatively, if you don't want each button to have the same text, you can add an identical aria-label for all links that have the same href attribute.
Link Lacks Descriptive Text
Description:
Checks that each link contains descriptive text that clearly and meaningfully describes what will happen if the user selects it. Without descriptive text, a link can confuse users who rely on screen readers or other assistive technologies.
WCAG Level: AAA
Brizy's Solution:
Without Userway, it is not possible to add ARIA labels in Brizy. So instead, you just need to make the link text descriptive. For example, remove any links that say “Learn More”, or “Click Here” and replace them with “Learn more about the Circulation Studio team” or “Click Here to Schedule an Appointment”. While this does fix the ADA issues, having that much text in a button or link can also affect the design of the page.
Userway Solution:
Rather than including the descriptive text in the link, Userway Pro allows you to add ARIA labels. Userway Pro will identify any links that require more descriptive text and easily allows you to add aria-labels to describe the link. Or, if the link is necessary for the programming or functionality of the page but is not intended for user interaction, Userway allows you to add an 'aria-hidden' attribute to hide it from screen readers.
New tab or window opens without warning user
Description:
Opening a new tab or window without warning the user can be a problem for website accessibility and cause issues for users with disabilities because it can disrupt their workflow and make it difficult for them to navigate back to the original page. Additionally, it can be disorienting for users who rely on assistive technologies, such as screen readers, and can cause confusion or frustration. Any link that opens a new tab or window should communicate this fact beforehand.
WCAG Level: AAA
Brizy's Solution:
It is not possible to add ARIA labels in Brizy, so instead, you either need to update the link/button so it no longer updates in a new tab or add “Opens in a new tab” to the button/link text.
Userway Solution:
Add an 'aria-label' attribute to describe the link and add “Opens in New Tab” to the ARIA label. For example, if a "Schedule Appointment" button leads to external software and opens in a new tab, you can add aria-label "Schedule an Appointment (Opens in a new tab". This will alert the user that the button will open in a new tab before they click on it.
Fixing Your Website's ADA Compliance Issues
If you ran your Brizy Cloud website through the ADA Compliance Scanner, you were probably overwhelmed by the sheer amount of issues that popped up. Hopefully, with this article, you learned how to solve most of the issues that you came across, but there will almost assuredly be more issues on your own scan.
If you need help getting Userway installed on your website or just don't want to deal with it, we'd be happy to help help make your website ADA and WCAG Compliant.
Otherwise, we think Userway is the fastest and easiest way to get your website ADA compliant.
Connor Olson digital marketing specialist at Circulation Studio and Circulation Dental and has been in the SEO (search engine optimization) game and building websites since 2016. Outside of work, you'll often find him out on the trails, going for a hike or a run.