All Collections
Tips and Guides
How to optimize for accessibility in Vev
How to optimize for accessibility in Vev

Help everyone access and enjoy your creations with these guidelines

Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

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.

Did this answer your question?