Content
@
https://warpcast.com/~/channel/accessibility-ux
0 reply
0 recast
0 reaction
Yolantis
@yolantis
Hi UX pros, today at work I wrote an internal Wiki about how React developers can appropriately use the aria-label property on icons that are serving as buttons. Sometimes the UI designer needs to educate the back end dev. Not all devs today have had education in accessibility concerns in apps. So, the issue is that when we use an SVG icon as a button, there is not any alt text attribute we can use. So we need to turn to the Aria labels to allow screen reader users to hear the purpose of the button. Use the tooltip value as the aria-label and you should be golden.
1 reply
0 recast
1 reaction
Yolantis
@yolantis
Today I continued working on this same user story. Post is appropriate for any responsive site or app using an external sortable table/grid. I took a deep dive with AG Grid table cell highlighting today (as a UI designer). My grid allows cell highlighting. My team wants to dynamically highlight cells that have missing data, so our scientists can find those cells easily and fill in missing info. When I did a round of testing with different system color themes, I found issues for users who have the dark mode enabled, and even more issues for users with the PC accessibility high color contrast mode enabled. Essentially, the high contrast themes wipe out all color. To keep this post brief, I would suggest any dev or UX designer look up how to override the contrast theme to apply in-cell highlighting, PLUS add a thicker border around affected cells. This is all done with CSS and/or media query. And don't forget to factor in time for system color theme testing!
0 reply
0 recast
0 reaction
