August 14th 2020

Web Accessibility Tips for a New Site Build

Ensuring your website is accessible to users with the broadest range of abilities and requirements is a vitally important step to creating an inclusive experience and reaching the widest possible audience. For a little more background into the importance and impact of web accessibility, you should check out our introduction to web accessibility.

Web accessibility, much like SEO, is more than just alt tags and meta data. Accessibility requirements stretch way beyond passing an automated audit or being technically compatible with screen readers; many aspects of design, tone of voice, site structure and content structure can have an impact on how users with accessibility requirements will experience your site, and therefore accessibility needs to be woven into every aspect of a site’s creation and maintenance.

As a result, while it is possible to improve the accessibility (and the SEO) of a site once it’s been built, it’s often easier and more efficient (not to mention more effective) to produce a comprehensive accessibility spec for a site during the early phases of a new site build.

In this article we will look at accessibility principals, how they may impact a new site build, and most importantly who needs to be aware of each of the success criteria to ensure it’s executed correctly. As each new site build is different, and all websites have different features and requirements, it’s impossible to cover everything here, but keeping these principals in mind can go a long way to making sure your new site fulfils most requirements. For a comprehensive list of accessibility requirements, you can refer to the WCAG guidelines.

It’s worth noting that most of what we’ll discuss here refers to AA accessibility compliance. There are three levels; A, AA, and AAA, where AAA compliance is the most stringent, and can be very difficult to achieve. Even WCAG themselves note that most sites won’t be able to reach AAA levels of compliance. If you’d like advice on reaching AAA levels of compliance, we’d love to hear from you!

Principles of Web Accessibility

The most common web accessibility guidelines are the WCAG2.0, or 2.1, which are built around 4 core principles. These dictate that in order to be truly accessible, sites should be Perceivable, Operable, Understandable and Robust. Below we’ll give a broad overview of each area, but you can find more specific and comprehensive criteria for each in the free template you can download at the bottom of the page.

Perceivable

What does it mean?

Perceivability refers to how users with different sensory abilities may be able to perceive the content on your site. Perceivability relies on your site content being available through multiple senses so, for example, a user with visual limitations can perceive images through alt text and appropriate captions, or transcripts allow users with auditory limitations to follow video content more easily.

Use of colour can also affect the perceivability of a site – changing the colour of link text without also underlining or bolding it can make it more difficult for some people to pick out links, or using colour coding in a diagram without also using labels or descriptions can be difficult for some to easily perceive.

Ensuring that there’s enough colour contrast between your site’s background and text can make sites much more easily perceivable for many users.

How will it impact a new website build?

Perceivability will mainly affect two broad areas of a new site build. Firstly, it will be worth taking stock of all the types of content you plan to migrate from your old site or create for your new site. Then, you can go through each in turn and assess whether it’s perceivable in its current format, or whether perceivability could be improved. For example, if you have a great bank of podcasts or videos on your current site, you’d want to check that there’s a transcription available (or an audio description for video content).

The second area that will be impacted is site design. We usually find that the earlier in the process accessibility is considered, the more successful it is. This holds especially true for rebranding and digital transformation projects because when accessibility is considered from the start, templates can be designed to incorporate image captions and transcripts etc. and colour palettes can be chosen to have appropriate colour contrast from the get-go.

Who needs to know about it?

Different aspects of perceivability will impact different members of your team, and ideally, everyone will be briefed on the concept of accessibility in the context of your new site project. We find the most important considerations for each area of your team are as follows:

  • Brand team – should be briefed as early on as possible regarding readable font sizes and colour contrasts.
  • Content team – should be aware of how different types of content (e.g. video, audio, image-heavy etc.) are perceived by users with different sensory abilities so they can ensure appropriate alternatives are provided. This is important on an ongoing basis, so any content added to the site in future maintains the same standard of accessibility.
  • Design team – need to be aware of multi-media alternatives (such as captions and transcripts) so that they can be included in page templates. They should also be aware of colour palette and font selection in-line with the brand team’s decisions.
  • Developer – needs to be made aware of multi-media alternatives that require technical implementations such as closed-captioning, audio descriptions, alt text and Recaptcha alternatives for form submissions.

Operable

What does it mean?

Operability requires websites to be easily operable using a number of different methods, including assistive technologies such as screen readers. Things to consider for your new site to be operable include:

  • All functionality should be accessible from a keyboard (you can test this by using the Tab and Tab + Shift keys to navigate around the page). Ensure the tabbing order is logical (usually left to right, top to bottom), and that each focusable element has a visible focus indicator (usually a box around the element). Watch out for dialogue boxes and pop-ups, which can create keyboard traps if not built carefully.
  • UI elements such as tabs, buttons and drop-downs should be large enough to be easily operable by users who may struggle with the fine motor control. They should also have enough inactive space around them that accidentally clicking slightly outside the element will not result in an unexpected action.
  • Proper use of HTML semantics (think HTML5 elements like <nav>, <main>, <ol>, <ul>, <button> etc. plus appropriate heading structure) allows users of Assistive Technology (AT) to navigate to the parts of the page they want to interact with much more easily. If there is no appropriate HTML5 element available, make use of ARIA mark-up instead.
  • Allow users to pause or slow down anything time limited. For example, allow users to pause sliders and carousels, or avoid putting time limits on processes like checkouts.
  • Avoid the use of JavaScript OnClick for UI elements such as accordions, as this is often incompatible with AT.
  • Ensure all links have descriptive text, particularly if images are linked (e.g. Click here is not descriptive link text, however this introduction to web accessibility is).
  • Do not use any flashing or blinking content that could cause seizures.

