title: How to make Javascript/jQuery key events work with Screen Readers
body: <p>I have the following <a href="http://jsfiddle.net/AGE/37x0f7eh/" rel="nofollow">jsFiddle</a> containing a navigation bar consisting of a few categories with sub categories in them.</p>
  
  <pre><code>&lt;div class="navigation-bar"&gt;
      &lt;div class="category-container" tabindex="0" role="navigation" aria-labelledby="category-1"&gt;
          &lt;h4 id="category-1"&gt;Category&lt;/h4&gt;
          &lt;ul class="subcategory"&gt;
              &lt;li tabindex="1"&gt;&lt;a href="#"&gt;Subcategory&lt;/a&gt;&lt;/li&gt;
              &lt;li tabindex="2"&gt;&lt;a href="#"&gt;Subcategory&lt;/a&gt;&lt;/li&gt;
              &lt;li tabindex="3"&gt;&lt;a href="#"&gt;Subcategory&lt;/a&gt;&lt;/li&gt;
              &lt;li tabindex="4"&gt;&lt;a href="#"&gt;Subcategory&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="category-container" tabindex="0" role="navigation" aria-labelledby="category-2"&gt;
          &lt;h4 id="category-2"&gt;Category&lt;/h4&gt;
          &lt;ul class="subcategory"&gt;
              &lt;li tabindex="1"&gt;&lt;a href="#"&gt;Subcategory&lt;/a&gt;&lt;/li&gt;
              &lt;li tabindex="2"&gt;&lt;a href="#"&gt;Subcategory&lt;/a&gt;&lt;/li&gt;
              &lt;li tabindex="3"&gt;&lt;a href="#"&gt;Subcategory&lt;/a&gt;&lt;/li&gt;
              &lt;li tabindex="4"&gt;&lt;a href="#"&gt;Subcategory&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am leveraging Javascript/jQuery like so:</p>
  
  <pre><code>$(function(){
      $(".category-container").keydown(function(e){
          // down arrow shows the category sub menu, if said sub menu is hidden
          if($(this).find(".subcategory").is(":hidden") &amp;&amp; e.keyCode === 40){
              $(this).find(".subcategory").toggle();
          }
          // esc hides the category sub menu, if said sub menu is visible
          else if($(this).find(".subcategory").is(":visible") &amp;&amp; e.keyCode === 27){
              $(this).find(".subcategory").toggle();
          }
      });
  
      $("a").keydown(function(e){
          // if we press tab on the last sub category, hide current category sub menu
          if($(this).closest(".subcategory").find("li:last-child a").is(":focus") &amp;&amp; e.keyCode === 9){
              $(this).closest(".subcategory").toggle();
          }
      });
  });
  </code></pre>
  
  <p>As you can see, the navigation works very well for people without disabilities, meaning you can use your mouse to explore the navigation bar using simple CSS event handlers.</p>
  
  <p>For keyboard accessibility, I have these very specific instructions:</p>
  
  <ul>
  <li>Navigate from category to category via <code>tab</code> press.</li>
  <li>To open a sub categories menu, press the <code>down arrow</code> key.</li>
  <li>To close a sub categories menu, press the <code>esc</code> key.</li>
  <li>To navigate from sub menu item to sub menu item, press <code>tab</code>.</li>
  </ul>
  
  <p>All of that functionality is already in place thanks to Javascript/jQuery. <strong>My challenge</strong> comes when using a screen reader, like JAWS or NVDA, which is currently preventing my Javascript/JQuery from working as above described for keyboard navigation purposes.</p>
  
  <p>To be specific, I cannot access the <code>subcategories</code> via any combination of <code>keypress</code> events I could come up with.</p>
  
  <p><strong>Question:</strong> Is it possible to <em>fix</em> this code to be keyboard accessible and ARIA compliant? Even if it is not possible, an explanation towards why it would not be possible to fix this code is better than nothing.</p>