Why accessibility is important on a B2B website

For any type of website, it is important for the content to be as far-reaching as possible. I don’t mean far-reaching to a wide demographic through good marketing and SEO. I mean that you should make sure everyone who visits your website can access the content on it.

One of the fundamental values of the web is its universality; it should be available for anyone on the planet to use, regardless of their location, language, ability and the hardware available to them.

At its core, web accessibility is the practice of making sure that a website’s content is accessible to everyone who visits the site; most notably those who are differently-abled and use different techniques for navigating and accessing content on the web.

The WCAG (Web Content Accessibility Guidelines) are detailed guidelines developed by W3C (World Wide Web Consortium) on how to approach and improve web accessibility. These go into a lot of depth and any good web developer should be acutely aware of them. Some of the more popular methods are included below.

Website accessibility methods:

Focus states

All interact-able elements such as links, buttons, form inputs, togglers and dropdowns should have visibly clear focus states. These are added by the browser by default, however I have come across many websites which have actively removed focus states, which is poor practice.

Focus states show the user which element is currently ‘in focus’. This is of most use for users who don’t use a mouse out of choice or necessity, instead they can use the keyboard to navigate the site using the tab and enter key (some elements may also allow the arrow keys and spacebar to be used).

The tab key can be used to cycle through all the interactable elements on the page in a logical order. This shifts the focus from one element to the next allowing the user to visually navigate the page using this method.

Focus states may also be useful for users with visual impairments, because they show where on a page has been clicked when using a mouse.

Colour contrast ratios

Ensuring there is enough of a contrast with typography and its background is a vitally important aspect of web accessibility. This is more of a design choice, as opposed to something that needs to be considered during development.

There are a number of online tools for checking with colour contrasts, such as this one from WebAIM.

Image alt tags

The ‘alt’ tag is an attribute added to HTML image elements to give the image context. Alt tags make images more readable by machines and are used by software such as screen readers – a form of assistive technology that renders text and image content as speech – to explain what an image is to the end user.

Link naming

Similarly to image alt tags, link naming is used to give links contextual information, to better explain what a link is and where it will take the user. Link naming is also required for screen readers to work well.

This is particularly important for links that wrap around images, or links which are visually just one word, such as ‘Go’ or ‘Next’. Link naming should be used in these instances to add context to these links, and this information can be visually hidden from the page so that it is only picked up by a screen reader.

Heading semantics

Within HTML, there are 6 heading elements: H1 to H6. These are hierarchical and it is important that throughout the page they are used logically and in a sequentially-descending order.

Heading elements help to structure the content on a webpage. Correctly ordered headings, that do not skip levels, make a page easier to navigate for assistive technologies such as screen readers. 

Enabling browser zoom

While websites should generally be viewed at 100% browser zoom where possible, it is important to allow users to adjust the browser zoom should they need to.

Some websites are programmatically set to prevent the user from being able to zoom. This is considered poor practice in terms of web accessibility and should never be done.

Transcript for audio

All audio and video on a site should be transcribed, so that those with a hearing impairment have access to the content. This is something that a website administrator needs to consider, as opposed to a developer.

Other accessibility aspects

Good web accessibility is not limited to practices that allow those with impairments to access the content on the site. It is also important to consider the hardware and software that the end user has access to. 

Graceful degradation

While most web developers will ensure that the sites they build work on the most popular and modern browsers, consideration must be given to how accessible the content of a site is for users who may not be able to fully experience a website due to technical limitations.

Graceful degradation is the practice of ensuring that a website’s basic functionality and content is maintained and a certain level of user experience is still available in as many cases as possible.

This could be due to:

• The user’s browser not offering up to date features and functionality which are seen as industry standard.
• The user being on an unstable or poor network, meaning not all of the page’s assets (such as JavaScript, CSS, fonts and images) are successfully loaded.
• The user actively choosing to have JavaScript disabled.

With graceful degradation it is imperative that a site’s content and core function is still accessible in all of the above cases. It is becoming more and more common for websites to rely on JavaScript as a necessity rather than a technology that enriches the user’s experience.

SEO

There are also SEO benefits to adopting good web accessibility practices. Both heading semantics and use of image alt tags (as well as other good practices) are metrics Google’s search engine actively considers when crawling web pages and indexing them for SEO purposes. 

If you want to learn more about accessibility on a website, read how we approached accessibility for our client, Learnosity. 

If you’d like to find out more about how we can help with our technical accessibility and UX audits please feel free to contact us.