diff --git a/app/assets/stylesheets/components/pill.scss b/app/assets/stylesheets/components/pill.scss
index 224a56d98..056f38a4b 100644
--- a/app/assets/stylesheets/components/pill.scss
+++ b/app/assets/stylesheets/components/pill.scss
@@ -2,24 +2,19 @@
 
   display: flex;
 
+  li {
+    width: 25%;
+    flex-grow: 1;
+    text-align: left;
+  }
+
   a,
   span {
     display: block;
-    width: 25%;
-    box-sizing: border-box;
     float: left;
+    box-sizing: border-box;
+    width: 100%;
     padding: 10px;
-    flex-grow: 1;
-    text-align: left;
-
-    &:first-child {
-      margin-left: 0;
-    }
-
-    &:last-child {
-      margin-right: 0;
-    }
-
   }
 
   a {
@@ -56,6 +51,12 @@
     position: relative;
     z-index: 1000;
     color: $text-colour;
+
+    &:focus {
+      z-index: 10;
+      outline: 3px solid $yellow;
+    }
+
   }
 }
 
diff --git a/app/templates/components/pill.html b/app/templates/components/pill.html
index c77810e5c..498c32bd5 100644
--- a/app/templates/components/pill.html
+++ b/app/templates/components/pill.html
@@ -1,26 +1,27 @@
 {% from 'components/big-number.html' import big_number %}
 
 {% macro pill(
-  title,
   items=[],
   current_value=None,
   big_number_args={'smaller': True}
 ) %}
-  <nav role='navigation' class='pill' aria-labelledby="pill_{{title}}">
-    <h2 id="pill_{{title}}" class="visuallyhidden">{{title}}</h2>
+  <ul role='tablist' class='pill'>
     {% for label, option, link, count in items %}
       {% if current_value == option %}
-        <span aria-hidden="true">
+        <li aria-selected='true' role='tab'>
+          <span tabindex='0'>
       {% else %}
-        <a href="{{ link }}">
+        <li aria-selected='false' role='tab'>
+          <a href="{{ link }}">
       {% endif %}
-        {{ big_number(count, **big_number_args) }}
-        <div class="pill-label">{{ label }}</div>
+          {{ big_number(count, **big_number_args) }}
+          <div class="pill-label">{{ label }}</div>
       {% if current_value == option %}
-        </span>
+          </span>
       {% else %}
-        </a>
+          </a>
       {% endif %}
+        </li>
     {% endfor %}
-  </nav>
+  </ul>
 {% endmacro %}
diff --git a/app/templates/partials/jobs/count.html b/app/templates/partials/jobs/count.html
index 78003a22e..eb2990161 100644
--- a/app/templates/partials/jobs/count.html
+++ b/app/templates/partials/jobs/count.html
@@ -1,5 +1,5 @@
 {% from "components/pill.html" import pill %}
 
 <div class="bottom-gutter ajax-block-container">
-  {{ pill('Status', counts, request.args.get('status', '')) }}
+  {{ pill(counts, request.args.get('status', '')) }}
 </div>
diff --git a/app/templates/partials/jobs/notifications.html b/app/templates/partials/jobs/notifications.html
index 9ef4ef6ad..6004a9471 100644
--- a/app/templates/partials/jobs/notifications.html
+++ b/app/templates/partials/jobs/notifications.html
@@ -1,7 +1,7 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading, notification_status_field %}
 {% from "components/page-footer.html" import page_footer %}
 
-<div class="ajax-block-container">
+<div class="ajax-block-container" aria-labelledby='pill-selected-item'>
   {% if job.job_status == 'scheduled' %}
 
     <p>
diff --git a/app/templates/views/activity/counts.html b/app/templates/views/activity/counts.html
index b396bb064..b73738966 100644
--- a/app/templates/views/activity/counts.html
+++ b/app/templates/views/activity/counts.html
@@ -2,7 +2,6 @@
 
 <div class='bottom-gutter ajax-block-container'>
   {{ pill(
-    'Status',
     status_filters,
     status
   ) }}
diff --git a/app/templates/views/activity/notifications.html b/app/templates/views/activity/notifications.html
index 93a136436..42c6cf169 100644
--- a/app/templates/views/activity/notifications.html
+++ b/app/templates/views/activity/notifications.html
@@ -2,7 +2,7 @@
 {% from "components/previous-next-navigation.html" import previous_next_navigation %}
 {% from "components/table.html" import list_table, field, text_field, link_field, right_aligned_field_heading, hidden_field_heading, row_heading, notification_status_field %}
 
-<div class="ajax-block-container">
+<div class="ajax-block-container" id='pill-selected-item'>
 
   {% if notifications %}
     <div class='dashboard-table'>
diff --git a/app/templates/views/dashboard/monthly.html b/app/templates/views/dashboard/monthly.html
index 3198d3314..975fe08f4 100644
--- a/app/templates/views/dashboard/monthly.html
+++ b/app/templates/views/dashboard/monthly.html
@@ -18,14 +18,13 @@
   </h1>
   <div class="bottom-gutter">
     {{ pill(
-      'financial year',
       items=years,
       current_value=selected_year,
       big_number_args={'smallest': True},
     ) }}
   </div>
   {% if months %}
