The latest articles on DEV Community by Purity Komer (@purity_komer_95557f0323a2). https://dev.to/purity_komer_95557f0323a2 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4000746%2F78aea658-2957-4c2d-b4be-24c62ad380a0.png https://dev.to/purity_komer_95557f0323a2 en Purity Komer Wed, 24 Jun 2026 15:08:43 +0000 https://dev.to/purity_komer_95557f0323a2/why-semantic-html-and-accessibility-matter-5co3 https://dev.to/purity_komer_95557f0323a2/why-semantic-html-and-accessibility-matter-5co3 <h2> Why Semantic HTML and Accessibility Matter </h2> <p>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.<br> Semantic HTML means using HTML tags that clearly describe their purpose. Instead of using many </p> tags, we can use tags like , , , and . These tags help browsers, search engines, and screen readers understand the structure of a webpage. <h2> Before: Non-Semantic HTML </h2> <h1>My Portfolio</h1> <p>About<br> Projects</p> <h3> After: Semantic HTML </h3> <h1>My Portfolio</h1> <p>About<br> Projects</p> <p>The second example is easier to understand and makes the website more accessible.<br> While checking my portfolio website, I found a few accessibility issues and fixed them.</p> <ol> <li><p>Missing Image Descriptions<br> Some images did not have alternative text (alt). Screen readers use this text to describe images to users.<br> Before<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/profile.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/profile.jpg" width="800" height="400"></a><br> After<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/profile.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/profile.jpg" alt="Profile photo of the website owner" width="800" height="400"></a></p></li> <li> <p>Poor Heading Structure**<br> There were also some issues with headings being out of order. This may be confusing for people who use screen readers.<br> I fixed this by using headings in the correct order, such as </p> <h1>, </h1> <h2>, and </h2> <h3>.</h3> </li> <li><p>Keyboard Navigation**<br> 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.<br> All these improvements increased the accessibility of my website, making it more user-friendly.<br> 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.</p></li> </ol> <p><a href="https://github.com/pkomer/iyf-s11-week-01-pkomer" rel="noopener noreferrer">https://github.com/pkomer/iyf-s11-week-01-pkomer</a></p> html a11y webdev beginners