10 principles of digital accessibility for modern marketers

Designing for digital accessibility means many things. It means designing for individuals with sensory or cognitive impairments. It means designing for people with physical limitations. It means designing for individuals who rely on adaptive and assistive technologies like screen readers or magnifiers to view digital content.

The key is building accessibility into your digital experience from the very start rather than bolting it on like an afterthought. Below, I’ve outlined some key accessibility principles to consider when creating your digital marketing materials.

Principles for developers

1.  Apply standard HTML semantics

Accessible design begins with standard HTML semantics. Standard HTML enables screen readers to announce elements on page so that the user will know how to interact with the contents. When HTML tags without semantical information are used–such as <div> and <span> for visual styling – the browser will display the elements as the developer intended, which unfortunately, may not be very helpful for the user.

Keep in mind that the user’s experience with a screen reader can vary greatly. For instance, using <div class=”h1”>Introduction to Semantics</div> or custom coding to override default browser styles will produce something that resembles a header. However, a screen reader will not understand or announce that the element as a header.

Key takeaways

• Use standard HTML whenever possible so that screen readers will maintain the structure and content when reading aloud.
• Use structural elements to group elements and to create separate regions on a page, such as header, navigation, main and footer. Screen readers recognize these structural elements and announce them to the user and allow for additional navigation between elements.

2. Enable keyboard navigation

All websites should be keyboard accessible because not all consumers can use a mouse or view a screen. In fact, according to WebAIM Low Vision, 60.4% of survey respondents always or often use a keyboard for web page navigation. Additionally, individuals with permanent or temporary loss of their hands or fine muscle control may also use a keyboard or modified keyboards for navigation.

For keyboard navigation to work, a user must be able to navigate through a page by moving from focus item to focus item. A user typically follows the visual flow, going from left to right and top to bottom, from headers to main navigation, to page navigation and lastly to the footer. When using a keyboard for navigation, enter activates a focused link, and the space bar activates a focused form element. Tab facilitates navigation between elements. Escape allows the user to close an element.

Knowing this, it’s important to consider the actions a user might take. The rule of thumb is that if you can interact with a focusable element using a mouse, make sure that you can interact using a keyboard. These elements might include links, buttons, form fields or a calendar date picker.

Key takeaways

• Ensure users can navigate with the keyboard to all interaction components of the website. List all your site’s focusable elements and create easy-to-use focus indicators.
• Structure underlying source code to correctly order the content and navigation. Use CSS to control visual aspects of the elements.
• Allow users to bypass navigation windows if there are too many links in drop downs.

3. Use attributes

When it comes to linking text and descriptions for URLs, screen readers can skip from link to link within an article. If vague link text like “Click Here” or “Read More” is used, it provides very little context or meaning for someone to interpret on a screen reader.

Be specific and descriptive with your link text and include meaningful phrases that describe the content that the link is connecting to. Instead of “Contact us” use more specific language like “Contact our sales team.” For images and videos, assign ALT attributes and use descriptive file names.

Key takeaways

• Banish extraneous and non-descriptive words in your links like “Click Here,” “Here,” and “Read More.” “10 Principles of Accessibility” reads better than “Click here to read the 10 principles of accessibility.”
• Optimize file names and URL names and use both open and closed captioning for video content. Consider adding accurate video transcripts.

4. Use the ARIA label attribute

In some cases, the buttons or other interactive elements on your website may not include all the information needed for assistive technology. The ARIA label attribute enables assistive technology to override the HTML labels to allow the website owner to provide additional context to the element on a page.

In the following link example, a screen reader will announce “Bing Ads. Link.”

<a href=”…”> Bing Ads </a>

However, if the button itself is a call-to-action button, the site owner can use the ARIA label to allow the screen reader to speak the call-to-action text visible on the button. In this example, the screen reader will announce, “Sign Up for a Bing Ads Account. Link.”

<a href=”…” aria-label=”Sign Up for a Bing Ads Account”>Bing Ads</A>

