How to fix the most common Accessibility errors
1 March 2024
techtipsall.com
Accessibility issues [+Solutions] every developer must know.
While creating a website and testing the performance of the website, some errors related to accessibility come up which if we resolve then the performance of the website improves. so in this blog we will discuss about how to fixed the most common accessibility errors.
In this article we will talk about how to fix the most common accessibility errors.
There are multiple issues list below.
- Poor Contrast Text
- Leaving empty links and buttons
- Missing document Language
- Missing alternative text
- Empty form label
- Missing form label
So now you can show list below how to fixed the most common accessibility errors
How do resolve Poor Contrast Text
When we test our website with the help of Wave Evaluation tool, then show a list of poor contrasts.
Poor contrast means that shapes, weights, and colors are not used in the correct proportions.
We note that 18 point or 14 point bold or large text should have a contrast ratio of at least 3:1 with the background color.
Poor Contrast Checker
Solution:
<button type=’button’ class=’colorContrast’>
Color contrast
</button>
Css:
.colorContrast{
background-color: #8FA8DC;
color: #fff;
border: 1px solid #8FA8DC;
padding: 10px;
border-radius: 10px;
}
When we used background-color: #8FA8DC; and color: #ffffff for button style then will be shown 1 color contrast issues you can see in below image
Solutions: for solution we will open color contrast checker website and then provide background-Color: #215ed9 and color is #ffffff
How do resolve Leaving empty links and buttons
When we take any link or button and do not provide the name of the link and button then it shows issues of empty link.
Don’t Use:
<a href=’abc.com’>
<i class=’material-icons’></i>
</a>
<button type=’submit’>
<i class=’material-icons’></i>
</button>
Use Code:
<a href=’abc.com’>
<i class=’material-icons’>done</i> techtipsall.com
</a>
<button type=’submit’>
<i class=’material-icons’>done</i> Submit
</button>
Missing document Language
When we create a any website and not defined the lang(Language) name in html head then these issues show.
Error:
<html lang=””>
Solution:
<html lang=”en”>
How do resolve Missing alternative text accessibility issues
Error:
<img src=”https://techtipsall.com/wp-content/uploads/2023/12/techtips-logo.png” />
Solution:
<img src=”https://techtipsall.com/wp-content/uploads/2023/12/techtips-logo.png” alt=”tech tips all”/>
Note: In Each and every image to be added alt tag. then will not any issues raised by wave tool. and that is the better approach.
How do resolved Missing form label accessibility issues:
Error Code:
<TextField id=”filled-basic” variant=”filled” />
Solution:
<TextField id=”filled-basic” label=”Filled” variant=”filled” />
OR Other Error Code
<input type=”text” value=”abc”></input>
Solution
<label htmlFor=”inputField”>abc</label>
<input type=”text” value=”abc” id=”inputField”></input>
Note: In Each and every text filed to be added label tag. then will not any issues raised by wave tool. and that is the better approach.
Missing form label means should be id and for both are used this type
Other Solution
<div>
<input type=”radio” id=”customRadioInline1″ name=”customRadioInline1″ />
<label for=”customRadioInline1″>Toggle this custom radio</label>
</div>
How do fixed Empty form label accessibility issues:
Error Code:
<span>
<label for=”checkbox”>
<input type=”checkbox” id=”checkbox” />
<span></span>
</label>
</span>
Solution:
<span>
<label for=”checkbox”>
<input type=”checkbox” id=”checkbox” />
<span></span>
<span>Label for the input</span>
</label>
</span>
Other Error Code Example
<FormControl component=”fieldset”>
<FormLabel component=”legend”>Gender</FormLabel>
<RadioGroup aria-label=”gender” name=”gender1″ value={value} onChange={handleChange}>
<FormControlLabel value=”female” control={<Radio />} />
<FormControlLabel value=”male” control={<Radio />} label=”Male” />
<FormControlLabel value=”other” control={<Radio />} label=”Other” />
<FormControlLabel value=”disabled” disabled control={<Radio />} label=”(Disabled option)” />
</RadioGroup>
</FormControl>
Note: As you see in top example formcontrol label value female not added label so when you added label so issues will be fixed.
Solution:
<FormControlLabel value=”female” control={<Radio />} label=”FeMale” />
Conclusion:
Welcome to my blog techtipsall. in this blog we have discussed about how to fixed the most common accessibility errors. and why is important accessibility for any website and how do check performance by using wave tool and lighthouse .
If you want this code you can go Github Repo Here»
Watch Video about how do resolve accessibility issues
FAQ:
1). Do I need accessibility?
Yes, For each and every website to be check accessibility for better performance.
2). How can I test my website for accessibility?
There are multiple process for website accessibility test
- Validate your code
- Test by screen reader Ex(NVDA tool)
- Check your pages according to guideline WCAG
- Check focus item for each and every section by keyboard (TAB)
- Check Accessibility score by Light House( using chrome browser)
- List Item
3). How are websites accessible?
To be each and every functionality or content is accessible through Tab key or keyboard
4). What is excellent accessibility?
When your website able for each and every person including disabled person then your accessibility is good.
5). What is the aim of accessibility?
Each and every person aim that my website remove these barriers and provide equal opportunities for everyone, regardless of their disabilities.
Very informative article.