diff --git a/core/misc/message.es6.js b/core/misc/message.es6.js
index 041bf3d9a2..51656e0f3d 100644
--- a/core/misc/message.es6.js
+++ b/core/misc/message.es6.js
@@ -259,17 +259,13 @@
     messageText.setAttribute('class', 'visually-hidden');
 
     messageWraper.setAttribute('class', `messages messages--${options.type}`);
-    messageWraper.setAttribute('role', 'status');
+    messageWraper.setAttribute('role', options.type === 'error' ? 'alert' : 'status');
     messageWraper.setAttribute('data-drupal-message-id', options.id);
     messageWraper.setAttribute('data-drupal-message-type', options.type);
 
     messageWraper.setAttribute('aria-label', messagesTypes[options.type]);
     messageText.innerHTML = messagesTypes[options.type];
 
-    // Alerts have a different HTML structure.
-    if (options.type === 'error') {
-      messageText.setAttribute('role', 'alert');
-    }
     messageWraper.innerHTML = ` ${text}`;
     messageWraper.insertAdjacentElement('afterbegin', messageText);
 
diff --git a/core/misc/message.js b/core/misc/message.js
index 2fb1091071..6eb6829b9f 100644
--- a/core/misc/message.js
+++ b/core/misc/message.js
@@ -139,16 +139,13 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     messageText.setAttribute('class', 'visually-hidden');
 
     messageWraper.setAttribute('class', 'messages messages--' + options.type);
-    messageWraper.setAttribute('role', 'status');
+    messageWraper.setAttribute('role', options.type === 'error' ? 'alert' : 'status');
     messageWraper.setAttribute('data-drupal-message-id', options.id);
     messageWraper.setAttribute('data-drupal-message-type', options.type);
 
     messageWraper.setAttribute('aria-label', messagesTypes[options.type]);
     messageText.innerHTML = messagesTypes[options.type];
 
-    if (options.type === 'error') {
-      messageText.setAttribute('role', 'alert');
-    }
     messageWraper.innerHTML = ' ' + text;
     messageWraper.insertAdjacentElement('afterbegin', messageText);
 
diff --git a/core/modules/system/tests/modules/js_message_test/js/js_message_test.js b/core/modules/system/tests/modules/js_message_test/js/js_message_test.js
index db4c01d0a9..8f21178ed3 100644
--- a/core/modules/system/tests/modules/js_message_test/js/js_message_test.js
+++ b/core/modules/system/tests/modules/js_message_test/js/js_message_test.js
@@ -38,7 +38,7 @@
         var action = $target.attr('data-action');
 
         if (action === 'add') {
-          messageIndexes[area][type].push(message.add('Msg-' + type, {type: type}));
+          messageIndexes[area][type].push(message.add(`This is a message of the type, <strong>${type}</strong>. You be the the judge of its importance. 😜`, {type: type}));
         }
         else if (action === 'remove') {
           message.remove(messageIndexes[area][type].pop());
@@ -50,7 +50,7 @@
         // Add several of different types to make sure message type doesn't
         // cause issues in the API.
         for (var i = 0; i < types.length * 2; i++) {
-          messageIndexes.multiple.push(defaultMessageArea.add('Msg-' + i, {type: types[i % types.length]}));
+          messageIndexes.multiple.push(defaultMessageArea.add(`This is message number ${i} of the type, ${types[i % types.length]}. You be the the judge of its importance. 😜`, {type: types[i % types.length]}));
         }
       });