Case Study: The Process of Making BrianLawrence.com Website Accessibility Compliant
In my long journey in the wedding industry, inclusivity has always been a natural part of my fabric. As a wedding business owner with multiple locations, I always enjoyed the cultural diversity in my clientele. When I was the VP of a leading invitation brand, we were the first company to feature wording samples for same-sex weddings.
My company has been designing websites and offering SEO since 2012. When striving for the best possible outcome for my clients and the best user experience for their clients, I did not consider the compromised user experience for those with disabilities, and there were design and functional provisions that could be made to alter that.
In early 2023, I learned about web accessibility plugins as a potential remedy to help websites become more accessible and recently started offering them to my clients as a viable option. What appealed to me was that they were affordable. As I became increasingly aware of the increase in law suits both attorneys and disabled site visitors were filing against business owners, this was a quick action step to offer a serious level of compliance with accessibility requirements outlined in the American Disability Act.
However, I researched deeper into the whole topic of accessibility in my desire, as an industry educator, to be as fully informed as possible. My exploration uncovered some fallout in the disabled community that this was only a partial solution, and I started learning about how companies work on making their websites fully accessible and the intense process that is involved.
I decided if I was going to have an imprint in this space, I had to walk the walk. I arranged for my design team to get training in accessible design and tasked them with redesigning my existing website to be accessible.
I researched and found a digital accessibility expert, Sol Escobar, all the way from Argentina, to analyze and document the modifications needed to achieve the accessibility level of WCAG 2.2 Level AA and test the functionality once the changes were made to make sure they complied. Sol is in place to help with accessibility as we roll this out to other website clients.
We recreated a version of the website that was on brand with the original and here are some of the issues we needed to resolve.
Addressing and resolving accessibility issues
This section provides an overview of some remedies the team implemented to make our site accessible to the highest industry standards.
Color contrast
Some combinations of background and text colors on the website did not meet accessibility standards. According to WCAG 2.2 AA guidelines, the text needs to have sufficient contrast against its background to ensure readability. This is especially important for users with visual impairments. Ensuring that text contrasts well with its background helps make the content more accessible and comfortable for all users.
An example of this remediation was on the BrianLawrence.com homepage. The text color (#FFFFFF) against the (#00A9D3) background resulted in a contrast ratio of 2.8:1, which failed for normal text.
Our solution? We adjusted the colors to achieve the expected contrast ratios and replaced the previous background color (#00A9D3) with #132028.
Decorative images
Originally, decorative images on the website were not properly marked, causing screen readers to read out irrelevant information to users with visual impairments. For accessibility, it’s crucial to mark decorative images with empty alt attributes (alt=””). This tells screen readers to skip these images, allowing users to focus on the meaningful content without unnecessary distractions. Properly marking decorative images enhances the browsing experience for those relying on screen readers.
Our solution? We resolved this by marking these images as decorative by implementing an empty alt attribute.
Descriptive link text
Some links lacked descriptive text, leaving users guessing about their purpose. This ambiguity posed a real hurdle for those navigating with screen readers.
Our solution? We redesigned the link text to be clear, descriptive, and contextually relevant.
Unnecessary use of headings
Excessive headings were used for style rather than structure, which was a problem because they were confusing for screen reader users
Our solution? We organized the content more clearly. For extended quotations, we used appropriate HTML markup by replacing them with the <blockquote> tag. HTML, or HyperText Markup Language, is the standard language used to create and structure web content. The <blockquote> tag specifically is used to indicate a section of text that is a quotation from another source. By using this tag, we made the quotations stand out visually. We improved the overall readability of the content, ensuring that the quotes were clearly distinguished from the rest of the text.
Unperceivable links
Some links on the website were identified solely by color, which posed challenges for color-blind users. Additionally, the link color did not meet the required contrast ratio with the background and the surrounding text.
Our solution? The team implemented an underline for links and made sure the required contrast ratio was met.
Contact form
The contact form was missing several important accessibility features. It lacked the autocomplete attribute and proper error announcements. Additionally, there was no summary of errors with links to the specific error fields, making it difficult for users to identify and correct mistakes. The form labels needed to be more descriptive, failing to clearly indicate the expected input data. Furthermore, checkboxes did not properly indicate focus, which could hinder navigation for users relying on keyboard input.
Our solution? We implemented several improvements. We made the labels more descriptive to clearly indicate the expected input. We added the autocomplete attribute to streamline form completion. We created informative error messages and included a summary at the top of the form that links to each specific error field. Additionally, we ensured that checkboxes have a visible focus indicator to aid keyboard navigation.
Navigation menu
Previously, the navigation submenu had several usability issues. It opened on hover, making it difficult for some users to access. The ESC key did not close the menu, hindering keyboard navigation. On mobile devices, the menu’s open and closed states were not announced, causing confusion. Additionally, users could navigate beyond the page content before the menu was actually closed.
To resolve these issues, we made several key improvements. We changed the submenu activation from hover to click, making it more accessible for all users. We added functionality to close the menu with the ESC key, enhancing keyboard navigation. On mobile devices, we ensured that the menu’s open and closed states were announced, providing clear feedback to users. Finally, we restricted navigation so that users cannot move beyond the page content until the menu is fully closed.
To view these changes please navigate to BrianLawrence.com.
Content
Sensory content in text, such as instructions and headings, can create accessibility issues if not handled thoughtfully. For example, phrases like “fill out the form below” rely on spatial or visual cues that might not be immediately clear to users relying on screen readers. Such instructions need to be made more explicit by indicating where to find the form in a manner that is understandable to all users.
Headings and titles that use visual or sensory language can also be problematic. Phrases like “see the details below” or “check out the highlighted sections” rely on visual elements that might not be perceivable to users with visual impairments. Instead, headings should be descriptive and provide clear information about the content, such as “Form Submission Instructions” or “Important Details.” This approach ensures that users who rely on assistive technologies can understand the context and navigate the content effectively.
Our goal of accessibility
More legislation is coming out requiring accessibility for public accommodation to ensure that people with disabilities are not discriminated against. Government websites are required to be totally accessible within the next few years, and websites in the private sector are sure to follow.
The BrianLawrence.com story proves how critically important it is to move beyond partial solutions and take a comprehensive approach to accessibility. By incorporating accessibility at every step, businesses can design an inclusive experience that is convenient and functional for all.
Do you want to learn how to make your website more accessible and inclusive, visit https://www.brianlawrence.com/accessibility/. Want to talk to Brian directly? You can email him at [email protected].