-    <div class="body-copy-table">
+    <div class="body-copy-table" id='pill-selected-item'>
       {% call(month, row_index) list_table(
         months,
         caption="Total spend",
diff --git a/app/templates/views/usage.html b/app/templates/views/usage.html
index 8876b222f..7c37e2795 100644
--- a/app/templates/views/usage.html
+++ b/app/templates/views/usage.html
@@ -13,91 +13,92 @@
     <h2 class='heading-large'>Usage</h2>
 
     <div class="bottom-gutter">
-      {{ pill('Year', years, selected_year, big_number_args={'smallest': True}) }}
+      {{ pill(years, selected_year, big_number_args={'smallest': True}) }}
     </div>
-
-    <div class='grid-row'>
-      <div class='column-half'>
-        <h2 class='heading-small'>Emails</h2>
-        <div class="keyline-block">
-          {{ big_number(emails_sent, 'sent', smaller=True) }}
-          {{ big_number("Unlimited", 'free allowance', smaller=True) }}
+    <div id='pill-selected-item'>
+      <div class='grid-row'>
+        <div class='column-half'>
+          <h2 class='heading-small'>Emails</h2>
+          <div class="keyline-block">
+            {{ big_number(emails_sent, 'sent', smaller=True) }}
+            {{ big_number("Unlimited", 'free allowance', smaller=True) }}
+          </div>
+        </div>
+        <div class='column-half'>
+          <h2 class='heading-small'>Text messages</h2>
+          <div class="keyline-block">
+            {{ big_number(sms_sent, 'sent', smaller=True) }}
+            {{ big_number(sms_free_allowance, 'free allowance', smaller=True) }}
+            {{ big_number(sms_allowance_remaining, 'free allowance remaining', smaller=True) }}
+            {% if sms_chargeable %}
+              {{ big_number(
+                sms_chargeable,
+                'at {:.2f} pence per message'.format(sms_rate * 100),
+                smaller=True
+              ) }}
+            {% endif %}
+          </div>
         </div>
       </div>
-      <div class='column-half'>
-        <h2 class='heading-small'>Text messages</h2>
-        <div class="keyline-block">
-          {{ big_number(sms_sent, 'sent', smaller=True) }}
-          {{ big_number(sms_free_allowance, 'free allowance', smaller=True) }}
-          {{ big_number(sms_allowance_remaining, 'free allowance remaining', smaller=True) }}
-          {% if sms_chargeable %}
+
+      <div class='grid-row'>
+        <div class='column-half'>
+          <div class="keyline-block">
+            &nbsp;
+          </div>
+        </div>
+        <div class='column-half'>
+          <div class="keyline-block">
             {{ big_number(
-              sms_chargeable,
-              'at {:.2f} pence per message'.format(sms_rate * 100),
+              (sms_chargeable * sms_rate),
+              'spent',
+              currency="£",
               smaller=True
             ) }}
-          {% endif %}
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class='grid-row'>
-      <div class='column-half'>
-        <div class="keyline-block">
-          &nbsp;
+      {% if months %}
+        <div class="dashboard-table body-copy-table">
+          {% call(month, row_index) list_table(
+            months,
+            caption="Total spend",
+            caption_visible=False,
+            empty_message='',
+            field_headings=[
+              'By month',
+              hidden_field_heading('Cost'),
+            ],
+            field_headings_visible=True
+          ) %}
+            {% call row_heading() %}
+              {{ month.name }}
+            {% endcall %}
+            {% call field(align='left') %}
+              {{ big_number(
+                sms_rate * month.paid,
+                currency="£",
+                smallest=True
+              ) }}
+              <ul>
+              {% if month.free %}
+                <li class="tabular-numbers">{{ "{:,}".format(month.free) }} free text messages</li>
+              {% endif %}
+              {% if month.paid %}
+                <li class="tabular-numbers">{{ "{:,}".format(month.paid) }} text messages at
+                {{- ' {:.2f}p'.format(sms_rate * 100) }}</li>
+              {% endif %}
+              {% if not (month.free or month.paid) %}
+                <li aria-hidden="true">–</li>
+              {% endif %}
+              </ul>
+            {% endcall %}
+          {% endcall %}
         </div>
-      </div>
-      <div class='column-half'>
-        <div class="keyline-block">
-          {{ big_number(
-            (sms_chargeable * sms_rate),
-            'spent',
-            currency="£",
-            smaller=True
-          ) }}
-        </div>
-      </div>
+      {% endif %}
     </div>
 
-    {% if months %}
-      <div class="dashboard-table body-copy-table">
-        {% call(month, row_index) list_table(
-          months,
-          caption="Total spend",
-          caption_visible=False,
-          empty_message='',
-          field_headings=[
-            'By month',
-            hidden_field_heading('Cost'),
-          ],
-          field_headings_visible=True
-        ) %}
-          {% call row_heading() %}
-            {{ month.name }}
-          {% endcall %}
-          {% call field(align='left') %}
-            {{ big_number(
-              sms_rate * month.paid,
-              currency="£",
-              smallest=True
-            ) }}
-            <ul>
-            {% if month.free %}
-              <li class="tabular-numbers">{{ "{:,}".format(month.free) }} free text messages</li>
-            {% endif %}
-            {% if month.paid %}
-              <li class="tabular-numbers">{{ "{:,}".format(month.paid) }} text messages at
-              {{- ' {:.2f}p'.format(sms_rate * 100) }}</li>
-            {% endif %}
-            {% if not (month.free or month.paid) %}
-              <li aria-hidden="true">–</li>
-            {% endif %}
-            </ul>
-          {% endcall %}
-        {% endcall %}
-      </div>
-    {% endif %}
-
     <div class="grid-row">
       <div class="column-half">
         <p class="align-with-heading-copy">
diff --git a/tests/app/main/views/test_dashboard.py b/tests/app/main/views/test_dashboard.py
index bd2b4b895..8f55970c6 100644
--- a/tests/app/main/views/test_dashboard.py
+++ b/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