Quite often an element will not have the means to describe what it is or what it is doing. This is often an image as a link with no alt text, or perhaps it's an SVG component with no text with it. In this case, assistive technology has nothing to read to the user to tell them what this element is or what it does.
There are a few techniques we can use to help here.
Alt text
This is a very simple fix of adding an alt attribute to an image.
Remember, do not use alt text which include words like: image, picture, diagram in it. Screen readers will already announce this is an image, so by putting the word image in the alt text is redundant and repetitive for the user.
Aria-label
This is a very useful way of adding text to an element that a screen reader will read without having to add a hidden div tag for example. Aria-labels can be added to buttons, forms, sections, links.
Beware, aria-labels will override any other text that is in the element.
Aria-describedby
This aria attribute allows you to describe an element using the text from another element. To do this you must reference an ID from the target element:
<button aria-describedby="productDescription">Checkout</button>
...
<p id="productDescription">
Buy this pair of Nike running shoes!
</p>
A visually hidden element
This technique involves css to move the element off screen so it's not visible, but assistive technology will still be able to read it since it is still accessible in the DOM.
You may need to do this say if you had an element you needed to add screen reader text to, but you didn't want to see the text on the page.
There are different CSS techniques to visually hide an element and please check the proceeding links for use cases, but a basic example of visually hiding an element would be:
.sr-only:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
width: 1px;
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
}
Links:
https://webaim.org/techniques/css/invisiblecontent/
https://css-tricks.com/inclusively-hidden/