When we talk about digital accessibility as a marketers, we are talking about the intentional creation of digital media. an experience accessible to the greatest number.
Designing for digital accessibility means a lot of things. It means designing for people with sensory or cognitive impairments. It means designing for people with physical limitations. It means designing for people who use adaptive and assistive technologies such as screen readers or magnifiers to view digital content.
The important thing is to incorporate accessibility into your digital experience from the beginning rather than reorganizing it as an afterthought. Below, I've presented 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 allows screen readers to advertise items on a page so the user knows how to interact with the content. When HTML tags without semantic information are used, such as
Do not forget that the experience of the user with a screen reader can vary widely. For example, using
or custom coding to override default browser styles will produce something that looks like a header. However, a screen reader will not understand and will not announce that the item is a header.
Use standard HTML code as much as possible so that screen readers retain structure and content when reading aloud. to group elements and create separate regions on a page, such as the header, navigation, the main part and the bottom part. The screen readers recognize these structural elements and inform them of the user, which allows additional navigation between the elements.
2. Activate Keyboard Navigation
All Web sites must be keyboard accessible because not all users can use a mouse or display a screen. In fact, according to WebAIM Low Vision, 60.4% of respondents to the survey always or often use a keyboard for browsing web pages. In addition, people with permanent or temporary loss of their hands or fine muscle control may also use a keyboard or keyboards modified for navigation. from one discussion item to another. A user usually follows the visual flow, going from left to right and from top to bottom, headers to main navigation, page navigation and finally to the footer. When you use a keyboard for navigation, entering activates an activated link and the spacebar activates an activated form element. The tab facilitates navigation between items. E scape allows the user to close an item.
Knowing this, it is important to take into account the actions that the user can perform. The rule of thumb is that if you can interact with an item that can be developed with the help of a mouse, make sure you can interact with the help of a keyboard. These items can include links, buttons, form fields, or a date picker.
Make sure users can navigate with the keyboard to all the interaction components of the website. List all the targeted elements of your site and create easy-to-use focus indicators. Structure the underlying source code to properly organize content and navigation. Use CSS to control the visual aspects of the elements. Allow users to bypass the navigation windows if there are too many links in the drop-down lists.
3. Use Attributes
When it comes to linking text and descriptions for URLs, screen readers can jump from link to link in one article. If a vague link text such as "Click here" or "Read more" is used, it provides very little context or meaning to interpret on a screen reader.
Be specific and descriptive with your link text and include significant expressions that describe the content to which the link connects. Instead of "Contact Us", use more specific language, such as "Contact Our Sales Team". For images and videos, assign ALT attributes and use descriptive file names.
Ban foreign and non-descriptive words. in your links such as "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 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 of your website may not contain all the information needed for assistive technologies. The ARIA label attribute allows support technologies to replace 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 announces "Bing Ads. Link.
However, if the button itself is a call-to-action button, the site owner can use the ARIA label to allow the screen. player to speak the call-to-action text visible on the button. In this example, the screen reader announces "Register for a Bing Ads account." Link.
Use the attribute of the ARIA label in items such as forms and call buttons to the action to set the visible text. a screen reader should read aloud.
5. Label and format forms correctly
Ensure forms are intuitive and organized logically, with clearly identified instructions and labels. To ensure that users load the correct keyboard format for all forms, use always-visible labels and avoid placing fictitious text in form prompts.
From a formatting perspective, take advantage of the borders for text fields and drop-down menus. menus and put the forms in a single column format. In addition, use HTML types to prevent users from switching between virtual keyboard types. For example, the phone number fields should display the numeric keypad relative to a standard keyboard format.
6. Using Tables for Data
Online tables have two basic uses: data tables with row and column headers that display tabular data and tables for the table. layout. HTML tables are for tabular data. In general, presentation tables do not have logical headers or information that can be mapped to table cells. Screen readers must guess the object of the table. For this reason, it is important to use CSS for formatting and to reserve tables for the data. The use of CSS makes it possible to obtain a cleaner and more simplified HTML code.
Use the appropriate tags for the data tables and always include the table headers. Always choose CSS on the tables for the layout.
Working Principles for Writers and Graphic Artists
7. Writing Content in a Structured Way
The structure and flow of your content is particularly important to users. who have a visual impairment and rely on screen readers. It's also important for people with cognitive and learning disabilities, as well as anyone looking for content on a mobile screen. When writing for accessibility, call your high school English teacher and clearly organize the content with descriptive titles for each section.
Make the text easy to read and structured in a logical way. Be sure to use semantic markup for paragraphs, lists, and header citations.
8. Align Left
The alignment of the text has an impact on readability, according to the UX movement. The centered text forces the viewer to work harder, because without the right edge, there is no consistent path to follow through the eyes to move to the next line of text. Use left-aligned text to create a straight edge that makes it easier to read content and break the structure in the text.
Use only centered titles and short lines of text such as quotes and calls. Avoid mixing the text alignment.
9. Choose fonts carefully
I like the beautiful artistic fonts. But the fact is that some fonts are easier to read than others. That's why it's important to use basic fonts. Sans serif fonts are easier to read for people with visual or cognitive impairments – even temporary vision impairments, such as reading a screen in the light of the sun.
Size matters too. Avoid font sizes smaller than 12 and choose absolute units (pixels or dots) and relative units (%) to set the font size. Limit the number of fonts to make reading easier. Do not rely on the appearance of the fonts (color, shape or location) to express the meaning of the text. Finally, avoid blinking or moving the text – no user wants to read a message around a screen.
Points to Remember
Choose simple fonts with simple, sans serif ends that make it easy to recognize letters through the eyes. Limit the use of variations and font sizes.
10. Put the color to work
The application of color also affects accessibility. According to a survey conducted by WebAIM in 2018 among visually impaired users, 75% of respondents report several types of visual impairment, 61% with sensitivity to light or glare and 46% with contrast sensitivity.
Think about your color scheme. and the contrast of the colors so that the text is easily discernable from the background color. The Guidelines for Web Content Accessibility (WCAG) recommend the use of a contrast ratio of 4.5: 1 for normal text. To put this in perspective, the black text on a white background corresponds to 21: 1, while the gray text on white background corresponds to 4.5: 1.
The use of color alone for transmitting information may not be accessible to the visually impaired. For example, websites often use the green to indicate something positive and the red to indicate a negative, which can be difficult to discern for a person with a visual impairment. Instead, consider combining shapes or icons with colors.
Key Points to Remember
Make sure your colors are sufficiently contrasted and combine the colors with graphics or symbols to help you better understand.
complex or expensive. Just plan and intentionally apply the principles of accessibility to ensure a more inclusive experience for all.
The opinions expressed in this article are those of the invited author and not necessarily those of the search engine. Associated authors are listed here.
About the Author
Christi Olson is a research evangelist at Microsoft in Seattle, Washington. For more than a decade, Christi has been a student and practitioner of SEM. Prior to joining the Bing Ads team at Microsoft, Christi worked in internal marketing and at Point It, Expedia, Harry & David, and Microsoft agencies (MSN, Bing, Windows). When she's not passionate about research and digital marketing, you can find her with her husband at ACUO crossfit and run across the PacificNW, brewing and trying to find the perfect beer, and doing many walks with their two schnauzers and pug.