aria labels in buttons andother 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

• [x] Expand Section: aria-label="Expand {section name}"
• [x] 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

• [x] Header Section: aria-label="Header"
• [x] Footer Section: aria-label="Footer"
• [x] Sidebar: aria-label="Sidebar"
• [x] 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

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

Other Elements

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