In the coming days we will release a set of accessibility fixes based on WAVE and Lighthouse audits. They apply to all 3G templates. Most changes add ARIA attributes only; the ones below also touch the HTML and may affect your customizations.
Many of the fixes rely on the sr-only class. It hides content visually while keeping it in the accessibility tree, so screen readers still read it. This is the standard way to give icon-only buttons, inputs and links an accessible name.
If you override .sr-only in your own CSS, keep this definition:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}Do not use display: none or visibility: hidden for it. Both remove the element from the accessibility tree and from the tab order, which makes the content invisible to assistive technologies.
id="nav-manufacturers" was removed from the Brands item in the main navigation. If you need to target it, use the new class .nav-manufacturers with the same name.<span class="sr-only"> inside its <label> instead of an aria-label..vote-delimeter span no longer contains the | character; the separator is drawn with CSS.Review custom CSS/JS that targets the elements above. Update selectors using #nav-manufacturers and check that your own .sr-only rules do not hide the content with display: none.