diff --git a/public/lib/templates/preferences_groups.mustache b/public/lib/templates/preferences_groups.mustache
index 6b6566e2766..8aba29d514d 100644
--- a/public/lib/templates/preferences_groups.mustache
+++ b/public/lib/templates/preferences_groups.mustache
@@ -34,12 +34,12 @@
             <div class="col-md-4">
                 <div class="card mb-3">
                     <div class="card-body">
-                        <h4 class="card-title">{{title}}</h4>
-                        <div class="card-text">
+                        <h3 class="card-title">{{title}}</h3>
+                        <ul class="card-text list-unstyled">
                         {{#nodes}}
-                            <div><a {{#get_title}}title="{{get_title}}"{{/get_title}} href="{{{action}}}">{{get_content}}</a></div>
+                            <li class="mb-1"><a {{#get_title}}title="{{get_title}}"{{/get_title}} href="{{{action}}}">{{get_content}}</a></li>
                         {{/nodes}}
-                        </div>
+                        </ul>
                     </div>
                 </div>
             </div>
diff --git a/public/user/tests/behat/view_preferences_page.feature b/public/user/tests/behat/view_preferences_page.feature
index 49642fb218a..14e7ccf5144 100644
--- a/public/user/tests/behat/view_preferences_page.feature
+++ b/public/user/tests/behat/view_preferences_page.feature
@@ -76,3 +76,9 @@ Feature: Access to preferences page
     And I am on site homepage
     When I follow "Student 1"
     Then I should see "Preferences" in the "region-main" "region"
+
+  @accessibility @javascript
+  Scenario: Check the user preferences page against accessibility standards
+    Given I log in as "admin"
+    When I follow "Preferences" in the user menu
+    Then the page should meet accessibility standards with "best-practice" extra tests