Here at Ritter Insurance Marketing, we build websites and apps that are accessible and scalable. We follow WCAG 2.1 guidelines for all of our projects, with a close eye on the future of accessibility.
We leverage WAI-ARIA roles, labeling, and descriptions, along with keyboard functionality and contrast where possible. Many of these decisions fall on the person or team implementing Platform UI into their project.
We made a point to include the now familiar screen reader only class,
sr-only, for content that can be confusing to a screen reader. Elements or actions that would benefit from additional text can use this class to offer context to a screen reader.
There are also instances where content that is present for design or aesthetic purposes should be hidden from a screen reader to eliminate confusion. This is where ARIA labeling comes to the rescue.
In the snippet below we have a button with an icon only - concise and generally understood by a sighted user.
<button class=”button”> <i class=”pi-download”> </button>
You can use WAI-ARIA roles and attributes along with the
sr-only class to improve the experience for users who require assistive technology.
<button class=”button”> <i class=”pi-download” aria-hidden=”true”> <span class=”sr-only”>Download a copy of your form</span> </button>