Optimizing for accessibility is important for both improving SEO, and demonstrating good ethics and morals. It allows all individuals to access and use your content, regardless of their abilities, leading to better usability and user experience for all.
285 million people are estimated to be visually impaired worldwide: 39 million are blind and 246 have low vision (World Health Organization).
We've pulled together some of our top recommendations to help you improve your accessibility when creating in Vev.
Color contrast
Color accessibility is about checking the contrast ratio between the foreground and background colors. Checking color contrast is an easy task and can simply be done by using a third-party tool such as the WebAIM Contrast Checker Tool.
Image alt text
Alt text (alternative text) is important for describing an image for people using screen readers and giving context to search engines. By providing clear and descriptive alt text, you can improve accessibility by making content more inclusive and available to a wider audience and also optimize for search. Learn how to add alt text to your images.
Semantic HTML structure
Ensuring a semantic HTML structure is all about using the HTML tags for their intended purpose. In Vev, this means that you should ensure that all your elements are using the HTML tags that define their content. Using a semantic HTML structure not only improves accessibility but also improves SEO. Read more about how to use HTML tags in Vev.
The semantic structure of text tags
In Vev, the HTML text tags are specified in the text editor. When you add a text container to the canvas, you specify its tag by selecting one in the top toolbar.
The best practice is to select the tag that makes it easy to understand and navigate your content hierarchy. For example, your main title should use the H1 tag and subsequent heading levels for subheadings. Each tag can then be styled in the text style editor. This lets you set the correct HTML semantics while also being able to adjust how each tag should be styled to fit its visual hierarchy.
ARIA and custom attributes
ARIA (Accessible Rich Internet Applications) attributes are a set of HTML attributes that can be used to add information to web content to make it more accessible to users with disabilities. ARIA attributes should only be used when there is no native HTML element that can describe the content or behavior of an element. Read more about how to add custom attributes.
Set tabindex with custom attributes
Control the sequential focus of elements by using the tabindex attribute as a custom attribute. This lets you establish a specific order for focusability, typically triggered by the user pressing the tab key.
The tab index attribute accepts whole numbers, both positive and negative, each serving distinct purposes outlined below:
Tab index value below 0: The element becomes inaccessible within the tabbing order.
Tab index value above 0: The element becomes accessible, ordered by the assigned number. For instance,
tabindex=1 is prioritized first,tabindex=2 is second,tabindex=3 is third, and so forth.Tab index value = 0: The element is positioned last after any positive values. The order of elements with
tabindex=0 is determined by their layer position on the page.
Adding a custom attribute with tab index
To incorporate a custom attribute using tab index, use tabindex as the attribute name and assign your desired value. Read more about how to add custom attributes.
Considerations before using tab index
Prior to implementing tab index, it's crucial to be mindful of potential complications, particularly when using positive tab index values to establish a specific page order. All elements with positive tab index values take precedence over other page elements. Once tabbing through, the focus continues following the 'source' order.
Therefore, it is recommended to explore alternative accessibility practices, such as ensuring semantic HTML structure, before resorting to tab index.
Best Practices for Designing for Screen Readers
Screen readers are assistive technologies used by individuals who are blind or visually impaired to interact with digital content. They convert text and other elements on the screen into speech or Braille output. Screen readers navigate through web pages using the underlying HTML structure, reading aloud the content in a linear, logical order. This makes it essential for web developers and designers to create accessible content that is easy for screen readers to interpret.
When designing for screen readers, consider the following best practices to ensure your content is accessible:
Use Flex Layout: Using flex layout can prevent the issue of content being read backward by screen readers. Ensure that all content uses auto layout to maintain the correct reading order.
Layer Reversal: If flex layout is not an option, manually reverse the layers in the editor to match the intended reading order for screen readers.
Consistent HTML Structure: Ensure that your HTML structure is consistent and logical. Avoid reversing HTML elements unless absolutely necessary for visual design purposes.
Regular Testing: Test your designs regularly with screen readers to identify and fix any issues. This can help ensure that your content is accessible to all users.