Kevin McKinless - UX Designer, Texthelp

How to improve web accessibility - WCAG for beginners


Have you ever avoided delving into WCAG compliance due to its complexity? Never fear, we’re here to help. This blog will highlight the main components of web accessibility, without all the technical jargon. 


how to improve web accessibility. WCAG for beginners.

So what is WCAG? WCAG stands for Web Content Accessibility Guidelines and are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI). The guidelines aim to make your content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these.  It’s quite a long list but it represents about 1 billion people across the world.

Following the guidelines will also often make your web content more usable to ALL USERS.
 

What are the main recommendations?

Image ALT text
Make sure all images that are visible to screen readers have descriptive ALT text. For example, an image of a pie chart might have ALT text reading: “Pie chart illustrating that “40% Voted Yes and 60% Voted No.”

Links
Format links to contrast from the body text, such as using underlines or icons next to the text. Use descriptive TITLE text, and descriptive link text such as “click here to download policies PDF.”

Forms
Add a border to input fields, populate the LABEL tags for each field, and add helper text that provides an example input for each field. Make sure form elements are not hidden or inaccessible by using the tab key.

Colour
Set the contrast ratio between text and the text’s background to be at least 4.5 to 1. If your font is at least 18px bold, the minimum drops to 3 to 1. Use a colour contrast tool to analyse your site for AA and AAA standards.

HTML Mark up
Apply H1, H2, H3, and H4 tags for your headings and apply landmarks such as main, form, and navigation to the structure of the page.

ARIA Code
Use aria-hidden=”true” on elements such as pull-quotes, dividers, and icons to hide them when the site is accessed by screen readers.

Fonts
Select an easy-to-read font, and limit the number of fonts used on the site. Use relative units for font sizes so they can be increased with screen magnification. Avoid very small text.
 

Is that all we need to improve web accessibility?

Many users with disabilities use assistive technologies to access digital content. Assistive technologies include screen magnifiers, screen readers, alternative keyboards and pointing devices, and site, or browser based assistive tools.
 

Why should I think about assistive technology? 

Understanding how assistive technologies work and applying the principles of accessible design allows you to successfully deliver web content for every user.  The practices of accessibility affect all areas of a website, including: 

Code
Your code needs to be optimised for screen readers, including appropriate HTML markup structure. Users should be able to navigate the entirety of the site, including any forms, using only a keyboard. Accessible coding is generally the responsibility of a web developer.

Styling
Think about users with vision impairments and make sure that the use of colours, contrast, and font sizes is optimised for visibility. Colours should not be the only element used to indicate important information. 

Content
Ensure that screen readers and other devices can translate visual content into speech or text by providing text alternatives for graphic elements and links.

Where can I learn more? 

There are lots of websites available to help you with your WCAG transformation. We’d recommend W3C’s Introduction to Web Accessibility. It includes information about how people with disabilities use the web and tips for assessing your website, managing accessibility, and much more. 

To learn how we can help with assistive tools for your website, contact us for more information

Comments

Blog post currently doesn't have any comments.
SHARE

Search

Submit

Subscribe To Blog

Google reCaptcha: