Some Best Practices for Accessibility
When building a website one must keep in mind that there will likely be tons of people looking at it (hopefully) and thatthere are lots of people who have disabilities that can make browsing your website a pain if you’re not following the best practices for accessibility.
I wanted to take a moment to detail some important accessibility options and concerns. Fair warning, though this list should cover some major points on accessibility, it is not meant to be particularly comprehensive, but give a general overview of some of the more major accessibility concerns. I fully encourage you to research more past this.
Color Scheme
When coming to choose a color scheme for your website you really need to think about. Not just when it comes to wether it looks cool/modern, but wether people with colorblindness will be screwed over by it. Around 5% of the world is colorblind! Try to pick color schemes with a very high contrast.
Labels Your Web Pages Content Appropriately
Some people with poor vision/blindness/illiteracy/learning disability may require the use of screen readers. A sort of text-to-speech program or browser add-on that helps people navigate the webpage.
Make sure you’re using labels and landmarks that make sense for the content held within/below. Labels can be wrapped around anything that needs input, like checkbox fields and text areas. Landmarks are HTML5 tags that define roles for the content contained in something like a header or div.
Both labels and landmarks are essential to people with screen readers to comfortably navigate your site.
Find out more about landmarks here.
Alt-Text Images!
As we talked about with screen readers, some people visiting your website may have vision impairments. If you have images on your website you need to provide a descriptive alt-text so that when a screen reader goes over it, it can describe the image to the user.
Inspect the element below:
No, the alternate text is not “Old-School!”. That’s the caption. If you inspect the image you will see this:
<img class="graf-image" data-image-id="1*Omrg6yjm23-gCerMT_d47Q.jpeg" data-width="1024" data-height="1226" alt="A vintage blue iMac and keyboard" src="https://cdn-images-1.medium.com/max/800/1*Omrg6yjm23-gCerMT_d47Q.jpeg">The alt text is held in the HTML for the image where it says `alt=”A vintage blue iMac and keyboard”` and that is what the screen reader will use.
For more accessibility information check out the W3 accessibility page.
