Screen Reader Changes for Address Blocks

[jage9]

• Added labels for all address fields
• Added a heading role for each section (heading level 2)
• Hid the duplicate graphic from screen readers as it is the same text as the title
• Added a group role and label for each section

Reference to issue #195

[jage9]

Oops, there's one small error with the country field. Troubleshooting that now.

[jage9]

Should be good now. I did not address potential additional rows as I don't have any plugins that do this.

[jage9]

Happy to help.

Label is one way to add an implicit title for a form field, and is often prefered, as the browser does not need to guess as to which text is the actual label. This is the method used in much of the responsive_classic template, which is generally compliant with accessibility standards.

role="heading" aria-level="2" is the same as adding an H2 heading to the page. I used this method as to not disturb current visual formatting. One could also do an H2 with a CSS class to achieve formatting.

Let me know if you have any more questions.