By Stephen Walker

One of the few instances where Avada handles accessibility incorrectly is hyperlinking within body content. According to guidelines, hyperlinks should be underlined and not solely rely on the color of the text to be the indicator of a link. At least one feature request has been submitted for this. Additionally, the default paragraph width, which is based on the container it is in, could be too wide for comfortable reading — research shows a line length of about 80 characters is ideal — and require manipulating containers over and over especially if you want images and other multimedia to appear large than the text (like medium.com and other news sites). Fortunately, some basic CSS can help us solve both.

.content {
  :is(p,ul,h2,h3,h4,h5,h6) {
    max-width: 48rem;
    margin: 1rem auto;
  }

  :is(h2,h3,h4,h5,h6){
    margin-top: 1ch;
    margin-bottom: 1ch;
  }

  p a, li a {
    text-decoration: underline !important;
  }

  p a:hover, li a:hover {
    text-decoration: none !important;
    cursor: pointer;
    outline: 3px solid transparent;
    color: #0F2131;
    background-color: rgba(252, 199, 94, 0.6);
    box-shadow: 0 -2px rgba(252, 199, 94, 0.6), 0 3px #0F2131;
  }
}

I use this on multiple sites for blog posts both in Gutenberg and the classic editor. I create a content area within a 1/1 column in a custom layout and assign the “content” class to it. As you can see with the code block above, it uses the full width of the column, white the text is constrained and hyperlinks are clearly visible.

Originally published on December 25, 2021

Share this article:

Leave a Reply

RELATED ARTICLES

Affiliate Advertisement