diff --git a/src/Umbraco.Web.UI.Client/lib/bootstrap/less/dropdowns.less b/src/Umbraco.Web.UI.Client/lib/bootstrap/less/dropdowns.less
index 7707e04feb78..94f229a191a9 100644
--- a/src/Umbraco.Web.UI.Client/lib/bootstrap/less/dropdowns.less
+++ b/src/Umbraco.Web.UI.Client/lib/bootstrap/less/dropdowns.less
@@ -80,6 +80,8 @@
 // -----------
 .dropdown-menu > li > a:hover,
 .dropdown-menu > li > a:focus,
+.dropdown-menu > li > button:hover,
+.dropdown-menu > li > button:focus,
 .dropdown-submenu:hover > a,
 .dropdown-submenu:focus > a {
   text-decoration: none;
diff --git a/src/Umbraco.Web.UI.Client/lib/bootstrap/less/sprites.less b/src/Umbraco.Web.UI.Client/lib/bootstrap/less/sprites.less
index d73e23f5ead7..dd60f10ceee9 100644
--- a/src/Umbraco.Web.UI.Client/lib/bootstrap/less/sprites.less
+++ b/src/Umbraco.Web.UI.Client/lib/bootstrap/less/sprites.less
@@ -39,6 +39,10 @@
 .dropdown-menu > li > a:focus > [class^="icon-"],
 .dropdown-menu > li > a:hover > [class*=" icon-"],
 .dropdown-menu > li > a:focus > [class*=" icon-"],
+.dropdown-menu > li > button:hover > [class^="icon-"],
+.dropdown-menu > li > button:focus > [class^="icon-"],
+.dropdown-menu > li > button:hover > [class*=" icon-"],
+.dropdown-menu > li > button:focus > [class*=" icon-"],
 .dropdown-menu > .active > a > [class^="icon-"],
 .dropdown-menu > .active > a > [class*=" icon-"],
 .dropdown-submenu:hover > a > [class^="icon-"],
diff --git a/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less b/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less
index 7440a5723a64..4db2e434d23f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less
+++ b/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less
@@ -163,7 +163,8 @@ a, a:hover{
     background-clip: padding-box;
 }
 
-.dropdown-menu > li > a {
+.dropdown-menu > li > a,
+.dropdown-menu > li > button {
     display: block;
     padding: 3px 20px;
     clear: both;
@@ -174,7 +175,12 @@ a, a:hover{
     cursor:pointer;
 }
 
-.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
+.dropdown-menu > li > a:hover, 
+.dropdown-menu > li > a:focus, 
+.dropdown-menu > li > button:hover, 
+.dropdown-menu > li > button:focus, 
+.dropdown-submenu:hover > a, 
+.dropdown-submenu:focus > a {
     color: #000000;
     background: #e4e0dd;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button-group.less b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button-group.less
index e40282cb58b1..046588138768 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button-group.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button-group.less
@@ -9,6 +9,7 @@
    left: auto;
 }
 
+.umb-button-group__sub-buttons>li>button,
 .umb-button-group__sub-buttons>li>a {
     display: flex;
 }
@@ -20,7 +21,7 @@
     }
 
     .umb-button-group__toggle {
-        border-radius: 0px @baseBorderRadius @baseBorderRadius 0;
+        border-radius: 0 @baseBorderRadius @baseBorderRadius 0;
         border-left: 1px solid rgba(0,0,0,0.09);
         margin-left: -2px;
         padding-left: 10px;
diff --git a/src/Umbraco.Web.UI.Client/src/less/navs.less b/src/Umbraco.Web.UI.Client/src/less/navs.less
index a2710fab6cdd..5b97464e3171 100644
--- a/src/Umbraco.Web.UI.Client/src/less/navs.less
+++ b/src/Umbraco.Web.UI.Client/src/less/navs.less
@@ -237,7 +237,27 @@
     color: @ui-option-type;
 }
 
-.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
+.dropdown-menu > li > button {
+  background: transparent;
+  border: 0;
+  padding: 8px 20px;
+  color: @ui-option-type;
+  display: block;
+  clear: both;
+  font-weight: normal;
+  line-height: 20px;
+  white-space: nowrap;
+  cursor:pointer;
+  width: 100%;
+  text-align: left;
+}
+
+.dropdown-menu > li > a:hover, 
+.dropdown-menu > li > a:focus, 
+.dropdown-menu > li > button:hover, 
+.dropdown-menu > li > button:focus, 
+.dropdown-submenu:hover > a, 
+.dropdown-submenu:focus > a {
     color: @ui-option-type-hover;
     background: @ui-option-hover;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
index 2fbd2b0a32f5..ce0815c640df 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
@@ -53,7 +53,9 @@ function listViewController($scope, $routeParams, $injector, $timeout, currentUs
     $scope.actionInProgress = false;
     $scope.selection = [];
     $scope.folders = [];
-    $scope.page = {};
+    $scope.page = {
+        createDropdownOpen: false
+    };
     $scope.listViewResultSet = {
         totalPages: 0,
         items: []
@@ -795,8 +797,18 @@ function listViewController($scope, $routeParams, $injector, $timeout, currentUs
             .search("blueprintId", blueprintId);
     }
 
+    function toggleDropdown () {
+        $scope.page.createDropdownOpen = !$scope.page.createDropdownOpen;
+    }
+
+    function leaveDropdown () {
+        $scope.page.createDropdownOpen = false;
+    }
+
     $scope.createBlank = createBlank;
     $scope.createFromBlueprint = createFromBlueprint;
+    $scope.toggleDropdown = toggleDropdown;
+    $scope.leaveDropdown = leaveDropdown;
 
     //GO!
     initView();
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
index 0770081aba45..304f3f3fbc3b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
@@ -12,57 +12,68 @@
 
                <umb-editor-sub-header-section ng-if="(listViewAllowedTypes && listViewAllowedTypes.length > 0 && (selection.length == 0)) && (currentNodePermissions == null || currentNodePermissions.canCreate)">
 
+                    <!-- Renders when it's only possible to create one specific document type for, which no blueprint exists-->
                    <div class="btn-group" ng-show="createAllowedButtonSingle">
-                       <a class="btn btn-white" ng-click="createBlank(entityType,listViewAllowedTypes[0].alias)">
+                       <button type="button" class="btn btn-white" ng-click="createBlank(entityType,listViewAllowedTypes[0].alias)" prevent-default>
                            <localize key="actions_create">Create</localize> {{listViewAllowedTypes[0].name}}
-                       </a>
+                       </button>
                    </div>
 
-                   <div class="btn-group" ng-show="createAllowedButtonSingleWithBlueprints">
-                       <a class="btn btn-white dropdown-toggle" data-toggle="dropdown" ng-href="">
-                           <span ng-click="createBlank(entityType,listViewAllowedTypes[0].alias)">
+                   <!-- Renders when it's only possible to create one specific document type for which a blueprint exits-->
+                   <div class="btn-group" ng-show="createAllowedButtonSingleWithBlueprints" deep-blur="leaveDropdown()">
+                       <button type="button" class="btn btn-white dropdown-toggle" aria-expanded="{{page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()" prevent-default>
+                           <span>
                                <localize key="actions_create">Create</localize> {{listViewAllowedTypes[0].name}}
                            </span>
-                           <span class="caret" ng-click="page.createDropdownOpen = !page.createDropdownOpen"></span>
-                       </a>
+                           <span class="caret"></span>
+                        </button>
+
 
                        <umb-dropdown ng-if="page.createDropdownOpen" on-close="page.createDropdownOpen = false">
-                           <umb-dropdown-item ng-repeat="blueprint in listViewAllowedTypes[0].blueprints | orderBy:'name':false track by $index">
-                               <a ng-click="createFromBlueprint(entityType, listViewAllowedTypes[0].alias, blueprint.id)">
-                                   <i class="{{::listViewAllowedTypes[0].icon}}"></i>
-                                   {{::blueprint.name}}
-                               </a>
-                           </umb-dropdown-item>
+                           <umb-dropdown-item ng-repeat="contentType in listViewAllowedTypes track by contentType.key | orderBy:'name':false">
+                                <button type="button" ng-click="createBlank(entityType,contentType.alias)" prevent-default>
+                                    <i class="{{::contentType.icon}}" aria-hidden="true"></i>
+                                    {{::contentType.name}} <span ng-show="contentType.blueprints" style="text-transform: lowercase;">(<localize key="blueprints_blankBlueprint">blank</localize>)</span>
+                                </button>
+
+                                <button type="button" ng-repeat="blueprint in contentType.blueprints track by blueprint.id | orderBy:'name':false" ng-click="createFromBlueprint(entityType, contentType.alias, blueprint.id)" prevent-default>
+                                    &nbsp;&nbsp;<i class="{{::contentType.icon}}" aria-hidden="true"></i>
+                                    {{::blueprint.name}}
+                                </button>
+                            </umb-dropdown-item>
                        </umb-dropdown>
                    </div>
 
-                   <div class="btn-group" ng-show="createAllowedButtonMultiWithBlueprints">
-                       <a class="btn btn-white dropdown-toggle" data-toggle="dropdown" ng-href="" ng-click="page.createDropdownOpen = !page.createDropdownOpen">
+                   <!-- Renders when it's possible to create multiple document types and blueprints for one or more of the document types-->
+                   <div class="btn-group" ng-show="createAllowedButtonMultiWithBlueprints" deep-blur="leaveDropdown()">
+                       <button type="button" class="btn btn-white dropdown-toggle" aria-expanded="{{page.createDropdownOpen === undefined ? false : page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()">
                            <localize key="actions_create">Create</localize>
-                           <span class="caret"></span>
-                       </a>
-
+                           <span class="caret" aria-hidden="true"></span>
+                       </button>
+                       
                        <umb-dropdown ng-if="page.createDropdownOpen" on-close="page.createDropdownOpen = false">
                            <umb-dropdown-item ng-repeat="contentType in listViewAllowedTypes track by contentType.key | orderBy:'name':false">
-                               <a ng-click="createBlank(entityType,contentType.alias)" prevent-default ng-href="">
-                                   <i class="{{::contentType.icon}}"></i>
+                               <button type="button" ng-click="createBlank(entityType,contentType.alias)" prevent-default>
+                                   <i class="{{::contentType.icon}}" aria-hidden="true"></i>
                                    {{::contentType.name}} <span ng-show="contentType.blueprints" style="text-transform: lowercase;">(<localize key="blueprints_blankBlueprint">blank</localize>)</span>
-                               </a>
-                               <a href="" ng-repeat="blueprint in contentType.blueprints | orderBy:'name':false" ng-click="createFromBlueprint(entityType, contentType.alias, blueprint.id)" prevent-default>
-                                   &nbsp;&nbsp;<i class="{{::contentType.icon}}"></i>
+                               </button>
+
+
+                               <button type="button" ng-repeat="blueprint in contentType.blueprints track by blueprint.id | orderBy:'name':false" ng-click="createFromBlueprint(entityType, contentType.alias, blueprint.id)" prevent-default>
+                                   &nbsp;&nbsp;<i class="{{::contentType.icon}}" aria-hidden="true"></i>
                                    {{::blueprint.name}}
-                               </a>
+                               </button>
                            </umb-dropdown-item>
                        </umb-dropdown>
                    </div>
 
                    <ul class="umb-actions umb-actions-child">
 
-                       <li ng-repeat="blueprint in docType.blueprints | orderBy:'name':false">
+                       <li ng-repeat="blueprint in docType.blueprints track by blueprint.id | orderBy:'name':false">
                            <a ng-click="createFromBlueprint(blueprint.id)">
                                <i class="large {{docType.icon}}"></i>
                                <span class="menu-label">
-                                   {{blueprint.name}}
+                                   {{blueprint.name}}&nbsp;
                                </span>
                            </a>
                        </li>
@@ -96,7 +107,6 @@
                    <strong ng-show="actionInProgress" ng-bind="bulkStatus"></strong>
 
                    <umb-loader position="bottom" ng-show="actionInProgress"></umb-loader>
-
                </umb-editor-sub-header-section>
 
            </umb-editor-sub-header-content-left>