In the previous post we went over semantics and the Accessibility tree. While testing the structure of your Web App and composing functionality it is good to have in mind some key elements that will help you with Accessibility.
While constructing our websites the way we place the headings is important. Headings have a priority of <h1> to <h9>. So we can structure our site in different sections where like writing a book we can organize the content and the headings accordingly.
As you’ve understood till now, links are really important while navigating through our page.
<div onclick="goSomewhere()">Go to page</div> or <a onclick="goSomewhere()">Go to page</a>
So while using links the href attribute would be better and the text of the link should determine the purpose of the link
<a href="https://www.fullstackweekly.com">Full Stack Weekly</a>
While creating forms and input/select elements you can use the label element to link an input with the label to offer a name for that input.
<input type=”radio” name=”gender” id=”male” value=”male”><br>
<input type=”radio” name=”gender” id=”female” value=”female”><br>
<input type=”radio” name=”gender” id=”other” value=”other”><br><br>
<input type=”submit” value=”Submit”>
While using images something that is usually ignored is the alt attribute. This is important because assistive technology will use this value for visually impaired users. Also, this value is used if the images don’t appear on your site.
<img src=”./image.png” alt=”Black Cat”/>
Lastly, don’t forget the <nav>, <main>, <article>, <aside>, <section>, <footer> elements to give context to various sections of your page.