Key takeaway

• Use the ARIA label attribute within elements like forms and call-to-action buttons to define the visible text that a screen reader should read aloud.

5. Properly label and format forms

Make sure forms are intuitive and logically organized, with clearly identified instructions and labels. To ensure that users load the right keyboard format for all forms, use labels that are always visible and avoid putting placeholder text within form prompts.

From a formatting perspective, take advantage of borders for text fields and drop-down menus, and put forms in a single-column format. Also, use HTML input types, so users do not have to switch across types of virtual keyboards. For example, fields for phone numbers should pull up the numeric keyboard vs. a regular keyboard format.

Key takeaways

• Be careful when using JavaScript in forms, which can make the form difficult to complete using a keyboard.

6. Use tables for data

There are two basic uses for tables online: data tables with row and column headers that display tabular data and tables for page layout. The intended use of HTML tables is for tabular data. Layout tables don’t typically have logical headers or information that can be mapped to cells within the table, so screen readers must guess the purpose of the table. For this reason, it’s important to use CSS for layout and reserve tables for data. Using CSS results in cleaner and more simplified HTML code.

Key takeaways

• Use the appropriate mark-up for data tables and always include table headers. Always choose CSS over tables for page layout.

Principles for writers and graphic designers

7. Write content in a structured way

The structure and flow of your content are especially important for individuals who have a visual impairment and rely on screen readers. It’s also important for folks with cognitive and learning disabilities, as well as anyone scanning through content on a mobile screen. When writing for accessibility, summon your inner high-school English teacher and organize content clearly with descriptive headings for each section.

Key takeaways

• Make text easy to read and logically structured. Be sure to use semantic markup for headings paragraphs, lists, and quotes.

8. Align to the left

Text alignment impacts readability, according to UX Movement. Centered text makes the viewer work harder because without the left straight edge, there is no consistent path for the eyes to follow when continuing to the next line of text. Use left-aligned text for a straight edge that makes it easier for the eyes to scan content and find breaks in the writing structure.

Key takeaways

• Only use centered text headlines and short lines of text such as quotes and call outs. Avoid mixing text alignment.

9. Choose fonts judiciously

I love beautiful, artistic fonts. But the fact is that some fonts are easier to read than others. Which is why it’s important to use basic fonts. Sans-serif fonts are easier to read for people with visual or cognitive disabilities – even temporary, visual disabilities like reading a screen in bright sunlight.

Size also matters. Avoid font sizes smaller than 12 and choose absolute units (pixels or points) vs relative units (%) to define font size. Limit the number of fonts to make content easier to read. Don’t rely on the appearance of fonts (color, shape or placement) to convey the meaning of the text. Finally, avoid blinking or moving text – no user wants to chase a message around a screen.

Key takeaways

• Choose simple fonts with plain, sans-serif endings, which make it easier for eyes to recognize letters.
• Limit the use of font variations and sizes.

10. Put color to work

The application of color also impacts accessibility. According to a 2018 survey of users with Low Vision by WebAIM, 75% of respondents report multiple types of visual impairment, including 61% with light or glare sensitivity and 46% with contrast sensitivity.

Think about your color scheme and the contrast of colors to ensure that text is easily discernable from the background color. The Web Content Accessibility Guidelines (WCAG) recommend using a 4.5:1 contrast ratio for normal text. To put this into perspective, black text on a white background is 21:1 whereas gray text on a white background is 4.5:1.

Using color alone to convey information may not be accessible to those with visual impairments. For example, websites often use green to signal something positive and red to signal something negative, which can be difficult to discern for someone with a visual impairment. Instead, consider combining shapes or icons with color.

Key takeaways

• Ensure your colors have ample contrast and combine color with graphics or symbols to help convey meaning.

Designing for accessibility does not need to be complex or costly. It just takes planning and the intentional application of accessibility principles to ensure a more inclusive experience for everyone.