Digital Accessibility For Marketers: User Experience & Websites

digital-accessibility-for-marketers-part-2-user-experience-websites

Digital Accessibility For Marketers: User Experience &amp; Websites

[[p]]In the first post in this series on [[a href="https://digitalmarketinginstitute.com/blog/digital-accessibility-what-marketers-need-to-know" target="_blank"]]Digital Accessibility[[/a]], we touched upon the &ldquo;whats and whys&rdquo; of accessibility for marketers. Now it&rsquo;s time for the &ldquo;hows.&rdquo;[[/p]]

[[p]]Note that we have intentionally limited our recommendations to those elements that are quite easy to implement and are relevant for marketers. This series is by no means a comprehensive list of all standards that businesses need to be aware of when it comes to accessible content. If you&rsquo;re looking to learn about the nitty-gritty of accessibility guidelines and WCAG criteria,&nbsp;[[a href="https://www.tpgi.com/arc-platform/tutor/" target="_blank"]]check out the TGPi e-learning program[[/a]]. It&rsquo;s a self-paced option you can use to keep your skills fresh or get up to speed on accessibility techniques and best practices.[[/p]]

[[p]]Let&rsquo;s move on to the recommendations![[/p]]

[[p]]A smooth, effortless user experience is the North Star for every marketer. The ease with which an individual can complete a critical task and how well the content meets expectations has a heavy bearing on it and will make or break your marketing efforts.[[/p]]

[[p]]Makes sense, right? If you want to buy something online and you encounter a problem trying to input your credit card info, or the item you wanted is out of stock, the quality of your user experience will plummet. First, because you were unable to accomplish what you set out to do, and second, because you expected to be able to accomplish it, yet that was not in the cards. This double whammy would almost certainly ensure you won&rsquo;t be returning to that particular website![[/p]]

[[p]]As a marketer, you&rsquo;re well-attuned to the importance of a superior user experience. You may even be testing it (good for you!) or have analytics in place to measure it. These measures are critical to optimizing your marketing funnel. However, what you may&nbsp;[[em]]not[[/em]]&nbsp;be doing is testing the user experience for accessibility. (If you aren&rsquo;t, no judgment! That&rsquo;s what this series of posts intends to change.)[[/p]]

[[p]]A user journey (otherwise known as user flow or user path) is a sequence of actions a user takes on your site. A&nbsp;[[em]]critical[[/em]]&nbsp;user journey aligns with your site&rsquo;s primary objective, such as completing a purchase, submitting a form, watching a video, reading a post, etc.[[/p]]

[[p]]You should always prioritize accessibility remediation for your essential user journeys for several reasons.[[/p]]

[[p]]First, although you may have amazing content throughout your site, if a user cannot complete their primary objective for visiting your website, that&rsquo;s a customer you&rsquo;ve lost forever.[[/p]]

[[p]]Second, many people with disabilities are unfortunately accustomed to encountering challenges when doing things other people take for granted. They generally expect them, as so much of the world was not created with their particular disabilities in mind.[[/p]]

[[p]]On average, minor accessibility concerns on tangential content are not likely to frustrate them to the point of initiating legal action. But if they are unable to do the&nbsp;[[em]]one thing[[/em]]&nbsp;they came to accomplish on your website, you open yourself up to a big ol&rsquo; can of legal risk, especially if you are a US-based brand.[[/p]]

[[p]]So, how do you test your critical user flows for accessibility? If you opt for the manual route, you can conduct&nbsp;[[a href="https://www.tpgi.com/accessibility-solutions/ux/" target="_blank"]]user testing with people with disabilities[[/a]]&nbsp;or inspect the code for each step using a tool like&nbsp;[[a href="https://www.tpgi.com/arc-platform/arc-toolkit/" target="_blank"]]TPGi&rsquo;s ARC Toolkit[[/a]]&nbsp;(more on this later) to identify WCAG failures.[[/p]]

[[p]]While manual testing is ultimately more comprehensive, if you&rsquo;re looking to immediately identify accessibility errors in your critical user paths, you can use&nbsp;[[a href="https://www.tpgi.com/arc-platform/user-flows/" target="_blank"]]ARC Monitoring&rsquo;s User Flows[[/a]]&nbsp;feature to automatically scan each component for accessibility. You can include all the components and dynamic interactions of a user journey, from images to dialog boxes, for scanning, and you&rsquo;ll be able to track errors over time to help improve your internal remediation processes.[[/p]]

