Making your content accessible ensures that all users, including those with disabilities, can access and enjoy your creations. Accessibility also improves SEO, usability, and user experience for everyone.
Beyond ethics and SEO, many organizations are also legally required to meet accessibility standards. The ADA Standards for Accessible Design set requirements under U.S. law, while the Web Content Accessibility Guidelines (WCAG) provide the internationally recognized technical benchmark for web accessibility. Following the practices below will help you work toward meeting these standards.
Color contrast
Color accessibility ensures text is readable against its background.
Use a sufficient contrast ratio between foreground and background colors.
Test your design using tools like WebAIM Contrast Checker.
Avoid using color as the only way to convey meaning; combine it with text or icons.
WCAG specifies minimum contrast ratios of 4.5:1 for normal text and 3:1 for large text at the AA level. Meeting these thresholds helps satisfy both WCAG success criteria and aligns with ADA accessibility expectations.
Image alt text
Alt text (alternative text) describes images for screen readers and search engines.
Add clear, descriptive alt text for all images.
Focus on the essential purpose of the image.
Keep descriptions concise but meaningful.
Example: Instead of “image of socks,” use “black cotton socks folded on a wooden table.”
Providing meaningful alt text is a core requirement under WCAG Guideline 1.1 (Text Alternatives) and supports compliance with ADA Standards.
Semantic HTML structure
Semantic HTML helps screen readers and search engines interpret your content correctly.
Use proper HTML tags for their intended purpose.
In Vev, specify text tags (H1, H2, H3, etc.) directly in the text editor toolbar.
Style each tag in the text style editor without breaking the correct HTML hierarchy.
Best Practice for Headings
Use H1 for the main page title.
Use H2, H3 for subheadings to create a logical structure.
Avoid skipping heading levels, as it confuses screen readers.
ARIA and Custom Attributes
ARIA (Accessible Rich Internet Applications) attributes add extra meaning when native HTML cannot describe an element’s role or behavior.
Use ARIA only when necessary.
Prefer semantic HTML before relying on ARIA attributes.
These attributes are defined as part of the W3C's broader accessibility framework, which also includes the WCAG guidelines.
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.
Using tabindex
Values below 0: Element is removed from tab order.
Values above 0: Element is prioritized in the tab order (e.g.,
tabindex="1"is first,tabindex="2"is second).Value of 0: Element follows natural DOM order after positive values.
Adding tabindex in Vev
Go to Custom Attributes.
Add
tabindexas the attribute name.Assign the desired value (e.g.,
1,0, or-1).
Considerations
Avoid overusing positive values, as they can cause confusing navigation.
Prefer semantic HTML structure to control focus order whenever possible.
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 Screen Readers
Screen readers convert on-screen content into speech or Braille. To optimize designs in Vev:
Use Flex Layout: Prevents screen readers from reading content in reverse order.
Layer Reversal: If Flex Layout is not possible, manually reverse layers in the editor to match the intended reading order.
Maintain Consistent Structure: Keep HTML logical and avoid unnecessary element reversal.
Test Regularly: Use screen reader tools (e.g., NVDA, VoiceOver, JAWS) to verify content accessibility.
Following these practices will move your Vev projects toward compliance with the WCAG guidelines and the ADA Standards for Accessible Design. For a deeper understanding of the requirements, we recommend reviewing both resources directly.