Why Semantic HTML and Accessibility Matter: Lessons From My Portfolio Audit

为什么语义化 HTML 和无障碍访问至关重要：我的作品集审计心得

When building for the web, it is easy to focus entirely on visual aesthetics. However, clean code under the hood is what truly separates good websites from great ones. During my recent portfolio review, I took a deep dive into semantic HTML and web accessibility (a11y). 在进行网页开发时，人们很容易将全部精力集中在视觉美感上。然而，底层整洁的代码才是区分优秀网站与卓越网站的关键。在最近的一次作品集审查中，我深入研究了语义化 HTML 和网页无障碍访问（a11y）。

Semantic HTML refers to using markup tags that inherently describe the meaning and purpose of the content enclosed within them. Rather than relying on generic containers like div or span for everything, semantic code utilizes dedicated tags such as header, nav, main, and footer. This practice matters profoundly because it structures data so search engines can index pages effectively, boosting SEO. More importantly, it creates an essential structural map for screen readers, allowing visually impaired users to seamlessly navigate a website. 语义化 HTML 是指使用能够准确描述其所包含内容含义和用途的标记标签。语义化代码不再一味依赖 div 或 span 等通用容器，而是使用 header、nav、main 和 footer 等专用标签。这种做法意义重大，因为它能构建结构化数据，使搜索引擎能够有效地索引页面，从而提升 SEO。更重要的是，它为屏幕阅读器创建了必要的结构图，使视障用户能够顺畅地浏览网站。

Before vs After: Writing Meaning

修改前后对比：编写有意义的代码

<div class="navigation-bar">
  <div class="nav-item">Home</div>
  <div class="nav-item">Projects</div>
  <div class="nav-item">Contact</div>
</div>

Fixing My Portfolio Accessibility Issues 修复我作品集的无障碍问题

When conducting an accessibility audit on my personal portfolio site, I discovered three major issues that severely compromised user experience: 在对我的个人作品集网站进行无障碍审计时，我发现了三个严重影响用户体验的主要问题：

1. Missing image Alt text: Several project screenshots completely lacked alt attributes. This meant screen readers would simply announce the raw file name to a visually impaired user. I resolved this by adding clear, descriptive text to every image tag.

2. 缺失图片 Alt 文本： 几个项目截图完全缺少 alt 属性。这意味着屏幕阅读器只会向视障用户朗读原始文件名。我通过为每个图片标签添加清晰、描述性的文本解决了这个问题。

3. Heading hierarchy errors: My layout skipped directly from an h1 tag to an h3 tag. I restructured the headings to follow a logical, consecutive hierarchy (h1 -> h2 -> h3) for proper page layout reading.

4. 标题层级错误： 我的布局直接从 h1 标签跳到了 h3 标签。我重新调整了标题结构，使其遵循逻辑连贯的层级（h1 -> h2 -> h3），以实现正确的页面布局阅读。

5. Missing document language: The main template was missing a lang attribute entirely. I added lang="en" directly to the root html element to ensure screen readers use the correct pronunciation.

6. 缺失文档语言属性： 主模板完全缺少 lang 属性。我直接在根 html 元素中添加了 lang="en"，以确保屏幕阅读器使用正确的发音。

Conclusion

结论

Prioritizing accessibility ensures that the digital world remains open and inclusive for everyone. You can view my fully optimized, accessibility project live here: My deployed portfolio 优先考虑无障碍访问可以确保数字世界对每个人保持开放和包容。你可以在此处查看我经过全面优化且具备无障碍功能的项目：我部署的作品集