Why Semantic HTML and Accessibility Matter
Initially, when I was learning web development, I aimed to create aesthetically pleasing sites. But with time, I realized that an aesthetically pleasing site needs to be accessible and user-friendly to everybody, even to the differently abled people. That’s where the need arises for semantic HTML and accessibility.
Semantic HTML means using HTML tags that clearly describe their purpose. Instead of using many
Before: Non-Semantic HTML
My Portfolio
After: Semantic HTML
My Portfolio
The second example is easier to understand and makes the website more accessible.
While checking my portfolio website, I found a few accessibility issues and fixed them.
Missing Image Descriptions
Some images did not have alternative text (alt). Screen readers use this text to describe images to users.
Before
After
-
Poor Heading Structure**
There were also some issues with headings being out of order. This may be confusing for people who use screen readers.
I fixed this by using headings in the correct order, such as,
, and
.
Keyboard Navigation**
Some elements on the website were not accessible through the keyboard alone. I ensured that all the links and buttons were accessible by using the Tab key.
All these improvements increased the accessibility of my website, making it more user-friendly.
Semantic HTML and accessibility are important because they allow us to build websites that are understandable, easy to maintain, and accessible to everyone. In all future projects, accessibility will be an integral part of my web development journey.
Top comments (0)