Update header.html

changed the role of the first four links to a normal region that will be announced as 'external links region' because it was being announced as 'navigation region' which can be confusing because these links lead users off the site. also there are two navigation regions, so that could be confusing too. to make it clear, i added role="navigation" to the site navigation region (to make sure all screen readers announce this as 'navigation' since not all screen readers recognize HTML5 nav element as 'navigation').

I noticed the two icon links (twitter and  were not being announced at all in NVDA with Firefox, so I added title attributes that will allow them to be announced correctly here. This is not 100% reliable so I want to put off-screen text inside of the link describing the link, but this requires us to off-screen css class. I have an effective off-screen css class I will put into the css file called .hidden (which uses the clip method which is arguably better for iOS/Voiceover). Eventually it should look like this when we implement the css class (and we'll do the same for the blog link):
          <li class="icon"><a href="https://twitter.com/DataSF" target="_blank" title="Twitter"><i class="fa fa-fw fa-twitter"><span class="hidden">Twitter</span></i></a></li>