Accessibility elements are easy to overlook on your website. Most of the changes that make a website more accessible won’t appear to do much visually, but rather help improve the usability of your website to people using assistive technology. By optimizing your website to be more accessible, you make a significant amount of people have a better experience, and you also protect your website from being sued for lack of compliance with accessibility standards and legislative requirements.
We have gathered five tips on how to get started with improving accessibility on any website.
#1 Use Alt and Title Tags On Images
What are alt and title tags for images?
Alt tags are a text description of what an image looks like that gets shown if an image fails to load. Screen readers can read the alt tags, helping people with visual impairments understand what is being shown on the screen. Alt tags should be a description of what exactly an image looks like.
Why are alt and title tags on images important?
Visual impairments are very common. According to the WHO, at least 2.2 billion people have a near or distance vision impairment.
How do I implement image alt and title tags?
If you’re using a CMS like WordPress, just make sure you’re filling out the alt option when uploading media. To check if an image has an alt tag in the code, right click it and look for alt=”The alt text” in the <img> element.
#2 Use Descriptive Hyperlink Text
What is descriptive hyperlink text?
Descriptive hyperlink text means that the text you apply your hyperlinks to should describe where the link is going. Avoid the classic “click here” pitfall, and instead write your sentence first, then go back and choose a logical place to put the link. If done properly, linked text should make sense when read out of context.
Why is descriptive hyperlink text important?
Screen readers can be used to skip around every link on the webpage and if one of them was “click here” the user, presumably vision impaired would have no idea where the link may lead to. In addition to benefiting accessibility, descriptive hyperlinks are good for SEO.
#3 Ensure Sufficient Color Contrast Ratios
What is color contrast?
Color contrast ratios refer to how visible two colors are in relation to each other.
Why is color contrast important?
Color blindness affects a large amount of the population, it’s important to make sure everyone can see elements of the page well. This is especially important with text, if the user can’t see it they could miss key information on the web page. The WCAG requires that most text, or images of text have a contrast ratio of at least 4.5:1 to meet the second level of compliance, except in the case of large text (3:1 ratio), incidental or decorative only, or brand logos.
How can I fix my color contrast?
There are tools available to check your colors when picking out your palette. Several can be found online including the WebAIM Contrast Checker and contrast-ratio.com. If you already have a website, and want to check all the pages for color contrast issues, theres an excellent tool available on www.experte.com. There’s also a built in way to scan your website in Chrome based browsers. To use this, go to developer tools, hit the settings button, then go to experiments and enable CSS Overview. This tool checks the color contrast ratio across an entire page and automatically finds compliance issues. For example, this is what the results of a page’s contrast issue scan might look like:
#4 Ensure Your Page Structure Follows a Logical Order
What page structure?
A logical page order is when the elements of the page are presented in the order that they’re laid out in the markup code.
Why is logical page structure important?
Screen readers are expected to read things in the order they’re presented visually, but they just parse the markup code. So if the page elements are out of order it causes issues when using a screen reader . This also affects people using the tab key for navigation.
How can I improve my page structure?
When initially creating a website, try to avoid using CSS to move things out of their natural flow. A search element that is at the top of the page should be towards the top of the page in the markup. This isn’t quite as common but you can sometimes find it by tabbing through elements where you will run into issues.
#5 Use Descriptive Headings
What does it mean to have descriptive headings?
Descriptive headings means that you are using headings that are clear as to what information you can expect to follow the heading. Being clear and concise is important here. Headings should not be too long but should not be too short that it becomes too general. The headings should be descriptive enough that anyone reading themselves or with a screen reader will have a good idea of the information to follow.
Why are descriptive headings important?
Many people that use screen readers jump between paragraphs of text without reading the content in between. This makes it important to have descriptive text, but we often avoid that because it doesn’t look as clean. This is more important than visuals, it affects usability, it should be prioritized.
Get Started With Website Accessibility Improvements
Looking for a team of developers who have experience in making websites more accessible? We have a Solution for that. Connect with our team today to get started.