HACKER Q&A
📣 graemep

Best Practices for Accessible Websites


I am confused by the disparity between stated good practice and common practice by large websites.

Alt tags are a good example. LinkedIn seems to insert an some pretty useless alt tags is people do not bother (alt="No alternative text for this image" - at best overly wordy and timewasting) or "AI" generated text that is often not useful - in most cases its redundant so I though a blank alt tag would be better. BBC website news articles always have alt text, even if the heading makes it redundant. Argos (a large British online retailer owned by supermarket chain Sainsburys) repeats the same text for every image in a gallery on a product page.

I have been told by a web designer I argued about this with that I do not understand how screen readers work, and "alt tags are for SEO" still seems to be common practice.

I am not a designer or front end developer, but I do end up advising clients on who do use and on requirements. I also want to at least get my own sites right. Where do I get the right guidance? How do I test?


  👤 seanwilson Accepted Answer ✓
The official reference would be WCAG (aiming for level AA compliance is the most common):

https://www.w3.org/WAI/standards-guidelines/wcag/glance/

https://www.w3.org/WAI/WCAG22/quickref/

I usually find these docs verbose and intimating though. There's a lot of more friendly summaries and articles to pick from like:

https://webaim.org/standards/wcag/checklist

For alt tags, alt="" is appropriate if the image is only decorative or not adding anything that would be useful to someone on a screen reader. A useful tip for deciding on what to do is to get familiar with a screen reader interface available for your browser - see how easily you can browse, use, and understand your own web pages without being able to look at them.

> I am confused by the disparity between stated good practice and common practice by large websites.

Refer to WCAG for what to do and generally ignore what even large popular websites do.

Most websites don't prioritise accessibility, even the basic stuff. I think this is generally because: there needs to be knowledgable advocates of accessibility on the team, it's not always obvious how to follow the rules even when you're aware of them (there's subjective and contextual parts you can't automate, like with alt tags above), it requires extra design/dev/testing resources to do properly, people see other popular websites not following the rules so don't bother themselves, and branding often takes priority.


👤 austin-cheney
* Turn off CSS. Can you still read/interact with the content? Is the content in the correct order?

* Are there page headings? Some screen readers navigate the page using headers, tags h1-h6.

* Are the controls far enough a part that a motor impaired person can interact with the page? Think Parkinson’s, epilepsy, MS, and so forth.

* Does the content display with sufficient color contrast? I wrote a tool evaluate all colors of a color scheme for contrast according WCAG definitions: https://github.com/prettydiff/colorContrast

* You can test any page to determine if the content is well described using this other tool I wrote. You simply copy and paste the JS code into your browser console and a report displays on screen: https://github.com/prettydiff/semanticText


👤 solardev
Microsoft makes a very helpful Chrome and Edge plug-in that checks your site against WCAG 2.1 AA recommendations. Run it and fix the issues one by one and you're like 80% of the way there.

https://accessibilityinsights.io/

The other 20% is often like judgment calls on navigability and readability on screen readers. You can install one (or several) and try to navigate your site and menus using them. They are often free, especially the ones built into major operating systems.

If you want help, there are also website accessibility consulting firms, sometimes run or staffed by people who are blind or hard of vision. The one we used gave us an extensive audit and documents and spreadsheets full of things to address. It was largely similar to the methods I described above though, so I'd start with those first.

(I'm a sighted frontend dev who's done accessibility work and audits for a few orgs, but this isn't my specialization. It just doesn't take much to do all the low hanging fruit, but most websites don't bother. Depending on your jurisdiction, it may or may not be legally required for your site, but if it only takes you a couple days... Why not?)


👤 Mrirazak1
I think the thumb rule should be for a basic test is is suing the tab key can I easily navigate your website. If I can’t then you need to fix that.