前言
在现代化的网站开发中，无障碍性已经成为一个重要的话题。随着 HTML5 的出现，无障碍性在 Web 开发中得到了更好的支持。本文将介绍 HTML5 中的无障碍新特性，包括语义化标签、ARIA 属性、表单控件、多媒体元素等，并提供相关示例代码。
语义化标签
HTML5 中引入了一些语义化标签，如 <header>、<footer>、<nav>、<article>、<section> 等，这些标签不仅可以让页面结构更加清晰，也可以提高无障碍性。比如，<header> 和 <footer> 标签可以让屏幕阅读器更好地识别出页面的标题和结尾，<nav> 标签可以让用户更容易地找到导航菜单，<article> 和 <section> 标签可以让用户更好地理解页面的内容结构。
下面是一个简单的 HTML5 页面示例，其中使用了语义化标签：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Semantic Elements Example</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section>
<h2>Latest News</h2>
<article>
<h3>Article Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
<article>
<h3>Another Article Title</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</article>
</section>
<footer>© My Website 2021</footer>
</body>
</html>ARIA 属性
ARIA 属性是一种可以让开发者为不具备语义化的元素添加角色、状态和属性的方法。通过使用 ARIA 属性，开发者可以让屏幕阅读器更好地理解页面的内容，从而提高无障碍性。以下是一些常用的 ARIA 属性：
role属性：用于指定元素的角色，如role="button"表示该元素是一个按钮。aria-label属性：用于为元素添加一个简短的文本描述，如aria-label="搜索"表示该元素是一个搜索按钮。aria-describedby属性：用于指定元素的描述信息所在的元素 ID，如aria-describedby="description"表示该元素的描述信息在 ID 为description的元素中。aria-hidden属性：用于指定元素是否应该在屏幕阅读器中隐藏，如aria-hidden="true"表示该元素应该被隐藏。
以下是一个使用 ARIA 属性的示例代码：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ARIA Attributes Example</title>
</head>
<body>
<div role="dialog" aria-labelledby="dialog-title">
<h2 id="dialog-title">Dialog Title</h2>
<p>Dialog content goes here.</p>
<button aria-label="Close Dialog">X</button>
</div>
</body>
</html>表单控件
HTML5 中新增了一些表单控件，如 <input type="date">、<input type="time">、<input type="range"> 等，这些控件不仅可以让用户更方便地输入数据，也可以提高无障碍性。比如，<input type="date"> 和 <input type="time"> 可以让用户更容易地选择日期和时间，<input type="range"> 可以让用户更容易地选择一个范围。
以下是一个使用表单控件的示例代码：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Controls Example</title>
</head>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="birthdate">Birthdate:</label>
<input type="date" id="birthdate" name="birthdate" required>
<br>
<label for="time">Time:</label>
<input type="time" id="time" name="time" required>
<br>
<label for="range">Range:</label>
<input type="range" id="range" name="range" min="0" max="100" value="50">
<br>
<button type="submit">Submit</button>
</form>
</body>
</html>多媒体元素
HTML5 中新增了一些多媒体元素，如 <video>、<audio> 等，这些元素可以让开发者更方便地嵌入视频和音频，也可以提高无障碍性。比如，<video> 元素可以让用户更容易地观看视频，<audio> 元素可以让用户更容易地听取音频。
以下是一个使用多媒体元素的示例代码：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Media Elements Example</title>
</head>
<body>
<h2>Video Example</h2>
<video src="example.mp4" controls>
Your browser does not support the video tag.
</video>
<h2>Audio Example</h2>
<audio src="example.mp3" controls>
Your browser does not support the audio tag.
</audio>
</body>
</html>总结
本文介绍了 HTML5 中的无障碍新特性，包括语义化标签、ARIA 属性、表单控件、多媒体元素等，并提供了相关示例代码。通过使用这些新特性，开发者可以更好地支持无障碍性，让更多的用户能够更方便地访问和使用网站。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6566a605d2f5e1655dfa2caa