DEV Community

Jared Bears
Jared Bears

Posted on

6 2

Today I found a great example...

Continuing on my post about accessibility from the other day, earlier I was signing up for an account on a website, and I think I may have found a perfect example of some of the features I was mentioning the other day.

First: It is not a traditional CAPTCHA, although it does feel similar to one:

LibraryThing's Robot Check Page
Above is LibraryThing's Robot Check Page. First you will note that it is thematically appropriate, instructing the user to select "cookbooks and other books about food or drink" from a series of images.

Inspect Element results for Library Thing
When you use your browser's developer tools to inspect the form, you will see that it appropriately uses ARIA labels and alt descriptions to accurately describe the different options it is requesting you to select from. Here, the book is The Blighted Stars (Volume 1) (The Devoured Worlds, 1).

Those with visual impairments should have no problem understanding the prompt, and assessing each option. I believe that most, even if not familiar with the book, would be able to assess the title and determine that it is not a cook book.

LibaryThing invitation 'Contact Us' if there are difficulties completing the CAPTCHA
And finally, at the bottom of the page, they include an advisement explaining the purpose of the robot test, and inviting you to reach out if you have any difficulties completing it. This of course shows that, while it may be impossible to prepare for every eventuality, you should still be willing to provide a recourse for those who still cannot access your site despite your best attempts.

I'm sure, of course, there are downsides to this approach. A bot probably, eventually, could be programmed to identify book genres from their covers. In fact, I'd imagine we are on our way to that very outcome. Additionally, including a "contact us" link may increase the amount of spam emails they receive.

All things considered, I think this is a great example of attempting to balance security with accessibility. I also think it goes to show how much we can all benefit if we "inspect" the sites we all visit every day! You'll be amazed at the tips and tricks you can discover.

Related:
How to use Inspect Element in Chrome, Safari, and Firefox

Image of Timescale

πŸš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsβ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post β†’

Top comments (2)

Collapse
 
mpfdev profile image
Matheus πŸ‡§πŸ‡· β€’

I really enjoyed this post. It's a great example of how balance security with accessibility.

Thanks for sharing!

Collapse
 
quitebearish profile image
Jared Bears β€’

Hi Matheus, I'm glad you found it useful! I've been trying to look at every interaction online as a learning opportunity, it has certainly helped me see the internet in a new way!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay