Please add a custom variable/class which hides the content for the screen but not for screen readers/ readability.

So we still can hide elements but not to use display:none

For example (from automatic.css)

//

.hidden-accessible {

position: absolute !important;

width: 1px !important;

height: 1px !important;

padding: 0;

margin: -1px;

overflow: hidden;

clip: rect(0, 0, 0, 0);

white-space: nowrap;

border: 0;

}

.bricks-area .hidden-accessible {

position: relative !important;

width: 20px !important;

height: auto !important;

margin: 0;

line-height: 1;

visibility: hidden;

}

.bricks-area .hidden-accessible::before {

content: "A";

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

text-align: center;

position: absolute;

background: #111;

color: #f5f5f5;

font-size: max(60%, 13px);

padding: 0.5em;

top: 0;

left: 0;

width: 20px;

height: 20px;

visibility: visible;

border-radius: 50%;

}