ARIA Attributes and Element Styles
ARIA attributes are often necessary for optimal accessibility of web applications. They can be used to present information and meaning that otherwise would only be presented visually. For example, a red border or red text might be used to identify errant form fields (such as a form field that was not completed properly). This color-only designation would not be accessible to screen reader users. However, adding aria-invalid=”true” would provide an indication to a screen reader user that this field is invalid or broken. With CSS, visual styles can be applied to elements based on their ARIA attribute values. Instead of setting the ARIA attribute and also styling the form control to present a red border, CSS styles of [aria-invalid=true] {border: 2px solid red;} could be used to automatically style the element based on its ARIA attribute.
