Most of the times, when it comes to HTML and accessibility, all boils down to semantic HTML, that is using the correct HTML elements for their purpose as much as possible. This ensures that screen readers can infer as much information about the intent behind your page structure and announce the content in a meaningful way for the users.
There are scenarios where you'll need to put extra work to make sure the content is accessible to everyone. An instance of this are form inputs and their associated labels.
Let's take as an example a text input:
All users, whether they're using a screen reader or not will have a hard time figuring out what information are they supposed to enter in the input. The natural thing is to add a label next to the input:
<label>First Name:</label> <input type="text"/>
That gives context to sighted users but is not of much help when we use a screen reader. Voice over is not able to infer the context in which we use the input.
Let's make it clear for the screen readers:
<label for="first-name">First Name:</label> <input id="first-name" />
The input element is identified by an
id which we can use to tell the label to which element it's associated using the
for attribute to associate a label with the form control is not the only way to achieve accessible form controls.
Just as well, you could set the
aria-labelledby attribute to the
id of the label
<label id="first-name">First Name:</label> <input aria-labelledby="first-name" type="text"/>
aria-label attribute or wrapping the input element by a label will also do the job.