title: Does using `aria-expanded` on a navigation bar even make sense?
body: <p><sub>After a decade long hiatus I am dipping my toes into web development again. It still seems a very confusing heap of constantly changing standards to me, making it unclear which browsers support what and what the best practices are.</sub></p>
  
  <p>Currently, I am focusing on using the <a href="https://www.w3schools.com/html/html5_semantic_elements.asp" rel="nofollow noreferrer">new semantic elements of HTML5</a>. I found out the ASP.NET Core default Bootstrap template does not use the <code>&lt;nav&gt;</code> element for the navigation bar and was therefore looking into how to apply it properly.</p>
  
  <p>The <a href="https://getbootstrap.com/components/#navbar" rel="nofollow noreferrer">default navbar template in Bootstrap</a> <em>does</em> recommend to use <code>&lt;nav&gt;</code>. However, I am confused as to what the purpose is behind the <code>aria-expanded</code> attribute applied to it. After <a href="https://www.marcozehe.de/2010/02/10/easy-aria-tip-5-aria-expanded-and-aria-controls/" rel="nofollow noreferrer">learning about the benefits it offers to screen readers</a> (indicating whether the navigation bar is collapsed or not, in this instance when the screen size is small, i.e., for smartphones), I am still confused as to whether it should be there at all. (And <a href="http://www.heydonworks.com/article/aria-controls-is-poop" rel="nofollow noreferrer">whether or not <code>aria-controls</code> should be applied</a>, which it isn't in the default bootstrap template.)</p>
  
  <p>Let me explain:</p>
  
  <ul>
  <li>Some of these aria attributes seem to be describing visual behavior. Does it even make sense to describe something to the non-sighted which they can not see?</li>
  <li>With the <code>&lt;nav&gt;</code> and <code>&lt;main&gt;</code> semantic elements applied correctly, don't the screen readers have all the necessary information at hand already to quickly skip the navigation bar (equivalent of hiding it for the sighted)?</li>
  </ul>
  
  <p>Wouldn't a better alternative be to just hide the navigation toggle mechanism to the non-sighted altogether? Here my question then would be, how to go about this. Can a button be hidden <a href="http://john.foliot.ca/aria-hidden/#pr" rel="nofollow noreferrer">using <code>role="presentation"</code> and/or <code>aria-hidden="true"</code></a>?</p>