Accessibility
All links tagged with accessibility.Getting the details on aria-details | scottohara.me
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.
Tags:
The Links vs. Buttons Showdown — Marcy Sutton: #ID24 Nov 2017
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...
Tags:
Link Targets and 3.2.5
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…
Tags:Block Links, Cards, Clickable Regions, Etc.
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 (…
Tags:Short note on aria-label, aria-labelledby, and aria-describedby
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
Tags:
Describing aria-describedby
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
Tags:
Flexbox & the keyboard navigation disconnect – Tink
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.
Tags:Why You Should Choose HTML5 <article> Over <section> — Smashing Magazine
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.
Tags:
Just use button -- A11ycasts #05
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...
Tags:
Unbuttoning Buttons | scottohara.me
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...
Tags:Why <details> is Not an Accordion
tl;dr - <code><summary></code> is a button and buttons eat semantics
Tags:
Details / Summary Are Not [insert control here]
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…
Tags:The details and summary elements | scottohara.me
The details and summary elements are two of HTML’s interactive elements and together are the elements that create a native disclosure widget.
Tags:Having an open dialog | scottohara.me
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...
Tags:How do you figure? | scottohara.me
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...
Tags:On Use of the Lang Attribute
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…
Tags:Native image lazy-loading for the web!
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&...
Tags:
Native lazy-loading for the web
This post covers the loading attribute and how it can be used to control the loading of images and iframes.
Tags:
Styled Meter
Tags:Styled Progress Bar
Tags:<select> your poison - 24 Accessibility
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…
Tags:
<select> your poison part 2: test all the things - 24 Accessibility
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…
Tags:Accessible SVGs | CSS-Tricks
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,
Tags:Using the tabindex attribute
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
Tags:
Tabindex: it rarely pays to be positive | scottohara.me
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...
Tags:Controlling focus with tabindex -- A11ycasts #04
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...
Tags:
The Trials and Tribulations of the Title Attribute - 24 Accessibility
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.
Tags:
Using the HTML title attribute – Updated March 2020
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
Tags:
Is input type=“date” ready for use in accessible websites? - Hassell Inclusion
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 …
Tags:
Why the GOV.UK Design System team changed the input type for numbers
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
Tags:
Creating an Accessible Range Slider with CSS
I’ve always loved exploring how to make semantic, accessible elements aesthetically pleasing. And yes, it is possible. Challenging myself to…
Tags:
Maybe Ignore type=search
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…
Tags:How accessible is the HTML video player?
Comparing keyboard and screen reader accessibility of native video players.
Tags:
Display: Contents Is Not a CSS Reset
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…
Tags:More accessible markup with display: contents
The website of Hidde de Vries, freelance front-end developer.
Tags:“Fixing” Lists | scottohara.me
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...
Tags:VoiceOver and list-style-type: none
With that bit of additional CSS, we are able to return the list semantics for VoiceOver users without needing to touch the markup.
Tags:
Fixed Table Headers
Related A Responsive Accessible Table Hey, It’s Still OK to Use Tables Keyboard and Overflow
Tags:Position Sticky and Table Headers | CSS-Tricks
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: