In a previous post, we saw the importance of Web Accessibility and mentioned The WebAIM Million, an analysis by WebAIM on the current state of Web ...
For further actions, you may consider blocking this person and/or reporting abuse
Mr Simpsons*
Great article, useful info well laid out & really covers a lot of the core issues.
I just started using the < picture > tag a lot more, does the same accessibility apply as img?
*check out his amazing CSS Simpsons on GitHub. :)
Maybe my next post should be about how to draw Homer Simpson with HTML+CSS :)
Yes, why not.
But maybe Guernica in CSS. 😳
Not OP but I think you may have forgotten a word! Which tag did you start using a lot more?
Fixed, thanks Scott.
Thanks for the comment!
What tag are you using? (It doesn't display it)
Picture
The
<picture>
should have a fallback<img>
anyway.One accessibility issue could happen if the image is not the same, because the
alt
that the screen reader will read is the one from the<img>
. So if for any reason the images in the<source>
don't match the one from the<img>
, it could be confusing/misleading.That's the answer I need. Thank you. 👍
Why would you use the picture element tho? It's not supported in IE11 and below without a polyfill, and it needs more markup that the img + srcset/sizes attributes, for exactly the same result (img + srcset/sizes is even easier to implement)
Microsoft tried to own the Internet & for many years tried to break the web. IE numbers are low, it's render is worthless. They intentionally added a massive overhead to all dev for years. Don't waste much time (96, you remember clear). Chrome is trying to repeat.
Below IE11 is not really a real thing. Docs, devs & their shills will say it is but it is not. Don't build a site for that one person. Ignore hysterical ui ppl with no biz/vol experience. Go broke this way unless it is 'overfunded'.
Change of policy from me: Picture is now the correct tag for decorative. I don't actually care now because it's getting out of control productivity wise. I am basically ignoring all rules & doing what I want that gets results.
Not even going to do much srcset at all. It doesn't really make sense.
So this is a post about accessibility and you're telling us to ignore users that still use IE11 and below?
While I totally agree they shouldn't be using outdated/unsupported browsers, the reality is, these users exist.
There's probably as many IE11 users as blind users, and yet, we don't ignore the blinds.
Nope, I am telling you to do what you want & "theory" is rarely practice. "Make everything accessible" is not real world advice. I am telling you what I am now doing (instead of overengineering). A thread about accessibility doesn't mean you can't argue against timewasting.
I didn't not say ignore old browsers. I build sites that last years with clean simple code usually. I have sites from decades ago that work still (on desktop).
I try not to ignore blind users as they did not try to destroy the internet. Old outdate IE? IE stays last until Greg convinces me otherwise (he promised they would do better).
"But poor people" (yes, I actually know about this in practice, not theory). I'll build more sites rather than tackle a pointless usecase for a company who wishes I had no business here.
The large sites are rarely usable or follow the rules themselves.
Probably less clear.
Hi !
Thanks a lot for this post ! I'm trying to learn more about accessibility for an upcoming project and found myself overwhelmed with the search results, this post is clear, right to the point and gives examples. Do you (or anyone) know where I can find similar resources, to go deeper on the subject ?
I like WebAIM's tutorials (although it can be a lot of information and a bit overwhelming sometimes). Their accessibility checker is really simple to use and if it finds any issue, it will highlight it, show a short description of why it is an issue, and link to articles and guidelines related to it.
Great and perfectly timed for me, I'm researching the topic those days.
A few more things I'd like to read about:
Also it seems to me that properly labelling forms/sections/etc is pretty important because it's a pre-condition for screen readers to see them as such. Is it just an impression?
Thanks!
The article was posted here: dev.to/alvaromontoro/free-web-acce...
It's not exactly the answer to all the questions you asked (thanks for the ideas for new topics!), but I hope it's helpful.
My next article is about the different free tools I use for testing accessibility. It will be posted today or tomorrow (waiting on some editions), and it addresses some of those questions.
Great article! It really bothers me when web developers do not think about accessibility.
Thanks!
When looking for a web accessibility tool, check out this testing page by the UK Government.
This completely inaccessible page is chock-full of 143 accessibility errors and lets you benchmark your Accessibility tools' effectiveness. We made a custom fork of this at work to use for benchmarking tools.
WAVE by WebAIM is okay but there are better tools that scored higher for more coverage like Tenon or Asqatasun for checking during CI/CD pipes.
Not all tools are made equal so it's important to see which tool works best for you!
Those are great suggestions. I normally use Wave, but I have used Tenon too (I need to try Asqatasun).
I always tell people that their results must be taken with a grain of salt, as they mostly check the "technical parts" and miss many real issues (like some on the site that you linked, that would require a more "personal" approach), and many others are overzealous reporting things that could be considered false positives (which could be overwhelming, especially when you are beginning).
the NVDA is not reading the first line in list. please help me out from this
Agree, these are examples of low hanging fruit but do not necessarily solve for the ux gap disabled users face . Creating Personal Accessible Experiences is a must - hubs.la/Q026r6v10