How to follow WCAG recommendations for making web content more accessible in WordPress theme.
More and more customers are asking about themes that follow WCAG (Section508) recommendations to help creating a professional accessible website - what is now required by low feature for many public institutions websites. We admit, this is complicated task and creating accessible site consumes much time but we did it, we've already released accessibility ready WordPress themes! If you are still not sure what WCAG standards means let's learn the following information.
What is WCAG?
Web Content Accessibility Guidelines is a compilation of documents corresponding to the availability of Internet services, Since 2012 has the status of international standard ISO. The collection of guides helps understand and build website complying with WCAG standards.
More and more countries establish the law that obliges entities performing public duties to customize their websites to meet WCAG 2.0 requirements. Public institutions such as ministries, regional offices, offices of cities and municipalities, police, fire brigade, hospitals and many other institutions must oblige the law but it is recommended to add accessible options on websites.
Why is it so important?
The purpose is to provide user friendly accessibility to websites for the largest number of users with disabilities such as the blind or visually impaired. Such people run the risk of "Digital Exclusion" which means no or limited ability to use modern forms of communication, for example websites. For instance accessible sites should use the proper font contrast to allow reading text without any difficuties by visually impaired person. The best solution is creating several high contrast modes giving a possibility to choose the most suitable one.
Principles of availability
Document v. 2.0 has been divided into 4 groups:
and 3 levels of availability:
A criteria - must be fulfilled
AA criteria - should be complied
AAA criteria - can be met
Perception - information and user interface components accessible presentation
The following rules are the most important ones. Find more assumptions in the documentation of WCAG.
- add alternative text for non-text elements, for example ALT for images, it helps to recognize what actually the user is browsing since the text in ALT is read by reader that's why it should be clear
- attach subtitles to video/audio
- put additional description for icons or other special site elements - eg. the required forms fields should be appropriately marked not only with color but text for example above the field
- keep the minimum contrast (for page background and text color) ratio should be 4.5 : 1
Functionality - user interface components and the navigation should allow the interaction
- add the possibility to navigate the site using keyboard - the user has to reach each site element with keyboard
- do not put flashing elements (can cause epilepsy)
- allow getting direct access to the specific sections, for example link to content that skips repeating content on the page
- take care about visibility of selected item (at any time the user needs to know on which an active element is located)
Intelligibility - content and service user interface comprehensibility.
- do not mislead the user with using focus elements incorrectly
- put limited number of automatic redirects or sending forms
- take care about visible identification of errors, relevant error messages after submitting forms, etc.
Reliability - sufficiently reliable content for correct interpretaion by many different users, including assistive technologies
It's about using correct HTML and CSS code. However, due to many hacks for different browsers it's quite difficult to meet this rule. The requrement need to be applied to the greatest number of devices.
We recommend the folowing Section 508 compliance and WCAG compliance verification tools that help creating accessible site.
- Web Accessibility evaluation tool - the most popular tool for verifying WCAG requirements
- Functional Accessibility Evaluator 2.0
- Section 508 checklist
Accessible WordPress theme
As you probably know PixelEmu is the same team as Joomla-Monster team so we have a great experience at creating Joomla accessible templates. That's why we've decided to add accessible features to our latest accessibility ready WordPress theme - PE Services. Check accessible web site design by PixelEmu.
updated 6th September 2016
The next WCAG ready WordPress theme yu may find at our store is school accessibility ready WordPress theme. Take a look at 3 demo versions.