What does this mean?

All controls on the page - including links, buttons, and fields - should show when they have been selected by the keyboard.

You 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.



15.8% done

How close this website is to fixing this issue.

HTML Found on page Issues
<button class="main" title="View detailed settings and opt in or out to individual categories" style="color: rgb(255, 255, 255); font-family: familylloyds_bank_jack, lloyds_bank_jack_lightWEB, lloyds_bank_jack-lightWEB, arial, sans-serif; font-feature-settings: initial; font-kerning: initial; font-optical-sizing: initial; font-size: 16px; font-stretch: initial; font-style: initial; font-variant: initial; font-variation-settings: initial; font-weight: initial; forced-color-adjust: initial; text-orientation: initial; text-rendering: initial; -webkit-font-smoothing: initial; -webkit-locale: initial; -webkit-text-orientation: initial; -webkit-writing-mode: initial; writing-mode: initial; zoom: initial; place-content: initial; place-items: initial; place-self: initial; alignment-baseline: initial; animation: initial; appearance: initial; aspect-ratio: initial; backdrop-filter: initial; backface-visibility: initial; background: rgb(0, 106, 77); background-blend-mode: initial; baseline-shift: initial; block-size: initial; border-block: initial; border: 2px outset; border-radius: initial; border-collapse: initial; border-end-end-radius: initial; border-end-start-radius: initial; border-inline: initial; border-start-end-radius: initial; border-start-start-radius: initial; bottom: 0px; box-shadow: initial; box-sizing: border-box; break-after: initial; break-before: initial; break-inside: initial; buffered-rendering: initial; caption-side: initial; caret-color: initial; clear: initial; clip: initial; clip-path: initial; clip-rule: initial; color-interpolation: initial; color-interpolation-filters: initial; color-rendering: initial; color-scheme: initial; columns: initial; column-fill: initial; gap: initial; column-rule: initial; column-span: initial; contain: initial; contain-intrinsic-size: initial; content: initial; content-visibility: initial; counter-increment: initial; counter-reset: initial; counter-set: initial; cursor: pointer; cx: initial; cy: initial; d: initial; display: inline-block; dominant-baseline: initial; 121
<button class="main" title="Accept cookies belonging to all categories" style="color: rgb(255, 255, 255); font-family: familylloyds_bank_jack, lloyds_bank_jack_lightWEB, lloyds_bank_jack-lightWEB, arial, sans-serif; font-feature-settings: initial; font-kerning: initial; font-optical-sizing: initial; font-size: 16px; font-stretch: initial; font-style: initial; font-variant: initial; font-variation-settings: initial; font-weight: initial; forced-color-adjust: initial; text-orientation: initial; text-rendering: initial; -webkit-font-smoothing: initial; -webkit-locale: initial; -webkit-text-orientation: initial; -webkit-writing-mode: initial; writing-mode: initial; zoom: initial; place-content: initial; place-items: initial; place-self: initial; alignment-baseline: initial; animation: initial; appearance: initial; aspect-ratio: initial; backdrop-filter: initial; backface-visibility: initial; background: rgb(0, 106, 77); background-blend-mode: initial; baseline-shift: initial; block-size: initial; border-block: initial; border: 2px outset; border-radius: initial; border-collapse: initial; border-end-end-radius: initial; border-end-start-radius: initial; border-inline: initial; border-start-end-radius: initial; border-start-start-radius: initial; bottom: 0px; box-shadow: initial; box-sizing: border-box; break-after: initial; break-before: initial; break-inside: initial; buffered-rendering: initial; caption-side: initial; caret-color: initial; clear: initial; clip: initial; clip-path: initial; clip-rule: initial; color-interpolation: initial; color-interpolation-filters: initial; color-rendering: initial; color-scheme: initial; columns: initial; column-fill: initial; gap: initial; column-rule: initial; column-span: initial; contain: initial; contain-intrinsic-size: initial; content: initial; content-visibility: initial; counter-increment: initial; counter-reset: initial; counter-set: initial; cursor: pointer; cx: initial; cy: initial; d: initial; display: inline-block; dominant-baseline: initial; empty-cells: initial; f 121
<a class="positive btn btn-secondary" href="https://online.lloydsbank.co.uk/personal/logon/login.jsp?target=personal/a/personal_loan/?WT.ac=PSLLOAA1&amp;tl_cookie=RAND1E5596CB248249E9BDEAD83E78F3848E_1565273833" target="_self" data-selector="cta-item-secondary"> 3
<button class="vas-module-button"> 2
<input type="text" placeholder="Example: ‘cancel a standing order’ or ‘help with card reader’" name="vasearch" id="vas-module-input" class="vas-module-text" autocomplete="off" aria-describedby="vas-auto-desc" aria-owns="vas-autocomplete-results" aria-expanded="false" aria-autocomplete="both"> 2
<a class="btn btn-primary" data-selector="cta-item-primary" href="/business/managing-business-costs/financial-worries.html" data-tealium-event="Internal Click" data-tealium-action="Link Click" data-tealium-narrative="Financial worries support" data-tealium-tracking="null" data-tealium-listener="null" data-tealium-value="null"> 2
<a class="btn btn-primary" data-selector="cta-item-primary" href="/business/help-and-support/contact-us.html?Wt.ac=Lloyds-help_and_support-home-button_text-contact_us" data-tealium-event="Internal Click" data-tealium-action="Link Click" data-tealium-narrative="Contact us" data-tealium-tracking="null" data-tealium-listener="null" data-tealium-value="null" onclick="s_objectID='Contact us (link 7)';"> 2
<div class="va-trigger" role="button" aria-label="click here to toggle the virtual assistant" title="Click here to toggle the virtual assistant" tabindex="0"> 2
<a class="btn btn-primary" data-selector="cta-item-primary" href="/business/help-and-support/contact-us/bereavement.html?Wt.ac=Lloyds-help_and_support-home-button_text-help_with_bereavement" data-tealium-event="Internal Click" data-tealium-action="Link Click" data-tealium-narrative="Help with bereavement" data-tealium-tracking="null" data-tealium-listener="null" data-tealium-value="null"> 2
<a href="https://online.lloydsbank.co.uk/personal/logon/login.jsp" class="positive btn btn-primary" data-selector="cta-item-primary"> 2
437 distinct issues were found in the sample of 125 web pages. Only the first 10 issues are shown here.
More results from Lloyds Bank