There are a host of WCAG 2.1 Success Criteria that prohibit text from getting truncated or overlaps other content, such as,
-
-
- when text is resized (1.4.4 Resize Text),
- when content is zoomed across browsers (1.4.10 Reflow)
- when text or line spacing changes (1.4.12 Text Spacing)
-
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 developers meet WCAG 2.1 without resorting to a site redesign.
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
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.
and here's 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>Unfortunately, this didn't solve all of our problems because we still have that horizontal scrollbar because of that really long word. We'll take care of this next.
Introducing Word Breaks
In our last example, we still have annoying horizontal scrollbars (violating 1.4.10 Reflow) because that 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 text spacing. 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.
and here's the associated code for your review
<div style="font-size:100%; overflow-y: auto; overflow-wrap: break-word; width:120px; 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.
Conclusion
Our demonstration uses a worst case scenario. But, as you're testing web pages for meeting WCAG 2.1 and you are adjusting font sizes to 400%, changing character and line spacings, and shrinking your browser window, you can easily get content that misbehaves as badly. And while WCAG recommends good responsive design, your organization may not be ready to commit that level of resources to your immediate accessibility problems. This example 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.
Often enough, strategies like this are much easier to implement than a site redesign and are the kind of techniques that we recommend all the time. If you are interested in practical solutions that make it easier to comply with WCAG 2.1, contact us today!
Want to See More Content Like This?
Want the latest blog posts, videos, white papers, and announcements? Sign up for our mailing list and stay in the loop!
We're Here to Help When You're Ready
Take a deep breath. Then feel free to reach out to our team when you're ready to discuss your accessibility needs.
0 comments on “Using CSS 3 Overflow Properties to Make Containers Meet WCAG 2.1”