Posts about HTML, CSS, JavaScript, accessibility and browsers from the perspective of a curious front-end developer.
For shorter writings, follow @hdv.
Keyboard shortcuts can make your website or app much more keyboard friendly. But they need modifier keys.
A response to other posts about climate action
On why :focus-visible is more than a way to target keyboard users only.
There will be two levels of customisation in selectmenu: via CSS or via replacing parts.
Some notes from two talks I saw recently about making better documentation.
Is the accessibiliy of a website a binary thing? It depends!
I added a dark mode toggle to this site. This is how.
A primer to ATAG, the accessibility standard that applies to tools that create web content.
I've worked in web accessibility in various positions, this post is about how the accessibility-specialised developer's position can be difficult.
As a follow up to my previous post about common accessibility issues, I have written out five more issues that you could fix today.
In which I explain why I feel it's still a great habit to test in many different browsers and browser engines.
Some thoughts on banning certain content from communities versus not doing that.
I've updated the URL these posts live on.
Tips based on WebAIM’s “Million” survey.
On how I built a photo blog with Sanity and Eleventy.
Curiosity and crossing disciplines can result in better products.
A quick response to Dave Rupert’s post on HTML and ARIA.
A write-up of my talk about semantics.
A quick tip to make Firefox’s prefers-color-scheme implementation respect system colour preferences rather than browser theme colours.
Some attributes in ARIA are boolean(-like). These attributes may seem a lot like boolean attributes in HTML, but there are some important differences to be aware of.
I will start a new job.
I think there are lots of exciting uses for the web outside the realm of ‘web3’.
Thoughts about auto-adding lang attributes.
Some highlights from my 2021.
Many ask ‘How many users with disabilities use our site?’ We probably don’t need to know, if we need to decide whether to improve web accessibility on our sites.
A look at Facebook’s new ideas through the lense of their current endeavors.
I’m a little torn on whether to see prefers-reduced-motion as a sufficient way to meet 2.2.2 Pause, Stop, Hide. My thoughts.
I experienced my first web conference during The Situation.
I attended a conversation with Cecilia Kang. These are some thoughts about An Ugly Truth and Facebook.
Many use WCAG as a baseline to ensure web accessibility. In this post, I look at doing less and doing more than the standard.
This week I had some fun adding the experimental spicy-sections custom element to this website.
My review of Atlas of AI.
In which I argue app stores need fields for accessibility meta information.
In which I talk about why fallbacks are good.
I’ve released the code I use to generate WCAG conformance reports using the Eleventy static site generator. Here’s some context.
This post is my 150th, so I decided to write about writing and look back at some of the posts.
It may not be easy, but it is important to include perspectives outside your own.
In which I go into the difference between normative and non-normative in WCAG.
Meetings are better with queues. Here’s why.
Not all ‘accessible components’ are created equal. Find out which will work best for our end users with this checklist.
My part in a blogging chain about daily life.
Web accessibility becomes easier and cheaper, when you address it earlier.
So that I could control what and how to display.
Some highlights from my 2020.
A response to an idea to merge HTML, CSS and JavaScript into one language.
Why having no content between headings can be problematic.
A list of books about inequality and race.
I added a Reply via email link to my RSS feed.
My browser blocked 22281 trackers since July, 2019.
When we deploy a single page application with client-side routing, some server configuration is needed to make it work.
A review of Anna Wiener’s Uncanny Valley.
What if more website-owners used Minimum Viable Data Collection as their strategy for complying with privacy regulations?
Useful HTML elements like date inputs and <video> could make the web a much better place, if browser accessibility bugs in their implementations were prioritised.
Let’s explore which accessibility issues browsers could fix automatically!
A personal review of 2019.
A list of books about technology and society.
A written version of my lighting talk “Breaking barriers with your CMS”.
My notes from reading the Internet Health Report 2019.
A review of Joanna Kavenna’s novel Zed.
Write-up of the Drupal and WordPress meetup.
A reading list about equality.
Proposals for the Accessibility Object Model include a new way to convey semantics: without markup, directly in JavaScript. This post looks at the proposals and their current status.
A review of Bruce Schneier’s book Click here to kill everybody.
Inspectable accessibility trees are a great innovation that have recently come to all major browsers. This post looks at how accessibility trees inform assistive tech.
Last week I joined over 400 web nerds at CSS Day 2019, which took place once again in the lovely Compagnietheater in Amsterdam. These are some of the things I learned.
It’s a common, but fairly easy-to-fix accessibility issue: lack of indicating focus. In this post I will explain what we mean by focus and show you how focus outlines make your site easier to use.
I am joining the W3C! Some thoughts on leaving Mozilla and the City of The Hague and on joining this new team.
Some thoughts on seeing declarative component frameworks as a way to make the web more accessible, not less.
Why and how the right HTML elements can improve the user experience of people that use assistive technologies.
Write-up of the Inclusive Design and Accessibility meetup in Rotterdam on 21 March 2019.
This week I read The age of surveillance capitalism by Shoshana Zuboff. This is my review.
Are component frameworks at odds with a vanilla approach to web development? Well, partly, but not as much as I used to think. Some thoughts after I tried a framework.
A bit about designing min-content, max-content and auto, and how they can be used.
Recreating old posters, I figured there are at least two approaches to deciding how many grid tracks your component or page needs: one can make it visually perfect, the other is more flexible if content is bound to change.
It can be done by listening to focus on the document, with capturing turned on.
On lang, hreflang and BCP47.
With more people using tracking protection features, we should test our sites with content blockers.
Personal blogs are making a comeback among web folks. I like this. I have even gone so far as to add a blog roll to this site, so that you can see, fwiw, which blogs I like to read.
Highlights and things I learned this year.
One way to make SVG icons work in dark mode.
Element.scrollIntoView takes as its argument either a boolean value or an object. The object syntax gives more alignment capabilities and smooth scroll, but it works in less browsers.
This week I attended the Digital Design Ethics conference in Amsterdam. I learned about calm technology, how platforms are abused, what our options are and how to try and prevent abuse earlier. My write-up of the day.
A write-up of performance.now() conference in Amsterdam.
Some things I learned at the 2018 MozFest in London.
In cards, you could use grid tracks instead of padding.
Writeup of Accessibility London, September 2018.
Review of Smashing Book #6.
Quick summary of my experience this weekend at #HackOnMDN, a three day event where people came together to improve accessibility of and accessibility information on MDN.
Last week a poll about CSS got me thinking about the language and overlapping skills in front-end development.
Heading structures give screenreader users and others a table of contents for our sites. By being conscious of that, we can make better choices about heading levels and their contents.
Now that Grid Layout is seeing more adoption, it seems like a good time to remember that websites don’t need to look the same in all browsers.
Five books about artificial intelligence and the philosophy of AI that I can recommend.
According to WCAG 2, criterion 2.4.2, web pages should have titles. How to go about this in a single page world?
Some ways of how, as front-end developers, we can apply ethics in our work.
An introduction to CSPs for front-end developers.
A write-up of Sir Tim Berners-Lee’s ACM Turing Lecture in Amsterdam.
With display: contents, we can have more accessible markup for our CSS Grids. One caveat: supporting browsers currently break this.
On different meanings of ‘for everyone’.
I translated the Inclusive Design Principles to Dutch.
Fronteers now has a Donut-bot.
Alternative text is a great opportunity to make the non-text parts of the web accessible. However, look out for redundancy, and only add it when it conveys something that isn’t already there.
The benefits and downsides of providing a fallback for the aria-expanded attribute, and why it is now best to not provide a fallback at all.
Some tips for building password manager proof login forms.
On why I like newspaper apps that are not much more than PDF readers.
Some notes on happens when you press enter to submit a form.
Looking back at 2017.
Some things I learned at Mozilla’s All Hands in Austin
If you have learned how to use Grid Layout, you might wonder what to use it for. In this post, I will give some use cases where I think Grid will excel.
New CSS possibilities are ending the unrealistic content problem and the generic layout problem. It’s a great time to build layouts in CSS!
This month is my last at Wigo4IT, and I’m excited to start new projects at Mozilla and the Dutch Ministry of the Interior.
I’m starting to get more excited about Web Components, and think they can be very helpful to encapsulate compositions of elements.
I’ve found recruiters often look for specific frameworks, but I don’t think they are what matters in web projects.
This week I attended Brique, a new conference about design. This post contains some things I picked up.
At ICONS, three speakers shared their view on what I can only paraphrase as: to do something that matters.
My thoughts about Mozilla’s one week Accessibility Design Sprint.
Last Friday, De Volkskrant exposed how much trouble the Dutch tax office has had in recent years to build software and manage its IT projects. I’ve listed the four main things they lack according to the article.
A quick summary of the Inclusive Design and Accessibility Meetup on 20 July in Rotterdam.
Can pattern libraries be tested for accessibility? And if so, what do we test? In this post I will address those questions and look at accessibility testing in different levels of pattern library driven development.
I’ve rewritten the CSS for this blog, using Grid Layout for the lay-out. These are some of my findings.
In this article, I try to answer the question: is there much inherently wrong with setting standards for what we think is a real/good/professional/sufficient developer?
A look into the early days of CSS and changes that have occurred since.
My write-up of Patterns Day 2017, on 30 June in Brighton.
On the difference between pseudo classes and pseudo elements
My write-up of Browser API Special and CSS Day 2017.
My notes from the ICONS meetup with Léonie Watson on 31 May 2017.
Some thoughts after seeing the Ken Loach’s film I, Daniel Blake.
All interactive elements should have accessible names and can have descriptions. In this post I explain labelling with native HTML and ARIA attributes and discuss how to future-proof your labelling.
A trick to build a file upload control that uses a native input element, but looks custom.
Today I learned about the sequential focus navigation starting point, which helps browsers decide what to do with focus when you link to content that is not focusable
A few notes about Chris Bernhardt’s book Turing’s Vision: The Birth of Computer Science.
On jokes between friends and jokes on a corporate level.
A post about how the hidden attribute works, how it differs from [aria-hidden] and how it relates to just hiding with CSS.
On how to help users see which fields have errors, what’s wrong with them and how to fix it.
Looking back at over 8 years of volunteering at Fronteers. It’s been a blast!
My notes from Harry Roberts’ performance workshop in Amsterdam on 9 March, 2017.
My notes from the Inclusive Design and Accessibility meetup, 20 February 2017 in Amsterdam.
This is how to temporarily trap focus in an element, a functionality that can be used to make modal interface elements more accessible.
In this post I explain why I think declaring behaviour in markup is advantageous rather than problematic.
Some clarification on why I left the Fronteers board, what was decided at this year’s members meeting and what the Fronteers future now looks like.
My review of Inclusive Design Patterns by Heydon Pickering
My notes from From The Front 2016.
Some thoughts about standards when it comes to cursors for buttons.
My takeaways from the Progressive Web App Dev Summit, organised by Google in Amsterdam.
Write-up of Jeremy Keith’s talk at ICONS in Amsterdam.
My notes from NCDT, the Dutch digital accessibility conference
My notes from ConfConf, the conference for conference organisers.
Some notes I wrote after reading the CSS Grid Layout specification.
My thoughts about styling with classnames versus styling with HTML elements. TL;DR: we need both.
When it comes to loading custom typefaces in CSS, use a font loading strategy instead of the default browser behaviour
My write-up of Fronteers Spring Conference 2016.
On the cognitive overhead of cascading
Write-up of World IA Day 2016 in Bristol
Protip for working on WordPress sites using a slow connection
About a workflow for improving the accessibility of conference videos
By documenting a web design as a system of components, your website can be an instantiation of your design system.
What’s the difference?
I like WordPress plug-ins that do not insert their own CSS or JavaScript.
We can soon use ‘just’ CSS to describe our lay-outs. But, arguably, that leaves us with a naming problem.
I think for large websites and organisations, in addition to having a component system, it makes sense to have one agreed-upon, shared-between-projects grid system.
I think when designing apps that work offline, we should consider user intent and let users choose which content becomes available offline.
Web Components give developers lots of freedom, but also a big responsibility. In this post, I look at the kind of components we need.
Write-up of Responsive Day Out 3, on 20 June 2015 in Brighton
Every time you add HTML to a page, think ‘what does this expose to the accessibility tree?’ My notes from Léonie Watson’s talk at Accessible Bristol.
Website slowness is optional, and I think that it can and should be avoided. The web is fast by default, let’s keep it fast.
To solve CSS problems, it is much more important to understand the spec and how browsers implemented it, than which abstraction to use.
Google’s algorithm for deciding wether sites are “mobile friendly” is great, but not perfect. In this article, I go into other things we could do to make sites more mobile friendly.
This website is now only available over HTTPS. Some notes on why and how I did it.
Some notes about the Accessible Bristol meetup about cognitive accessibility
In which I describe how to do progressive enhancement by declaring handler and enhancer functions on HTML elements.
My review of Scott Jehl’s recent book ‘Responsible Responsive Design’.
A summary of Collaborate Conference in Bristol
A review of PPK’s Mobile Web Handbook
Why not adapt lay-out for languages, like we do for screen widths?
On the 27th of July, I went to Responsive Day Out 2 in Brighton.
My notes from Museums get Mobile, 16 May 2014 in Bristol.
When improving front-end skills, we improve our knowledge of HTML, CSS and JavaScript first and at our knowledge of specific tools later.
At State of the Browser, I saw talks about things like @viewport, Service Workers, responsive images and Firefox OS. My notes of the day.
In which I show a trick to embed videos responsively and how to make it work with Wordpress.
I went to London to meet the TAG, where things like the web’s design principles, drm, web components and URLs were discussed.
Explaining two ways of adding icons whilst offering a basic alternative.
Handheld 2013 was about a variety of subjects, including struture, client expectations and data poetry. A round-up.
Notes from Mark Boulton’s workshop.
A write-up of a wonderful day at the MShed in Bristol.
Some notes after reading Anna Debenham’s Pocket Guide.