-
-
Notifications
You must be signed in to change notification settings - Fork 78.8k
Commit
plus one example that still used the old <div role="navigation"> and a fix-up of the callout as per #15109
- Loading branch information
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -25,11 +25,11 @@ <h4>Changing the collapsed mobile navbar breakpoint</h4> | |
</div> | ||
<div class="bs-callout bs-callout-warning" id="callout-navbar-role"> | ||
<h4>Make navbars accessible</h4> | ||
<p>Be sure to add a <code>role="navigation"</code> to every navbar to help with accessibility.</p> | ||
<p>Be sure to use a <code><nav></code> element or, if using a more generic element such as a <code><div></code>, add a <code>role="navigation"</code> to every navbar to explicitly identify it as a landmark region for users of assistive technologies.</p> | ||
This comment has been minimized.
Sorry, something went wrong.
This comment has been minimized.
Sorry, something went wrong.
patrickhlauke
Author
Member
|
||
</div> | ||
|
||
<div class="bs-example"> | ||
<nav class="navbar navbar-default" role="navigation"> | ||
<nav class="navbar navbar-default"> | ||
<div class="container-fluid"> | ||
<!-- Brand and toggle get grouped for better mobile display --> | ||
<div class="navbar-header"> | ||
|
@@ -84,7 +84,7 @@ <h4>Make navbars accessible</h4> | |
</nav> | ||
</div> | ||
{% highlight html %} | ||
<nav class="navbar navbar-default" role="navigation"> | ||
<nav class="navbar navbar-default"> | ||
<div class="container-fluid"> | ||
<!-- Brand and toggle get grouped for better mobile display --> | ||
<div class="navbar-header"> | ||
|
@@ -143,7 +143,7 @@ <h4>Make navbars accessible</h4> | |
<h2 id="navbar-brand-image">Brand image</h2> | ||
<p>Replace the navbar brand with your own image by swapping the text for an <code><img></code>. Since the <code>.navbar-brand</code> has its own padding and height, you may need to override some CSS depending on your image.</p> | ||
<div class="bs-example"> | ||
<nav class="navbar navbar-default" role="navigation"> | ||
<nav class="navbar navbar-default"> | ||
<div class="container-fluid"> | ||
<div class="navbar-header"> | ||
<a class="navbar-brand" href="#"> | ||
|
@@ -154,7 +154,7 @@ <h2 id="navbar-brand-image">Brand image</h2> | |
</nav> | ||
</div> | ||
{% highlight html %} | ||
<nav class="navbar navbar-default" role="navigation"> | ||
<nav class="navbar navbar-default"> | ||
<div class="container-fluid"> | ||
<div class="navbar-header"> | ||
<a class="navbar-brand" href="#"> | ||
|
@@ -170,7 +170,7 @@ <h2 id="navbar-forms">Forms</h2> | |
<p>Place form content within <code>.navbar-form</code> for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.</p> | ||
<p>As a heads up, <code>.navbar-form</code> shares much of its code with <code>.form-inline</code> via mixin. <strong class="text-danger">Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.</strong></p> | ||
<div class="bs-example"> | ||
<nav class="navbar navbar-default" role="navigation"> | ||
<nav class="navbar navbar-default"> | ||
<div class="container-fluid"> | ||
<div class="navbar-header"> | ||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> | ||
|
@@ -215,7 +215,7 @@ <h4>Always add labels</h4> | |
<h2 id="navbar-buttons">Buttons</h2> | ||
<p>Add the <code>.navbar-btn</code> class to <code><button></code> elements not residing in a <code><form></code> to vertically center them in the navbar.</p> | ||
<div class="bs-example"> | ||
<nav class="navbar navbar-default" role="navigation"> | ||
<nav class="navbar navbar-default"> | ||
<div class="container-fluid"> | ||
<div class="navbar-header"> | ||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3"> | ||
|
@@ -244,7 +244,7 @@ <h4>Context-specific usage</h4> | |
<h2 id="navbar-text">Text</h2> | ||
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.</p> | ||
<div class="bs-example"> | ||
<nav class="navbar navbar-default" role="navigation"> | ||
<nav class="navbar navbar-default"> | ||
<div class="container-fluid"> | ||
<div class="navbar-header"> | ||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4"> | ||
|
@@ -269,7 +269,7 @@ <h2 id="navbar-text">Text</h2> | |
<h2 id="navbar-links">Non-nav links</h2> | ||
<p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p> | ||
<div class="bs-example"> | ||
<nav class="navbar navbar-default" role="navigation"> | ||
<nav class="navbar navbar-default"> | ||
<div class="container-fluid"> | ||
<div class="navbar-header"> | ||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5"> | ||
|
@@ -304,7 +304,7 @@ <h4>Right aligning multiple components</h4> | |
<h2 id="navbar-fixed-top">Fixed to top</h2> | ||
<p>Add <code>.navbar-fixed-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p> | ||
<div class="bs-example bs-navbar-top-example"> | ||
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> | ||
<nav class="navbar navbar-default navbar-fixed-top"> | ||
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. --> | ||
<div class="container-fluid"> | ||
<div class="navbar-header"> | ||
|
@@ -328,7 +328,7 @@ <h2 id="navbar-fixed-top">Fixed to top</h2> | |
</nav> | ||
</div><!-- /example --> | ||
{% highlight html %} | ||
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> | ||
<nav class="navbar navbar-default navbar-fixed-top"> | ||
<div class="container"> | ||
... | ||
</div> | ||
|
@@ -348,7 +348,7 @@ <h4>Body padding required</h4> | |
<h2 id="navbar-fixed-bottom">Fixed to bottom</h2> | ||
<p>Add <code>.navbar-fixed-bottom</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p> | ||
<div class="bs-example bs-navbar-bottom-example"> | ||
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> | ||
<nav class="navbar navbar-default navbar-fixed-bottom"> | ||
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. --> | ||
<div class="container-fluid"> | ||
<div class="navbar-header"> | ||
|
@@ -372,7 +372,7 @@ <h2 id="navbar-fixed-bottom">Fixed to bottom</h2> | |
</nav> | ||
</div><!-- /example --> | ||
{% highlight html %} | ||
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> | ||
<nav class="navbar navbar-default navbar-fixed-bottom"> | ||
<div class="container"> | ||
... | ||
</div> | ||
|
@@ -393,7 +393,7 @@ <h2 id="navbar-static-top">Static top</h2> | |
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p> | ||
<p>Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p> | ||
<div class="bs-example bs-navbar-top-example"> | ||
<nav class="navbar navbar-default navbar-static-top" role="navigation"> | ||
<nav class="navbar navbar-default navbar-static-top"> | ||
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. --> | ||
<div class="container-fluid"> | ||
<div class="navbar-header"> | ||
|
@@ -418,7 +418,7 @@ <h2 id="navbar-static-top">Static top</h2> | |
</nav> | ||
</div><!-- /example --> | ||
{% highlight html %} | ||
<nav class="navbar navbar-default navbar-static-top" role="navigation"> | ||
<nav class="navbar navbar-default navbar-static-top"> | ||
<div class="container"> | ||
... | ||
</div> | ||
|
@@ -429,7 +429,7 @@ <h2 id="navbar-static-top">Static top</h2> | |
<h2 id="navbar-inverted">Inverted navbar</h2> | ||
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p> | ||
<div class="bs-example"> | ||
<nav class="navbar navbar-inverse" role="navigation"> | ||
<nav class="navbar navbar-inverse"> | ||
<div class="container-fluid"> | ||
<!-- Brand and toggle get grouped for better mobile display --> | ||
<div class="navbar-header"> | ||
|
@@ -454,7 +454,7 @@ <h2 id="navbar-inverted">Inverted navbar</h2> | |
</nav> | ||
</div><!-- /example --> | ||
{% highlight html %} | ||
<nav class="navbar navbar-inverse" role="navigation"> | ||
<nav class="navbar navbar-inverse"> | ||
... | ||
</nav> | ||
{% endhighlight %} | ||
|
If you remove role="navigation" you lost the landmark inside assistive technology even with nav :
🆗 Jaws is ok
🚫 NVDA says nothing
🚫 Voice-over says nothing