Ensuring a site can be used by everyone is crucial when it comes to web design.

We’re all familiar with WCAG, but it can be hard to figure out the most effective changes to implement. At Codiance, we ensure our software is compliant with the AA tier at the minimum — as is standard in legal and governmental fields. Inclusivity is a core value in our people-led ethos, so it makes sense that we were invited to restructure Aberdeenshire council’s website to adhere to WCAG. Having led the way in inclusive web design, here are the most significant changes you can make to your site to ensure everyone can make the most out of your organisation. 

One of the basic steps to WCAG compliance is ensuring your site is keyboard accessible.

That is to say, your site should be completely functional without a mouse. This means opting for <button> elements in your code, not just <div>. A quick way to elevate your site to AAA compliance, however, is to provide alternatives to mouse-specific tasks like dragging. This is an easy fix that most of us can implement, and means whether your client has mobility issues or a situational disability (like an out-of-battery mouse), your site is always accessible. 

While enabling keyboard control is a pillar in WCAG, your site may still run into problems with screen readers. When allocating tab-controls in your site, double-check the tabindex attributes are reflective of the reading order of your site. The default order is usually accurate but, particularly where elements like columns and headers are used, we recommend labelling manually to avoid any errors. By extension, when you’re getting creative with your site layout, we recommend staying in CSS for this rather than the foundations of the site itself, otherwise you may interfere with the custom tabbing order. This ensures that the body of your site can be navigated by screen readers, yet there’s still work to be done before your site is fully compatible with screen readers. 

Logical and meaningful coding goes a long way when it comes to WCAG compliance.

Because screen readers utilise the code beneath your site, it’s important to be clear and intentional even behind the scenes. Along with programmatically determining the order of your site elements (so screen readers work chronologically, rather than jumping around the content), ensure your UI control text labels are specific and explanatory. They should make sense out of context: a button labelled ‘click to subscribe’ will make much more sense read aloud via screen reader than a button labelled ‘click here.’ Likewise, icons added via <i> are incompatible with screen-readers; instead, we recommend opting for <span>, instead.  Finally, when it comes to status messages, assign these a role or provide them a property which alerts non-seeing clients of changes. This will solidify your site in the AA tier of WCAG, and round it off as being fully compatible with screen readers. 

To build a fully accessible site, it’s not just about being clean with your coding.

When we redeveloped Aberdeenshire Council’s website for Umbraco 13, it was necessary for us to ensure the site was compliant with the AA level of WCAG: local authorities are reviewed by the cabinet office to ensure they are accessible upon publication. Here, our web developers cross-referenced the work regarding the Umbraco update that already needed to be complete with the work that would elevate accessibility. For instance, as we migrated carousels, we rebuilt them with the option to be manually paused and fully controlled with a keyboard. When incorporating WCAG in web development, our efficiency and expert knowledge made an intimidating task effortless. 

Along with catering for situational and physical abilities, it’s hugely important to ensure your site is accessible for those with cognitive disabilities. 

WCAG tiers AA and AAA argue for the use of clear, jargon-free language in web content. In the same way that catering for keyboard users benefits non-disabled people without a mouse, catering for cognitive disabilities benefits your entire client base by ensuring your content is easy to understand. Dense language that only senior developers can understand won’t win you any customers. Instead, our best recommendations for this are to provide definitions for industry lingo, and write in an understandable way. This is especially important if you’re in a highly complex and niche field, as there are already many barriers within these fields that stop disabled people from getting involved. This isn’t a complicated step, but it can go a long way.  

When it comes to accommodating cognitive disabilities, we also recommend ensuring your site’s design is visually and functionally consistent.

It goes without saying, but users should be able to get around your site easily. Some people struggle with recollection and recognition, so keeping navigation panels and other elements in the same place is foundational for cognitively disabled people to access your content. Building sites that are intuitive to use are great for your webpage’s aesthetic, and its traffic. When we redesigned Bedfordshire University’s website, we elected to implement scrolling instead of deep linking because it was more natural for users, even though it wasn’t the quickest route to the destination page. Afterwards, Beds saw a 68% increase in enquiries the following year — in part, because their site now felt easy and empowering to use.  

WCAG demands that your website be resilient and robust, so that it can handle constantly advancing assistive technology. 

Even the ways we access the internet are constantly changing: screen-readers and computers, yes, but also phones, tablets, and watches. A basic way to adapt with this — that ranks AA on the WCAG — is to ensure your site functions well regardless of orientation. If your text remains legible when zoomed in by 200%, and you can zoom in up to 400% without needing a horizontal scrollbar, your site is good to go. This benefits disabled users with orientation-locked devices, but also your client when they’re referencing your site on-the-go, and your coworker who swapped their laptop for an iPad and never looked back. Futureproofing is a priority at Codiance, and we guarantee it in every way, in every service. Noticing a theme yet? 

These are all simple, logical tweaks to make to your site — and for good reason. Nine times out of ten, the designs that are most intelligent, cohesive, and natural, are the ones that are the most inclusive. Accessibility benefits everyone. At Codiance, we specialise in making digital products that are intuitive and adapted to your specific needs, so that you and your clients can have a smooth and enjoyable process from start to finish, and beyond.