Last week, a fellow developer told me that one of their clients had asked them to remove the dotted lines around the form focus* and elements that were clicked because it did not really look that “cool”.
*On the EHD site, we have our very own form focus that uses shadows to highlight the section users have clicked on.
They then had to explain why it was important to have for accessibility purposes.
For that reason, I thought it would be helpful to list some good practices and tools to assist not only developers, but also users that often use Content Management Systems (CMS) such as WordPress in their day to day jobs or hobbies.
Why Should I Care About Accessibility?
Accessibility makes your site more inclusive. Without it, your site will be less accommodating to people with disabilities, the ageing and users with low bandwidth.
Who Benefits From Accessibility?
Vision Impairment
- The blind
- Low vision
- Colour blindness
- Dim screens
Hearing Impairment
- Deaf
- Hearing loss
Cognitive Impairment
- Autism
- Downs syndrome
- Dementia
It is also required by law to comply with certain regulations. You can read more about UK law on web accessibility for public sector websites and mobile applications here.
Is It Expensive to Make My Site More Accessible?
The key to keeping costs down when it comes to integrating accessibility is to have it baked into the initial development of a site, and by making use of all the free tools available.
Take into consideration the following:
- Search engine optimization or SEO
- Security
- Responsiveness (mobile friendly)
- User experience or UX
- Conversion rate optimization or CRO
- Design
Common Accessibility Barriers
- The size of the text
- Low vision
- Images
The Best Tools for Making Your Site More Accessible For The Visually Impaired
To help make your site more accessible, there are some free vision simulator tools available. These tools give you a better outlook on users that are blind or colour-blind and also audit your site for accessibility readiness.
Chromelens – chromelens.xyz
Access garage – accessgarage.wordpress.com
Tip: Do not solely rely on colour to convey information. Try and use different shapes, textures and underline links.
To get a good idea about colour blindness, this website determines the adequate contrast in colour when viewed on black and white screens.
Artistic Abode – artisticabode.com/accessibility/color-contrast/
Images
Alt text helps screen-reading tools describe images to visually impaired readers and allows search engines to better crawl and rank your website.
The alt decision tree can help with using this attribute for various situations, i.e. for descriptive images, background images for decoration or web fonts.
An alt Decision Tree – w3.org/WAI/tutorials/images/decision-tree/
Media
- Provide transcripts for audio and video
- Provide captions and audio descriptions
Designing for Screen Reader Compatibility
- Screen readers pick up the lang attribute, so make sure you use the appropriate tag when developing your site. You can also use it in small snippets like, i.e.:
In Matanzas, we tried a dish called <span lang=”es”>ropa vieja</span>—which literally translates as “old clothes.”
<span lang=”fr”>“C’est la vie,”</span> Harold sighed, as he watched his Volvo tumble off the cliff.
In Rome, Ellen was shocked by a film called <span lang=”it”>La Donna Nella Doccia</span>
- Links should make sense when read out of context
- Authors should organise content with headings. These headings should represent an accurate outline of the content
- Users can navigate via ARIA landmarks and HTML5 sectioning elements, such as <main>, <nav>, <header>, etc. Define appropriate ARIA landmarks and use HTML5 elements appropriately.
Another good tool for helping to check accessibility while developing a site is having an HTML sniffer. HTML_CodeSniffer is a client-side script that checks HTML source code and detects violations of a defined coding standard.
HTML Code Sniffer – squizlabs.github.io/HTML_CodeSniffer/
Accessibility for Mac and PC Users
Mac users have some handy accessibility applications – you can find them in your system preference – such as screen readers called VoiceOver, Zoom, Slow Keys and an Accessibility keyboard.
On PC you can download a free screen reader NVDA, built by NV Access, found here nvaccess.org.
WordPress and Accessibility
WordPress provides some accessibility features right out of the box.
Navigation
It has Nav role landmarks. It supplies addition HTML mark up to let screen readers know what part of the page you are on.
Forms
It also has some forms such as the search and comment form.
All of these are obviously customisable and can be replaced by custom navigations and forms. Some of the features to watch out for on forms are:
- Check colour contrast of placeholder text
- All inputs need a visible associated label
- Check that no tab index is set
Two of the most common and popular form of plugins are Contact Form 7 and Gravity Forms but they do not cover all the accessibility issues. There is however a couple of handy add-ons that fixes most of them.
Contact form 7 accessible defaults – wordpress.org/plugins/contact-form-7-accessible-defaults/
WCAG2.0 – wordpress.org/plugins/gravity-forms-wcag-20-form-fields/
WordPress Accessibility Plugins
When using WordPress and installing new plugins, evaluate what that plugin does for accessibility.
- What does the plugin do exactly?
- Does it add new features, i.e. calendars, contact forms?
- Does it modify existing features on forms, add reCaptcha?
- Does it generate content?
WP Totally – Khan Academy – wordpress.org/plugins/khan-exercises/
Access Monitor – wordpress.org/plugins/access-monitor/
WP Accessibility – wordpress.org/plugins/wp-accessibility/
This plugin is particularly handy because it fixes some known issues such as:
- Removing the target attribute from links.
- Forcing a search page error when a search is made with an empty text string. (If your theme has a search.php template.)
- Removing tab index from elements that are focusable.
- Stripping title attributes from images inserted into content.
- Removing redundant title attributes from page lists, category lists, and archive menus.
- Adding post titles to standard “read more” links.
- Addressing some accessibility issues in the WordPress admin styles.
- Adding labels to standard WordPress form fields if missing.
Conclusion
These are just a few handy tips and resources you can use but there are many more which are free and paid for depending on how serious you are about accessibility on the web.
If you really want to dive into accessibility and know how you can make a difference, stay up to date with the Web Accessibility (W3C) website.
Web Accessibility (W3C) – w3.org/WAI/Resources/
Do you want to make your site more accessible? Then reach out to the EHD team today.
