Inclusive Marketing: Enhancing Accessibility with HubSpot's CMS
Ever since the enactment of the groundbreaking Americans with Disability Act (ADA) and the release of accessibility guidelines, there has been a growing focus on inclusive marketing to improve the accessibility of websites and digital platforms.
Making your marketing and communication efforts more inclusive goes beyond just meeting compliance standards. It involves expanding your audience, upholding a moral obligation to accessibility, and ultimately creating a positive impact.
Naturally, it is essential for the platforms and digital products you use to prioritize accessibility. Take, for instance, HubSpot, a leading marketing and sales platform that has developed a content management system (CMS) with a strong focus on digital inclusion.
By prioritizing accessibility from the very beginning, businesses can play their part in making “accessibility by default” the norm.
What Is Inclusive Marketing?
Inclusive marketing is not only a mindset that should be ingrained at every level of your company, but also a content and design practice that ensures your platforms are accessible to everyone. When done correctly, it allows all users to visit your website, online services, social media accounts, and other marketing channels and engage with them on an equal basis. It is crucial for your entire team to recognize the importance of inclusive marketing for both your business and the individuals utilizing your services.
According to Jon Chim, the vice president of design and development at Hypha HubSpot Development, implementing inclusive marketing practices not only ensures that your platform functions properly, but also makes it enjoyable for everyone.
“Ensure that everything you create or design for the public is accessible, not only just for those with disabilities,” says Chim, adding that being inclusive means considering everything from different languages people speak to each user’s level of comfort with technology.
Chim, who has considerable knowledge HubSpot, emphasizes that whether you're building a website or creating a blog post, HubSpot's CMS offers a variety of user-friendly tools to enhance accessibility.
Understanding HubSpot’s CMS: Tools for Enhancing Accessibility
Headings
Let us walk you through some of the ways in which HubSpot not only makes creating content within its ecosystem easy, but accessible as well.
In the blog creator, utilize HubSpot’s “Paragraph” dropdown to organize your content into different headings, based on hierarchy.
Per the Web Content Accessibility Guidelines (WCAG)—a set of standards developed by the W3C Web Accessibility Initiative (WAI) to improve accessibility—it’s important to nest your headings appropriately.
This enables search engines, users, and assistive technologies such as screen readers to easily scan and digest content.
To properly nest headings, follow these steps: Ensure your <H2> tags are followed by <H3>, and potentially <H4>, <H5>, and <H6>. An <H2> heading should never be immediately followed by an <H4>, for example.
It is important to avoid using headings as a design tool to enhance the appearance of content. This common mistake can lead to confusion for both crawlers and screen readers. Instead, headings should be used appropriately to organize and structure content in a way that enhances accessibility.
Let’s use this blog as an example. The subhead of this section—”Understanding HubSpot’s CMS: Tools for Enhancing Accessibility”—is styled with an <H2>, while <H3> is used to highlight subsequent subsections, such as “headings,” “alt text,” and others.
Alt Text
To add alt text in HubSpot, first click on the image in question, and navigate to the “edit” icon (which looks like a pencil). From the image optimization window that pops up, you can add alt text—a short phrase describing what appears in the photo—which is automatically written into the page’s HTML source code.
Alt text allows users who are blind or visually impaired (BVI) to equitably access the contents of the photo, often using screen reading software.
Alt text also helps search engine bots better crawl and rank your website and provides a placeholder for images that do not load on your sight.
For it to be used effectively, alt text, like other accessibility best practices, require organizational cohesion.
“Alt text for images is a standard for web accessibility,” says Brooke Fisher Bond, a developer professor at HubSpot. “However, if the developer doesn't code the image section of the page properly, the alt text won't be accessible to screen readers. So, both the marketer and the developer have a role in alt text."
“There are over 1.3 billion people worldwide living with a disability. That's about 16% of the world's population. Ignoring the needs of these people is not only morally wrong but can be detrimental to a company, whether they're losing business or being sued for inaccessible digital products," says Brooke Fisher Bond.
Links & Forms
When utilizing screen reading software to access a page, users might prefer to listen to only a list of the links. When taken out of context, hyperlinked sentences featuring such phrases as “click here” or “this study” can be confusing because they're missing key details contained within the linked article.
Instead, when using HubSpot’s content editor to hyperlink to other sources (by highlighting the phrase and navigating to “Insert link” in the toolbar, which is shaped like a chain link), write as descriptive phrases as possible.
Follow the same rule for forms.
Utilizing HubSpot’s “Forms” tool (Marketing > Lead Capture > Forms), you can offer gated content to users in exchange for them providing their name, email address, and other information via a form.
Use the “Existing properties” tab on the left to select which form inputs you’d like to require, and ensure each is clearly labeled with descriptive text. When finished, give the form’s CTA an actionable phrase, such as “Contact us today.”
Color Contrast
Whether selecting the color of text on your website or designing its graphic elements, HubSpot’s CMS makes it easy to select the appropriate color contrast ratios.
The WCAG 2.1 recommends small text have a color contrast ratio of 4.5:1, and large text have one of at least 3:1.
This makes your text more readable for users, especially those who are blind, low vision, or colorblind.
Other resources outside of HubSpot that provide useful color contrast tools include the non-profit WebAIM, developer-geared browser Polypane, and the Color Contrast Accessibility Validator from color.a11y.com.
Captions
Insert closed captions into your videos on HubSpot by navigating to “Marketing > Files and Templates > Files” and clicking the name of the file you’d like to caption. In the right panel, expand the “Subtitles” section and click “Upload Captions.” From there, you can select a language from the “Caption language” dropdown menu in the dialog box, click “Select caption file,” and upload your file to Hubspot.
Captions are a necessity for anyone who is d/Deaf and hard of hearing to consume video or audio content, such as podcasts.
However, a survey from language learning app Preply found half of Americans without hearing loss elect to use captions with video, including 70% of those classified as Gen Z and 53% who are Millennials. Among their reasons: It has become “harder to hear dialogue in shows and movies than it used to be,” according to the survey.
The Importance of Inclusive Marketing
Utilizing the HubSpot CMS, you can ensure all of your marketing communication is accessible for all. With that in mind, there are several distinct advantages to continuously prioritizing inclusive marketing.
Maintain Compliance
In recent years, there have been a wave of ADA-based lawsuits and demand letters against companies with websites that do not meet accessibility requirements set by the WCAG.
By adhering to its guidelines, you can mitigate common accessibility issues, avoid legal action, and maintain compliance.
Expand Your Audience
As your HubSpot website becomes easier to navigate, you will naturally draw a wider base of potential customers.
This not only increases your industry authority and potential profits but enables you to provide services to a more diverse range of people—including some that will evangelize you for your commitment to them.
It’s the Right Thing to Do
Beyond compliance, traffic, and proceeds, inclusive marketing is simply the right thing to do.
As the W3C Web Accessibility Initiative put it:
“It is essential that the Web be accessible in order to provide equal access and equal opportunity to people with diverse abilities. Access to information and communications technologies, including the Web, is defined as a basic human right in the United Nations Convention on the Rights of Persons with Disabilities.”
1.6 billion people—one in six—globally live with a disability, and in building your HubSpot website, collateral, social media posts, and other assets with inclusion in mind, you help foster an accessible experience, for all.
“There are over 1.3 billion people worldwide living with a disability,” says Fisher Bond. “That's about 16% of the world's population. Ignoring the needs of these people is not only morally wrong but can be detrimental to a company, whether they're losing business or being sued for inaccessible digital products.”
Building With Accessibility in Mind From the Start
As we’ve discussed, the HubSpot CMS is a tremendous tool for organizations prioritizing inclusive marketing.
From headings, alt text, and links to forms, color contrast ratios, and captions, the platform, when combined with WCAG standards, can help you maintain compliance, expand your audience base, and uphold accessibility as a basic human right.
As regulations, requirements, and user preferences evolve, organizations can consistently audit content, refine best practices for building and formatting sites, and most importantly, “build with a11y in mind instead of it being an afterthought,” says Chim, vice president of design and development at Hypha HubSpot Development.
Incorporating accessibility into a company's process from the beginning is crucial for successful inclusive marketing. It transforms the ongoing process into a seamless and efficient practice, rather than trying to retrofit accessibility later on.
“Accessibility shouldn't be an afterthought,” echoes Fisher Bond. “As responsible, empathetic marketers and developers, it should be baked into the process. The HubSpot team responsible for building the CMS boilerplate theme (which many other themes are built off of) had accessibility and performance as a key tenet. We should always strive for a more accessible tomorrow.”
Ultimately, in prioritizing inclusive marketing, your organization becomes a champion for humanity—with an empathetic understanding of the responsibility we all have to build a world that includes everyone.
Hypha Development is a New York-based HubSpot Partner Agency specializing in Front-End Web Design & CMS Development solutions to transform your website into a supercharged revenue engine. Contact us today to get started!
