[x] Group carousel elements
A grouped carousel has the same structure as a basic carousel, but it also includes slide picker controls where:
The set of slide picker controls is contained in an element with role group.
The group containing the picker controls has an accessible label provided by the value of aria-label that identifies the purpose of the controls, e.g., "Choose slide to display."
Each picker control is a native button element (recommended) or implements the button pattern.
The accessible name of each picker button matches the name of the slide it displays. One technique for accomplishing this is to set aria-labelledby to a value that references the slide group element.
The picker button representing the currently displayed slide has the property aria-disabled set to true. Note: aria-disabled is preferable to the HTML disabled attribute because this is a circumstance where screen reader users benefit from the disabled button being included in the page Tab sequence.
We decided that the carousel element will not be used. One image instead will be used:
[ ] Home: alt="Workshop about testing in a pleasant homely meeting space." (fix the typo!)
[ ] Team: alt="Roleplay between three collegues at a workshop in a pleasent homey atmosphere." change to "Alas employees collaborating in a homey office space."
[ ] Careers: alt="Young professionals in halloween masks at the office party."change to "Alas employees smiling and laughing at the office party, wearing halloween costumes."
See best practices for carousel (W3C), and if it is too much work change to one image only.
If we use the carousel: