SOPHISTICATED CLOUD - Squarespace Web Designers

View Original

How to build a more accessible website

The more people visit a website, the better. In fact, making a website that works for as many people as possible is not just good for business, it’s also the right thing to do.

Web accessibility involves designing websites that are optimised for everyone, including those with physical and cognitive disabilities, as well as people with technological or situational limitations like low bandwidth.

Accessibility is a place where good business, effective design, and inclusivity align. There are international web standards that detail the requirements for web accessibility, which are worth reviewing in full. In addition, depending on their location or jurisdiction, some of your clients may have particular legal obligations around accessibility.

Building a more accessible website

One of the first steps in designing an accessible website is optimising its default display settings. It’s crucial that different site visitors can read your site’s text and view its content on a range of devices.

  • Text size

Text size is a vital component of accessibility. Minimum text size should be 18–20px.

  • Spacing

When changing letter spacing, it’s crucial to use values rather than inputting extra spaces between letters. The latter practice may cause screen readers and other assistive technologies to read out your paragraphs as a string of letters, rather than a meaningful sequence of words. 

  • Text alignment

When text is to read from left to right, ensure that the alignment is either to the right, left, or center aligned–rather than justified. Justified text is spaced to align with the width of the text box, which can lead to both spacing and readability issues. 

  • Paragraph width

Excessive paragraph width can also cause issues in legibility. Ideal paragraph width is 65 characters, or within the range of 45 and 85. Both width and spacing can be controlled in site styles under spacing. 

  • Line height

Many platforms will default line height to 1.2, but the minimum recommended line height for accessibility is 1.5.

  • Contrast

Adequate contrast between text and its background is vital. A ratio of at least 4.5:1 for normal-sized text is usually an acceptable baseline. You can determine your contrast ratios using an accessibility checker. Text size and other factors impact contrast ratios. Other considerations include avoiding bright colours that can cause issues for people with dyslexia. You can learn more about the finer points of contrast and luminance ratios.

  • Links

Links should always be informative. Instead of saying, “click here,” let site visitors know where the link will take them.

  • Navigation

Consider that some people may only use a keyboard or other controller to navigate a website. Responsive visual cues, like highlighting selected navigational elements, can be essential for those site visitors.

  • Language

Avoid cryptic language or verbiage that’s dense with idioms and other features that may be difficult for non-native speakers to understand. 

Inaccessible websites exclude certain people from the web. Developing your accessibility skillset is rewarding in itself, but can also make you a more well-rounded web professional. While accessibility is a professional and social obligation, it’s also a great way to create stronger user experiences and enhance your client’s brand.


GUEST BLOGGER AUTHOR:

CLAUDIA TINNIRELLO