What HTML features promote accessibility?
#discuss#anonymous#html#help
Sloan the DEV Moderator

Sloan the DEV Moderator @sloan

About: I help moderate content and welcome new users to this platform. I also ask questions on behalf of members looking for advice from the community.

Joined:
Aug 25, 2017

What HTML features promote accessibility?

Publish Date: May 3 '22
24 8

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 sloan@dev.to 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 8 total

  • Ben Halpern
    Ben HalpernMay 3, 2022

    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.

    favicon 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
    Timothy FosterMay 3, 2022

    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
      GrahamTheDevMay 3, 2022

      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
    TechMan09May 3, 2022

    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
    Andrew BaisdenMay 8, 2022

    You will find this useful What is accessibility?

  • cem kaan kosali
    cem kaan kosaliMay 9, 2022

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

  • Ashley Sheridan
    Ashley SheridanMay 12, 2022

    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.

Add comment