diff --git a/core/misc/progress.js b/core/misc/progress.js
index e54c26d..76fced2 100644
--- a/core/misc/progress.js
+++ b/core/misc/progress.js
@@ -21,10 +21,10 @@
     // The WAI-ARIA setting aria-live="polite" will announce changes after users
     // have completed their current activity and not interrupt the screen reader.
     this.element = $('<div class="progress" aria-live="polite"></div>').attr('id', id);
-    this.element.html('<div class="progress__label">&nbsp;</div>' +
-      '<div class="progress__track"><div class="progress__bar"></div></div>' +
-      '<div class="progress__percentage"></div>' +
-      '<div class="progress__description">&nbsp;</div>');
+    this.element.html('<p class="progress-label">&nbsp;</p>' +
+      '<div class="progress-bar"><div class="progress-filled"></div></div>' +
+      '<p class="progress-percentage"></p>' +
+      '<p class="progress-message">&nbsp;</p>');
   };
 
   $.extend(Drupal.ProgressBar.prototype, {
@@ -33,11 +33,11 @@
      */
     setProgress: function (percentage, message, label) {
       if (percentage >= 0 && percentage <= 100) {
-        $(this.element).find('div.progress__bar').css('width', percentage + '%');
-        $(this.element).find('div.progress__percentage').html(percentage + '%');
+        $(this.element).find('div.progress-filled').css('width', percentage + '%');
+        $(this.element).find('p.progress-percentage').html(percentage + '%');
       }
-      $('div.progress__description', this.element).html(message);
-      $('div.progress__label', this.element).html(label);
+      $('p.progress-message', this.element).html(message);
+      $('p.progress-label', this.element).html(label);
       if (this.updateCallback) {
         this.updateCallback(percentage, message, this);
       }
diff --git a/core/modules/system/css/system.module.css b/core/modules/system/css/system.module.css
index 331d3e9..e9a4c9b 100644
--- a/core/modules/system/css/system.module.css
+++ b/core/modules/system/css/system.module.css
@@ -169,7 +169,7 @@ table.sticky-header {
 .progress {
   position: relative;
 }
-.progress__track {
+.progress-bar {
   background-color: #fff;
   border: 1px solid;
   margin-top: 5px;
@@ -178,34 +178,34 @@ table.sticky-header {
   height: 16px;
   background-color: #fff;
 }
-.progress__bar {
+.progress-filled {
   background-color: #000;
   height: 1.5em;
   width: 3%;
 }
-.progress__description,
-.progress__percentage {
+.progress-message,
+.progress-percentage {
   color: #555;
   overflow: hidden;
   font-size: .875em;
   margin-top: 0.2em;
 }
-.progress__description {
+.progress-message {
   float: left; /* LTR */
 }
-[dir="rtl"] .progress__description {
+[dir="rtl"] .progress-message {
   float: right;
 }
-.progress__percentage {
+.progress-percentage {
   float: right; /* LTR */
 }
-[dir="rtl"] .progress__percentage {
+[dir="rtl"] .progress-percentage {
   float: left;
 }
-.progress--small .progress__track {
+.progress--small .progress-bar {
   height: 7px;
 }
-.progress--small .progress__bar {
+.progress--small .progress-filled {
   height: 7px;
   background-size: 20px 20px;
 }
diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
index 4e83886..08c3a12 100644
--- a/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -277,7 +277,7 @@ th.checkbox {
  *
  * @see progress.js
  */
-.progress__track {
+.progress-bar {
   border-color: #b3b3b3;
   border-radius: 10em;
   background-color: #f2f1eb;
@@ -287,7 +287,7 @@ th.checkbox {
   background-image:         linear-gradient(#e7e7df, #f0f0f0);
   box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.16);
 }
-.progress__bar {
+.progress-filled {
   border: 1px #07629a solid;
   background: #057ec9;
   background-image:
diff --git a/core/modules/system/templates/progress-bar.html.twig b/core/modules/system/templates/progress-bar.html.twig
index 0d11991..8ded78d 100644
--- a/core/modules/system/templates/progress-bar.html.twig
+++ b/core/modules/system/templates/progress-bar.html.twig
@@ -15,9 +15,11 @@
 #}
 <div id="progress" class="progress">
   {% if label %}
-    <div class="progress__label">{{ label }}</div>
+    <p class="progress-label">{{ label }}</p>
   {% endif %}
-  <div class="progress__track"><div class="progress__bar" style="width: {{ percent }}%"></div></div>
-  <div class="progress__percentage">{{ percent }}%</div>
-  <div class="progress__description">{{ message }}</div>
+  <div class="progress-bar">
+    <div class="progress-filled" style="width: {{ percent }}%;"></div>
+  </div>
+  <p class="progress-percentage">{{ percent }}%</p>
+  <p class="progress-message">{{ message }}</p>
 </div>