Add new comment

Yesterday I had a very insightful training by Bart Pluims from Cardan Technobility about creating more accessible digital products following the WCAG 2.1 guidelines. I’ve decided to apply what I’ve learned on this Drupal website. In this first post I will check my website on the following themes:

1. Media
2. Page and site navigation
3. Colour and text
4. Basic code analysis

Drupal and accessibility

First, it is good to note that Drupal is already very accessible out of the box. The Drupal project is committed to be more accessible in the future. That being said, it's still possible to make your Drupal website more (or less) accessible by the choices you make in your custom theme, view or module. That’s why it’s still useful to test your own site on the WCAG 2.1 guidelines.

1 Media

Success Criterion 1.1.1 Non-text Content
This is about providing alternatives for content that is not in text form, such as images and videos. On this website I try to avoid  using videos as they are a better used sparingly if you are making your Drupal website more sustainable. So I can ignore providing text alternatives for videos for now.

I do use images on this website but every image has an alt tag which describes what is visible on the image. I try to describe the photo as clearly as possible such as: 

Telephone operator plugging phone calls circa 1947

Success Criterion 2.2.2 Pause, Stop, Hide
If something animates on your Drupal website, starts automatically and lasts longer than five seconds the user needs to be able to pause the animation. This goes for videos, but also for background animations.

The only thing I can think of on my website are the hover animations, such as in the blog overview. Though all animations are less than five seconds though so I think this should be fine.

Success Criterion 2.3.1 Three Flashes or Below Threshold
Web pages may not or contain content that flashes more than three times in one second. This may cause seizures for people who have epilepsy. 

My Drupal website has no flashing content so I can safely ignore this.

2 Page and site navigation 

Success Criterion 1.3.3 Sensory Characteristics
When instructions are given on your Drupal website they can’t be dependent on sensory characteristics of components such as shape, colour, size, visual location, orientation, or sound.

So for example you can’t just use an icon, such as a checkmark, to indicate something was done successful. It needs to be accompanied by a text description like ‘Your submission was sent’.

On my Drupal website I don’t give any instructions of this nature.

Success Criterion 1.3.4 Orientation
This criteria states that you can’t lock your site to a specific orientation such as landscape or portrait.

My Drupal site is fully responsive and viewable in any orientation.

Success Criterion 2.4.2 Page Titled
Every page needs a title (the <title> HTML element) that describes the purpose of the page.

On my Drupal website I use the Metatag module to generate the <title> tag. This tag is generated by using the title of the node and combining the name of my site such as:

50 Drupal modules every Drupal professional should know about | Robert Roose: Drupal designer

Every node on my Drupal website has a very descriptive title of what the page is about which is used in the <title> tag. 

Success Criterion 2.4.6 Headings and Labels
Just like the title of the page all the headings and labels used on your website should be clear and describe the element it concerns.

As I try to write very concise and clear content I think I got this covered. All my headings and labels have the intent to be descriptive of the content it concerns.

Success Criterion 3.2.3 Consistent Navigation
Navigation elements (such as the main menu or search) should be in the same relative order and consistent through all pages.

On my Drupal website I have two navigation elements, the footer menu which is always positioned on the bottom of the website and a main menu. This main menu will become sticky when a user scrolls down, so it’s always visible in the same position. The main menu becomes a hamburger menu tucked on the left side when the viewport becomes too small to display the full menu. This might be an issue because the functionality and position of the menu changes. But as this is a common design pattern I believe this won’t be rejected.

Success Criterion 3.2.4 Consistent Identification
Throughout your Drupal website components need to be consistently identified. So for example if you have a block with the latest articles on your homepage you have to use the same title for your block as for an overview page with all your articles. 

As Drupal is modular reusing block and functionality it’s pretty safe to say all components are consistently identified.

3 Colour and text

Success Criterion 1.4.1 Use of Colour
Colour cannot be the only visual indicator to inform a user, indicate an action or ask for a reaction. Such as only using a color to indicate an input field which is not filled in correctly.

