Quantcast
Channel: Scott O’Hara - Accessibility engineer, UX developer and designer
Browsing all 45 articles
Browse latest View live

Image may be NSFW.
Clik here to view.

Fallback considerations for ARIA role=img

By using ARIA’s role="img" you can change the semantics of an element to expose itself to the browser’s accessibility API as an image or “graphic”. While the best course of action is to not do this,...

View Article



Link with counter demo

A quick demo of a link containing a count down timer that would update until a promotion period has ended (after 7 days). The demo doesn’t make you wait 24 hours though, and instead uses setInterval()...

View Article

Dimmed selects may still be actionable with VoiceOver

Presently, with macOS 10.14.4, Safari 12.1, Chrome 75, and Edge Canary 77, a select element with the disabled attribute may still interacted with if using VoiceOver. For example: <div style="border:...

View Article

A toast to an accessible toast…

You may have recently read Adrian Roselli’s Scraping Burned Toast, Chris Coyier’s summary of the current “toast conversation”. Or maybe you’ve browsed the GitHub repository for A Standard ‘Toast’ UI...

View Article

PSA / tire kicking dev.to for a11y

Originally posted at: https://dev.to/scottohara/psa-tire-kicking-dev-to-for-a11y-njb Giving this service a try (dev.to). Being a markdown editor, seems to me that people who post here should be able...

View Article


output: HTML’s native live region element

Recently I wrote a bit on how I’d define a toast component, outlining UX concerns that should be considered if deciding to implement such a messaging mechanism. tldr; a “toast” (hopefully renamed...

View Article

Reduced Motion Auto-Play Video

Auto-playing background videos can be annoying. However, beyond being a source of annoyance (or “user delight”, as some might say) they can be distracting for those who have difficulty staying focused,...

View Article

The accessibility of placeholder links

The following was written due to a question Vikas Parashar asked on Twitter, that Heydon Pickering had already answered by the time I got around to checking Twitter. This post dives deeper into...

View Article


Some A11y Project article updates

As time goes by and information becomes outdated and/or new techniques become available to replace old, content should be audited and updated. I do that on my site from time to time, and I also...

View Article


Testing lazy image support, and instead finding another unexpected behavior

Hey, maybe you saw this link back in April: Native image lazy-loading for the web!? With Chrome 76 having just been released, you can try out their implementation of lazy loading content like images...

View Article

Using a spacer.gif in 2020

From Wikipedia:A spacer GIF is a small, transparent GIF image that is used in web design and HTML coding. They were used to control the visual layout of HTML elements on a web page, at a time when the...

View Article

Results of labeling lists

Developers can label a list by using an aria-label or aria-labelledby on the containing list element (e.g., ol, or ul). Doing so will give the list an accessible name, which can be situationally...

View Article

ARIA in HTML

On July 6 2021 the ARIA in HTML specification, that I co-edit along with Steve Faulkner and Patrick H. Lauke, became a W3C Candidate Recommendation Snapshot. As the W3C promoted in their invitation for...

View Article


Accessibility of the section element

The <section> element semantically represents a grouping of content that has an overarching theme. It is one of the HTML elements that represent sectioning content, where these elements are meant...

View Article

New in ARIA 1.2: ARIA IDL attributes

One of the new features coming in the ARIA 1.2 specification is the ability to specify ARIA attributes using the new ARIA IDL interfaces.Prior to ARIA 1.2, if you needed to specify an ARIA attribute...

View Article


Image SVG aria-hack=resolved

It’s a good day when you can verify an accessibility issue has been resolved.In this case I’m referring to a long standing Webkit bug that had been filed concerning image elements which render an .svg...

View Article

One last time: custom styling radio buttons and checkboxes

About three years ago now (2017/2018), I published a collection of accessible styled form controls which included specific markup patterns to create custom styled radio buttons and checkboxes. These...

View Article


Using JavaScript to detect high contrast and dark modes

I was recently asked if there were ways to programmatically determine if users had Windows high contrast mode, or dark color schemes enabled at the OS level.The most straight forward way to do this is...

View Article

Redundantly Redundant a11y Accessibility

Let’s take a look at the following markup snippet, shall we?<labelfor="name"> Name...

View Article

Semantic <menu> context

Once upon a time, there was an element called <menu>. An element which had great aspirations. As an example, it wanted to allow developers to create interactive menus, much like those found in...

View Article
Browsing all 45 articles
Browse latest View live




Latest Images