diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 24fe38039..a6153dcbc 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -5,3 +5,5 @@ $(() => GOVUK.modules.start());
 $(() => new GOVUK.SelectionButtons('.block-label input, .sms-message-option input'));
 
 $(() => $('.error-message').eq(0).parent('label').next('input').trigger('focus'));
+
+$(() => $('.banner-dangerous').eq(0).trigger('focus'));
diff --git a/app/assets/stylesheets/components/banner.scss b/app/assets/stylesheets/components/banner.scss
index 5c40f11ec..9aded8655 100644
--- a/app/assets/stylesheets/components/banner.scss
+++ b/app/assets/stylesheets/components/banner.scss
@@ -54,6 +54,10 @@
   margin: 15px 0;
   text-align: left;
 
+  &:focus {
+    outline: 3px solid $yellow;
+  }
+
   .button {
     @include button($error-colour);
     margin-top: 10px;
diff --git a/app/templates/components/banner.html b/app/templates/components/banner.html
index d008b5b57..a21984b25 100644
--- a/app/templates/components/banner.html
+++ b/app/templates/components/banner.html
@@ -1,5 +1,11 @@
 {% macro banner(body, type=None, with_tick=False, delete_button=None, subhead=None) %}
-  <div class='banner{% if type %}-{{ type }}{% endif %}{% if with_tick %}-with-tick{% endif %}'>
+  <div
+    class='banner{% if type %}-{{ type }}{% endif %}{% if with_tick %}-with-tick{% endif %}'
+    {% if type == 'dangerous' %}
+    role='group'
+    tabindex='-1'
+    {% endif %}
+  >
     {% if subhead -%}
         {{ subhead }}&ensp;
     {%- endif -%}