Are our links visually accessible?
Are our links visually accessible?
By Frank van Eldijk-Smeding
3 min read
A simple link inside a paragraph, what could go wrong? Well, a lot in fact. Let’s have a closer look, shall we?
- Authors
- Name
- Frank van Eldijk-Smeding
- linkedinFrank van Eldijk-Smeding
- twitter@frank_vaneldijk
- Github
- githubbeingfrankly
- Website
- websiteBlog
When I wrote about the accessibility of links, I’ve focused on screen reader & voice recognition users. But this time I’ll focus on what visually goes wrong for our links.
So, let’s get started and figure out what those barriers are and what we can do to prevent them from happening.
A simple link inside a paragraph, what could go wrong?
While browsing the web, I keep noticing a design trend more often than before. And that’s the styling of their links.
Having only a color difference to separate them from the rest of the content. You might wonder what’s wrong with only using a color to convey meaning, so let’s find out together.
Lost in a sea of text
I’ll show you two examples, both showing two paragraphs and a link somewhere in the middle.
The first example is what people without a color vision deficiency (better known as color blindness) see. And with the second example I’ve simulated a type of color vision deficiency called Protanopia.
Do note that the simulated effect might differ from reality. This is due to a lot of factors (e.g. the algorithm used, severity of the color vision deficiency, monitor settings, etc).
Are you able to spot the link in the second example? I bet it wasn’t as easy as the first example. So, what could we do to prevent this from happening?
More weight please
So, what about giving our links more font-weight? Surely that will solve the problem, right?
Not ideal I’m afraid. Even though the link stands out more compared to the rest of the content. We’ve introduced a new problem. It’s still unclear which is just bolded text and which is the link.
Underline to the rescue
What our links — or rather our users — need, is an underline. It’s still often removed (and I’ve been guilty of this in the past as well) because of aesthetic reasons.
Yet, it’s the best visual cue for a link that’s available. And most likely, it’s what our users will expect. So, let's add some underlines shall we.
In both examples the link stands out, even with a loss of color.
Conclusion
- When we’re developing (or designing) for our users, we shouldn’t use color as the only visual cue
- Using underlines for our links is what our users will expect the most, don’t make them think or second guess!
Further reading
- https://www.w3.org/TR/WCAG21/#use-of-color
- https://www.w3.org/WAI/WCAG21/Techniques/failures/F73
- https://www.w3.org/WAI/WCAG21/Techniques/general/G183
Upcoming events
Drupal CMS Launch Party
Zoals sommigen misschien weten wordt op 15 Januari een nieuwe distributie van Drupal gelanceerd. Namelijk Drupal CMS (ook wel bekend als Starshot). Om dit te vieren gaan we op onze campus een klein eventje organiseren. We gaan die dag samen de livestream volgen waarbij het product gelanceerd wordt. De agenda is als volgt: 17u – 18u30: Drupal CMS livestream met taart 18u30 – 19u00: Versteld staan van de functionaliteiten 19u – 20u: Pizza eten en verder versteld staan van de functionaliteiten Laat ons zeker weten of je komt of niet door de invite te accepteren! Tot dan!
| Coven of Wisdom Herentals
Go to page for Drupal CMS Launch PartyCoven of Wisdom - Herentals - Winter `24 edition
Worstelen jij en je team met het bouwen van schaalbare digitale ecosystemen of zit je vast in een props hell met React of in een ander framework? Kom naar onze meetup waar ervaren sprekers hun inzichten en ervaringen delen over het bouwen van robuuste en flexibele applicaties. Schrijf je in voor een avond vol kennis, heerlijk eten en een mix van creativiteit en technologie! 🚀 18:00 – 🚪 Deuren open 18:15 – 🍕 Food & drinks 19:00 – 📢 Building a Mature Digital Ecosystem - Maarten Heip 20:00 – 🍹 Kleine pauze 20:15 – 📢 Compound Components: A Better Way to Build React Components - Sead Memic 21:00 – 🙋♀️ Drinks 22:00 – 🍻 Tot de volgende keer? Tijdens deze meetup gaan we dieper in op het bouwen van digitale ecosystemen en het creëren van herbruikbare React componenten. Maarten deelt zijn expertise over het ontwikkelen van een volwassen digitale infrastructuur, terwijl Sead je laat zien hoe je 'From Props Hell to Component Heaven' kunt gaan door het gebruik van Compound Components. Ze delen praktische inzichten die je direct kunt toepassen in je eigen projecten. 📍 Waar? Je vindt ons bij iO Herentals - Zavelheide 15, Herentals. Volg bij aankomst de borden 'meetup' vanaf de receptie. 🎫 Schrijf je in! De plaatsen zijn beperkt, dus RSVP is noodzakelijk. Dit helpt ons ook om de juiste hoeveelheid eten en drinken te voorzien - we willen natuurlijk niet dat iemand met een lege maag naar huis gaat! 😋 Over iO Wij zijn iO: een groeiend team van experts die end-to-end-diensten aanbieden voor communicatie en digitale transformatie. We denken groot en werken lokaal. Aan strategie, creatie, content, marketing en technologie. In nauwe samenwerking met onze klanten om hun merken te versterken, hun digitale systemen te verbeteren en hun toekomstbestendige groei veilig te stellen. We helpen klanten niet alleen hun zakelijke doelen te bereiken. Samen verkennen en benutten we de eindeloze mogelijkheden die markten in constante verandering bieden. De springplank voor die visie is talent. Onze campus is onze broedplaats voor innovatie, die een omgeving creëert die talent de ruimte en stimulans geeft die het nodig heeft om te ontkiemen, te ontwikkelen en te floreren. Want werken aan de infinite opportunities van morgen, dat doen we vandaag.
| Coven of Wisdom Herentals
Go to page for Coven of Wisdom - Herentals - Winter `24 editionThe Test Automation Meetup
PLEASE RSVP SO THAT WE KNOW HOW MUCH FOOD WE WILL NEED Test automation is a cornerstone of effective software development. It's about creating robust, predictable test suites that enhance quality and reliability. By diving into automation, you're architecting systems that ensure consistency and catch issues early. This expertise not only improves the development process but also broadens your skillset, making you a more versatile team member. Whether you're a developer looking to enhance your testing skills or a QA professional aiming to dive deeper into automation, RSVP for an evening of learning, delicious food, and the fusion of coding and quality assurance! 🚀🚀 18:00 – 🚪 Doors open to the public 18:15 – 🍕 Let’s eat 19:00 – 📢 First round of Talks 19:45 – 🍹 Small break 20:00 – 📢 Second round of Talks 20:45 – 🍻 Drinks 21:00 – 🙋♀️ See you next time? First Round of Talks: The Power of Cross-browser Component Testing - Clarke Verdel, SR. Front-end Developer at iO How can you use Component Testing to ensure consistency cross-browser? Overcoming challenges in Visual Regression Testing - Sander van Surksum, Pagespeed | Web Performance Consultant and Sannie Kwakman, Freelance Full-stack Developer How can you overcome the challenges when setting up Visual Regression Testing? Second Round of Talks: Omg who wrote this **** code!? - Erwin Heitzman, SR. Test Automation Engineer at Rabobank How can tests help you and your team? Beyond the Unit Test - Christian Würthner, SR. Android Developer at iO How can you do advanced automated testing for, for instance, biometrics? RSVP now to secure your spot, and let's explore the fascinating world of test automation together!
| Coven of Wisdom - Amsterdam
Go to page for The Test Automation Meetup