Here is where my website is currently failing. I only used a colour to indicate a link or active menu state. As the contrast isn’t sufficient I added a border (underline) to all the links in the main content. Also I’ve added a line to indicate the active menu item.

Success Criterion 1.4.3 Contrast (Minimum)
Text (and images of text) has to have a contrast ratio of 4,5:1 and large text a contrast ratio of 3:1.

For the main text on my website is used #888888 (gray) on a #222222 (near black) background. When I check these values with the WebAIM contrast checker it results in a contrast ratio of 4,48:1 just failing the criteria. So I’ve changed the #888888 to #999999 which does pass the test. 

Success Criterion 1.4.4 Resize text
Users should be able to resize the text on your Drupal website without loss of content or functionality.

Because my Drupal website is fully responsive this isn’t any problem. Blowing up the size of the text to 200% doesn’t break the content or functionality.

Success Criterion 1.4.5 Images of Text
Basically this says you shouldn’t use text as an image. Because of modern CSS techniques there is no excuse anymore to display text as an image, which is why this criteria doesn’t concern most up to date websites, like mine.

Success Criterion 1.4.10 Reflow
Content and functionality should not break if the website is viewed in a viewport of 320 pixels wide and 256 pixels high. As mentioned above my Drupal website is fully responsive so this won’t be an issue.

Success Criterion 1.4.11 Non-text Contrast
User interface components (to control the website such as links) and graphical objects (to understand the website such as graphs or diagrams) need a 3:1 contrast.

I’ve checked all elements on contrast ratio and they pass the 3:1 requirement.

Success Criterion 1.4.12 Text Spacing
It needs to be possible to change the text with an external tool to the following settings:

• Line height (line spacing) to at least 1.5 times the font size;
• Spacing following paragraphs to at least 2 times the font size;
• Letter spacing (tracking) to at least 0.12 times the font size;
• Word spacing to at least 0.16 times the font size.

All content should still be visible using these style settings.

To test this you can use the Stylus browser plugin. This plugin enables you to inject CSS code on any website. Create a new style and use the following CSS code:

* {
line-height: 1.5 !important;
letter-spacing: 0.12em !important;
word-spacing: 0.16em !important;
}

p {
margin-bottom: 2em !important;

If I visit my website, with the CSS styles as an override, nothing breaks so this should be fine.

4 Basic code analysis

Success Criterion 2.4.1 Bypass Blocks
You need to have a way to bypass blocks and directly navigate to the main content.

Out of the box Drupal provides a skip link. If you press tab viewing your Drupal website a skip link should appear. My Drupal website also has this skip link, but it wasn’t styled yet, showing as a blue link on a dark background. I’ve changed the styling of my skip link so it’s better visible.

Success Criterion 3.1.1 Language of Page
The language of the page has to be set correctly. This can be done by giving your HTML tag a lang attribute containing the language code of the language that is used on the page. 

Drupal sets this automatically so this should not be a problem. Even if your website is multilingual and you correctly use Drupal's built in functionality this should be no issue.

Checking the HTML tag of this website I see it correctly displays the lang = “en” attribute. Also, when I check the Dutch version of my website it displays the lang = “nl” attribute.

Success Criterion 3.1.2 Language of Parts
In some cases it’s possible to have a quote in a different language on your website. If so you need to identify this HTML part correctly by adding the lang attribute.

As my website is completely in English there is no action needed on my part to correct this.

Success Criterion 4.1.1 Parsing
Incorrect HTML (such as tags that are opened but not closed) can cause issues when viewing a website with a screen reader.

I’ve checked my website with the W3C validator. I’m getting some warnings but no errors, which basically means I’ve got no faulty or incorrect code.

Conclusion

As you can see Drupal is pretty accessible out of the box. Most issues were caused by my custom theme. but we’re easily fixed. Hopefully this blog inspired you to look into the accessibility of your website as well.

If you have any additional tips or questions, please let me know by leaving a comment. Also don’t forget to subscribe to my Drupal newsletter!