diff --git a/app/assets/javascripts/apiKey.js b/app/assets/javascripts/apiKey.js
index 91c32d399..42e8c6cd4 100644
--- a/app/assets/javascripts/apiKey.js
+++ b/app/assets/javascripts/apiKey.js
@@ -6,13 +6,24 @@
   Modules.ApiKey = function() {
 
     const states = {
-      'keyVisible': (key, thing) => `
-        <span class="api-key__key">${key}</span>
-        <input type='button' class='govuk-button govuk-button--secondary api-key__button--copy' value='Copy ${thing} to clipboard' />
+      'keyVisible': (options) => `
+        <span class="api-key__key">
+          ${options.keyLabel ? '<span class="govuk-visually-hidden">' + options.thing + ': </span>' : ''}${options.key}
+        </span>
+        <span class="api-key__notice govuk-visually-hidden" aria-live="assertive">
+          ${options.onload ? '' : options.thing + ' returned to page, press button to copy to clipboard'}
+        </span>
+        <button class="govuk-button govuk-button--secondary api-key__button--copy">
+          Copy ${options.thing} to clipboard${options.name ? '<span class="govuk-visually-hidden"> for ' + options.name + '</span>' : ''}
+        </button>
       `,
-      'keyCopied': thing => `
-        <span class="api-key__key">Copied to clipboard</span>
-        <input type='button' class='govuk-button govuk-button--secondary api-key__button--show' value='Show ${thing}' />
+      'keyCopied': (options) => `
+        <span class="api-key__notice" aria-live="assertive">
+          <span class="govuk-visually-hidden">${options.thing} </span>Copied to clipboard<span class="govuk-visually-hidden">, press button to show in page</span>
+        </span>
+        <button class="govuk-button govuk-button--secondary api-key__button--show">
+          Show ${options.thing}${options.name ? '<span class="govuk-visually-hidden"> for ' + options.name + '</span>' : ''}
+        </button>
       `
     };
 
@@ -30,24 +41,38 @@
     this.start = function(component) {
 
       const $component = $(component),
-            key = $component.data('key'),
-            thing = $component.data('thing');
+            stateOptions = {
+              key: $component.data('key'),
+              thing: $component.data('thing')
+            },
+            name = $component.data('name');
+
+      // if the name is distinct from the thing:
+      // - it will be used in the rendering
+      // - the key won't be identified by a heading so needs its own label
+      if (name !== stateOptions.thing) {
+        stateOptions.name = name;
+        stateOptions.keyLabel = true;
+      }
 
       $component
         .addClass('api-key')
         .css('min-height', $component.height())
-        .html(states.keyVisible(key, thing))
-        .attr('aria-live', 'polite')
+        .html(states.keyVisible($.extend({ 'onload': true }, stateOptions)))
         .on(
           'click', '.api-key__button--copy', () =>
             this.copyKey(
               $('.api-key__key', component)[0], () =>
-                $component.html(states.keyCopied(thing))
+                $component
+                  .html(states.keyCopied(stateOptions))
+                  .find('.govuk-button').focus()
             )
         )
         .on(
           'click', '.api-key__button--show', () =>
-            $component.html(states.keyVisible(key, thing))
+            $component
+              .html(states.keyVisible(stateOptions))
+              .find('.govuk-button').focus()
         );
 
       if ('stickAtBottomWhenScrolling' in GOVUK) {
diff --git a/app/assets/stylesheets/components/api-key.scss b/app/assets/stylesheets/components/api-key.scss
index 4a723e5fd..b481c9558 100644
--- a/app/assets/stylesheets/components/api-key.scss
+++ b/app/assets/stylesheets/components/api-key.scss
@@ -9,6 +9,7 @@
     margin-bottom: 5px;
   }
 
+  &__notice,
   &__key {
     font-family: monospace;
     display: block;
diff --git a/app/templates/components/api-key.html b/app/templates/components/api-key.html
index b2cd6e4aa..adb3ece3e 100644
--- a/app/templates/components/api-key.html
+++ b/app/templates/components/api-key.html
@@ -1,10 +1,11 @@
-{% macro api_key(key, name=None, thing="API key") %}
-  {% if name %}
+{% macro api_key(key, name, thing="API key", heading=True) %}
+  {% if heading %}
     <h2 class="api-key__name">
       {{ name }}
     </h2>
   {% endif %}
-  <div data-module="api-key" data-key="{{ key }}" data-thing="{{ thing }}" aria-live="assertive">
-    <span class="api-key__key">{{ key }}</span>
+  <div data-module="api-key" data-key="{{ key }}" data-thing="{{ thing }}"{% if not heading %}data-name="{{ name }}"{% endif %}>
+    <span class="api-key__key"><span class="govuk-visually-hidden">{{ thing }}: </span>{{ key }}</span>
+    <span class="api-key__notice" aria-live="assertive"></span>
   </div>
 {% endmacro %}
diff --git a/app/templates/views/service-settings/email_reply_to.html b/app/templates/views/service-settings/email_reply_to.html
index 374386dd2..201ef3013 100644
--- a/app/templates/views/service-settings/email_reply_to.html
+++ b/app/templates/views/service-settings/email_reply_to.html
@@ -34,7 +34,7 @@
           <a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.service_edit_email_reply_to', service_id =current_service.id, reply_to_email_id = item.id) }}">Change</a>
         {% endif %}
         {% if current_service.count_email_reply_to_addresses > 1 %}
-          {{ api_key(item.id, thing="ID") }}
+          {{ api_key(item.id, item.email_address, thing="ID", heading=False) }}
         {% endif %}
       </div>
     {% endfor %}