Is there a of changing the ID of a element thats nested inside of a accordion component?
Product:
Wix Studio.
What are you trying to achieve:
I’m currently trying to rectify some “aria-labelledby” attributes as shown here:
.
What have you already tried:
Searched on this platform for this changing nested element id’s like this, as well as various SO and GPT attempts at debugging. This in addition to reading the docs here: About the Properties & Events Panel. From those sources I get the feeling I should be able to access the properties of an element to change the Id, but can’t find a
`type or paste code here`
It looks like the attribute is set in following code snippet:
,but I cannot find a clear way of accessing the properties of a nested button element like this.
Update: I was able to access the properties tab after unlocking the bottom toolbar by disabling my github integration.
The most granular the ID seems to get is, what I believe to be the container element for the Accordion , #accordian1:
I can get the id’s of the text elements and containers, but the specific child elements that effect the aria labelled by attributes don’t seem to be available for me to select via the GUI
Hey @Dominick_Monaco!
Correct - in Wix, elements are selected via the $w namespace - for example $w("#accordion"), which allows you to access an elements various properties/events.
Generally, if it can’t be selected on the canvas, it can’t be controlled via Code.
That being said, there are some elements like buttons and text that with code enabled have an accessibility panel available via the editor:
And we recently made Accessibility and Tab index available via code for certain elements as documented here - https://dev.wix.com/docs/velo/articles/release-notes/release-notes#new-features-accessibility-and-tab-index - unfortunately not for Accordion.
I’m no accessibility wizard - are you able to explain what you’re hoping to achieve? Would be happy to feedback to the team 
Sidenote, I saw in your last screenshot what appears to be sitemap xml, which won’t work in this way
1 Like
Hey Noah thanks for the quick and informative reply! Regarding the last photo I should have probably edited out the sitemap aspect of the photo, I just wanted to display the #accordian1 id as a reference and the sitemap is not relevant, my bad.
Currently what I’m trying to do is change the ID of the element that is defining the aria-labelledby attribute so it’s more compliant with best practices as defined here: aria-labelledby - Accessibility | MDN and doesn’t ding my lighthouse scores for accessibility. Basically have a unique and descriptive aria-labelledby name as I understand it.
So in the dark mode HTML screenshot, the top button element has an id of item1 which seems to then define the bottom divs aria-labelledby attribute. While item1 isn’t the necessarily terrible for screenreaders, the other accordion fields have buttons with long unique string names such as in the following image:
This appears to be against best practices and I wanted to see if there was any means of accessing these elements with the goal of changing the this field. Do you think It’d be possible to access these elements by selecting the $w("#accordion") element in the Wix IDE and somehow programtically looping through it or navigating the child nodes of that element?
Thanks again dude!
