Articles

Element.focus vs aria-activedescendant

When you build JavaScript components, you need to manage focus for both keyboard users and screen readers. The WAI-ARIA specs say there are two ways to manage focus:

  1. Using element.focus and tabindex
  2. Using aria-activedescendant

Which should you use and why?

I did in-depth research on these two methods and I’d like to share my findings in this article. Take a seat and grab some popcorn because it’s going to be a long article.

Overcoming my panic towards accessibility

Accessibility is a big part of JavaScript. If you build anything with JavaScript, you need to make them accessible.

I’ve been afraid of touching accessibility for a few years now. This fear magnified when I began writing the accessibility lessons for Learn JavaScript.

Today, I want to share with you why I became afraid of accessibility, and how I overcame this fear.

Two interesting JavaScript books

I deleted many resources I found useful because I restricted myself to sharing only blog posts here.

I want to change things up by sharing things I found helpful. I’ll send them once a month. Let me know if you enjoy this new format, or if you have any feedback!

Without further ado, let’s jump in.

Designing Learn JavaScript’s course portal

Learn JavaScript is my flagship JavaScript course. It helps people go from knowing nothing about JavaScript to becoming a professional JavaScript developer.

Today, I want to share with you how I designed Learn JavaScript’s course portal.

Learn JavaScript login page.

Getting keyboard-focusable elements

If you create JavaScript widgets, one of the key parts to accessibility is managing focus.

To manage focus, you need to find keyboard-focusable elements.

Multi-line gradient links

When I saw the CSS Tricks redesign, I was hooked. I loved the links with gradients. I told myself I’m going to use gradient links for my next project.

That’s what I did for Learn JavaScript’s course portal. The links look like this:

Blue color link with blue underline. When hovered, the text has an orange to yellow gradient; underline becomes solid orange.

I want to share what I learned about creating gradient links

Hold on while i sign you up…

🤗
Woohoo! You’re in!
Now, hold on while I redirect you.