[[p]]You can pair the information you acquire from ARC&rsquo;s User Flows Monitoring with your other analytics tools, like the Google Analytics Funnel and Goals, to identify barriers that prevent users from completing their desired action.[[/p]]

[[p]]A website is your business&rsquo;s digital store or office. It may be the first (or only) impression a potential customer gets of your company, so you&rsquo;ll want to make it as appealing as possible. Maybe you have a few videos, or lots of images to break up the monotony, or pages upon pages of valuable blog content. These are all terrific assets that marketers can leverage to persuade people to buy their products.[[/p]]

[[p]]Ensuring all this content is accessible may seem daunting, but many of the best practices for accessible content are indistinguishable from best marketing practices. Read on to learn more:[[/p]]

[[p]]Every good marketer knows that clarity is essential for excellent communication. If you embellish your copy with fluff and important-sounding (but ultimately meaningless) words, your message will get lost. By the same token, if you&rsquo;re too spare with your explanations, a customer may not have enough information to grasp what you&rsquo;re telling them.[[/p]]

[[p]]High-quality content is a balance between these two extremes, and unsurprisingly, link or anchor text follows these same rules. The best link text gives the user an idea of what to expect once they click. Descriptive link text is especially critical for your call-to-action copy. What better prepares the user about what they&rsquo;ll encounter when they click: &ldquo;Click here&rdquo; or &ldquo;Download our whitepaper&rdquo;? Obviously, the latter! (If you chose the former, you might want to consider a new career path.)[[/p]]

[[p]]There&rsquo;s no need to enshrine your CTA with buzzy words (&ldquo;Download the world&rsquo;s greatest whitepaper on the magic of Harry Houdini!&rdquo;) but setting people up to know what they&rsquo;re getting into is critical.[[/p]]

[[p]]Why is link text so important for accessibility? First, it greatly helps blind people or those with low vision with skimming page content. (This goes for people with flawless vision as well.) Users with visual impairments use a range of assistive technologies to access digital content, such as screen magnification tools for people with low vision, and screen readers for blind people. As their name implies, a screen reader literally reads what is on the screen.[[/p]]

[[p]]However,&nbsp;[[a href="https://www.freedomscientific.com/products/software/jaws/" target="_blank"]]screen readers like JAWS[[/a]]&nbsp;allow users to hop all around the screen, reading out various components instead of going through all the HTML from top to bottom. When a user flits from component to component, the screen reader only reads the anchor text for links, not the surrounding copy. That means if all your links are the same &ldquo;click here&rdquo; copy, a screen reader user will have no idea what will happen if they follow that link; they are forced to explore the surrounding content to understand what that link relates to.[[/p]]

[[p]]Furthermore, screen readers allow users to open a &ldquo;links list,&rdquo; which gives them quick access to all links on a web page. This is a common scenario where link text will be read out of its surrounding context and where things like &ldquo;click here&rdquo; become a real issue.[[/p]]

[[p]]Alternative text, or &ldquo;alt text,&rdquo; describes your website&rsquo;s images so a screen reader user can get a more comprehensive idea of each web page&rsquo;s content. If you chose images that function as a visual explanation, people who cannot see them will be at a loss if you forgo alt text.[[/p]]

[[p]]However, if you included images for purely aesthetic reasons (maybe you genuinely like pictures of people hunched over computers) and you have several of them, you may not want to add alt text for all of them. Screen readers will read all the alt text for every image, which, if the text does not actively add value to the experience, can be annoying. If an image can be deemed decorative and adds no additional meaning/understanding of the page content, then it should be hidden to assistive technology by providing an empty alt attribute.[[/p]]

[[p]]Utilize your heading tags appropriately so both visually impaired and non-impaired readers can skim the page and get a basic understanding of the content and navigate it easily. Follow best practices for headers, like starting each page with an H1 that describes the content of the page, then using H2s and H3s as sub-headings. Use the heading tags intentionally; do not randomly stagger them with no thought to the structure.[[/p]]

[[p]]Though you can differentiate headings through visual means through CSS styling, screen reader users do not have the luxury of seeing these distinctions. It is especially critical to utilize well-formatted page layouts to ensure users with vision difficulties can easily consume your content.[[/p]]

[[p]]Keep dense paragraphs to a minimum, use shorter sentences when you can, and avoid using jargon or slang. Clearer, more concise copy will help users with cognitive impairments to better understand your content and will also help minimize confusion for all readers.[[/p]]

[[p]]Perhaps you&rsquo;ve heard that&nbsp;[[a href="https://time.com/3858309/attention-spans-goldfish/" target="_blank"]]people&rsquo;s attention spans are now shorter than a goldfish&rsquo;s[[/a]]? When in doubt, break it down; make it as simple as possible.[[/p]]

[[p]]Let&rsquo;s hope your organization&rsquo;s style guide wasn&rsquo;t designed by Santa Claus, as using red and green for complementary colors will not do your users any favors. Color contrast is an essential element of accessible design. Individuals with low vision may find it hard to differentiate between colors that are too similar, and for&nbsp;[[a href="https://en.wikipedia.org/wiki/Color_blindness" target="_blank"]]colorblind users[[/a]], many colors are indistinguishable.[[/p]]

[[p]]TGPi&rsquo;s free&nbsp;[[a href="https://www.tpgi.com/color-contrast-checker/" target="_blank"]]Color Contrast Analyser[[/a]]&nbsp;tool will take the guesswork out of determining sufficient color ratios. Use the color picker to choose your foreground and background colors, and the CCA will tell you if the contrast is appropriate.[[/p]]

[[p]]Virtually every site uses a form to enable users to complete a task. Whether your business is ecommerce, service-based, or even just an online showcase, it will most likely include a form. However, forms can be tricky for people with disabilities. There are several technical considerations (read: ones for developers to implement) as well as non-technical, which marketers with no coding knowledge can easily follow. Here are the non-technical best practices:[[/p]]

[[ul]]
	[[li]][[strong]]Keep forms short and simple[[/strong]]&nbsp;&ndash; Get customer contact info and then build a relationship to engage them and draw out more additional knowledge[[/li]]
	[[li]][[strong]]Provide clear instructions and visible labels[[/strong]]&nbsp;&ndash; No one likes a confusing form[[/li]]
	[[li]][[strong]]Validate inputs (undo changes/confirm)[[/strong]]&nbsp;&ndash; Notify the users of any problems and how to fix them[[/li]]
	[[li]][[strong]]User notification (success/failure)[[/strong]]&nbsp;&ndash; Let users know if the form submission has been successful or not[[/li]]
	[[li]][[strong]]Adopt multi-page or progressive[[/strong]]&nbsp;&ndash; If you must have a more complicated form, aim for a multi-page or progressive form that does not overwhelm users[[/li]]
	[[li]][[strong]]Remove time limits or provide options[[/strong]]&nbsp;&ndash; Time limits may be handy in coercing shoppers to buy, but they add undue stress to individuals with severe anxiety problems[[/li]]
[[/ul]]

[[p]]Breadcrumbs are a form of navigation on your site that allows you to see how the page you&rsquo;re currently browsing fits into the larger picture. They are usually links that lead to higher-level pages.[[/p]]

[[p]]An example of a breadcrumb trail on an ecommerce site that sells clothing might be[[/p]]

[[p]]Women &gt; Jackets &gt; Wool &gt; Pea coats.[[/p]]

[[p]]Breadcrumbs are useful for wayfinding and enable users to easily navigate back to higher-level pages without starting their journey from scratch.[[/p]]

[[p]]They are especially critical for people with disabilities for several reasons. For one, users with cognitive disabilities will always benefit from a user-friendly experience that minimizes ambiguity. Breadcrumbs are especially critical if your site is sprawling and complicated. Breadcrumbs also immediately orient screen reader users, making site navigation less arduous.[[/p]]

[[p]]While breadcrumbs are clearly helpful for users with disabilities, like many accessibility best practices, they improve the experience for&nbsp;[[em]]all[[/em]]&nbsp;users.[[/p]]

[[p]]Many websites leverage third-party integrations for their websites, like chatbots, pop-up modals, dynamic landing pages, etc. It&rsquo;s an unfortunate reality that third-party software is often largely inaccessible, a situation compounded by a company&rsquo;s inability to remediate it.[[/p]]

[[p]]If your organization elects to integrate a third-party application to your website, be sure to get an&nbsp;[[a href="https://www.tpgi.com/contact/" target="_blank"]]expert to evaluate it&nbsp;[[/a]]before you add it. While you may not be able to reconcile many of the accessibility failures, you&rsquo;ll at least understand the level of risk you&rsquo;re taking on. You can also request an accessibility statement or guarantee from your vendor to build into a contract (though you should still test the product to verify its accuracy before implementing).[[/p]]

[[p]]As a side note, always ask your vendors about their products&rsquo; accessibility. The more customers who request accessible products, the greater the chance vendors will listen and begin to incorporate accessibility features into their product builds.[[/p]]

Digital Accessibility For Marketers: User Experience & Websites

Related Free Video Lessons

TPGi