The current sr-only (screen reader only) class uses {display: none;}, which not only hides content visually, but also removes the content from the visual flow of the page, and is ignored by screen readers. Also, the sr-only class is defined twice in blogCarousel.scss, but it would make more sense for it to be a global style.
Please do the following:
Overwrite the sr-only class using the following recommended styles for visually hiding content that will be read by a screen reader.
The current sr-only (screen reader only) class uses {display: none;}, which not only hides content visually, but also removes the content from the visual flow of the page, and is ignored by screen readers. Also, the sr-only class is defined twice in blogCarousel.scss, but it would make more sense for it to be a global style.
Please do the following:
.sr-only { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
reference: https://webaim.org/techniques/css/invisiblecontent/