Web Accessibility: Semantic HTML and Best Practices

Accessibility originally referred to "无障碍" (barrier‑free) web design for people with disabilities, but today it also covers broader scenarios such as mobile devices, low‑bandwidth connections, and older users, aiming for equal access for everyone.

Semantic HTML is a cornerstone of good accessibility. The article shows a poor markup example that mixes headings, divs, and line breaks, which confuses screen readers:

<h2>静夜思</h2>
<div>
    床前明月光，疑是地上霜。<br/>
    举头望明月，低头思故乡。
</div>
<a href="#">译文</a> &nbsp; <a href="#">注释</a> &nbsp; <a href="#">作者介绍</a>

In contrast, a well‑structured version uses appropriate elements such as <article> , <h2> , <p> , <ul> , and <li> so that screen readers can navigate headings, paragraphs, and lists correctly:

<article>
    <h2>静夜思</h2>
    <p>[唐] 李白</p>
    <div>
        床前明月光，疑是地上霜。<br/>
        举头望明月，低头思故乡。
    </div>
    <ul>
        <li><a href="#">译文</a></li>
        <li><a href="#">注释</a></li>
        <li><a href="#">作者介绍</a></li>
    </ul>
</article>

The article also discusses form accessibility. Using <label> elements linked to <input> or <select> not only clarifies the purpose of fields but also expands the clickable area, improving keyboard navigation.

<form>
    <div>
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name">
    </div>
    <div>
        <label for="age">年龄：</label>
        <input type="text" id="age" name="age">
    </div>
    <div>
        <label for="gender">性别：</label>
        <select id="gender" name="gender">
            <option>男</option>
            <option>女</option>
        </select>
    </div>
</form>

Keyboard accessibility is emphasized: elements such as <a> , <button> , <label> , and native form controls are inherently focusable and operable via the Tab key and Enter/Return, reducing the need for manual tabindex adjustments.

Images should provide meaningful alt text when they convey content, and an empty alt when they are purely decorative. A good example:

<img src="dinosaur.png" alt="红色霸王龙：一种双腿恐龙，像人一样直立，有小胳膊，头部有很多锋利的牙齿。" title="The Mozilla red dinosaur">

The article introduces WCAG 2.0, the Web Content Accessibility Guidelines, and outlines its four principles with sub‑criteria:

Perceivable : text alternatives, time‑based media alternatives, adaptable content, distinguishable visual presentation.

Operable : keyboard accessibility, sufficient time, safe animations, navigable interfaces.

Understandable : readable text, predictable behavior, input assistance.

Robust : compatibility with current and future user agents, including assistive technologies.

For further learning, the article suggests hands‑on experience with assistive technologies, systematic study of WCAG 2.0, and exploration of ARIA techniques.

References include MDN Web Docs on accessibility and the official WCAG 2.0 specification.