A rather geeky/technical weblog, est. 2001, by Bramus
Text fields are probably one of the most used interface components; contact forms, payment details, account creation, lead generation. Users definitely need to interact with text fields when using your product. The purpose of this post is to highlight some of the key guidelines which I follow when it comes to designing better text fields. …
Using CSS Counters, Josh W Comeau injects his own number in ordered lists. That way he can style the number itself separately. ol li { counter-increment: muffins; } ol li:before { content: counter(muffins) ". "; color: hotpink; } ol { list-style: none; counter-reset: muffins; } Apart from styling, I find this technique come in handy …
Adrian Roselli: Too often folks will grab ARIA first to provide an accessible name for a thing. Or they may sprinkle hidden content around a form. In most cases the impact of those decisions is unknown. The assumption that they do the same thing, give the same output to all users, is wrong. In short, …
Continue reading “Methods for assigning an accessible name to a form control”
<ol>‘s start and reversed attributes (and more) #HTML tip for today: <ol> element has `start` and `reversed` attributes! Some examples where it's useful:`start` → paginated results`reversed` → "top 10 best … " lists pic.twitter.com/vkh88h2zGV — Tomek Sułkowski (@sulco) March 20, 2020 Handy for those end-of-year lists 😉 ~ Apart from overriding the list style using CSS’s list-style-type (which you should set it …
Continue reading “<ol>‘s start and reversed attributes (and more)”
Josh W. Comeau, on embracing modern image formats to ship less bytes to browsers. As not all browsers understand all image formats (Apple/Safari for example doesn’t support .webp, an image format developed by Google) he resides to the picture element with various sources set. <picture> <source srcset="/images/cereal-box.webp" type="image/webp" /> <source srcset="/images/cereal-box.jp2" type="image/jp2" /> <img src="/images/cereal-box.jxr" …
Christian Heilmann created a demo page where a user can add an image to the page through various ways. I gave myself the task to build an interface to make it as easy as possible for a user to add an image into the document. I wanted to support: Image upload Drag and Drop Copy …
Continue reading “Fun with browsers: how to get an image into the current page”
Dave Rupert: I’ve always abided in the idea that “HTML is accessible by default and then we come along and mess it up. But that’s not always the case. There are some cases where even using plain ol’ HTML causes accessibility problems. I’m going to start rounding up those HTML shortfalls in this here post …
<input type="number" /> The fine folks at GOV.UK: Until now, the GOV.UK Design System date input component used the HTML element <input type=”number” /> to provide a number keypad when a user enters dates. However, we recently moved away from <input type="number"> to <input type="text" inputmode="numeric" pattern="[0-9]*"> Why the GOV.UK Design System team changed the input type for …
Continue reading “Why you should probably avoid using <input type="number" />“
Something we already knew, but that’s now written down by Adrian Roselli in a nice post: Regardless of what accessibility conformance level you target, do not arbitrarily open links in a new window or tab. If you are required to do so anyway, inform users in text. Great to see that the statement is backed …
Continue reading “You shall not open links in a new window or tab”
I like using data attributes in my markup (data-*), CSS ([data-*]), and JS (el.dataset). This post on CSS-Tricks writes down exactly how I use them. Especially the different type of attribute selectors are really powerful: // Seven different types of CSS attribute selectors // This attribute exists on the element [value] // This attribute has …