I’ve been diving deeper into web accessibility lately and wanted to share some thoughts on why it should be a priority for all of us. Beyond just reaching a wider audience, accessibility also boosts SEO, improves user experience, and often helps make a website more responsive and easier to maintain. Plus, it’s becoming increasingly essential with growing global regulations around digital access.
For those already implementing accessibility, what’s one tip you’d share with those just getting started? And for beginners, what’s one part of accessibility you find most challenging?
While I agree with Ralph that it would be nice for you to let us know your opinions, I thought I’d chime in as well, as this is something that I think about quite a lot.
I suppose my main tips would be to use the alt tag to label images correctly and to ensure users can navigate your site via keyboard alone.
The alt tag should also not contain just any old text, rather where appropriate a concise description of what is in the image.
A better alt text would be: “A Corgi with a pink harness walking confidently along a stone path next to a body of water on a sunny day, tongue out and ears perked up, with a park and blurred people in the background.”
A few years ago when I was editor of SitePoint’s JS channel, @Stomme_poes kindly agreed to draw up an accessibility checklist for the demos that accompanied our articles. Here is the short version:
Use correct, semantic HTML, in a sensible order. (What if I can’t? see #8)
Ensure that the page/site/widget can be used without a mouse (unless that’s totally the point).
Allow keyboard users to see where they are on the page.
Managed focus correctly.
Make sure stuff is labeled. All of it.
Don’t autoplay stuff. It’s not just annoying, but can prevent users from navigating the page. Allow the user to turn it on and off.
Don’t unexpectedly move the user to a new place. At the very least, they need to have activated it (submitted a form, clicked a link, clicked a button, etc.)
If you’re making something for which there are no current HTML semantics for, you probably need ARIA-stuff. Note: it’s usually better not to use ARIA at all than to use it incorrectly. You could take something that’s just annoying/difficult to use and turn it into something that is completely unusable.
She also provided a more in-depth description for each of these points, but I’ll not post that now, as otherwise I’ll be hijacking the thread.
That username feels remarkably familiar, and that usually doesnt mean good things when its a random name I recognize. Also the Title Casing on the thread, generic buzzword paragraph, and then asking others for tips, followed by the generic bot signoff “Looking forward to hearing your thoughts”.
Take the word “accessibility” in the post, replace it with ###KEYWORD###, and look at it again.
Though to actually address the post considerations James raises… I have to admit that accessibility isnt usually a huge factor in my mind. Certainly not as much as it should be.
More often than not, i’m too focussed on making it work, rather than thinking about all the… calling it nonstandard sounds dismissive… but… alternative? the ways that I don’t see the page in, but others can/will.
I know i should do better in my pages, but often don’t feel I have the time to dedicate to that additional level of depth.
Accessibility has long been an important issue for me, and I find the apparent lack of interest in the subject on the forums disappointing and depressing. Any chance to discuss it seems worth taking.
Remember that accessibility is about more than making a site work with a screen reader. There is more to accessibility that just vision-related issues.
I would encourage everyone to refer to the excellent articles at https://webaim.org/articles/ for advice and information.
Right, I think it’s the same for a lot of people. That was why we asked poes to draw up that list. It was intended as low-hanging fruit to address.
So what would be the main tip(s) you’d share with those just getting started?
While the WebAIM docs are indeed excellent, they are also quite extensive and maybe hard (e.g. if English isn’t your first language) or time consuming to read and you get into a state like Marc describes of thinking that you don’t have he time to dedicate to that additional level of depth.
Edit: Sorry, I just realized that you answered the question
At the time I felt vaguely annoyed at being told that I should use the “clearest and simplest language appropriate for a site’s content”, but since then I have reversed my position.
Be aware that not everyone uses a mouse. Therefore don’t rely on hover to impart important information unless the information is accessible by other means.
Use the section element only for such text (as in chapter/page > section > paragraph), because that’s what is was created for. To divide pages into parts with other content, use e.g. div, nav, or aside. That’s what they were created for.
If you use the validator on https://validator.w3.org/ and you made a mistake with it, it will tell you the same thing, but in other words: that the section tag should be followed by an h2 or other h element. A text section starts with a section header.
You’re spot on—accessibility boosts SEO and user experience. My tip for beginners is to start with semantic HTML and focus on essentials like alt text and keyboard navigation. For those new to it, the WCAG guidelines can be tough at first, but tackling the basics makes a big impact!
