Using CSS 3 Overflow Properties to Make Containers Meet WCAG 2.1

Contents

Introduction

There are a host of WCAG 2.1 Success Criteria that prohibit text from getting truncated or overlapping other content, such as,

In general, WCAG recommends adopting responsive design principles to ensure that containers and text-inside-containers readjust and flow properly. But changing a site over to use responsive design can be a tall order. Here is where two relatively new CSS3 properties– overflow-y and overflow-wrap — that can help in the interim.

Demonstrating the Problem

The following example shows a worst case scenario of text that overflows its container. Here we have a small <div> element and far too much text to fit inside. We don’t have to change any of the text size, container size or text spacing to see that it’s a hot mess

An imaginary long “word” is “supercalifragilisticexpialidocious.” The word was invented in 1931 and made famous later in the Disney Movie “Mary Poppins”.

 

 

 

 

In this example, we have a <div> element with a small width and height. Plus there is a really long word (“supercalifragilisticexpialidocious”) that is far too wide. Here is the code for this example.

<div style="font-size:100%; width:200px; height:100px; border: thin solid gray;"> 
  An imaginary long "word" is "supercalifragilisticexpialidocious." The word was invented in 1931 and made famous later in the Disney Movie "Mary Poppins".
</div>

Fixing Vertical Overflow

First, let’s fix the vertical overflow. We can do this by adding the overflow-y property and setting it to auto. This property specifies what should happen vertically when content overflows its container. As you may have guessed, there is also a overflow-x property, but we don’t want to use this here because we don’t want to introduce horizontal scrollbars. Both of these properties are relatively new– being introduced in CSS 3– but they enjoy good support across browsers. Our overflow-y property should be set to either scroll (if we want the scrollbar always visible) or auto (if we want to introduce vertical scrollbars only when necessary). Here’s how it looks after making this change.

An imaginary long “word” is “supercalifragilisticexpialidocious.” The word was invented in 1931 and made famous later in the Disney Movie “Mary Poppins”.

 

and here is the associated code

<div style="font-size:100%; overflow-y: auto; width:200px; height:100px; border: thin solid gray;"> 
  An imaginary long "word" is "supercalifragilisticexpialidocious." The word was invented in 1931 and made famous later in the Disney Movie "Mary Poppins".
</div>

This is much better but it still has that annoying horizontal scrollbar (violating 1.4.10.1 Reflow). This is because of that really long word (“supercalifragilisticexpialidocious”) that doesn’t fit the container. We’ll fix that next

Introducing Word Breaks

In this example, we have a <div> element with a small width — too small for our really long word (“supercalifragilisticexpialidocious”). While you’re not likely to use long words like this, you may have long strings, such as long URLs that need to be kept together but shouldn’t disrupt container sizing. To avoid this, another useful CSS property is overflow-wrap, which we should set to break-word. Here’s what happens when we apply this strategy.

An imaginary long “word” is “supercalifragilisticexpialidocious.” The word was invented in 1931 and made famous later in the Disney Movie “Mary Poppins”.

 

and here’s the associated code for your review

<div style="font-size:100%; overflow-y: auto; overflow-wrap: break-word; width:200px; height:100px; border: thin solid gray;"> 
  An imaginary long "word" is "supercalifragilisticexpialidocious." The word was invented in 1931 and made famous later in the Disney Movie "Mary Poppins".
</div>

Phew! Much better! Now the page can be zoomed and the browser window shrunk to mobile size and nothing gets truncated and nothing overflows. Plus, we never have to worry about scrollbars in the direction of reading.

One problem that we artificially introduced, however, is the fixed window size. In the real world, you’ll want to avoid using fixed width and height attributes because they can easily get cut off when zooming into content. We needed to do it here to show how content can get cut off.

Conclusion

While we’ve demonstrated our problem using a worst case scenario, it nonetheless demonstrates an easy way to avoid many issues where text gets truncated, overflows, or introduces scroll bars in the direction of reading. If you are working on a site that hasn’t fully hopped onboard the responsive design bandwagon and need to meet the requirements of WCAG 2.1, setting overflow-y: auto and overflow-wrap: break-word can solve a lot of problems. These techniques are also demonstrated in the fileĀ overflow.html, except that file uses overflow-y: scroll and uses a much narrower window for even greater dramatic effect.