Accessibility generally means having web content and user interface that can be understood, navigated and interacted with by a broad audience.
Let's make this lesson short and simple by teaching basic concepts which front-end developers use in their day to day life.
Just try to answer the simple questions provided below about Accessibility and learn the basic things in it.
Let's start ... (Bring your cup of coffee to the table).
Answer: If your answer is to provide alternative text to display when an image fails to load, you are partially right.
But only partially? Yes.
The alt attribute does its purpose more than you think.
Have you ever heard about Screen Readers?
Screen Readers are used by blind people to read the website completely. Screen readers traverse every Dom element and read the content in that element aloud for the user. Since Screen readers couldn't able to read the image tag, it reads the text from the alternative tag aloud to the user.
So, Next time when you code, ensure you use the alt attribute, remembering this fact :)
Answer: Consider, you have a chart representation in your web page. How do blind people make use of it?
Your chart representation about your data may not be accessible to them and even Screen Reader fails to read an image. In that case, create a table for your chart representation and make it visible only to Screen Readers.
You need to hide the table but, you should not use, display: none; or visibility: hidden; either to hide since even Screen Readers skips these elements.
So, create a table with the following CSS to hide it from the screen and make it accessible to these users.
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
Answer: Providing descriptive links are the best way to make it accessible to everyone.
Having a list of "click here" or "read more" links isn't helpful, for these people especially.
Instead, you should use brief but descriptive text within the a tags to provide more meaning for these users.
So, how do you make it more descriptive? Consider a below text.
Click here for information about batteries.
To make it more descriptive for the Screen Readers as well, try providing link tag to the descriptive text like below.
Click here for information about batteries.
Hope, I have taught you the basics of Applied Accessibility and it's importance.
Sounds interesting?
Learn more about Applied Accessibility at FreeCodeCamp
Thank you.