I want to make sure that my website can be accessed by as many people as possible from wherever possible. That’s the beauty of the web. As part of that mission, I want to ensure that my website is accessible and ensure that no matter what their particular needs are they can use my site to its fullest potential. What’s great about web pages is that they pretty accessible by default. As long as you’re using HTML elements that make sense for what you want them to be , like using an h1 element for your main header and a button for button functionality, then a screen reader, which reads a website out loud, should be able to handle it. Writing HTML in this way is known as semantic HTML. Those little tags you put around text can have a big difference on how it’s handled by things like search engines or screen readers. Embedding that extra meaning, those semantics, is super important in making your intent clear.
Part of what I want to do on my site too is to create interactive examples. I want readers and learners to truly be able to dive deep into a subject area and play around with it. That’s why I’ve been reading into how I can make my interactive examples as accessible as possible. When you click a button on an interactive example, a change happens immediately. This is clear to those who aren’t using screen readers as something will change on screen, but how should screen reader react when you make those changes? That’s where ARIA comes in, which I’ve been reading about at this great blog on accessibility.
In short, ARIA, which stands for Accessible Rich Internet Applications, gives extra information to a screen reader so you can clarify what your intent is. The main document describing it can feel pretty overwhelming, but I know it’s something I want to gain a better understanding of. I’m really excited to learn as much as I can about this wonderful feature of the web which helps open it up to all.