How to Make Your Website More Accessible
Working with accessibility in mind should be a default consideration for every website you build. Unfortunately, that is not always the case, especially for new developers. Many of us are not initially aware of the extremely helpful and important Web Content Accessibility Guidelines (WCAG) that define how to make web content accessible for people with disabilities. In fact, these guidelines were just updated as of January 2018.
Following these guidelines not only benefit all of your users but can also have a positive effect on your Search Engine Optimization (SEO). Here are five best practices, all of which and more are included in our Bootcamp curriculum, that you should be implementing in your workflow to build a better, more inclusive web experience.
1. Provide a descriptive alternative text for all of your image elements
This is the first thing you should do when working to make your website accessible. Yes, it's great to pair a stunning image with the paragraph of text you just wrote, it's also important to understand that not all of your users will be able to view your image. Providing alternative text allows your image to be changed into other forms your user may need.
For example, a person using a screen reader will have the alt text read out loud to them to provide a description of the image. For this reason, it is also important that we provide a meaningful descriptive alt text. Your alt text will also show up on the page if your image fails to load, and has great SEO value. Therefore, striving to provide all necessary alt texts will help all users, not just those who rely on a screen reader.
2. Use Semantic HTML
Knowing how to write proper semantic code is probably the first important skill you can pick up as a web developer. A semantic element clearly describes its meaning to you, the browser, and anyone using assistive tech to navigate your website. You should avoid using < div > and < span > when you could be using a more descriptive tag.
3. Check Your Colour Contrast
Aside from simply not looking bad, the low colour contrast between text colours and background colours will greatly reduce readability. To meet level AA of the Web Content Accessibility Guidelines (WCAG), you need to have a contrast ratio of 4:5:1 for normal text and 3:1 for large text. Below, you can see that the sentence on the left is much easier to read than the sentence on the right.
A great tool to make sure you're hitting the guidelines is Jonathan Snook's Colour Contrast Check.
4. Provide a Skip to Main Content Option
Providing users with a skip-to-main content option will improve the user experience for those who use their keyboard to navigate your site. This is especially beneficial when you have a large navigation bar or a header with a ton of information.
Standard skip to main content buttons are typically not visible on the page and are created specifically for users 'tabbing' through your website. In this animation, you can see the user has their cursor in the address bar. Upon first click of the tab key, the "Skip to main content" button appears and they are able to get to the page's main content.
5. Be Cautious with Elements in the Focus State
Browsers come with default stylings for elements in focus, often resembling a blue outline. If you take another look at the animation above, you will see that effect when our user tabs down to the main content.
Although this default styling may not align with your web design, many users rely on this outline to help them identify which element is in focus. If you remove this outline, be sure to replace it with something else that helps a user identify elements in focus! An easy way to do this is to make sure you are adding a focus state to any element you add a hover state too.
Want to learn more about HackerYou? Check out their courses and read what alumni have to say on SwitchUp.