What does this mean?
All controls on the page - including links, buttons, and fields - should show when they have been selected by the keyboard.
More helpYou can confirm this yourself by loading a webpage and using the Tab key to navigate through it. Anything you can select should alter its appearance when selected. For example, a text field might change color, or have a distinctive border applied.
This is default behavior for all standard web controls, and so if this issue is appearing it is because this default behavior has been disabled. Or alternatively, if you have written your own custom controls, these will need styling to support focus states.
To comply, links and form controls typically define an outline CSS style, which ensures
they are highlighted automatically, for example:
input:focus (outline: 2px solid red);If you choose to override or disable the default outline, you should specify an accessible
alternative, such as a border or background color.
Troubleshooting
If the page appears to highlight when you use tabbed browsing, try testing the page with JavaScript disabled.
39.6% done
How close this website is to fixing this issue.
| HTML | Found on page | Issues |
|---|---|---|
<select class="uos-search__select form-select" data-drupal-selector="edit-selector" id="edit-selector" name="selector">
|
110 | |
<input type="text" name="query" id="query" placeholder="Search SPD Courses" style="transition-delay: 0s !important; transition-duration: 0s !important;">
|
14 | |
<select class="uos-listing__select padding-reset form-select" data-drupal-selector="edit-unit-of-work" id="edit-unit-of-work" name="unit_of_work">
|
1 | |
<input data-drupal-selector="edit-uso-offer-choce-i-would-like-to-receive-emails-from-the-university-of-salford-" type="checkbox" id="edit-uso-offer-choce-i-would-like-to-receive-emails-from-the-university-of-salford-" name="uso_offer_choce[I would like to receive emails from the University of Salford ]" value="I would like to receive emails from the University of Salford " class="form-checkbox">
|
1 | |
<input data-drupal-selector="edit-your-request-like-request-my-alumni-id-number-for-library-membership" type="checkbox" id="edit-your-request-like-request-my-alumni-id-number-for-library-membership" name="your_request_like[Request my alumni ID number for library membership]" value="Request my alumni ID number for library membership" class="form-checkbox">
|
1 | |
<input data-drupal-selector="edit-your-request-iam-a-donor-supporter-of-the-university" type="checkbox" id="edit-your-request-iam-a-donor-supporter-of-the-university" name="your_request_iam[A donor / supporter of the University]" value="A donor / supporter of the University" class="form-checkbox">
|
1 | |
<select class="uos-listing__select padding-reset form-select" data-drupal-selector="edit-staff-role" id="edit-staff-role" name="staff_role">
|
1 | |
<input data-drupal-selector="edit-your-request-iam-a-former-or-current-salford-staff-member" type="checkbox" id="edit-your-request-iam-a-former-or-current-salford-staff-member" name="your_request_iam[A former or current Salford staff member]" value="A former or current Salford staff member" class="form-checkbox">
|
1 | |
<input data-drupal-selector="edit-your-request-like-update-my-details" type="checkbox" id="edit-your-request-like-update-my-details" name="your_request_like[Update my details]" value="Update my details" class="form-checkbox" required="required" aria-required="true">
|
1 | |
<input data-drupal-selector="edit-uso-offer-choce-i-would-not-like-to-receive-emails-from-the-university-of-salford" type="checkbox" id="edit-uso-offer-choce-i-would-not-like-to-receive-emails-from-the-university-of-salford" name="uso_offer_choce[I would not like to receive emails from the University of Salford]" value="I would not like to receive emails from the University of Salford" class="form-checkbox">
|
1 |
