Black Lives Matter! ✊🏾

Accessibility

All links tagged with accessibility.
  1. Getting the details on aria-details | scottohara.me

    posted on

    Introduced in ARIA 1.1, aria-details is meant to help convey that there is additional information available for a particular element a user is interacting with.

  2. The Links vs. Buttons Showdown — Marcy Sutton: #ID24 Nov 2017

    posted on by Marcy Sutton

    Who would win in a showdown between HTML Links and Buttons? Marcy Sutton will settle it once and for all by pitting these opponents against each other in a d...

  3. Link Targets and 3.2.5

    posted on by Adrian Roselli

    TL;DR: 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. Overview Throughout this post I am going to use the terms browser window and tab interchangeably. While they…

  4. Block Links, Cards, Clickable Regions, Etc.

    posted on by Adrian Roselli

    Whether you call them cards, block links, or some other thing, the construct of making an area of content clickable (tappable, Enter-key-able, voice-activatable, etc.) is not new. While hit area size is mostly a usability issue, marketers often want a larger click area around their calls to action (…

  5. Using the aria-current attribute - Tink - Léonie Watson

    posted on

  6. aria-current_attribute (aria) | Accessibility Support

  7. Short note on aria-label, aria-labelledby, and aria-describedby

    posted on

    Be careful when you use the aria-label, aria-labelledby, and aria-describedby attributes, because they do not work consistently with all HTML elements. This is a short note on when (and when not) to u

  8. Describing aria-describedby

    posted on

    A well-designed user interface (UI) should clearly identify important content and controls. Often people correlate this to using prominent visual cues to help guide individuals through a task or point

  9. Flexbox & the keyboard navigation disconnect – Tink

    posted on by Léonie Watson

    The only viable way (in my opinion) for the flexbox disconnect to be resolved, is in the browser (as with the Firefox “bug”) and the accessibility tree.

  10. Why You Should Choose HTML5 <article> Over <section> — Smashing Magazine

    posted on by Bruce Lawson

    In this article, Bruce Lawson explains what use we have of `` and how authors should mark up headings that are hugely important to AT users.

  11. Just use button -- A11ycasts #05

    posted on by Rob Dodson

    Talking about tabindex and custom controls is super fun, and we’ll definitely be doing more of it in the future. But I wanted to pause for a moment and shine...

  12. Unbuttoning Buttons | scottohara.me

    posted on by Scott O'Hara

    Regardless of how one might feel about using CSS to disguise an HTML element as another, it can’t be denied that it’s a common, and sometimes necessary, prac...

  13. Why <details> is Not an Accordion

    posted on by Dave Rupert

    tl;dr - <code><summary></code> is a button and buttons eat semantics

  14. Details / Summary Are Not [insert control here]

    posted on by Adrian Roselli

    Once major browsers started supporting <details> & <summary> developers immediately started to play with them to see what sorts of patterns they could enhance or replace. This is a good thing. Experimentation pushes boundaries, improves understanding. However, we need to be careful of christening th…

  15. The details and summary elements | scottohara.me

    posted on by Scott O'Hara

    The details and summary elements are two of HTML’s interactive elements and together are the elements that create a native disclosure widget.

  16. Having an open dialog | scottohara.me

    posted on by Scott O'Hara

    I’ve written about building accessible modal dialogs a few times over the past five-ish years. Most recently I dissected the current state of modal dialog ac...

  17. How do you figure? | scottohara.me

    posted on by Scott O'Hara

    Introduced as part of HTML5, the figure and figcaption elements are meant to create a meaningful markup structure that: provides a descriptive label to a pi...

  18. On Use of the Lang Attribute

    posted on by Adrian Roselli

    Way back in October I noticed this WHATWG HTML bug (26942) where someone asked why do these examples of <html> lack the lang attribute? I thought the answer from Hixie was a bit dismissive and not based on any data or real-world benefits of use, particularly in the context of…

  19. Native image lazy-loading for the web!

    posted on by Addy Osmani

    In this post, we’ll look at the new loading attribute which brings native <img> and <iframe> lazy-loading to the web!. For the curious, here&...

  20. Native lazy-loading for the web

    posted on by Houssein Djirdeh

    This post covers the loading attribute and how it can be used to control the loading of images and iframes.

  21. Styled Meter

    posted on by Scott O'Hara

  22. Styled Progress Bar

    posted on by Scott O'Hara

  23. <select> your poison - 24 Accessibility

    posted on by Sarah Higley

    If the web accessibility community were to somehow collectively agree on a single rallying cry, it could easily be “use native, semantic HTML elements.” This, like most things in accessibility, is an oversimplification, but it is a helpful one. As 2019 draws to a close, many of the popular component…

  24. <select> your poison part 2: test all the things - 24 Accessibility

    posted on by Sarah Higley

    TL:DR; Jump straight to the recommendations In part 1 of this deep dive, we took a broad look at both how the native <select> element works across browsers and platforms, and the current state of accessible custom select component implementations. It’s necessary to look at how fragmented current sel…

  25. Accessible SVGs | CSS-Tricks

    posted on by Heather Migliorisi

    Scalable Vector Graphic (SVG) is emerging as the preferred graphic format to use on the web today. Are you abandoning the icon font or replacing old pg,

  26. Using the tabindex attribute

    posted on by Léonie Watson

    The HTML tabindex attribute is used to manage keyboard focus. Used wisely, it can effectively handle focus within web widgets. Used unwisely however, the tabindex attribute can destroy the usability o

  27. Tabindex: it rarely pays to be positive | scottohara.me

    posted on by Scott O'Hara

    HTML’s tabindex attribute may be used to modify whether an element can receive keyboard focus, or not. It’s an attribute that can be quite beneficial in crea...

  28. Controlling focus with tabindex -- A11ycasts #04

    posted on by Rob Dodson

    Whenever possible you want to use native HTML elements for your custom controls. The button tag, for instance, is very easy to style, and has built-in keyboa...

  29. Using tabindex | Web Fundamentals | Google Developers

    by Meggin Kearney

    Modifying the DOM order with tabindex

  30. The Trials and Tribulations of the Title Attribute - 24 Accessibility

    posted on

    Scott O’Hara returns, not with prose, but with a little history on the title attribute, it’s unintended misuse by developers, and where it can and should be used to improve the accessibility on your website.

  31. Using the HTML title attribute – Updated March 2020

    posted on

    Note: This post has the same content as our 2013 post. They each originally addressed different aspects of the title attribute, but now they match. We are keeping both of them to account for inb

  32. Is input type=“date” ready for use in accessible websites? - Hassell Inclusion

    posted on

    One of the ‘new’ HTML5 elements - input type=“date” - was intended to simplify the collection of dates on websites, and to reduce user errors whilst doing so. So is it well supported? And does using it help make forms more accessible? We took date inputs for a test drive with different browsers and …

  33. Why the GOV.UK Design System team changed the input type for numbers

    posted on by Hanna Laakso, GDS, Frontend Developer

    We take a look at why the GOV.UK Design System changed the element it uses for inputting numbers, making it more accessible and easier to use

  34. Creating an Accessible Range Slider with CSS

    by Lindsey Kopacz

    I’ve always loved exploring how to make semantic, accessible elements aesthetically pleasing. And yes, it is possible. Challenging myself to…

  35. Maybe Ignore type=search

    posted on

    Another case of the headline saying it all. If you have a valid, accessible search field (with a useful, sensible label) then you can probably ignore type=”search” and use type=”text” instead. I made a code sample you can use for testing in your preferred set-up; it is what I used…

  36. How accessible is the HTML video player?

    posted on by Scott Vinkle

    Comparing keyboard and screen reader accessibility of native video players.

  37. Display: Contents Is Not a CSS Reset

    posted on by Adrian Roselli

    CSS resets are a collection of CSS styles that undo the default browser styling of many or most HTML elements. Recently I have seen cases of developers using display: contents on lists and headings to remove the margins and padding, and generally to visually do what a CSS reset might…

  38. More accessible markup with display: contents

    posted on by Hidde de Vries

    The website of Hidde de Vries, freelance front-end developer.

  39. “Fixing” Lists | scottohara.me

    posted on by Scott O'Hara

    In September of 2017 Gerard K. Cohen of Unfettered Thoughts posted an article on the how VoiceOver and Safari (Webkit) (macOS and iOS) remove list element se...

  40. VoiceOver and list-style-type: none

    posted on by Unfettered Thoughts

    With that bit of additional CSS, we are able to return the list semantics for VoiceOver users without needing to touch the markup.

  41. Fixed Table Headers

    posted on by Adrian Roselli

    Related A Responsive Accessible Table Hey, It’s Still OK to Use Tables Keyboard and Overflow

  42. Position Sticky and Table Headers | CSS-Tricks

    posted on by Chris Coyier

    You can’t position: sticky; a . Nor a . But you can sticky a , which means you can make sticky headers inside a regular ol’ . This is tricky stuff,

Tags