In a survey we carried out with our readers, we asked what the most important aspect of web design should be. The following are the results (from an albeit small sample of 30):
Website design, it seems, is driven by business and stylistic demands but surely the first question should be “how can I improve accessibility from the beginning?”
While it may not be at the more ‘fun’ end of design, before any other consideration is taken into account, usability and accessibility are attributes that need to form the first principles of a new site.
It’s still quite surprising to us that from the current 2,175 free wordpress themes, only 96 are labelled as ‘Accessibility Ready’ which accounts for less than 5% of the free themes.
Nevertheless, since Google sees usability and improving accessibility as key components for SEO, we think there is a gradual shift to thinking from first principles to accommodate as many users as possible.
Designing with accessibility in mind:
To reduce a bounce rate, you need to keep people interested and engaged with your site. If you have accessibility or usability issues with your site’s layout, then it’s inevitable that your bounce rate will go up due to user frustration.
Naturally, this will push website designers into thinking about accessibility at the formation stage of a website.
Another remark to make here is that cost wise, it is far more economical to think about this at the very beginning than to apply the principles of accessibility retrospectively i.e. it’s better to be preventative than to look for a remedy further down the line.
Why improve accessibility?
Section 508 was introduced by the US Government in 1998 as an amendment to an act in 1978 that sought to standardize access to information technology.
The aim of Section 508 is ensure that goods and services are made as widely available as possible to all citizens.
While the amendment isn’t specifically geared towards web design and development, there are parts of it that apply to the web and is similar to the Web Accessibility Initiative WCAG 1.0.
Most countries now follow the above.
What does web accessibility mean?
In short, it is making the site as accessible to as wide a range of people as possible including those that are visually and physically impaired.
While we agree that it is highly improbable in making a site to this watertight standard for every single user, we should aim to be as inclusive as we possibly can.
Impairment can mean disability but will also include others that don’t experience disability in the definitive sense e.g. it also relates to the elderly who may have dexterity issues due to aging. Another instance could be those that have temporary issues such as an office worker that has use of one arm due to a fall that caused a broken arm.
In summary, designing for accessibility is to design for all-encompassing situations where we need to go back to basics and still be able to satisfactorily enjoy the user experience when using a website.
Google set a standard in CSS, which was pioneered by one of their employees – Addy Osmani. He developed a standard for pages to load better called critical rendering path which meant users don’t need to scroll as much. We discuss this a bit further towards the end of the article.
A phrase that is oft repeated is “designing for crisis” which means that your site still be usable in a worst case scenario and in its simplest form.
How we approach accessibility
A significant proportion of users that experience visual impairment or accessibility issues will make use of screen readers that enables blind and visually impaired users to get the maximum benefit of using their computers. Upon selecting the area of text using a mouse or keyboard the screen reader reads out the text through the speakers or headset.
If the user has a Braille display, then some screen readers can convert the text into Braille. More information about this and screen readers is better explained at nvaccess.org, which thoroughly details NonVisual Desktop Access (NVDA) which is a free screen reader.
Other free screen readers include the WordPress plugin ScreenReader or ResponsiveVoice (which is a leading HTML5 to speech solution). A basic screen reader solution that allows users to change the font size of the text include Zeno Font Resizer. If you’re a Spanish speaker, we’ve may want to look at Accessibility Font.
ResponsiveVoice: HTML5 text to speech synthesis solution. Over 51 languages. https://wordpress.org/plugins/responsivevoice-text-to-speech/
Zeno Font Resizer: Allows the visitors of a website to change the font size of the text. https://wordpress.org/plugins/zeno-font-resizer/
The first thing we would do is to set the correct language attribute /tag such land=”fr” if it’s in the French language. Other than accessibility, it’s good for SEO. The screen reader that the individual uses will be able to pick up that the site is in French and will provide the correct pronunciation in French.
If we want to temporarily change the language at some point in the body text, say for a quote or a song, then for something in Spanish, we can put the lang=”sp” for that blockquote and it will be picked up by the reader; it won’t be confused when there’s a sudden switch from French to Spanish.
A wordpress plugin that you may wish to look at (but we haven’t tested out) is MCE Accessible Language Change.
Appropriate heading tags
The next thing we would is to set a good html structure of the site.
We would set a good hierarchy for H1, H2 tags and ensure that we have the correct order; You can’t have H1 and after it H3.
The screen readers that visually impaired users use will get confused as they can’t jump from H1 to H3 for example.
The Highlight Focus plugin highlights the tab that you’ve selected, improving the visual aid (if your theme doesn’t provide this already).
Use consistent and correct tags
You can’t put a quote in a paragraph tag as a screen reader won’t be able to distinguish that it’s a quote i.e. a quote should use a blockquote tag and you should put specific content it’s respective appropriate tag.
We should try and make typography to be as readable for as many people as we can serve.
If it’s possible, don’t set the font size in pixels. We try to set the font size in percentages as it will be more scalable, as selecting a standard pixel size may cause reading difficulties for individuals that need to magnify the text size; if it’s way too small, it will agitate the reader.
Remember, once the text is magnified, there may be other corners of the page that is omitted from the immediate screen which could cause confusion if there isn’t a natural flow e.g. a popup may be appearing, but as the user has magnified the text a very large size, the popup isn’t visible until the user zooms back out.
The Zoom plugin through WordPress enables users to resize predefined areas within the page.
Of course all of this not possible to do, but your way of thinking should be affected by your target market as much as possible.
A suggested plugin to consider is the Accessibility Widget which allows the user to change the text size in a WordPress site. A nice add-on to this plugin is the ability to change the colour contrast.
Accessibility Widget: Adds a sidebar widget to change text size in your WP site. https://wordpress.org/plugins/accessibility-widget/
The touch buttons and the touch targets should be sized appropriately.
You should try to design for the size of buttons to be useable for as many people as possible i.e. if the buttons created look great but are designed too small, then this will cause irritation for the user – especially mobile users.
Links and navigation buttons should be large enough spaced out enough to create easy browsing.
Focus and active indicators should also be considered as well e.g. if you point your mouse to hover on a link, then it should give some kind of response that it is being hovered on.
We talk about color psychology in this article, but that is more to do with useability. Accessibility is slightly different and here we can use something like NoCoffee or other tools mentioned below.
Our target is to be as inclusive to as many people as possible. There is no site that can design for 100% accessibility, but you should aim high.
Some thought and testing does need to be put into this. High contrasting color selection would seem to be the best option for people with poor eyesight, but you also need to place consideration for others that have color blindess or any other degenerative disease for example.
When creating menus, you should try avoid creating drop down menus if possible as these can cause issues for screen readers.
For any on page links, make sure it has title attributes and choose an adequate linking colour for the link text. Sometimes you may need to distinguish it with an underline.
For example, we can see the importance of linking appropriately using colour with the two example screenshots below. The first screenshot shows a light blue ‘Read more’ link, indicating that it is a clickable.
The screenshot below is from the same page, but with the user experiencing achromatopsia – which is a medical syndrome causing an inability to perceive colour. Roughly 1 in 40,000 people worldwide experience this in their everyday lives.
Had the site used a better colour combination or even underlined the ‘Read more’ link, the user experience would be much better. Instead, it is almost greyed out and is indistinguishable from the other body text.
The alt text needs to be descriptive to an impaired user; if possible, try to add captions to images and descriptions wherever suitable.
Sometimes if you think the image doesn’t need a description or of worthy of an alt tag, just put two quotation marks “” i.e. something abstract such as an icon.
Remember, an image that is supposed to convey meaning will need to have an alt tag if that meaning is integral to the page for all users. If there isn’t an alt tag, then a screen reader will simply say “image” to someone who is hard of sight.
Continuing on the theme of images, you should consider the amount and size of images, number of ads and multimedia such as flash.
While we are an avid user of images and infographics to break down big blocks of text as that improves customer retention, we are well aware that a slow loading page does have an impact on usability and accessibility as a slow loading site can cause irritability.
Finally, you should consider limiting the animation or graphics on the screen as it might have issues with different browsers which may not be compatible.
Visiting caniuse.com, we tested out one of our sites and decided to go ahead as it was only on Internet Explorer 8 where the SVG animation wouldn’t load:[spacer height=”15px” id=”2″]
[spacer height=”15px” id=”2″]
Audio and video
If your page has video playback, then you should use a player that is accessible to as many users as possible – especially for people that have trouble with touch options and need to use a keyboard.
Youtube is not so bad and is reasonably accessible, but Soundcloud isn’t the best.
A good idea is to offer an alternative such as a transcription of the video for visually impaired users that are unable to watch it. Other than it being a positive for improving accessibility, it’s also good practise for SEO as it gets picked up by search engines.
When designing, you should not rely on placeholders for people to understand what each tab form means – you should also add labels that tell which area is required or not.
You shouldn’t solely distinguish different parts of the form just by colours. A complementary process would be to give an explanation in parallel e.g. if a part of the form has been incorrectly filled in, then can you give the user a readable error message outside of the form area.
Again, the key idea that repeats itself on this page is to design in mind with people that struggle to use a mouse and rely on the keyboard.
If you use Gravity Forms in WordPress, then the WCAG 2.0 form fields is a useful plugin that modifies the form fields to incorporate some of the changes mentioned, aiding the user with validation.
If you’re a Contact Form 7 user, the Accessible Defaults plugin does a similar thing.
Contact Form 7 Accessible: Replaces the Contact Form 7 with an accessible equivalent. https://wordpress.org/plugins/contact-form-7-accessible-defaults/
At each step along the way, we have what amounts to a working solution. We build each working solution on top of other, already working solutions.
Design with progressive enhancement in mind which means that we design for people that only see text. That is to say:
- We start with HTML without CSS.
- We then proceed to the next layer of providing CSS.
This is why the hierarchy is important.
If the semantic HTML design fails or breaks in any way, the CSS will give it enhancement and correct the flow of the HTML.
Scripts are added at the end and if done correctly, will complete accessibility in mind. This is why it’s called Progressive Enhancement i.e. each layer provides working solutions.
The technical aspects that look to improve accessibility go beyond this, with the specification labelled as ARIA i.e. the idea is to cater for accessibility at the developmental level. It is beyond the scope of this article, but we provide a resource at the end for readers that are interested in this.
Simple Page Transition: Add Simple Transition between pages (between unload and load). https://wordpress.org/plugins/simple-page-transition/
Generate Critical CSS: Adds a button to the WordPress admin bar to generate Critical CSS. https://wordpress.org/plugins/generate-critical-css/
Testing to improve accessibility
In the above sections, we have given a very brief overview on the things to consider for accessibility.
In conjunction, we have also suggested tools and software that you can make use of to test the accessibility of a site.
Some more tools that allow you to do general improvements include:
Access Monitor: Through Tenon.io, run scheduled tests. https://wordpress.org/plugins/access-monitor/
Accessible Poetry: Offers a range of options such as skiplinks, font resize, contrast change. https://wordpress.org/plugins/accessible-poetry/
WP Tota11y: Helps you to visualize accessibility issues. https://wordpress.org/plugins/wp-tota11y/
Sogo Accessibility: Adds an accessibility menu to WordPress. https://wordpress.org/plugins/sogo-accessibility/
From the general list above, we like using WP Accessibility and Access Monitor.
Tool Tip: PowerMapper Sort Site
We really liked using the PowerMapper Sort Site tool which gives a great overview of the site and then drills down into different tabs, of which one of them is the accessibility tab.
Using our test website, the scan report informed us that the site had issues with over 81% of the site!
Bear in mind that we just used the trial version which just goes into the first 10 pages. The full version allows you to dig deeper.
Once you open up the report, it lets you know where you may have issues i.e. with usability, standards, compatibility and so on.
Our interest here lay in the accessibility tab, which is telling us that 90% of the pages scanned have accessibility problems – pretty serious huh?!
From this tab, we can see exactly which parts of WCAG and 508 that our site is contravening and the drilldown on each issue tells us exactly where the problem lies. So, we can spend some time on this and go through it one by one to resolve the issues and improve accessibility retrospectively.
We forgot one component
The SortSite tool described above has a caveat in the accessibility report which says
Automated testing cannot detect all accessibility issues, so should be used alongside human testing.
So while above is all well and good, we have omitted one very important thing here: people!
Yes, we’ve got to go and interact with the physical world for a while to make sure what we do is actually going to be beneficial in practice.
You should, at some point of developing your site, test it with real people and if possible, with focus groups that do have impairment as they will be able to give you valuable feedback on what may need improving.
If you are unable to access such a focus group, then test it on friends and family or even yourself e.g. asking some of your friends to use the site with one hand or by asking them to only use the keyboard to navigate.
ARIA: Accessible Rich Internet Applications. https://wave.webaim.org/
WebAIM: Web accessibility evaluation tool. https://www.w3.org/TR/wai-aria-1.1/
Tenon: Identify 508 and WCAG 2.0 issues. https://www.tenon.io/
Power Mapper: Sortsite Report to identify 508 and WCAG 2.0 issues. https://try.powermapper.com/Demo/SortSite