What HTML features promote accessibility?

This is an anonymous post sent in by a member who does not want their name disclosed. Please be thoughtful with your responses, as these are usually tough posts to write. Email [e-mail] if you'd like to leave an anonymous comment or if you want to ask your own anonymous question.

---

I've just started designing my first website. I'd really like to to be as accessible as possible, but I don't really know where to start. If you have any tips and tricks for HTML features I can use that would make my site more accessible for people, I'd love to learn them! I really don't want to forget to implement as many ways for people of all abilities to navigate my website.

Comments

[Ben Halpern]

aria attributes , i.e. aria-label are a part of the accessibility toolkit worth knowing about.

ARIA - Accessibility | MDN

Accessible Rich Internet Applications (ARIA) is a set of roles and attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.

developer.mozilla.org

With a huge caveat outlined in that guide:

Warning: Many of these widgets were later incorporated into HTML5, and developers should prefer using the correct semantic HTML element over using ARIA, if such an element exists.

Looking forward to what others contribute to the discussion!

[Timothy Foster]

You should read 101 Digital Accessibility (a11y) tips and tricks, by @inhuofficial . It's very thorough for a beginner, covering both practical tips and general paradigms/philosophies.

In my opinion, the very first thing you can do from a code perspective is understand the concept of semantic HTML. You can get pretty far just by understanding what elements to use when.

[GrahamTheDev]

Thanks for the shout-out Timothy!

Anonymous person, first that article is a reference piece, I don't want you to feel overwhelmed, just read and then try and do a few points a day! (just thought I better say that as it can look daunting). Feel free to ask any questions you have in the comments, or if you prefer you can DM me on Twitter if you want to keep things more private.

As for what to learn? Timothy is correct, semantic HTML will get you 85-90% of the way there and is one of the most important aspects of a11y.

Take the time to learn HTML elements and where and how to use each one, and learn how to structure pages using sectioning elements etc. Do that (and only that) and you will have a site that is more accessible than 90% of other sites.

People do not spend enough time really learning HTML (as in deep learning about attributes, relationships etc.), if you do, it will make your life a whole lot easier!

Then another thing that is massive and easier to get right is to learn about colour contrast and make sure you have visible focus indicators.

The rest of it is a tiny bit more complex (but not much, accessibility is a "wide but shallow" subject where it is 100 little but reasonably simple things to learn), but those 2 / 3 things will get you really far!

[TechMan09]

Make sure that all the colors on your website still flow nicely if the visitor is color-blind.

Make sure that the website can be navigated by screenreaders

Make sure that the "TAB" key can be used to select different links/inputs, and it is clear what is currently being selected.

[Andrew Baisden]

You will find this useful What is accessibility?

[cem kaan kosali]

andreasbm.github.io/web-skills/#ac...

[Ashley Sheridan]

There are a few different things you can do:

• Semantic HTML. That basically means, using the right tags for the right content. There are a over 100 different tags, so that's not an easy thing to do. I put a tag picker wizard together myself at the start of this year that might make this a bit easier: ashleysheridan.co.uk/blog/Picking+...
• Validate your HTML. If it doesn't validate, it might be even more difficult for assistive tech to understand it.
• Look at the built-in tools in browsers. Personally, I favour the Firefox ones in the Accessibility tab of the dev tools, as they're more complete, but even the ones built into the Chrome Lighthouse tool are better than nothing. These can help you find the easy to detect stuff, and it helps get you thinking about accessibility as you write code.
• There are extra aria-* attributes that can be used to fill in the gaps where your HTML isn't quite enough. Used sparingly, these can make a big difference, but a lot of the time it's learning when not to use them!

There are lots more things, but if you start thinking a little about these 4, you will have a decent base on which to build your knowledge further.