I'll admit, I'm new to the world of accessibility. It's something that I had heard of and knew was important but I didn't actually know how to impl...
For further actions, you may consider blocking this person and/or reporting abuse
I think one of the most important points with accessibility is that it also improves general usability a whole lot! It makes you think about more stuff than just adding an onClick handler to things and calling it a day.
These things go hand-in-hard to make the web great and usable, but go easily neglected by far too many developers:
I've noticed that the more I've had to spend time with JavaScript the harder it is to keep up with most of these. When focusing too much on JS you kinda only do the #3 and the other parts get neglected. This has made me switch from React apps and SPA to traditional single script solutions in my hobby projects, because you simply spend too much time solving stuff already implemented by the browser when you go for the typical SPA road.
I can give a few examples how you notice the lack of attention to these in regular day-to-day development.
Unhappy path
A colleague of mine rewrote a part of CMS page serving so that instead of keeping only one page in Redux it kept each page there, allowing for better back/forward browsing. However while doing this he wanted to be strict (also a super fan of TypeScript), so he limited things so that the URL allowed only for the expected search params to be there and give 404 otherwise. This of course meant that all the pages that were in Google campaigns and links in all the customer facing emails started to give a 404. Simply because he considered everyone to have his happy path.
Focus
Our site still doesn't handle focus and interaction to the right part of the page on regular SPA navigation. There are all sorts of other fancy stuff like external link warning dialog, but somehow this kinda basic thing gets neglected. I guess I'll just simply fix this when I get back to work after my vacation.
Accessibility
This word gets spoken a lot, but it is so hard to actually maintain it! Sometimes I get back to a file and notice that some accessibility feature that was there before has vanished entirely in a refactor. And yes, this is due to having a lack of test coverage, but also shows how developing for minimal feature happy path and focusing too much on developer experience can be bad for end user usability.
Modals and dropdowns
These often lack tabbability control and too often focusing inside the modal or dropdown as well. Also restoring focus back to where it was when closing (when valid to do) is non-existant. Some of this has to do with having an old React codebase and there having been no accessible components when things were done originally, but convention and repeating things as they are often wins over thinking about what one is doing and how things should be done properly.
Lack of semantics, JS wins over HTML and CSS
Some devs only do divs. Others think that when they make a standalone form control it has to be within it's own form element. Then there are folks who don't look at resulting HTML elements at all and then you can find link elements wrapping list elements, links inside links, CSS-in-JS span elements that have h2 styles (and only the styles). If you want a perfect example of wrongness have a look at Twitter's DOM structure. Then try middle clicking a post open into a new tab (spoiler: nothing happens, because they decided to remake the web instead of embracing standards of the web).
I guess I could go on and on with examples of how things are wrong and how even the big players of the web get the stuff so, so, so wrong.
I'm with you on that! I'm currently working on creating a blog using just HTML & CSS so that I can get into the habit of practicing #1, #2, #4 and #5 more in my work
This is a great intro into the "why" and thank you for the list of resources! I also got a lot from the Accessibility in Javascript Applications course on @frontendmasters from @marcysutton . And, listening to Steve Krug about usability testing made me look differently at what's needed to make a site usable. Looking forward to the next posts in your series!
Nice! Thank you for this!
I have been working for several high-profile clients for accessibility for quite some time and writing many blogs about it. I actually started making some brute force compliance JavaScript stuff just for kicks to rapid triage a site and I thought that maybe somebody might make use of it and help contribute.
github.com/CodePosse/WCAG-Brute-Force
Thank you!
Good post I know bit about semantics but it is a massive topic there and this is definitely something I need to learn a lot more about. When I asked about resources a couple of people suggested this playlist youtube.com/playlist?list=PLNYkxOF... already learnt quite a bit of the videos I've watched so far
Oh yes! I came across this too! It's wonderful because each video is easily digestible!
This is great stuff Lopé, I'll definitely be following along and learning with you! Thanks :)
wooooh!