Five practical ways to make your website more accessible

Website accessibility is fundamental to a more inclusive web. Removing the barriers that sometimes can be caused when style is prioritised wrongly before usability. Carefully considering you choices will make your website more accessible to more of your audience.

Category: Accessibility | Read time: 10 minutes

Read more

Website accessibility encompasses all aspects of a website, from the navigation through to the media used on the pages (images, videos etc).

In this article we will be covering five practical ways that can make a real difference in a short period of time to your whole audience to ensure you are inclusive.

Table of Content

    When designing and developing your website always remember accessibility should seamlessly be threaded through the website.

    Inclusivity should be at heart of your design. So when adding new layouts, content types or adding videos/images you must always consider the impact on the end user.

    It can be tempting when creating a new website to use on trend things such as parallaxing backgrounds, animations. Be mindful to ensure you do not hinder and distract the end user.

    The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” But accessibility is not a given. It requires work.

    Sir Tim Berners-Lee

    Sir Tim Berners Lee, highlighted the importance of accessibility being inclusive. Your website should create opportunities and therefore not create barriers for your audience.

    What can we do to make our websites more accessible?

    There are number of things you can do to ensure compliance with The Web Content Accessibility Guidelines (WCAG) and I will be focusing on the following for this article as these I feel are things can easily be implemented:

    1. Adding ALT attributes to you images
    2. Headings should be written in logical sequence
    3. Colour contrast
    4. Ensure links are recognisable
    5. Use list items for lists (ol,li,dl)

    Adding ALT attributes to you images

    When adding images to your website it is important to include Alt attributes to them. ALT attributes describe the image to someone who is using the website with a screen reader. If no ALT is found it will sometimes use the filename which may not be descriptive at all.

    So be aware of this when naming your files. It is worth noting decorative images like custom spacers should add an ALT attribute but leave it blank.

    Background out of focus with lightbulb illuminated in right hand corner of image
    Check out my ALT Attribute

    Headings should be in a logical sequence

    When using headings in your content they need to follow a hierarchical structure. H4 should never come before a H3 as this breaks the sequence.

    Headings are based on how far you drill down into each subheading. Sequencing in the headings shows the importance of the headings with the content. Use font sizes to further convey the importance of each heading.

    Heading structure of this blog post

    Colour contrast

    Colour contrast levels of the elements is extremely important to the legibility of content that is being overlaid on. Colours with poor contrast can be jarring, illegible and very distracting.

    A useful resource for checking your contrast levels from WebAim. This tool provides you a score to show you the level of contrast in your colour palette.

    Contrast Checker: https://webaim.org/resources/contrastchecker/

    Ensure links are recognisable

    Using colours alone should not be relied upon to highlight links within your content. Poor contrast in your link colours will make it difficult to identify links as they become less visible.

    Using underlines on your link is a good way to convey links within your content. Colour should only be applied as a secondary identifier and not the primary one.

    Example of a link within the content

    There are many different forms of colour blindness so be mindful when choosing your colour palette. Red is a great example of sometimes being a difficult colour to identify for people with certain colour blindness types.

    Use list items for lists (ol,li,dl)

    Using semantic elements in your content is really important for screen readers and browsers to be able to identify each element and their context within the layout.

    When writing lists it is important to use the correct markup. These are the list elements:

    • ol (Ordered List – numbers)
    • li (List item – Bullet points)
    • dl (Description list).

    These are just a number of things that need to be considered during the development of a website. I recommend reading the Web Content Accessibility Guidelines to build up a list of relevant items that are used on your site and to ensure you comply with the various levels of compliance.

    If you would like some help with improving your website. get in touch via my contact form.

    Resources

    1. https://www.a11yproject.com/checklist/#toc_Does-this-checklist-guarantee-my-site-is-accessible-
    2. https://webaim.org/resources/contrastchecker/
    3. https://www.w3.org/WAI/standards-guidelines/wcag/

    Disclaimer: These are a small number of things to be aware of when looking to improve your website accessibility and this will give youa good starting point.