Blind and low-vision users use screen readers to browse the web. These tools read your site out loud. Screen readers can only work with what your code tells them about the component. The site might work fine for sighted visitors who don’t use assistive technology, but it becomes a mess for anyone relying on assistive tools.
Adding the right attributes helps address many of these issues. Divi 5 makes it painless with Custom Attributes, letting you add what’s needed without digging through code or wrestling with workarounds. Let’s have a look!
Why Attributes Matter For Your Website
HTML attributes fall into several groups, each handling a specific task. Accessible Rich Internet Applications (ARIA) attributes inform screen readers about the functions of interactive elements, enabling users to navigate and interact with content more effectively.
https://youtu.be/mNbqrrhT3AQ
Subscribe To Our Youtube Channel
For example, a screen reader might announce whether a toggle is “on” or “off.” Likewise, form fields receive proper ARIA labels, so everyone knows what to type, even if they can’t see them.
The aria-label makes your button work for everyone. Visual users see the cart icon and “Add To Cart” text. Screen reader users hear “add to cart” announced aloud. Same button, different experiences, but both get the message.
Data attributes let you store information in elements that visitors never see, but your scripts can retrieve when needed. Say someone clicks a button to request a quote. The data attribute tells your form which service the user wants so that you can provide them with the correct rate card. Or track where newsletter signups come from: different page sections and data attributes.
This keeps your code organized, rather than cramming everything into class names, and helps you identify which content drives conversions, rather than relying on guesswork.
Then, you have standard HTML attributes that control language direction, keyboard focus order, and link behavior. Each type solves a specific problem your site faces.
Why Not Just Use Classes?
Things get messy if you force everything into class names or add invisible text. If you need to update something, you risk breaking your website’s accessibility. Use native HTML first; add ARIA only when native semantics aren’t possible.
Styling lives in classes. Functionality uses data attributes. Accessibility gets ARIA. Nothing overlaps. Update your styles without touching functionality. Change your JavaScript without breaking accessibility. Each part stays in its lane, and tools reading your site get what they need to work.
What Are Divi 5’s Custom Attributes?
Divi 5 puts attribute control directly in your control through Custom Attributes.
The Attributes panel sits where CSS Class and ID used to be in the Advanced section. Your old classes and IDs have already been automatically migrated, so nothing will be lost during the switch.
Click Add Attribute and you’ll see a dropdown menu with common options ready to go:
- class: Add CSS classes for styling
- id: Create unique identifiers for elements
- title: Display tooltip text on hover
- alt: Provide alternative text for images
- rel: Define link relationships like nofollow or noopener
- target: Control how links open, like in new tabs
- role: Specify element roles for screen readers
- aria-label: Add descriptive labels for assistive technology
- data-: Store custom data for scripts and tracking
Besides these presets, Enter Custom Attribute at the bottom to add any valid HTML attribute you need. If browsers recognize it, you can add it. ARIA descriptors, language tags, custom data fields, whatever your site needs.
The setup lets you target different module parts, not just the wrapper. For example, you can target just the icon in a module or just its text content. You decide where each attribute remains.
You can also bundle attributes into Option Group Presets. Build your attribute setup once, save it, and then apply the entire setup to other modules later without rebuilding from scratch, making this a complete feature rather than just an afterthought.
How To Add Custom Attributes In Divi 5
Now that you know how attributes are helpful and where to find them in Divi 5, the next step is actually using them. These two sections walk through ARIA attributes for accessibility, then show you how data attributes store information your site needs behind the scenes:
Adding ARIA Attributes To Elements
As explained, ARIA attributes are necessary for assistive tools like screen readers. For this guide, as an example, we’ll show how to label a Video Module for someone using a screen reader.
Open the module settings, go to Advanced, and click Add Attribute under Attributes. For Attribute Name, select aria-label.
In the Admin Label, put something that is easier to remember and reference when needed. Keep the Target Element as the Module. For Attribute Value, type Gym walkthrough video.
Now, screen readers should announce the content of the video before it is played.
Here’s another case. You built a Blurb Module that includes an icon. The icon is decorative, and the text explains what the section does, so screen readers don’t need to announce it.
Go to the Blurb Module settings. In the Advanced tab, add an attribute. Target Element: Image or Icon. Attribute Name: aria-hidden. Attribute Value: true.
Now screen readers skip the decorative icon and focus on the actual text content. This demonstrates how you can target specific parts of a module to refine what assistive technology announces. Hiding decorative elements keeps the experience focused on information that actually matters.
Working With Data Attributes And Custom Values
Data (data-*) attributes should be used to store information that your scripts and tracking tools can read later. Let’s see with an example: Open a Button Module, go to Advanced, add an attribute, and select data- as the name.
Set the attribute value to something like ‘footer-CTA-button’ after labeling properly and keeping the target set to the Module.
Repeat the same process for various other sections of your post, such as features, testimonials, and blog posts. Your analytics script reads these tags to see which button gets more clicks. You know exactly where attention goes.
The attribute stays in the HTML waiting. Your code pulls it when needed. Nothing appears on the page itself, making it easy to build actionable websites without adding intrusive code or compromising your URLs’ attractiveness.
Getting The Most Out Of Your Attributes
Adding attributes to your site helps solve accessibility problems, but you need to test them properly and maintain organization. These practices should help you avoid common mistakes that break screen reader functionality:
Test With Screen Readers First
Testing with actual screen readers shows you what assistive technology users experience. NVDA works on Windows, and VoiceOver comes built into Mac. Both are free, so you can start testing right now.
Picture by Apple.com
Tab through your pages while listening to how elements get announced. Screen readers should correctly identify interactive elements and read your labels in a way that makes sense.
A styled div that works like a button needs to be announced as such, not just as generic content.
Different screen readers handle code differently. Test with both NVDA and VoiceOver to catch most issues. You can also turn off your monitor and rely only on audio.
This quickly reveals navigation problems and missing labels that might seem fine visually. Run these tests on your most-used pages first. Focus on forms, navigation menus, and any custom interactive components. You’ll spot issues fast when you hear how confusing poorly marked content sounds.
Keep Your Attributes Organized
Naming conventions matter for long-term maintenance. Stick with lowercase letters and separate multiple words using single dashes. Write data-product-id instead of mixing styles like dataProductID or data_product_id.
Group related attributes together in your code. Keep all ARIA attributes together. Place data attributes in a consistent pattern below them. This makes scanning your markup much faster when you need to find something.
Document what each custom attribute does. Create a simple reference file that your team can refer to later. Write brief notes explaining that the data-analytics-section tracks which page sections get clicked. Note that aria-controls connects a toggle button to its panel.
Proper documentation prevents confusion six months down the line. Keep these notes in a shared document or comment directly in your main stylesheet.
Consistency across your project saves time. Pick your naming style early and stick with it. Reading and updating code becomes straightforward rather than a guessing game when everyone follows the same pattern.
Avoid Common Mistakes
Semantic HTML elements already have built-in roles. Buttons do not need role=”button” because browsers already recognize them. Adding redundant ARIA attributes creates clutter in your code.
Typos break ARIA functionality completely. Screen readers ignore misspelled attributes like aria-lable instead of aria-label.
They see the typo as meaningless text and skip right over it. Role values must stay lowercase to work correctly. Setting aria-hidden=”true” on focusable elements creates a terrible experience. Keyboard users can tab to items that screen readers cannot announce.
They land on invisible content and have no idea what they activated. Fix this by removing these elements from the tab order with tabindex=”-1″ or keeping them visible to everyone.
Some ARIA roles require specific parent-child relationships. For example, using role=”listbox” requires child elements to use the role=”option” attribute. Breaking this structure will cause screen readers to announce it incorrectly or not at all.
Skip aria-label when visible text already describes an element. This creates a disconnect. Screen reader users will hear different information than what sighted users see. Maintain consistency by using the same exact text for everyone.
Try Custom Attributes In Divi 5 Today
Attributes were used to sit buried in code, where most people couldn’t access them. You either hired someone to add them or skipped them entirely, leaving gaps in accessibility and tracking. Divi 5 introduces Custom Attributes into the builder, allowing you to use them without needing to open a single external file.
Your modules get proper ARIA labels that screen readers can announce. Your buttons receive data attributes that indicate which ones drive conversions. Your site works for people using assistive tech, not just those who can see your design. Open the Attributes panel and add them to your most visited pages today.
Leave A Reply