Do borders, that visually group related content, have a contrast requirement? - css

Question

I cannot find existing accessibility requirements for the borders of content that is 'loosely related' or visually grouped into 'cards'. Is there one?
For users that are truly blind, the borders around cards need not have a border, but I would assume that for users with slight visual impairments, or for users with cognitive disabilities, the content may be easier to understand if they can see the border around the card?
How about accordions?: They usually have a'decorative' border around their headers, even thought this is not required, and therefor probably do not need to adhere to minimal contrasting colors?
Would the border be decorative or meaningful/informative in these situations?
I have coded the following situation: an information page that shows cards that contain a Heading with a title/aria-label and a paragraph that explains where the user will navigate to - but all cards have a light grey border of 1 pixel, (a border that does not pass the contrast-requirement).
Is this sufficient for AA-level requirements?
Codepen here: codepen.io/jirosworld/pen/XWBwbXK
HTML:
<main class="container">
<div class="grid">
<div class="grid__main">
<h1 class="h1">Government support </h1>
<div class="card-container card-container--small">
<div class="card">
<div class="card__body">
<h2 class="h2">
<a href="#" class="link" aria-label="energy-allowance" title="energy-allowance">
<span class="link__text">Energy allowance</span>
</a>
</h2>
<p class="p">Energy prices have risen sharply. Many households find it difficult to pay the bill. The municipality compensates low-income households. The government makes extra money available for this</p>
<a href="#" class="button button--icon button--transparent" aria-label="energy-allowance" title="energy-allowance">
<span aria-hidden="true" class="material-icons ">→</span>
</a>
</div>
</div>
<div class="card">
<div class="card__body">
<h2 class="h2">
<a href="#" class="link" aria-label="Form House" title="Form House">
<span class="link__text">Help with forms</span>
</a>
</h2>
<p class="p">Do you have questions about administration, forms, laws and regulations or finances? Come visit our "Form House"</p>
<a href="#" class="button button--icon button--transparent" aria-label="Form House" title="Form House">
<span aria-hidden="true" class="material-icons ">→</span>
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<p class="default-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at magna eu velit iaculis tempor sit amet at enim.</p>
CSS:
body {
padding: 1em;
font-family: sans-serif;
color: #4b4b4b;
}
a:link {
display:block;
color: #4b4b4b;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a.button {
color: rgb(0,166,199);
text-align: right;
font-size:2em;
}
a:hover.button {
padding-top: 2px;
text-decoration: none;
}
h2 {
font-size: 20px;
}
.grid {
display: flex;
flex-direction: column;
gap: var(--gutter-width);
position: relative;
width: 100%;
}
.card-container {
display: grid;
gap: 32px;
grid-template-columns: repeat(2,1fr);
}
element.style {
}
.card {
background-color: #fff;
border: 1px solid #d2d2d2;
border-radius: 3px;
box-sizing: border-box;
display: flex;
flex-direction: column;
position: relative;
text-decoration: none;
padding: 16px;
margin-bottom: 1em;
}
.default-content {
max-width: 900px;
}

Answer 1

WCAG does not require you to have a border around the grouped elements. However, from a visual UX perspective, it can be very helpful.
If you do have a visual grouping around the elements, then you also have to convey that grouping to assistive technology. You can do that semantically by having a <fieldset>/<legend>. You can style it however you want and even hide the <legend> so it's not visible but still allow the screen reader to announce it.
<fieldset aria-labelledby="foo">
<legend style="display: none;" id="foo">hello</legend>
<!-- your tiles -->
</fieldset>
But hiding the legend kind of defeats the purpose of having it. If you go that route, you might as well leave it off and just put the aria-label on the <fieldset>.
<fieldset aria-label="hello">
<!-- your tiles -->
</fieldset>
Or you can use ARIA attributes to group them. Using semantic HTML is the first preference but ARIA will also work.
<div role="group" aria-label="hello">
<!-- your tiles -->
</div>
Using your original code, the <div class="card"> could have the group role.
<div class="card" role="group" aria-label="???">
I'm not sure what the label should be. Perhaps the link name?
<div class="card" role="group" aria-labelledby="link1">
<div class="card__body">
<h2 class="h2">
<a id="link1" href="#" class="link" aria-label="energy-allowance" title="energy-allowance">
<span class="link__text">Energy allowance</span>
</a>
</h2>
As far as the color of your border, there aren't any WCAG requirements for the contrast. 1.4.11 Non-text Contrast comes close but that requirement is for "Interface Components" and "Graphical Objects". Your tile might contain "Interface Components" (such as a link) but the tile itself is not an "Interface Component" so 1.4.11 does not apply. That doesn't mean you shouldn't try to have better contrast, but it's not required by WCAG.
As a side note, you have a few oddities in your example code. Your first link, "Energy allowance" has an aria-label="energy-allowance". There's no need for an aria-label since the label of the link is the text inside the link. There's also no need for a tooltip, the title attribute, if it's the same text as the link.
The right arrow link in the tile does need an aria-label since you're hiding the → from assistive technology (aria-hidden="true"), so you're doing that correctly, although the aria-label should be "energy allowance" instead of "energy-allowance".
The second tile has the same problem plus a new problem, WCAG 2.5.3 Label in Name since your aria-label ("Form House") does not match the visual text in the link ("Help with forms"). Just remove the aria-label and the 2.5.3 issue goes away.