Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

 

PATCH: 5 quick and easy web accessibility techniques

In this guest post, Zoe Beaucamp gives you PATCH—5 simple but effective ways to start patching up any inaccessible web content.

Read post

Are you accessibility conscious?

Or like many developers, do you struggle with making your web content compliant with Web Content Accessibility Guidelines (WCAG)?

Just remember PATCH—five simple but effective ways to start to patch up any inaccessible web content and reach more users across multiple disability sectors:

Page title

Every web page must contain a <title> (WCAG 2.4.2).

Impact:

The <title> of the page is crucial because it is the first thing screen reader users will hear. Blind/low vision users rely on the page title to give them information about what the page is about. Otherwise, they are forced to navigate through the navigation menu and content in order to find out what the page is about—which can be very time-consuming.

Additional tips:

Make each web page title unique.

If you want to include your site name in each page title, place it after the unique information.

It is best practice to make the page <title> and the top heading <h1> identical (or very similar) as they both essentially have the same purpose—to give the page a title.

Alt text

All images (including graphs, flowcharts, infographics, etc.) must contain alternative text (WCAG 1.1.1).

Impact:

Alt text provides a description of the image for blind people and should clearly describe the purpose of the image so that the user understands why the image is there and what it represents. Without alternative text, any images will be invisible to screen reader users.

Additional tips:

Alt text should be brief and concise (no longer than a twitter tweet).

To tell assistive technology such as screen readers to ignore an image (e.g. if it is purely decorative), use a "blank alternative text" attribute: alt="".

Text resizing

Ensure that text on the page can be resized up to at least 200% without loss of content or functionality (WCAG 1.4.4).

Impact:

Users with partial or low vision often choose to enlarge the fonts on their browser in order to make text easier to read. When text is zoomed, it can, however, often cause content to overlap/distort, which may cause difficulties whereby interactive components do not work and some content cannot be read.

Additional tips:

Avoid justified text.

Avoid need for horizontal scrolling when text is resized.

Use relative units such as % or em for height/width of elements.

Provide at least 1.5em line spacing.

Colour contrast

Ensure sufficient colour contrast between text and background (WCAG 1.4.3).

Impact:

Colour blindness (colour vision deficiency, or CVD) affects approximately 1 in 12 men and 1 in 200 women in the world. A person with low vision or CVD will not be able to distinguish text against a background without sufficient contrast.  

Additional tips:

Download a free colour contrast analysing tool such as Paciello Group Colour Contrast Analyser

Contrast should be at least 4.5:1 for small text or 3:1 for large text, even if text is part of an image. Large text has been defined in the requirements as 18pts or 14pt bold.

Headings

Create a logical outline of the web page with hierarchical headings (WCAG 1.3.1 & 2.4.6).

Impact: 

Blind users benefit from good heading structure because they can use them to navigate through, scan and go directly to parts of the page that interests them most. Without headings, it is much more difficult and time-consuming for such users to access the information they require.

Additional tips:

Each page should start the main content with <h1>, which should be the same or very similar to the page <title>.

Keep headings brief, unique and informative.

Use real semantic headings, not just large styled text.

Use headings in hierarchical order without skipping levels, e.g.

<h1>Main Heading/Page Title</h1>
<h2> Sub Heading</h2>
<h3>Second Sub Heading</h3>
<h2>Sub Heading</h2>
<h3>Second Sub Heading</h3>

Follow these five simple techniques and you will be well on the way to improving the accessibility and conformance of your web content.

PATCH and CWP

Recently, I had the pleasure of working alongside the SilverStripe team on building new themes for the Common Web Platform, a platform as a service for government sites. When testing the themes for accessibility issues, the PATCH techniques (as well as others) were well applied, which has helped to make the platform to be born accessible.

About the author
Zoe Beaucamp

Zoe is a web and digital accessibility consultant working for the Blind Foundation NZ.

Post your comment

Comments

  • These are great tips to be honest. I'll be taking up web design soon so I'll keep these tips in mind. It really helps since I want my web page to be user friendly.

    Posted by John, 25/04/2017 12:11am (8 months ago)

RSS feed for comments on this page | RSS feed for all comments

Like what you have read?

Sign up for our weekly blog digest sent to your inbox.

Subscribe