Making your website accessible can be a never-ending venture. Thankfully, there are many easy steps you can take to get your website in a place where it can be accessed by all people. Here are 6 easy ways to implement content-related practices today!
Use Headings to Organize Your Content
Properly using headings (<h1><h2>, etc.) is an extremely effective way to make your content more accessible to users with disabilities and not! A lot of websites use an incorrect order to their headings.
Some quick tips:
- An <h1> should always describe the primary message of the page.
- When starting a new section, an <h2> can designate the purpose of that section. An <h3> would then be a sub-topic of that section, continuing down the outline with <h4>, <h5> and so on. When you’ve completed that particular section, you start the next one with an <h2>. This not only gives screen reader users a clear structure to the content, but gives unimpaired users a clear visual hierarchy to follow. It’s best for everyone!
- Don’t choose headings for the way they look visually. Instead, use the proper heading tags, then style them visually using a different CSS class.
Include ALT Text for Images
ALT text should be provided for nearly all images. This allows screen reader users to understand what the image being displayed portrays. Simply describing the image is the best way to get the image’s message across. Additionally, if there is text inside of the image this should be included in the alt tag.
The only time an ALT tag should be left empty is when an image is used purely for decorative purposes. If the image would distract a screen reader from the purpose of the page, then you should leave it blank.
Use Descriptive Link Text
For all links, use text to properly describe where the element is linking to. Avoid using common terms like “Click Here” and “Learn More” as these are extremely ineffective for screen readers. Many screen reader users navigate a page by scanning the links on that page. Imagine using a screen reader to assist you and it jumps to an element that simply says “Click Here.” Click here for what?
Here are a few examples of better link text:
- If a section links to a list of your products’ pricing, instead of “Learn More” you can change it to “Pricing Breakdown”
- If a link goes to the Services page, you would change “Click Here” to “Read About Our Services”
A few small changes can make a world of difference in making your links more accessible!
Make Sure Your Site is Keyboard Friendly
All content on your site should be able to be accessed with a keyboard alone and without any instructions. This includes navigation menus and other interactive elements like popups, carousels, and tabs.
Take the test! Visit your website and navigate your site only using your TAB and ARROW keys. Don’t touch your mouse. This is a great way to not only test your website but to get a better understanding of how some disabled users view it.
Give Interactive Elements Focus
Piggybacking off of the prior point, when tabbing through the website, you may notice the element you have “focused” gives an indication that you’re currently interacting with it. This is known as a focus. All links, buttons, forms and other interactive elements should have a noticeable focus state so that the user knows where they are on the page.
Be Smart When Choosing Colors
When choosing colors on your site, be very conscious of how this may appear to visually-impaired users. According to Colour Blind Awareness, “Color blindness affects approximately 1 in 12 men (8%) and 1 in 200 women in the world.” That’s a pretty big chunk of your audience!
Never use only color as a visual indicator. For example, if your only indication that a form field is required before submitting is using a red border on the input field, you are preventing users with color blindness and other deficiencies from knowing the necessary information to complete that form. Other visual indicators such as an asterisk or text stating the field is required would make this much more inclusive for all users.
Another common color-related issue on a website is making sure text stands out against the background. Generally, you’ll want to use a dark color against a light color. This will ensure the two don’t blend together and the content is easy to read. You wouldn’t want black text on a dark green background as it would be very difficult to read. On the other hand, a light gray text on a white background can be very hard to read as well.
Webaim.org’s Color Contrast Checker is a free and easy tool to check if your website’s color passes the test.
Accessibility doesn’t have to be hard. You could spend month’s trying to make your website as accessible as possible but if you start with the basics, you’ll have a more accessible site in minutes! Try out these tips and let us know on social media how it goes.