May 28, 2020
Manuel Matuzović details 10 bad HTML patterns for a close button. You know, stuff like this: × Why is that
seen from Australia
seen from Netherlands
seen from Saudi Arabia
seen from United States
seen from Philippines
seen from Australia
seen from Yemen
seen from Italy
seen from Kuwait
seen from Denmark
seen from Australia
seen from Russia
seen from Yemen
seen from Australia
seen from Spain
seen from Germany
seen from China
seen from Denmark
seen from Chile
seen from United States
Manuel Matuzović details 10 bad HTML patterns for a close button. You know, stuff like this: × Why is that
Multiple labels and accessibility
I am trying to figure out how to get screen readers to announce multiple labels when a user tabs to a control. For eg: in the image above, screen readers should read 'Create Group' which is the label preceding the actual drop down but they also need to announce the selected value in the dropdown which is 'Within Facebook'. I have tried different combinations of aria-label, aria-labelledby and the html label tag and I didn't have much luck with Jaws 13 on FF 15.
What did work is:
Having the container div have a role of "group" with an aria-labelledby pointing to 'Create Group' and then within this container div, write the markup for the dropdown widget. This way, when the user first tabs to the dropdown widget within the group, both the group label and the selected value in the dropdown are announced. If anyone knows a better way to satisfy VoiceOver and Jaws and have them announce both values, I would love to hear that!