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.
Post your comment
Comments
Posted by John, 25/04/2017 12:11am (7 years ago)
No one has commented on this page yet.
RSS feed for comments on this page | RSS feed for all comments