Mark up ‘pill’ component as being tabs

Currently it’s not possible for a screen reader user to know which
financial year they’re looking at. From the accessibility report:

> The financial year links are contained in a navigation region -
> tabbing or arrowing through only reads out the links, not the main
> information of "2016 to 2017 financial year" - that information is
> vital for understanding the page content.

This problem also applies to other pages which use the `pill` component,
which is effectively tabbed navigation (that reloads the page rather
than showing or hiding content on the page).

There are specific ARIA attributes that can be used to mark up a
navigation as being tabbed. This commit:

- adds those attributes
- makes the selected ‘tab’ visible to screenreaders and keyboard
  focusable
- adds a visual focus indicator to the selected tab
- adds `id`s to the parts of the page that are controlled by the tabs so
  that they are labelled as such

This also means changing the pill component from being a `<nav>` to a
`<ul>` because `tablist` is not a valid `role` for a `nav`.

Mostly follows the example here:
http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml

tests/app/main/views/test_dashboard.py

@@ -250,11 +250,11 @@ def test_usage_page(
     page = BeautifulSoup(response.data.decode('utf-8'), 'html.parser')
 
     cols = page.find_all('div', {'class': 'column-half'})
-    nav = page.find('nav', {'class': 'pill'})
+    nav = page.find('ul', {'class': 'pill', 'role': 'tablist'})
     nav_links = nav.find_all('a')
 
     assert normalize_spaces(nav_links[0].text) == '2010 to 2011 financial year'
-    assert normalize_spaces(nav.find('span').text) == '2011 to 2012 financial year'
+    assert normalize_spaces(nav.find('li', {'aria-selected': 'true'}).text) == '2011 to 2012 financial year'
     assert normalize_spaces(nav_links[1].text) == '2012 to 2013 financial year'
 
     assert '123' in cols[0].text