title: Cannot tab to select dropdown menus in Bootstrap Navbar
body: <p>So I'm having a problem where for some reason you can't select the dropdowns from my Bootstrap navbar using the tab key? I'm concerned that this means people using screen-readers and the such  won't be able to navigate the website. It seems to work on other bootstrap sites so I don't know what's wrong. </p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;yiskah @ spooky camp&lt;/title&gt;
    &lt;!-- CSS --&gt;
    &lt;link href="../css/bootstrap.css" rel="stylesheet"&gt;
    &lt;link href="../css/navbar-static-top.css" rel="stylesheet"&gt;
    &lt;link href="../css/bootstrap-accessibility.css" rel="stylesheet"&gt;
    &lt;link href="../css/default.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;a href="#content" class="sr-only sr-only-focusable"&gt;Skip to main content&lt;/a&gt;
    &lt;!-- Static navbar --&gt;
     &lt;nav class="navbar navbar-default navbar-static-top" role="navigation"&gt;
      &lt;div class="container"&gt;
       &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="../index.html"&gt;brand&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="navbar" class="navbar-collapse collapse"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li&gt;&lt;a href="../index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;
            &lt;a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;Projects&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu" role="menu"&gt;
                &lt;li&gt;&lt;a href="../sorry"&gt;Robo-Apologizer&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="../photoshop"&gt;Photoshop Idea Generator&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="../diviii"&gt;Div III Generator&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
            &lt;li class="dropdown"&gt;
            &lt;a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;Written Work&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu" role="menu"&gt;
                  &lt;li&gt;&lt;a href="../lexrep"&gt;Lexical Replacement&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="../mannequin"&gt;Mannequin Allies&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="dropdown"&gt;
            &lt;a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;@Elsewhere &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu" role="menu"&gt;
              &lt;li&gt;&lt;a&gt;(links to social profiles)&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;(one of my social links is here)&lt;/a&gt;&lt;/li&gt;
              &lt;li class="divider"&gt;&lt;/li&gt;
              &lt;li class="dropdown-header"&gt;Contact&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;(one of my emails goes here)&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;(I put another email here)&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
  </code></pre>
  
  <p>I haven't modified any of the default bootstrap code. I have this problem on other sites I've tried to implement the navbar on. But it works fine on the examples on the bootstrap website?</p>
  
  <p>Any ideas? </p>