DEV Community

loading...

Discussion on: Pour Explained: P is for Perceivable Part 3

Collapse
anevins12 profile image
Andrew Nevins

Hi Ren I really like this post and thank you for going through the effort of writing the SC in an understandable way.

I was just wondering about the 'Use of Color' example. If I am understanding correctly, the link uses colour to differentiate itself by default, then on hover or focus it adds the underline. What do you think about adding the underline by default rather than in the focus or hover state? That way people will know it's a link before interacting with it.

Collapse
stories_of_ren profile image
⚡️Ren⚡️ Author

Hi Andrew and Thank you for commenting
You'll have control over the color of your links via the CSS, so if the default color is not within a 3:1 contrast ratio in relation to the surrounding text you may need to change the color. Having an underline initially on a link is a great way to visually represent a link as well, however you will still need to have a Focus state that differentiates itself from the default state so that keyboard only users will have an indicator of where they are on the page. Then it's best practices to mimic the focus state for the hover state and vice versa.

A lot of the time underlining initially gets left out via designs because it doesn't look good, but it is a good method for denoting a link.

for more on this topic: W3's understanding use of color
Again, thank you for your comment! I hope that was helpful in your studying of accessibility.

Collapse
anevins12 profile image
Andrew Nevins

You're right thank you for clarifying! I would just bear in mind that this technique is not the preferred technique for meeting this SC: w3.org/WAI/WCAG21/Techniques/gener...

While using this technique is sufficient to meet this success criteria, it is not the preferred technique to differentiate link text. This is because links that use the relative luminance of color alone may not be obvious to people with black/white color blindness. If there are not a large number of links in the block of text, underlines are recommended for links.

Thread Thread
stories_of_ren profile image
⚡️Ren⚡️ Author

Thanks For providing further research into the method, my post is only a brief description of the success criterion at a beginners level with the hope that it will inspire others to research more on accessibility or at the very least get folks thinking about it when maybe they hadn’t before.

Thanks again for your diligence