Blog

Accessibility or Usability? Subtle Differences That Make a Big Impact

blog_post_178

The internet is a big place. It is free and open to all, provided you don't live in a nanny state, but that is a different topic. Here at Klyp, we design and develop websites for a range of clients, and with that comes an even greater range of end users. Keeping in mind how those end users will be able to access and interact with a website and the content within, is a key aspect of both accessibility and usability. Accessibility, often abbreviated to a11y (eleven characters between the 'A' and the 'Y'), and usability are different things, but quite often go hand in hand. Accessibility focuses on making content accessible to all, specifically geared towards those with disabilities, while the usability is focused more towards general usage, including the layout, structure and presentation of information. Web accessibility is a large issue, but can easily be overlooked if you are not paying attention. Here in Australia, the Disability Discrimination Act, states that equal access is required by law, where it can be reasonably provided. Therefore, it is our responsibility as digital media specialists and content creators to do what we can to aid all users.

"It is our responsibility as digital media specialists and content creators to do what we can to aid all users"

One of the web projects we currently have in development features a lot of education and training videos. As an example, such videos should have subtitles, as subtitles in videos increase the usability of the content, benefiting users in environments where the content cannot be clearly heard or where sounds cannot be played. This improvement in usability would also increase the accessibility, as any user with hearing disabilities would also benefit from such an improvement. While it may be relatively simple to implement, such an improvement can have a big impact on many people who would otherwise be unable to consume the content.

The World Wide Web Consortium (W3C), is an international community that works to develop web standards. The group is led by Tim Berners-Lee, you know, the man that actually invented the internet, so he has a pretty good idea how things should work. The W3C has the Web Accessibility Initiative (WAI), which develops strategies, guidelines, and resources to help make the web accessible to people with disabilities. One of the guidelines they have set forth is the Web Content Accessibility Guidelines (WCAG), currently version 2.0, which has several different levels of accessibility, ranging from rules that should be implemented, to ones that are optional for additional inclusion. These levels are labelled, 'A', 'AA', and 'AAA' respectively. Here at Klyp, we aim to at least meet WCAG-A with everything we design and develop, however government sites require that level AA is met. As website developers, there is a lot we can do to ensure these guidelines are met. If you’re not a developer, you’re not of the hook yet either. There is still a number of things you can do with the content to aid the accessibility and usability of your site, whether you are the website’s owner or someone in charge of managing the site.

The options available to you may be limited by your Content Management System (CMS), but any improvements you can make will be gladly welcomed by those who would benefit the most.

1. Video Captions or Transcripts: as mentioned, where possible, any videos on your site should have subtitles and/or a transcript available. On top of that, videos with sound should not auto-play, as this is non-consensual sound which you are forcing onto your users.

2. Image Alt Titles: check that all images on your site include an "alt" attribute, which provides alternative text for the image. The alt attribute should be empty on images that are purely for decoration, however, a meaningful description should be provided for all other images. This alternative text is presented on the screen to users when the image fails to load, but not only that, it is also read out using a screen reader or other assistive technologies:

  1. An image for decoration would have the
    <img src=“/image.jpg" alt="">
        
  2. An image that has meaning and content within
    <img src="/image.jpg" alt="Staff Picture - Aaron Humphreys">
        

3. Readable Content: while on the subject of images, content should not be presented within images, as these are not accessible to screen readers, and also, should the image fail to load, users will not be able to view the content at all.

4. Correct Heading Structure: when done correctly, a heading structure can aid in the flow of information. Using a element just because its appearance suits your needs is not the correct way, any styling should be done via CSS, as the appearance does not dictate the level. Headings should be structured in such a way as to act like a Table of Contents and, as such, heading levels should not be skipped either. Although with HTML5 standards more than one element can be used on a page, this should be avoided unless your site is structured to handle this.

Example of a correct heading structure:

<h1>
    <h2>
        <h3>
        <h3>
    <h2>
    <h2>

Example of a wrongly applied heading structure:

<h1>
    <h3>
<h1>
    <h2>
        <h4>
        <h4>

5. Descriptive Links: when adding links to other pages or resources, ensure the content of the link is descriptive and effective. Having a link that says “click here” literally gives no information as to the link’s content. This link is read out to screen readers and fails to providing any information to those users. Changing a sentence from “`Click Here` to view our blog" to “View `our blog`” alters the meaning to assisted users dramatically. You can even take this a step further and write something like “View our `development blog`”. By adding additional useful information to the link, you are also improving the way search engines view your site, links and content. So that’s a win-win from an SEO and user perspective.

As you can see, improving the accessibility of your site, not only improves usability, but in some cases creates additional value by seeing search engines reward your efforts through higher rankings as well. These are all great reasons we should all strive towards making the web accessible, to improve the experience for all users.

Want to know more about website development best practices, or see how we can help you take your website to the next level? Get in touch today.


Aaron Humphreys Aaron Humphreys

About the author:
Aaron is a "Full Stack" Developer at Klyp. He is a technology enthusiast and gamer at heart.