Here’s a great post by Ahmad Shadeed on making sure that clickable areas in our interfaces are, well, clickable. He writes about making sure that links, buttons and other elements meet accessibility standards for both touch and mouse, too.… Read article
Multi-Million Dollar HTML
Two stories:
- Jason Grigsby finds Chipotle's online ordering form makes use of an input-masking technique that chops up a credit card expiration year making it invalid and thus denying the order. If
pattern="\d\d" maxlength="2"was used instead (native browser feature), the browser is smart enough to do the right thing and not deny the order. Scratchpad math, based on published data, makes that worth $4.4 million dollars. - Adrian Roselli recalls an all-too-common form accessibility fail of missing a
for/
Table with Expando Rows
Shared by
Chris Coyier
Chris Coyier
"Expando Rows" is a concept where multiple related rows in a <table></table> are collapsed until you open them. You'd call that "progressive disclosure" in interaction design parlance.
After all these years on CSS-Tricks, I have a little better eye for what the accessibility concerns of a design/interactivity feature are. I'm not entirely sure how I would have approached this problem myself, but there is a good chance that whatever I would have tried wouldn't have hit the bullseye with accessibility. … Read article
Weekly Platform News: Emoji String Length, Issues with Rounded Buttons, Bundled Exchanges
In this week's roundup, the string length of two emojis is not always equal, something to consider before making that rounded button, and we may have a new way to share web apps between devices, even when they are offline.… Read article
Need to scroll to the top of the page?
Perhaps the easiest way to offer that to the user is a link that targets an ID on the <html></html> element. So like...
<html id="top">
<body>
<!-- the entire document -->
<a href="#top">Jump to top of page</a>
</body>
</html>But we've got a few options here.… Read article
Accessibility and web performance are not features, they’re the baseline
This week I’ve been brooding about web performance and accessibility. It all began when Ethan Marcotte made a lot of great notes about the accessibility issues that are common with AMP:
… Read articleIn the recordings above, I’m trying to navigate through the AMP Story. And as I do, VoiceOver describes a page that’s impossible to understand: the arrows to go back or forward are simply announced as “button”; most images are missing text equivalents, which is why the screen reader
A More Accessible Portals Demo
Shared by
Chris Coyier
Chris Coyier
The point of the <portal> element (behind a flag in Chrome Canary) is that you can preload another whole page (like <iframe>), but then have APIs to animate it to the current page. So "Single Page App"-like functionality (SPA), but natively. I think that's pretty cool. I'm a fan of JavaScript frameworks in general, when they are providing value by helping do things that are otherwise difficult, like fancy state management, efficient re-rendering, and component composition. … Read article
Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your site
In this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.
Improving Video Accessibility with WebVTT
"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
- Tim Berners-Lee
Accessibility is an important element of web development, and with the ever-growing prevalence of video content, the necessity for captioned content is growing as well. WebVTT is a technology that solves helps with captioned content as a subtitle format that integrates easily with already-existing web APIs.
That’s what we’re going to look at here in this article. … Read article
Weekly Platform News: Mozilla’s AV1 Encoder, Samsung One UI CSS, DOM Matches Method
In this week's weekly roundup, Vimeo and Mozilla partner up on a video encoding format, how to bind instructions to to form fields using aria labels, the DOM has a matching function, and Samsung is working on its own CSS library.