This is a good question. There are some companies that'd like to beg to differ (such as AccessiBe, which is rubbish). This post is not for them. It...
For further actions, you may consider blocking this person and/or reporting abuse
Very nice article and so true. For the modal component there is dialog but support isn't great, basically just in blink browsers.
I like using inert which is supported in literally 0 browsers so I have to polyfill it. I do hope it gets supported though. It just makes so much sense.
On a side note when you do code snippets if you include the language you're using you will get syntax highlighting, like this.
Example of actual code.
What's the polyfill?
Plus
disabledand/ortabindex="-1"?I use a JS one from WICG
github.com/WICG/inert
A very interesting article, highlighting just how easy it is for those of us with limited experience of a11y to jump to conclusions about 3rd party products. I thought this link that you shared was very informative too.
I would argue the biggest contributors to bad accessibility are browsers themselves.
We still don't have a
<select>element that style itself even remotely nicely. Let alone looking alike within multiple browsers. This is single-handedly probably the biggest contribution ever to non-accessible website since the dawn of internet.<dialog>is nowhere supported enough yet and if I'm not mistaken, people are already picking out stuff out of the few browser implementations that isn't accessible.There's no such thing as a native menu... Like it's not been what? 20 years we need that component?
Don't start me on date pickers...
Then we have companies like Igalia asking for funding to implement plenty of features in different browsers... Features that should have been implemented by the browser's companies themselves.
Which is infuriating when you think about it, because Microsoft, Google and Apple are 1+ trillion market cap companies!!! Are you telling me they don't have ressources to fix their s***???
I will also point my big fat finger at Safari here, this is the new IE by a long shot. And yet, it's made by the richest company on Earth... They certainly don't need extra funding or Igalia to do their job...
And finally, there is not 1 day without an article asking us, developers, to make our sites accessible...
I think it's high time, we, as developer, get the pitchforks out!
P.S. I'm all for making our sites accessible, I always strive to, but I think there's a mountain of work to be done by the browsers and they're letting us do all the work.
I'd argue that Chrome is the new IE by a long stretch:
-webkit-prefixes in CSS are their fault, and is developers use them for core behaviour rather than progressive enhancement, meaning a lot of websites don't work well on other browsers (Fx & Safari)alert(),confirm(), &prompt()in cross-origin iframes) which cause huge functional and accessibility problems.So much of this reminds me of some of the very same things that Microsoft was doing in the early IE era (4 - 5.5).
You're right.
Accessibility is not some magic you spread on top of your app, or some license you can buy out. A11y is baked on the UX design (correct us of color, contrast, layout, alt text) and in the use of semantically correct components.
A11y's worst enemy is trying to be too smart and reinvent the wheel.
One of the reasons that I cringe every time I hear "the browser is now basically the operating system" is exactly this. That mentality encourages developers to stop thinking about the web like documents, and instead dream of the days when they'll just draw arbitrary pixels to the screen in real time and dynamically decide which will respond to clicks, instead of (as you point out) just using a button.
Interesting stuff, I'd be curious on your experience with accessibility tools as well. We have a Team that does check internally, I implemented something simple use aXe from Deque with Selenium but I know that tool the way we use it barely scratches the surface.
I've been pushing accessibility testing across all levels (dev, QA, content, etc) for the last few years at the company I work at.
At a development level, the built in browser tools are handy for very quick checking, although Chrome's Lighthouse is very basic, it just looks a bit prettier than Fx. Then, there are various plugins available, of which aXe is the best I've found. The pro version has some useful collaboration features which is helpful in a team situation.
The QA team has been integrating aXe and Lighthouse into their automated test suites. They manually test across a variety of browsers and operating systems using different screen readers as well. If you're a bit stuck there with access to devices, I did notice that BrowserStack seems to be implementing screen reader support now too which is a welcome surprise.
Then, we try to get all levels thinking about the issues. So the design/UX process is thinking about things like content, colours, the user journey and ease of access. Developers need to be thinking more about semantic HTML, testing states, and ocassionally putting the mouse/trackpad aside and relying on a keyboard. I've given a few short talks/presentations on various aspects of a11y, and we take things into consideration with code pull requests (at least as far as we can from a pure code POV).
not only do those overlays not help much, they provide almost no protection for accessibility lawsuits so use with caution. If you're not sure where to start, make sure that basic stuff like:
being able to tab through links and sections of your website (in a logical order)
alt attributes for images aren't missing (unless it's a pointless image, like a custom bullet)
aria-labels are implemented
contrast of text is compliant
and whoever mentioned popup date pickers was right...it's a black hole with no way out so be very careful when implementing those. safer to use another method
I'm all for improving web accessibility, I just wish users weren't so litigious. A simple request, followed by a warning, followed by an action is a better way to go. I'm of the opinion that most developers still aren't even aware of how important it is.