508 Compliance checking when developing UI components.
What is 508 compliance?
508 compliance is a shortened phrase we use for a law requiring websites to be safe and accessible for people with disabilities.
Is it useful?
Isn’t it better to make a website accessible to everyone? It’s a smart move for a business. When this law is applied to a website, that site is secure from issues related to assisting people with disabilities.
How to check whether your website has 508 compliance?
There are different online sites that can be found on the internet, which will be useful in checking the 508 compliance issues.
What I used for checking compliance issues is the Access assistant browser extension. I used it with chrome (Link)
01. Go to the web page you want to see the compliance issues.
02. Click Quick Test, the Run.
03. This is a sample test I ran while I was writing this article.
04. You can get details of the issue by clicking the view icon on the right side of each issue.
An Example related to WSO2 Admin Portal.
Example 01:
Ran access assistant on one page of the WSO2 admin portal
There were several issues found, below is the description of the issue found related to Edit icons and Delete icons for an advanced throttling policy.
Solution:
There should be a mechanism to calculate the accessible value. For that aria-label can be added to the icon. It will help to identify the icon uniquely.
icon={ <DeleteForeverIcon aria-label='delete-advanced-policies' />}Thank you for reading this article! Hope you learn something useful 🙂
Give it a clap if you like my article. Comment if anything to be clarified.
Happy Reading!
