aria labels in buttons and other elements

[ip2C]

We need to add aria labels.

So it would be nice on buttons and other necessary elements to have standard aria labels and mabe a textfield in the ALB to change the artria label?! What do you think.

Below isi generated a list of suggested aria-label attributes for various standard icons, buttons, and other web page elements often used in content management systems like WordPress with page builders:

Icons

Search Icon: aria-label="Search"
Menu Icon: aria-label="Menu"
Close Icon: aria-label="Close"
Settings Icon: aria-label="Settings"
Download Icon: aria-label="Download"
Help Icon: aria-label="Help"
User Profile Icon: aria-label="Profile"
Shopping Cart Icon: aria-label="Cart"

Buttons

Submit Button: aria-label="Submit"
Read More Button: aria-label="Read more about {topic}"
Download Button: aria-label="Download {file-type, e.g., PDF}"
Add to Cart Button: aria-label="Add {product name} to cart"
Play Video Button: aria-label="Play video"

Accordion

• Expand Section: aria-label="Expand {section name}"
• Collapse Section: aria-label="Collapse {section name}"

Slider

Next Slide Button: aria-label="Next slide"
Previous Slide Button: aria-label="Previous slide"
Slide Indicator: aria-label="Slide {number} of {total}"

Other Elements

Form Labels: Each label should clearly describe the input field, e.g., aria-label="Email address"
Navigation Links: Each link should explain its destination, e.g., aria-label="Navigate to {page name}"
Social Media Links: Each link should denote its function, e.g., aria-label="Visit our Facebook page"

WordPress Page Builder Elements

• Header Section: aria-label="Header"
• Footer Section: aria-label="Footer"
• Sidebar: aria-label="Sidebar"
• Contact Form: aria-label="Contact form" (already option in "Advanced -> Developer Setting" - added as default for new created elements)
• Gallery: aria-label="Image gallery"

[InoPlugs]

Please note:

Many ALB elements already have an aria-label option in Advanced -> Developer Setting

Is activated with $this->config['aria_label'] = 'yes'; in function shortcode_insert_button()

---

Added:

Accordion

• Expand Section: aria-label="Click to expand {toggle title}" or a custom value
• Collapse Section: aria-label="Click to Collapse {toggle title}" or a custom value

Other Elements

• <header ....> sections: aria-label depending on context , filter 'avf_aria_label_for_header' to change
• <footer .....> section: aria-label="Copyright and company info", filter 'avf_aria_label_for_footer' to change
• <aside......> sections: aria-label="Sidebar", filter 'avf_aria_label_for_sidebar' to change
• ALB Contact Form: option in "Advanced -> Developer Setting" for aria label - added "Contact Form" as default for new created elements