How will it impact a new website build?

The biggest implication for operability is ensuring you have a range of methods of interaction with your site catered for. This will include ensuring great semantic mark-up and descriptive link and alt text is used for non-sighted users, making sure the site can be easily navigated with or without a mouse, and that any automatic content changes (such as automatic sliders or carousels) can be stopped or slowed down.

There will also be some design considerations, such as making sure interactive UI elements are large enough and simple enough to operate, even for users who may have difficulty with fine motor control (or just those of us with fat fingers!). Some newer UI controls don’t have a native HTML5 element, or well-supported ARIA alternative, so you may want to avoid these at the design phase.

Finally, you should pay attention to how content is structured (heading structure, lists and tables etc.), and make sure that you have the right back-end functionality to upload content correctly. Make sure your content team will have all the tools they need to create accessible content in the CMS, so you can stay on-top of accessibility as content is added or updated in future.

Who needs to know about it?

  • Design team – your designers may want to design their own focus indicator (as opposed to using the browser’s native focus indicator) to make sure it’s in-keeping with the site and has sufficient colour contrast. You may find it useful to give your design team some guidelines regarding which types of UI controls have native HTML5 elements or well supported ARIA attributes associated with them early in the design process, so they don’t design elements that may not be compatible with AT.
  • Content team – has a good understanding of how to use the different element types when creating or uploading content. Make sure they understand that heading level (H1, H2 etc.) should reflect the function of the text within the page, and should not just be an easy mechanism for styling (this may mean they need to use a little inline CSS to style some elements as they like.)
  • Developer – needs to be aware of the different ways users will need to be able to interact with your site, and will need some guidance on the technical requirements to make that possible.

Understandable

What does it mean?

‘Understandable’ means that users should be able to easily understand both the content on the page, and how the user interface works. This could mean providing a glossary to explain any technical language or jargon, making sure your content is written in clear, plain English, or making sure you don’t use any non-standard UI controls.

How will it impact a new website build?

Understandability will affect two main areas of your new site build; making sure content is written to be easily understandable and making sure the interface is easy and intuitive to use.

When creating copy, try to avoid using figurative speech or unnecessarily complex or technical language. If you do use technical terms that your users may not be familiar with, consider providing a glossary or explanation. If your site requires user input or interaction, (such as filling out forms) make sure you provide clear instructions.

In terms of UI design, try to avoid veering too far from commonly accepted practices. Usually, navigation menus go at the top of the page within a header section, the main content sits below the header, and there’s usually some kind of footer with quick links and contact info at the bottom of the page. Navigation menus should be consistent across every part of the site (except from in-page navigations), and the site structure and purpose of each page should be logical. If a user needs to fill out a form with their phone number, usually a group of number fields for regional code and the rest of the number are pretty intuitive.

Phone number input field with plus button control
This is not intuitive.

Who needs to know about it?

  • Brand team – if you’re planning a complete brand overhaul, or if your existing brand guidelines encourage overly creative or flowery language, you may want to address this with your brand team.
  • Design team – great design should account for understandability anyway, but you may wish to clarify this requirement, and ensure the impact of non-standard UI features is fully understood before they begin the design phase.
  • Content team – your copywriters should be aware of the importance of readability and avoiding using too much idiom or figurative language. Clear instructions where user input is required is also important, and imagery or diagrams to support text can also be very helpful.

Robust

What does it mean?

Robustness means that the site is able to be interpreted by a wide variety of browsers, user agents and assistive technologies, and will continue to be compatible in the future as these technologies advance.

How will it impact a new website build?

Robustness is not just a criterion for accessibility success; it’s an integral part of great web design. Ensuring broad browser compatibility, with responsive design that allows the site to be accessed on a range of viewport sizes and, if possible, portrait and landscape orientations.

Many assistive technology devices are not compatible with complex JavaScript, so ensure all of your content is available with JavaScript disabled and that the site doesn’t lose any critical functionality without JavaScript.

Who needs to know about it?

  • Design team – mobile, tablet and desktop designs will need to be created. Depending on nature of the site, your design team may need to create separate designs for mobile and tablet devices in a landscape orientation.
  • Developer – your developer will need to build the site to support all commonly used browsers, and to be compatible with all device types and assistive technology. All users and user agents should have access to the same content.