The use of alt-tags

The alt-tag or alternative (alt) html attribute is basically used to describe an image. In HTML, it looks the same thing like this

<img src="image-path" alt="this is where your image description goes">

Use better tables

You should add captions to your tables using the caption tag in order to make them easier to understand by screen readers rather than just making the title of a table in bold text.

<table>
 <caption>Monthly savings</caption>
 <tr>
    <th>Month</th>
    <th>Savings</th>
    <th scope="col">Month</th>
    <th scope="col">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Use default HTML tags

Header should be enclosed in a default header tag.

<header>
   Code for Header
</header>

Footer should be enclosed in a default footer tag.

<footer>
   Code for Footer
</footer>

Proper usage of heading tags

For headings, tags from h1 from h6 should be used. Headings should be in sequential order. Don't directly use h1 and h3 without giving h2 tag

<h1>
   Heading
</h1>

P tags used as headings

If in case any P tag is used as a heading then role=”heading” attribute should be given.

<p role="heading"> Heading </p>

Minimum contrast ratio of 4.5:1

Elements that have texts should meet a minimum contrast ratio of 4.5:1 between their foreground (usually text color) and background color.

Below link is used to find the contrast ratio

https://contrast-finder.tanaguru.com/

Proper font sizes should be maintained

Font sizes should be at least 11px in size in order to stay readable in the majority of font families.

Use the ARIA tag

Accessible Rich Internet Applications (ARIA) is a simple set of HTML attributes that define ways to make Web content and Web applications (especially those developed with Ajax, JavaScript and more recent web technologies like Bootstrap) more accessible to people with disabilities.

List items are contained within their parent elements

li should be present inside ul or ol tags only.

<ul>
  <li></li>
  <li></li>
</ul>

Usage of "aria-label" attribute

The “aria-label” attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use aria-labelledby instead.

Every “a” tag should contain an “aria-label” attribute. If the “a” tag acts as button then it should contain role=”button”

<a href=”#” aria-label=”Know more about something” role=”button”>Know More</a>

If the input tag does not have a label tag then an “aria-label” attribute should be given. Whenever a required attribute is used then aria-required=”true” should be given so that blind users using screen-readers know their validation.

<input type=”text” aria-label=”Name” placeholder=”Enter Name” required aria-required=”true”>

Conclusion

We can also find for the Accessibility errors from few tools like web.dev, accessiBe, Lighthouse reports. After following all the above mentioned steps we can achieve 100% Accessibility Score.