As the UX Designer for the EMS product, I have completed redesign tasks as assigned from our accessibility initiatives. This work is done towards Accruent's deadline of becoming fully accessible by 2025.
Collaborating with the Product Team, I am assigned story tickets via JIRA to complete tasks towards our accessibility initiatives. I am present for product refinement meetings, then take that information back to my team for review. We continue this cycle of development until the design is ready to be handed off for production.
STORY:
"As a blind or disabled user I should be able to filter for and browse for events like a visual user utilizing my keyboard and a screen reader.DETAILS |SAVED FILTERS MODAL
Saved Filters modal does not read body of the modal to tell you which filters are available
Load filter not interact-able with space bar
Delete Filter not interact-able with space bar
There is no ability for the user to choose which filter to select to load
No action is read when a user clicks load filter or delete filter and a filter is not chosen. Ensure we read the actions performed*UI UPDATES: *We need to add Radio buttons next to each saved filter, ensure that it is interact-able with space bar, ensure it reads checkbox "saved filter", and if you interact it should read "saved filter name" chosen
We need to disable Load Filter and Delete filter from being chosen unless one of the checkboxes is clicked, this will prevent the user from getting stuck on the screen and not knowing why."
Radio buttons were added in so that a user can utilize the keyboard to select filters. I also changed the selected state so that the user does not rely solely on color to see the selection made.
STORY:
"As a blind or disabled user I cannot utilize my keyboard to fully access the My Bookings section.DETAILS |Web App > Home > My Bookings <---Colors
All of the following are a Dark Blue Box, which does not contrast with the default focus indicator, we want to change all of them to just have blue writing and a blue underline (same blue color)Show My BookingsDay, Month, DateDay highlighted on Date Picker
From Design Team: Check out the prototype linked above. Also if you click the "Inspect mode" button for each screen, then select "Assets", you can find and download the font/color codeColor code: #0075C0"
EMS before relied on color to indicate a selection had been made. In the update, I used default focus indicators that users can percieve even if they have a visual disability. This was also tested for color contrast of 4:1.
WCAG Standards and Section 508 advise that for a web/software-based product to be fully accessible, they must meet the minimum requirements based in the following principles:
-Perceivable
-Operable
-Understandable
-Robust
By performing VPATs (Voluntary Product Accessibility Template) on our products, I identify critical areas of growth that need design improvement, giving our company the power to create inclusive experiences for all of our customers.
Being an internal tester saves an estimated $17,500.00 per VPAT audit. Click below for an example of a VPAT I have performed.
.svg)
