accessibility Archives | Page 3 of 11

Link July 31, 2019

A More Accessible Portals Demo

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

Our Notes / Read at codepen.io

Article July 18, 2019

Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your site

Author

Šime Vidas

3 Comments

Go to Comments

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.

accessibility marker web components webmentions

Article July 17, 2019

Improving Video Accessibility with WebVTT

Author

Khari McMillian

5 Comments

Go to Comments

"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

accessibility captioning video webvtt

Article June 21, 2019

Weekly Platform News: Mozilla’s AV1 Encoder, Samsung One UI CSS, DOM Matches Method

Author

Šime Vidas

4 Comments

Go to Comments

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.

accessibility aria mozilla samsung vimeo

Article June 18, 2019

How to Section Your HTML

Author

Daniel Tonon

39 Comments

Go to Comments

👋 It has been brought to our attention in the comments (and on Twitter) that some of the techniques used in this article result in a poor user experience for screen reader users. We'll be making updates to make sure the article reflects the best possible information. For now, please see Adrian Roselli's Code Pen below for a more appropriate approach to sectioning the example layout. Thanks for being such an awesome community where we can all learn … Read article

accessibility document outline screen readers semantics

Article June 13, 2019

A11Y with Lindsey

Author

Chris Coyier

Comments

Go to Comments

Lindsey Kopacz has a wonderful blog about accessibility. I've seen a number of her articles making the rounds lately and I was like, dang I better make sure I'm subscribed. For example:

Regarding that last one, I remember learning from Sara Soueidan that a good tip for this to position them over the new custom checkboxes and hide them via opacity … Read article

accessibility checkboxes

Link June 12, 2019

Grid, content re-ordering and accessibility

Shared by
Chris Coyier

Take this:

<ol>
  <li>Get hungry</li>
  <li>Order pizza</li>
  <li>Eat pizza</li>
</ol>

That HTML ends up in the DOM that way (and thus how it is is exposed to assistive technology), and by default, those list items are also visually shown in that order. … Read article

Our Notes / Read at rachelandrew.co.uk

accessibility flexbox grid

Article June 3, 2019

Do you need an ICON ONLY button without screwing up the accessibility?

Author

Chris Coyier

6 Comments

Go to Comments

The first consideration is: do you really? If you can, having text next to your icons is proven over and over again to be the most accessible and clearest UX (see Apple's latest blunder). But if you need to (and I get it, sometimes you need to), Sara Soueidan and Scott O'Hara have a pair of articles that nicely lay out all the options and present actual research on this topic.

Sara Soueidan: Accessible Icon Buttons
Scott O'Hara: Contextually

… Read article

accessibility icons SVG

Article May 31, 2019

Weekly Platform News: Favicon Guidelines, Accessibility Testing, Web Almanac

Author

Šime Vidas

3 Comments

Go to Comments

In this week's news, Google defines guidelines for favicons, a new a11y testing tool from The Paciello Group, and changes to how the W3C plans to engage the community, plus more.

accessibility favicon security subgrid

Link May 31, 2019

Reducing motion with the picture element

Shared by
Robin Rendle

Here’s a bonafide CSS/HTML trick from Brad Frost and Dave Rupert where they use the <picture></picture> element to switch out a GIF file with an image if the user has reduced motion enabled. This is how Brad goes about implementing that:

<picture>
  <!-- This image will be loaded if the media query is true  -->
  <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)"/>

  <!--  Otherwise, load this gif -->
  <img srcset="animated.gif" alt="brick wall"/>
</picture>

… Read article

Our Notes / Read at bradfrost.com

accessibility prefers-reduced-motion