diff --git a/core/misc/collapse.js b/core/misc/collapse.js
index d90c28b..4f0875f 100644
--- a/core/misc/collapse.js
+++ b/core/misc/collapse.js
@@ -28,9 +28,10 @@
       $invalidTarget.trigger('invalid');
     }
 
+    // Initialize and setup the summary,
+    this.setupSummary();
+
     if (!Modernizr.details) {
-      // Initialize and setup the summary,
-      this.setupSummary();
       // Initialize and setup the legend.
       this.setupLegend();
     }
@@ -61,6 +62,8 @@
       this.$node
         .on('summaryUpdated', $.proxy(this.onSummaryUpdated, this))
         .trigger('summaryUpdated');
+
+      this.$node.find('> summary').append(this.$summary);
     },
 
     /**
@@ -76,14 +79,12 @@
         .after(document.createTextNode(' '));
 
       // .wrapInner() does not retain bound events.
-      $('<a class="details-title"></a>')
+      $('<button type="button" class="link details-title"></button>')
         .attr('href', '#' + this.$node.attr('id'))
         .prepend($legend.contents())
         .appendTo($legend);
 
-      $legend
-        .append(this.$summary)
-        .on('click', $.proxy(this.onLegendClick, this));
+      $legend.on('click', $.proxy(this.onLegendClick, this));
     },
 
     /**
@@ -109,20 +110,27 @@
      */
     toggle: function (isOpen) {
       if (typeof isOpen == 'undefined') {
-        isOpen = !!this.$node.attr('open');
+        isOpen = !this.$node.attr('open');
       }
-      var $summaryPrefix = this.$node.find('> summary span.details-summary-prefix');
-      if (isOpen) {
-        $summaryPrefix.html(Drupal.t('Hide'));
+
+      if (!Modernizr.details) {
+        var $summaryPrefix = this.$node.find('> summary span.details-summary-prefix');
+        if (isOpen) {
+          $summaryPrefix.html(Drupal.t('Hide'));
+        }
+        else {
+          $summaryPrefix.html(Drupal.t('Show'));
+        }
+        // Delay setting the attribute to emulate chrome behavior and make
+        // details-aria.js work as expected with this polyfill.
+        setTimeout(function () {
+          this.$node.attr('open', isOpen);
+        }.bind(this), 0);
       }
       else {
-        $summaryPrefix.html(Drupal.t('Show'));
-      }
-      // Delay setting the attribute to emulate chrome behavior and make
-      // details-aria.js work as expected with this polyfill.
-      setTimeout(function () {
         this.$node.attr('open', isOpen);
-      }.bind(this), 0);
+      }
+
     },
 
     /**
@@ -152,6 +160,7 @@
       }
     }
   };
+
   // Expose constructor in the public space.
   Drupal.CollapsibleDetails = CollapsibleDetails;
 
diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
index fa7a75b..1a904b7 100644
--- a/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -209,6 +209,9 @@ details {
 details > .details-wrapper {
   padding: 0.5em 1.5em;
 }
+details .details-title {
+  color: #333;
+}
 /* @todo Regression: The summary of uncollapsible details are no longer
      vertically aligned with the .details-wrapper in browsers without native
      details support. */
diff --git a/core/themes/seven/css/base/elements.css b/core/themes/seven/css/base/elements.css
index d6e5e67..47dee72 100644
--- a/core/themes/seven/css/base/elements.css
+++ b/core/themes/seven/css/base/elements.css
@@ -26,6 +26,7 @@ hr {
   background: #cccccc;
 }
 summary,
+summary .details-title,
 .fieldgroup:not(.form-composite) > legend {
   font-weight: bold;
   text-transform: uppercase;