Disclaimer: the following is not a dig at JSFest, I just used their website as a demo at the event. It is a common problem many people have on their sites, so it is a good example to use.

One feature you see on a lot of “modern” web sites is that activating the menu items smoothly scrolls to the section you chose. It is good UX, as people see that they are going to another section. It also feels much smoother than simply jumping to it. When there are any JS errors, you still have a full page you can scroll. If you properly linked your navigation items with links pointing to fragment identifiers, it even works without JavaScript and as a bookmarking feature.

<ul>
  <li><a href="#cakes">Cakes</a></li>
  <li><a href="#cookies">Cookies</a></li>
  <li><a href="#desserts">Desserts</a></li>
  <li><a href="#remedies">Remedies</a></li>
</ul>
… 
<h2 id="cakes">Cakes</h2>
… 
<h2 id="cookies">Cookies</h2>
…
<h2 id="desserts">Desserts</h2>
…
<h2 id="remedies">Remedies</h2>
…

However, we can really make it hard for keyboard and screenreader users when we forget to set the focus to the element we scrolled to. Just because it is in the viewport, doesn’t mean the keyboard focus moved there.

What does this mean? Let’s take a look at this screencast. As a keyboard user, you need to hit “tab” seven times to reach the “prices” link. Activating it does scroll the correct section into view. However, if all you can do is hit tab and you can’t see the change, it needs an additional 107(!) “tab”s to times to really reach the section.

The remedy is easy:

• Ensure that your target sections of your menu are keyboard accessible landmarks in the document with IDs. This also has the benefit that anyone following a “yoursite.com#target” link will get to that section
• After you scrolled to the section, move the keyboard focus programmatically from the menu item to the target section using focus() and – if needed – by setting a tabIndex.

If you want to test this on your own sites, install the accessibility insights extension for Chrome or (new) Edge.
You will get a heart icon in your browser and a choice of tools to run on the current site:

Select the “Ad hoc tools” to get the extension to overlay accessibility issues on the current document:

Once you turned on the “Tab Stops” option you get a confirmation that the extension is running:

Hitting tab now will start showing you the tab stop journey across your document, which helps you find issues like these. Often these are easy to fix, and make a huge difference.

Two weeks ago I went to Kiev, Ukraine to speak at the JavaScript FWDays conference. I gave the closing keynote talking about what matters on the web and how we can create a better one by moving our best practices into our development flow.

The video is now available on Youtube

The slides and resources mentioned in the talk are available on noti.st

View Hinting at a better web FWDays edition on Notist.

A few days ago, I flew to Paris to meet with Prismic and record a few videos on web topics. Today they released the first video where I talked about web performance, mistakes to avoid and tools to use to make your apps faster.

Here are the topics in detail:

• 0:59 Managing performance on a browser, things we do wrong
• 2:35 Improving your performance: image optimization and tooling
• 5:27 Optimizing JavaScript download and execution time
• 8:45 Using CSS instead of JavaScript
• 9:51 Tooling advice for better performance
• 11:58 How can GraphQL help for optimizing queries, download only what you need
• 13:40 Perspective: Opportunities in the new standards of the web with HTTP2, Service workers

Discussed tools:

• Cloudinary
• Imgix
• Squoosh
• Webpack
• Webhint
• Lighthouse
• GraphQL

And in the “things I always wanted to have” camp, I just wrote myself a small bookmarklet that switches from a GitHub repository and its Pages back and forth.

You can get it on its GitHub repo: GitHub Toggle

It is not clever, and for now only works with index.html pages, as I didn’t want to use any storage.

Here’s a GIF showing it in action:

As people complained that I post too many links to follow on Twitter (it is my stream of consciousness – as I find it, I post it), I’m starting to release these link lists every few days now. Hopefully that helps.

• Pure CSS Drawing Essentials – the top 5 CSS properties Diana Smith relies on to produce her incredible pure CSS art
• Pure CSS lettering, a bad and fun idea- this is a terrible idea, but shows how powerful generated content is
• “What’s next for CSS? CSS DB is a super useful resource showing the up and coming CSS ideas and their implementation across browsers.
• Using CSS Grid the right way – don’t like the title, but some good research there.
• A look at CSS hyphenation in 2019 – not quite here.
• The only reason your CSS fails – it’s not the language, it is how we learn it. Or fail to learn it.
• Rachel Andrew on how to deal with aspect ratios in CSS
• Start your project with a remedy for the technical debt of CSS.
• Flexbox Case Studies – Flexbox is nowaday one of the problem solvers you should master to help you in your working daily habits. Follow those little demonstrations and case studies to learn more about CSS Flexbox Layout, step by step, and become a Flexbox Ninja!