8 Tips for Website Accessibility

8 Easy Tips to Make your Website more Accessible

Website accessibility is an everchanging concept, with newer assistive technologies and increasing demand for providing users with more accessible websites, it is important that your website has high accessibility scores. By providing an accessible website, you are showing to your audience and users that you can provide equal access and opportunity to everyone, people with diverse abilities or not.

The importance of having an accessible website is further supported by the UN Convention of the Rights of Persons with Disabilities. The UN recognises that any access to information, including via current technologies and availability of the online world, which includes the web, is a fundamental and basic human right. Therefore, if your website is not accessible, or shows that it is trying to accommodate, persons with disabilities, then you could be denying people of their human rights.

Disabilities can majorly affect the way your users experience your website, for example:

  • Visual impairment can impede users from seeing colours clearly, therefore, restrict the content they can see properly.
  • Photosensitive seizures can be triggered via flashing lights.
  • Motor disabilities affect the way people can use a mouse.
  • Hearing impairments, if your website is video-based then subtitles need to be provided.

Luckily, computers and devices accommodate human disabilities and there are numerous assistive technologies to help people browse the internet. Some of these technologies include screen readers, speech recognition software, braille terminals and alternative keyboards. Therefore, what can you do to make your website more accessible?

8 Tips to Make Your Website More Accessible

There is a variety of methods that you can adopt to help your users have a better experience on your website, by making it more accessible. With each method, you can also test the results via Google’s Lighthouse speed test. This test analyses your website for accessibility, showing any issues you have, how you can improve and what tests you have passed. Some important practices you can adopt are:

1. Alt Texts

This practice should be undertaken by all web developers and website owners alike, it is very easy to do and highly effective in making your website more accessible for all. Alt-text is a bit of text, usually a few words or a sentence, that describes an image, giving context to someone who is using a screen reader. The screen reader will, essentially “read” the picture, telling the user what it consists of, based on your image’s alt text. The more descriptive the alt text sentence (or alt description) is, the better.

2. Form Labelling

If your website has a contact form (which it most likely will), then it is important to clearly label each input field. By having labelled input fields, screen readers and users that struggle with vision can more easily see which input fields are for what and, therefore, fill in the correct information to earn your business.

3. Accessible Button Names

Buttons are frequently used across websites that direct users to new pages, to submitting information and to open popups, menus and more. Therefore, they need to be labelled accordingly to help users navigate and understand what that button does. However, it can be common for a button to be an image or an icon, for example, your hamburger menu icon may be a button and will not require text. Therefore, in this situation, you can use the attribute “Aria-Label= Your button description”. This allows screen readers to still read your button, despite it not having any visible text. Additionally, these labels should be unique per page, so assistive technologies do not overlook them.

4. Discernible Link Names

Similar to button text, you will have link text on your website that directs readers to certain pages and sections. It is important for these link names to indicate what the end location will be. Therefore, it is best practice to avoid using terms such as “read more” or “see more” because it is quite ambiguous and unclear for a screen reader. Try using some more specific descriptive terminology to help assist your users, for example, “read article”, this directly specifies that the user will be clicking a button to end up on an article.

5. Title Tags

Every page has a title tag that search engines typically display. This tag should be around 50-60 characters long and is one of the key features for your website’s SEO. However, importantly, it also helps make your website more accessible by providing information about your webpage to screen readers. Your webpage’s title will be formatted as such “<title> Your webpage about… </title>”.

6. Language Attributes

Another very simple yet effective method to making your website more accessible is by using a language attribute for each of your pages in the HTML tag. By inserting a language attribute, like such: <html lang=”en”> you are pre-emptively telling assistive technologies that your webpage consists of the language highlighted in the lang attribute.

7. Colour Contrast Ratios

Web Content Accessibility Guidelines (WCAG) have set rules and regulations for web pages to adhere to in order to be seen as accessible. There are specific ratings of text size, graphics, and colour contrasting that need to be followed in order to have an accessible website for people with certain disabilities. WCAG 2.0 requires a contrast ratio of a minimum of 4:5:1 for normal text and 3:1 for larger text, yet this is only for a level AA, if you wish to have a higher level of AAA, WCAG requires a contrast ratio of a minimum of 7:1 for normal text and 4:5:1 for larger text. Large text is typically defined as around 18px-19px. There are many websites where you can test your colour ratings for free, to balance your company design colours against their accessibility. Check out this contrast checker for more information.

8. List Items

List styles and list types that are defined by the tag “<li>” need to be wrapped in their standard parent category format which is either “<ol>” or “<ul>” which define ordered list and unordered list respectively. For screen readers to properly read formatted lists, they need to be displayed in this format.

Accessibility Matters

There is no reason that you shouldn’t optimise your website for accessibility. The ability to browse online is a basic human right and your website should make it as easy as possible for people with disabilities to navigate through your website and have a good experience. Additionally, by making sure your website is more accessible, you will also see increases in SEO which can provide more traffic and more conversions for your business.

If you are looking for some help to make your website more accessible, or simply to just understand more, you can contact us for a free consultation at www.absolute-websites.com/contact.html.

Subscribe to our newsletter for the latest tips & tricks in the online world!

Google's Website Test - Quickly Improve Scores

Free Cheat Sheet