Cool shit from the wwweb #1

In this format, I will share everything I find interesting at random intervals. Most of the time it will have to do with web development and accessibility, but not always! You can find a list of these posts by clicking on the micro-blog under “Related Tags”.

Table of contents

• Real Talk on Web Accessibility with Marcy Sutton Todd
• Linking Directly to Web Page Content
• The Accessibility Operations Guidebook
• Progressive enhancement at gov.uk
• Website speed (Mc)master class

Real Talk on Web Accessibility with Marcy Sutton Todd

Watch “Real Talk on Web Accessibility with Marcy Sutton Todd” on YouTube

Marcy touched on a couple of interesting topics I was somewhat aware of, but now I understand them way better. Here’s a short list of them:

• focus-within
• focus-visible
• NVDA element list
• Accessibility support

My biggest takeaway was that the placeholder attribute is part of the accessible name calculation. 🤯 Of course you should always associate a <label> to an <input>, but apparently placeholders are recognized by assistive technology if no label is present.

Further reading

• Providing Accessible Names and Descriptions
• Testing Accessibility — by Marcy Sutton

Linking Directly to Web Page Content

Smarter than ‘Ctrl+F’: Linking Directly to Web Page Content by Ahmad Alfy

Saw this one in Cassidy Williams newsletter and had no idea it existed! If you want to link to a certain text section in your document, you can do this, for example:

Basic syntax:

https://example.com/page.html#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

Real example:

https://developer.mozilla.org/en-US/docs/Web/URI/Fragment/Text_fragments#:~:text=without%20relying%20on%20the%20presence%20of%20IDs

Which can look like this, depending on your browser:

The Accessibility Operations Guidebook

The Accessibility Operations Guidebook by Devon Persing

This was recommended by someone else on Mastodon and I was very intrigued, because it’s not about how to do accessibility, but rather what it’s like to work in this particular field. Read a good chunk of it and it really puts things in perspective.

Progressive enhancement at gov.uk

Building a robust frontend using progressive enhancement

Short and sweet article about the benefits of creating a robust frontend leveraging the power of HTML, CSS and JavaScript. Bookmark this one and show it to whoever, who thinks that (blazingly fast) JavaScript framework XYZ is the best way to build a simple landing page.

Website speed (Mc)master class

Watch “How is this Website so fast!?” on YouTube

Interesting look under the hood of the McMaster Carr website by Wes Bos to find out how it can be so old and so fast at the same time.