Skip to main content

Custom attributes

Add extra information to your content to boost accessibility

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

Custom attributes in Vev allow you to add extra information to elements on your page. This information improves accessibility, SEO, and tracking by providing context that is not included in standard HTML attributes.

By using custom attributes thoughtfully, you can make your content easier for both search engines and assistive technologies (like screen readers) to understand.

Custom attributes can be applied to any element in Vev. They are commonly used to:

  1. Improve SEO
    Add metadata such as keywords or descriptions that help search engines better evaluate the relevance of your content.

    • Example: Adding data-keywords="black socks, cotton socks, durable socks" can support SEO.

  2. Enhance Accessibility
    Use ARIA attributes to provide information not available through native HTML attributes. This ensures your content is more inclusive for people using assistive technologies.

    • Example: Adding aria-label="Search" to a button that only shows a magnifying glass icon.

  3. Set Up Tracking
    Assign tracking attributes so user interactions with Vev elements are captured in your analytics tools.

    • Example: Adding data-analytics="header-navigation" to track clicks in the navigation menu.

    • Always use tracking attributes responsibly and in compliance with privacy regulations (e.g., GDPR, CCPA).

Note: Custom attributes are not native HTML, which means:

  • Incorrect use may reduce performance.

  • Overuse or misuse can negatively affect semantic HTML structure.

  • Always validate attributes with recognized references before applying them.

πŸ‘‰ Refer to W3Schools HTML Attribute Reference for a full list of valid attributes.

How to add a custom attribute:

  1. Select the element you want to add a custom attribute to

  2. Open the Properties panel

  3. Click the β€œ+” button to add a new custom attribute

  4. Enter the name of your custom attribute, or select one from our preset list, followed by the attribute value

  5. Save the custom attribute

Here you can read more about what HTML attributes are. W3Schools also has an HTML attribute reference sheet that lists out what can be used in our Custom attributes editor.

Did this answer your question?