All Collections
Tips & 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.

Did this answer your question?