Digital First Editor Accessibility Updates
I worked with an accessibility engineer and a development team to bring Digital First Editor up to Web Content Accessibility Guidelines (WCAG) 2.1 standards. I evaluated user journeys and identified accessibility issues such as color contrast, page hierarchy, missing ARIA labels, form field error messaging, and the ability to use tab functionality for screen readers.
Accessibility audit
To evaluate the urgency and importance of accessibility errors, I created a table to document the issues, where they were located, and possible solutions. I referenced WCAG 2.1 standards and used axe DevTools to help find accessibility errors through code reviews.
Color contrast
One of the most common accessibility errors and easy to fix is color contrast. To meet WCAG 2.1 AA standards, regular-sized text must meet a contrast ratio of 4.5:1, and large text or non-text components must be at least 3:1.
Visual indicators
Color alone cannot be the only visual indicator of information. Approximately 1 in 12 men are colorblind, along with 1 in 200 women. One of the functionalities of DFE was the ability for the user to compare versions. Added text is indicated with a green highlight, and deleted text with a red highlight plus a strikethrough.
Error messaging + helper text
It is important to have specific and helpful UX writing to make form fields accessible. Someone using assistive technology, such as a screen reader, might be navigating the page without a visual cue, and if all error messaging is the same, they will not know what field they are missing. This is an example of error messaging added to the "Create New Page" modal.
ARIA
ARIA stands for Accessible Rich Internet Applications and provides text for screen readers and other assistive technology. ARIA text helps orient the user when images are used for buttons or, in this case, when the pagination could read as vague numbers outside of a visual context. I handed this off to developers with a note to add the ARIA label: "Showing results [number] to [number] of [total number]"
Persistent labels
Another common accessibility error is placing helper text or labels within form fields that disappear when a user enters content. Often, this is done to save space, but it means that a user will have to delete what they have written to see what the field was for if they lose context. The simplest solution is to add a persistent label above the form field, as was done here for the search and filter.
