Some time ago, I got interested in web accessibility topic. The issue is ignored by many developers nowadays. What inspired me to get more curious about this topic was how bad the standards were in my company. When I asked my coworkers why they do not care about it, the most common answer was - our visitors do not have accessibility issues. And I thought that's a bold statement. The thing that got me thinking was the quote regarding this topic that I found in some discussions. You can't be sure that your visitors won't have these issues tomorrow. That's why I started to dive into this topic. Let's jump into few easy tips that you can start using today.
Stop roleplaying
Starting with the easiest one - start using semantic HTML. What's the best about this one is that you will benefit from it too. It's much more comfortable to browse through sections, articles, buttons, headings, and paragraphs instead of div spaghetti. Everything makes more sense then. Getting a grasp of what the code was after months is a breeze when everything has semantic meaning.
Furthermore, regarding accessibility - assistive technologies, like screen readers, use landmarks to make navigating easier. Users can easily skip to the main content, jump between sections or navigate to the footer part. Of course, you could use the role attribute, but why wouldn't you want to get it for free? Everyone will benefit from it, I promise you!
VIM users will bless you
Navigating by keyboard is common even among people that don't have accessibility issues. And I think that's pretty self-explanatory why it's that important. Moreover, that tip is easy to handle. The only thing you need to do is being cautious about not screwing it up. Keyboard navigation is a thing that we got out of the box natively. If you don't make some complicated layouts, you will only need to keep in mind one thing. Don't make any element unaccessible.
However, there are few more little things around this area. Firstly, make sure that there're focus styles for focusable elements. The user needs to know which element they are focused on currently. Please, do not disable outline on everything without providing alternatives. I often hear that it's unpleasant. The solution is pretty simple - make it prettier. You can use other options too. Properly styled shadow will nicely play with your design and will point the user in the right direction. Secondly, if you have extensive navigation etc., consider adding a skip to the main content link. You can read more about it over there.
Guide the users
Sometimes you need to think about whether your page is so user-friendly without the visual part of it. If users won't see the icon on the button, how could they know what is its responsibility? Spoiler alert: they won't know. And that leads us to the importance of using labels and similar techniques. Few easy things to remember - make sure that form inputs are labeled natively or have the aria-label (etc.) attribute. If you have a button with just an icon, provide an aria-label or text visible only for screen readers. Lastly, provide alternative text for images. What's important is when to leave the alt attribute empty. If some picture is purely decorative, we should leave it blank. Otherwise, screen reader users will hear a total mess with all of these. But remember - don't omit it, make it empty.
The importance of colors
If sites are only black and white, they aren't so appealing. And that's why we use colors. However, we need to keep an eye on colors contrast. Sometimes we can read something without a problem, but some people may not have a twenty-twenty vision. Because of that, it's important to remember to keep sufficient contrasts of backgrounds and foregrounds. Moreover, it's easy because of the built-in developer tool that lets you check it and warns you if something is wrong.
And that would be all for today. I hope you will try to implement these in the future. Besides, you can expect some more advanced tips as I will progress in this topic. So make sure you will be ready for them by starting using these described today. Have a nice day!