7/18/2023 0 Comments Best mouselessThese patterns made updating our common components a breeze. Want to know how accordions, dropdown menus, modals, and popovers should work? The document specifies the exact keyboard interactions needed with coded examples. I know that's a mouthful, but here's why it is so great: The free resource includes detailed design patterns for common UI elements. The W3C has a document called the WAI-ARIA Authoring Practices. One of the best aspects about accessibility for the web is that we have internationally-accepted guidelines. This is why I say we are making the org chart keyboard accessible instead of generally accessible. Keyboard accessibility won't do much for color blindness though, which is a visual disability. Accessibility solutions rarely are a 1:1 fix for a specific disability.įor instance, adding keyboard accessibility can help people with a wide variety of motor and visual disabilities. You always need to know what aspect of accessibility you are are solving for. I hope by the end you will learn how to handle common problems for adding keyboard accessibility to complex experiences! How to Design an Inclusive Experience The next section will go into detail about implementing these interactions in React. In this blog post I'm first going to detail the design process of these interactions. It was many releases spread out over a year‘s time. We spent the span of a year making the org chart fully keyboard accessible. If a user tried to navigate the org chart with the tab key, the focus used to jump across nodes in an unpredictable manner.Īnd forget about editing the org chart without a mouse: many of the editing actions were hidden within inaccessible overflow menus and modals. A lot of those disabilities restrict people to browsing the web with only their keyboard. Employees can explore the org chart on their own and even make it available to the public.īut what happens if a user is not able to navigate the org chart with their mouse? Three out of ten Americans have some sort of disability. The most impressive aspect is how the org chart is alive. Using a mouse, you can quickly drag-and-drop any org structure and employee data stays synced with your other tools. But I still believe the product includes the world's best org chart solution. Last week was my last week at Pingboard as a UX designer and engineer.
0 Comments
Leave a Reply. |