#ActuallyAutistic web dev. Does front of the front-end. Loves perf and minimalism. Prefers HTML, CSS, Web Standards over JS, UX over DX. Hates div disease.
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:
Accessibility
HTML semantics (proper, valid structure thought to fit the content and perceived usage)
Handling stuff outside the happy path (errors, unexpected human behavior, unexpected ways to use things)
Favoring standard HTML and CSS over JavaScript solutions (or prefer progressive enhancement over JS-only)
Make things work even when JavaScript is disabled
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.
#ActuallyAutistic web dev. Does front of the front-end. Loves perf and minimalism. Prefers HTML, CSS, Web Standards over JS, UX over DX. Hates div disease.
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
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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