我使用html5创建了一个网页。
我使用了bootstrap的源代码。
例如：role="main"，role ="navigation"，role = "document"等。
如果我从代码中删除这些属性，则页面没有任何更改。
所以我想知道：＆＃34;角色＆＃34;的目的是什么？属性？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Raleway:900,500,600,200,400,700' rel='stylesheet' type='text/css'>
<title>Layout</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body role="document">
<!-- Fixed navbar -->
<div class="navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<h1><img src="img/logo.png" /></h1>
</div>
</div>
</div>
<div class="container theme-showcase" role="main">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="container">
<div class="banner-div">
<img src="img/banner.png" class="banner"/>
<img src="img/issue-no-img.png" class="issue-badge"/>
<span class="issue">Issue No.<br /><b>376</b></span>
</div>
<div class="row">
<div class="col-md-4">
<img src="img/left-note-img.png"/>
</div>
<div class="col-md-4 align-center">
<p><span class="new-radius"> NEW! </span> <span class="new">JUN 07, 2003</span></p>
<p><i>Get your breaks points on.</i></p>
<span>
<h1>DOT NET ARTICLES</h1>
</span>
<span class="comments"><i>by</i> <a>JOHN WOO</a> <i> - 10 Commments</i></span><br/>
</div>
<div class="col-md-4 pull-right">
<div class="input-group">
<input type="text" class="form-control search-input-box" placeholder="Search..." />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<hr class="hr-style"/>
<p class = "header-pgf">
Text, navigation, and tables, oh, my! What's a responsive web designer to do? How can you confine your design to as few major breakpoints as possible? Where and when will you sketching? Is it possible to sketch on actual devices, and what are the accessibility implications of doing so? The answers to these and other profound questions will be found in this exclusive excerpt from Chapter 7 of Responsive Design Workflow, Stephen Hay's new book, available now from New Riders.
</p>
<hr class="hr-style">
<h1 class="more-apart">More from A List Apart</h1>
<hr class="hr-style">
<div class="row">
<div class="col-md-3">
<h2>Columnists</h2>
<p>JACK MCGRANE <i>on</i> CONTENT</p>
<p class="pgf-header">The Alternative is Nothing</p>
<img src="img/thumb1.jpg" class="float-left" />
<p>We're witnessing one of thr latest waves of technological disruption, as mobile devices put access to the internet in the hands of people who previously never had that power.</p>
</div>
<div class="col-md-3">
<h2>From the Blog</h2>
<p class="pgf-header">Maps Should Be Crafted.Not "Plugged In"></p>
<p>Web designers: erase the line between "the map" and "the content" by harnessing the power of open-source Leafler and your own fresh creative thinking. In the tradition of ALA's recent "Hack Your Maps." Happy Cog's Brandon Rosage shares how to make location a central aspect of the content experience-not just a visual aid.</p>
</div>
<div class="col-md-3">
<p class="md-3">Amazon Web Services Introduces a New API</p>
<p>Amazon Web Services Identity and Access Management(IAM) is expanding to support web identity federation. Developers can integrate Amazon.com, Facebook, or Google odentity into their app by using the new AWS Security Token Services(STS) API, AssumeRoleWithWebIdentity. to request temporary security credentials.</p>
</div>
<div class="col-md-3">
<h5>Gratitude</h5>
<p>Thanks to our RSS sponser Typekit-offering desktop and web fonts in a single subscription starting June 17</p>
<div class="well align-center">
<img src="img/mothers-day.jpg" /> <br/>
<p class="font-10">Two special Mothers' Say Kits are available from Field Notes Brand. Ad via The Deck </p>
</div>
<div class="job-board">
<h5>Job Board</h5>
<a href="#" >New York Times is looking for a <br />Ruby on Rails Web Developer.</a>
More on the <a href ="#">Job Board ></a>
</div>
</div>
</div>
<br />
</div>
</div>
<!-- /container -->
<div class="footer" style="">
<div class="container">
<div class="list-footer" style="font-size:13px;">
<span class="padding-10"><img src="img/article-logo.png" /></span>
<span class="padding-10">ARTICLES</span>
<span class="padding-10">COLUMNS</span>
<span class="padding-10">BLOG</span>
<span class="padding-10">TOPICS</span>
</div>
<div class = "list-footer" style="font-size:12px;">
<span class="padding-10">ABOUT</span>
<span class="padding-10">AUTHORS</span>
<span class="padding-10">MASTHEAD</span>
<span class="padding-10">CONTRIBUTE</span>
<span class="padding-10">STYLE GUIDE</span>
<span class="padding-10">CONTACT</span>
<span class="padding-10">SPONSORSHIPS</span>
</div>
<hr class="hr-style"/>
<div class="row">
<div class="col-md-6">
<img src="img/dot-net-ad.jpg" class="footer-image"/>
<h3>.NET Training</h3>
<p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
<a class="footer-link" href="#">ask here. ></a>
</div>
<div class="col-md-6">
<img src="img/shopify-expert-ad.jpg" class="footer-image"/>
<h3>Shopify Expert</h3>
<p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
<a class="footer-link" href="#">click to view</a>
</div>
</div>
<hr class="hr-style" />
<div style="text-align:center">
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：9)
它为ARIA（可访问的富Internet应用程序）提供支持，允许在文档中指定更多语义丰富。
您可以将role =“search”添加到您的搜索表单，将role =“banner”添加到您的搜索表单中 标头页脚，并且role =“contentinfo”到页脚。有一个完整的 ARIA规范中的值列表 http://www.w3.org/TR/wai-aria/roles#role_definitions
基本上你不必添加它们，但如果你这样做会更好，因为它为你的页面提供了更多的上下文。在A List Apart.
进行了更多讨论答案 1 :(得分：2)
HTML5中的新结构元素对辅助技术非常有用。我们需要做的就是正确使用nav元素，而不是创建“跳过导航”链接。这将允许屏幕阅读器用户跳过导航，而无需我们提供明确的链接。
Twitter Bootstrap使用类似<nav role="navigation">的内容。所以Bootstrap不仅要考虑普通浏览器，还要考虑屏幕阅读器浏览器。
注意：通过添加Role属性，您可以更方便地访问您的网站，以及使用此Role属性的良好做法。