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:

In 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

… Read article
The post Accessibility and web performance are not features, they’re the baseline appeared first on CSS-Tricks.

Link: https://css-tricks.com/accessibility-and-web-performance-are-not-features-theyre-the-baseline/

A More Accessible Portals Demo

The point of the 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
The post A More Accessible Portals Demo appeared first on CSS-Tricks.

Link: https://codepen.io/stevef/post/short-note-on-the-portals-element

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.
The post Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your site appeared first on CSS-Tricks.

Link: https://css-tricks.com/weekly-platform-news-css-marker-pseudo-element-pre-rendering-web-components-adding-webmention-to-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

Link: https://css-tricks.com/improving-video-accessibility-with-webvtt/

How accessibility trees inform assistive tech

The web was designed with built-in features to make accessibility possible; these have been part of the platform pretty much from the beginning. In recent times, inspectable accessibility trees have made it easier to see how things work in practice. In this post we look at how “good” client-side code (HTML, CSS and JavaScript) improves the experience for users of assistive technologies, and how developers can use accessibility trees to help verify that these users aren’t left out.
The post How accessibility trees inform assistive tech appeared first on Mozilla Hacks – the Web developer blog.

Link: https://hacks.mozilla.org/2019/06/how-accessibility-trees-inform-assistive-tech/

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.
The post Weekly Platform News: Mozilla’s AV1 Encoder, Samsung One UI CSS, DOM Matches Method appeared first on CSS-Tricks.

Link: https://css-tricks.com/weekly-platform-news-mozillas-av1-encoder-samsung-one-ui-css-dom-matches-method/