Accessibility means the ability of everyone regardless of their condition to have access to something. Web accessibility means that people with disabilities can use the Web.
The Web and Internet is an important aspect of everyone's life because it includes Education, Government, E-Commerce, Employment, Health Care etc. So in order to provide equal access and equal opportunity to people with disabilities, an accessible web comes into play. So people with disabilities can help people to participate more actively in society.
Making your website accessible to people with disabilities, will end up making it accessible to everyone.
Below are the steps to be followed in order to improve accessibility.
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">
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>
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>
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>
If in case any P tag is used as a heading then role=”heading” attribute should be given.
<p role="heading"> Heading </p>
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
Font sizes should be at least 11px in size in order to stay readable in the majority of font families.
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.
li should be present inside ul or ol tags only.
<ul>
<li></li>
<li></li>
</ul>
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”>
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.
