diff --git a/src/Umbraco.Web.UI.Client/lib/bootstrap/less/type.less b/src/Umbraco.Web.UI.Client/lib/bootstrap/less/type.less
index 3f93deaf56..414ab10ba8 100644
--- a/src/Umbraco.Web.UI.Client/lib/bootstrap/less/type.less
+++ b/src/Umbraco.Web.UI.Client/lib/bootstrap/less/type.less
@@ -56,7 +56,7 @@ a.text-success:focus { color: darken(@successText, 10%); }
 // Headings
 // -------------------------
 
-h1, h2, h3, h4, h5, h6 {
+h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
   margin: (@baseLineHeight / 2) 0;
   font-family: @headingsFontFamily;
   font-weight: @headingsFontWeight;
@@ -70,21 +70,21 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
-h1,
-h2,
-h3 { line-height: @baseLineHeight * 2; }
+h1, .h1,
+h2, .h2,
+h3, .h3 { line-height: @baseLineHeight * 2; }
 
-h1 { font-size: @baseFontSize * 2.75; } // ~38px
-h2 { font-size: @baseFontSize * 2.25; } // ~32px
-h3 { font-size: @baseFontSize * 1.75; } // ~24px
-h4 { font-size: @baseFontSize * 1.25; } // ~18px
-h5 { font-size: @baseFontSize; }
-h6 { font-size: @baseFontSize * 0.85; } // ~12px
+h1, .h1 { font-size: @baseFontSize * 2.75; } // ~38px
+h2, .h2 { font-size: @baseFontSize * 2.25; } // ~32px
+h3, .h3 { font-size: @baseFontSize * 1.75; } // ~24px
+h4, .h4 { font-size: @baseFontSize * 1.25; } // ~18px
+h5, .h5 { font-size: @baseFontSize; }
+h6, .h6 { font-size: @baseFontSize * 0.85; } // ~12px
 
-h1 small { font-size: @baseFontSize * 1.75; } // ~24px
-h2 small { font-size: @baseFontSize * 1.25; } // ~18px
-h3 small { font-size: @baseFontSize; }
-h4 small { font-size: @baseFontSize; }
+h1 small, .h1 small { font-size: @baseFontSize * 1.75; } // ~24px
+h2 small, .h2 small { font-size: @baseFontSize * 1.25; } // ~18px
+h3 small, .h3 small { font-size: @baseFontSize; }
+h4 small, .h4 small { font-size: @baseFontSize; }
 
 
 // Page header
diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less
index ee8dafebc2..a2c43c2979 100644
--- a/src/Umbraco.Web.UI.Client/src/less/main.less
+++ b/src/Umbraco.Web.UI.Client/src/less/main.less
@@ -26,19 +26,29 @@
     color: @gray-7;
 }
 
-h5{
+h5, .h5{
   color: @gray-1;
   font-weight: bold;
   font-size: 15px;
   margin-top: 15px;
 }
 
-h5.-border-bottom {
+h1.-border-bottom,
+h2.-border-bottom,
+h3.-border-bottom,
+h4.-border-bottom,
+h5.-border-bottom,
+h6.-border-bottom {
 	border-bottom: 1px solid @gray-9;
 	padding-bottom: 5px;
 }
 
-h5.-black {
+h1.-black,
+h2.-black,
+h3.-black,
+h4.-black,
+h5.-black,
+h6.-black {
 	color: @black;
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
index 768f8a8c24..d6e2d8133d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
@@ -34,16 +34,19 @@
 
                     <div ng-if="vm.loading === false && vm.showDataTypes === true">
                         <div ng-repeat="(key,value) in vm.dataTypes">
-                            <h5>{{key | umbCmsTitleCase}}</h5>
+                            <h2 class="h5">{{key | umbCmsTitleCase}}</h2>
                             <ul class="umb-card-grid -six-in-row">
-                                <li ng-repeat="dataType in value | orderBy:'name'"
-                                    data-element="datatype-{{dataType.name}}">
-                                    <a class="umb-card-grid-item" href="" ng-click="vm.viewOptionsForEditor(dataType)" title="{{ dataType.name }}">
+                                <li ng-repeat="dataType in value | orderBy:'name'" data-element="datatype-{{dataType.name}}">
+                                    <button
+                                        type="button"
+                                        class="btn-reset umb-card-grid-item"
+                                        ng-click="vm.viewOptionsForEditor(dataType)"
+                                        title="{{ dataType.name }}">
                                         <span>
-                                            <i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}"></i>
+                                            <i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}" aria-hidden="true"></i>
                                             {{ dataType.name }}
                                         </span>
-                                    </a>
+                                    </button>
                                 </li>
                             </ul>
                         </div>
@@ -51,38 +54,50 @@
 
                     <!-- SEARCH RESULTS -->
                     <div ng-if="vm.loading === false && vm.showDataTypes === false && vm.searchResult !== null">
-                        <h5 class="-border-bottom -black"><localize key="contentTypeEditor_searchResultSettings"></localize></h5>
+                        <h2 class="h5 -border-bottom -black">
+                            <localize key="contentTypeEditor_searchResultSettings">Available configurations</localize>
+                        </h2>
                         <div ng-repeat="result in vm.searchResult.configs">
                             <div ng-if="result.entries.length > 0">
-                                <h5>{{result.group | umbCmsTitleCase}}</h5>
+                                <h3 class="h5">{{result.group | umbCmsTitleCase}}</h3>
                                 <ul class="umb-card-grid -six-in-row">
                                     <li ng-repeat="dataType in result.entries | orderBy:'name'"
                                         ng-mouseover="vm.showDetailsOverlay(dataType)">
                                         <div ng-if="dataType.loading" class="umb-card-grid-item__loading">
                                             <div class="umb-button__progress"></div>
                                         </div>
-                                        <a class="umb-card-grid-item" href="" ng-click="vm.pickDataType(dataType)" title="{{ dataType.name }}">
+                                        <button
+                                            type="button"
+                                            class="btn-reset umb-card-grid-item"
+                                            ng-click="vm.pickDataType(dataType)"
+                                            title="{{ dataType.name }}">
                                             <span>
-                                                <i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}"></i>
+                                                <i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}" aria-hidden="true"></i>
                                                 {{ dataType.name }}
                                             </span>
-                                        </a>
+                                        </button>
                                     </li>
                                 </ul>
                             </div>
                         </div>
-                        <h5 class="-border-bottom -black"><localize key="contentTypeEditor_searchResultEditors"></localize></h5>
+                        <h2 class="h5 -border-bottom -black">
+                            <localize key="contentTypeEditor_searchResultEditors">Create a new configuration</localize>
+                        </h2>
                         <div ng-repeat="result in vm.searchResult.dataTypes">
                             <div ng-if="result.entries.length > 0">
-                                <h5>{{result.group | umbCmsTitleCase}}</h5>
+                                <h3 class="h5">{{result.group | umbCmsTitleCase}}</h3>
                                 <ul class="umb-card-grid -six-in-row">
                                     <li ng-repeat="dataType in result.entries | orderBy:'name'">
-                                        <a class="umb-card-grid-item" href="" ng-click="vm.pickEditor(dataType)" title="{{ dataType.name }}">
+                                        <button
+                                            type="button"
+                                            class="btn-reset umb-card-grid-item"
+                                            ng-click="vm.pickEditor(dataType)"
+                                            title="{{ dataType.name }}">
                                             <span>
-                                                <i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}"></i>
+                                                <i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}" aria-hidden="true"></i>
                                                 {{ dataType.name }}
                                             </span>
-                                        </a>
+                                        </button>
                                     </li>
                                 </ul>
                             </div>