search

ravendesignsystem / accessibility

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
1 stars 0 forks source link

inclusion of outline property and/or 'state' classes (:focus selector) on links for better UX #1

Open tssmitty opened 5 years ago

tssmitty commented 5 years ago

Let me start by saying, I know this is not likely due to 'design vanity' but rather CSS resets or overrides that have nullified outlines on links and state classes e.g. hover/active/focus, but it's something that is, at a minimum WCAG AA spec. At best, it can vastly improve UX/UI and has been advocated for by leading human interaction design frameworks ala Material Design and Apple's UIKit. Highlighting linked elements, specifically buttons/nav, is an essential interaction for users who may use keyboard tab-spacing to invoke the :focus state of buttons; webkit browsers include this - so wouldn't suppressing it is counter intuitive?

Some people find this unsightly. Others are thrown off by the fact that the display varies on different browsers / operating systems. While these concerns are reasonable, they do not outweigh the importance of the outline for keyboard users and users with reduced vision. - TJ VanKnoll (https://www.tjvantoll.com/2013/01/28/stop-messing-with-the-browsers-default-focus-outline/)

I've added the oultine property to both students and admissions websites with great results image for users hoping to traverse the menu system (see ablove screen) and for creating visual urgency with tabindex attributes, for things such as login inputs( see below) :focus state applied to inputs. image

If we take things a step further, the outline property, when applied to link states, can evoke feeling and create depth in the user experience. Material design and other similar frameworks have clearly defined parameters involving 'states' on button that differ but retain the visual consistency of the framework. see: https://material.io/design/interaction/states.html. In essence, I think inclusion of these link styles, could be a big win for accessibility and user experience.

Additional reading:

dannybrown73 commented 5 years ago

This is a good point and something I have in my internal notes as an accessibility item to fix.I'm going to add it as an issue in dev as well as here.

Also, pretty sure this has been implemented over the years as a case of design vanity. :)

dannybrown73 commented 5 years ago

Also, there are ways to meet this accessibility need with slightly more subtle approaches then the browser defaults. I think https://www.deque.com handles it pretty well...with it being more subtle in their search form (top right) but nice and bright in their forms https://accessibility.deque.com/newsletter which I'm okay with. FYI deque is the company that builds AXE which is the A11Y tool used in the Lighthouse audit tool found in Chrome. So, they know their stuff.