News

Preparing and testing the accessibility of your site

A close-up view of a lifesaver ring in front of a calm sea and clear blue sky

Accessibility and ease of access is important in all aspects of life, be it enabling people with mobility needs to use public transport systems, providing audio descriptions and subtitles for television programmes for people with different levels of visual and auditory acquity,

Accessibility is especially important on the World Wide Web, as at least 10% of the world's population have at least one additional accessibility need.

Making your website accessible can be a simple process which can benefit everyone. Here's a few tips from our developers for implementing and testing accessibility features in your website.

Validate your site

Having valid HTML on your website is important not just for accessibility reasons, but it also helps your rankings in search engines.

The first step in making your site accessible is to validate your code and make sure all tags are closed properly, and that elements do not have attributes which they do not support.

We use a number of tools for validation, including browser extensions such as Chrome's Lighthouse auditor and Validity, and the World Wide Web Consortium's (W3C) Nu HTML Checker.

Running all of your site's pages through these tools and fixing all flagged errors and warnings will have a marked impact on the usability of your website for visitors and its performance in search engine results.

ARIA attributes

The Web Accessibility Initiative's Accessible Rich Internet Applications specification, or WAI-ARIA sets out a few simple attributes which you can add to elements on you website to help your visitors' browsers to know how to interact with those elements, and greatly improves the usability of the site for visitors using screen readers and other assistive technologies.

We apply W3C's Using ARIA recommendations and our extensive experience in producing websites enabled for assistive technologies to every site we build.

This website is a good example of using the ARIA attributes in your mark-up. Right click and view source to see the code, and search for role, aria-title, and aria-label.

Contrast and colour combinations

When designing your site, it is important to make sure that your font colours have enough contrast with your background colours. Choosing high-contrast colours enables users with partial or colour blindness to use your site without requiring screen readers.

A good tool for testing how usable your site is for users with various levels of visual acquity is ChromeLens. ChromeLens allow you to simulate a variety of different types of vision such as partial blindness, proto-, deuter-, and tritanomaly, and achromatopsia.

Image alt attributes

Many sites do not correctly use the alt attribute of the image tag correctly.

You should make sure that all of the alt attributes on your site contain a short description of the content of the image and not repeat details such as the page title or description.

For example, the description of the image for this article is "A close-up view of a lifesaver ring in front of a calm sea and clear blue sky", which describes the content of the photograph clearly and concisely without going into too much unnecessary detail.

Microsoft Narrator and VoiceOver

Testing your site in a screen reader is one of the most important things you can do when making your site accessible. Microsoft Narrator comes with all versions of Windows since Windows 2000, and VoiceOver is included in all versions of iOS since 3.0 and all versions of macOS since 10.4.

You should make sure that your test screen reader reads text in your site in the correct order, and that it correctly reads out all of the navigation and content elements on each page.

If you find that your screen reader is reading out text in the wrong order, check the order of the elements in your source code and make sure floated and absolutely positioned elements are located in logical places in the code.

Accessibility implementation and testing services

Studio Vinari is an industry leader in implementing accessibility features in websites, be they existing sites which need updating, or ground-up rebuilds of complex web applications.

If you have a website or web application which needs updating to implement accessibility features, needs its accessibility features to be tested, or you are interested in finding out more about any of our services, send us an email at hello@studiovinari.com and let us know your needs!


Contact us


If you're interested in our development services, please contact us at
hello@studiovinari.com!

 

Careers


Want to work with us?

Drop us a CV at work@studiovinari.com!

Support


Something hokey? Got a suggestion?

Pop over to our Support Portal and let us know.

Support portal