{"id":4553,"date":"2025-11-12T14:52:04","date_gmt":"2025-11-12T14:52:04","guid":{"rendered":"https:\/\/allin.online\/?post_type=standard&#038;p=4553"},"modified":"2026-09-09T12:23:57","modified_gmt":"2026-09-09T12:23:57","slug":"focus-indicators","status":"publish","type":"standard","link":"https:\/\/allin.online\/cy\/standard\/digital-communications\/links-buttons-forms-and-surveys\/focus-indicators\/","title":{"rendered":"Focus Indicators"},"content":{"rendered":"\n<div class=\"wp-block-ace-standard-fixed-content flex content-content bg_white padding indent two-column\"><div class=\"content_wrapper\"><h3 id=\"page_sub_nav\" class=\"mobile_only\">DC 3.03 Focus Indicators<\/h3><select aria-labelledby=\"page_sub_nav\" class=\"mobile_only\" id=\"nav_select\"><option value=\"#overview\">Overview<\/option><option value=\"#examples\">Practical example<\/option><option value=\"#key_considerations\">Key considerations<\/option><option value=\"#definitions_list\">Definitions and acronyms<\/option><option value=\"#learning_resources\">Learning resources<\/option><option value=\"#linked_standards\">Linked Standards<\/option><option value=\"#references\">References<\/option><\/select><div class=\"action_links mobile_only\"><a href=\"https:\/\/form.jotform.com\/252393341563356?standard=Digital Communications 3.03 Focus Indicators\" class=\"feedback_link button bg_secondary white\">Give us feedback on this Standard<\/a><a href=\"https:\/\/allin.online\/cy\/standard\/digital-communications\/\" class=\"return_link\">Back to Digital Communications<\/a><\/div>\n<div id=\"overview\" class=\"wp-block-ace-standard-overview standard-content\"><h3>Overview<\/h3>\n<p class=\"wp-block-paragraph\"><span data-definition=\"focus-indicators\" data-definition-id=\"6568\" title=\"Focus indicators\" data-definition-name=\"Focus indicators\" class=\"ace-definition-inserter\"><\/span> are visual cues that show users their location on a webpage or digital interface when using a keyboard or <span data-definition=\"assistive-technology\" data-definition-id=\"4308\" title=\"Assistive technology\" data-definition-name=\"Assistive technology\" class=\"ace-definition-inserter\"><\/span>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Focus Indicators often appear as outlines, highlights, or borders around <span data-definition=\"buttons\" data-definition-id=\"6540\" title=\"Buttons\" data-definition-name=\"Buttons\" class=\"ace-definition-inserter\"><\/span>, <span data-definition=\"links\" data-definition-id=\"6563\" title=\"Links\" data-definition-name=\"Links\" class=\"ace-definition-inserter\"><\/span>, or <span data-definition=\"form\" data-definition-id=\"4376\" title=\"Form\" data-definition-name=\"Form\" class=\"ace-definition-inserter\"><\/span> <span data-definition=\"fields\" data-definition-id=\"4377\" title=\"Fields\" data-definition-name=\"Fields\" class=\"ace-definition-inserter\"><\/span>. You can switch between focus indicators using the Tab key on your keyboard. This action is often called \u2018<span data-definition=\"tabbing\" data-definition-id=\"4486\" title=\"Tabbing\" data-definition-name=\"Tabbing\" class=\"ace-definition-inserter\"><\/span>\u2019.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For people who don\u2019t use a mouse, such as those who use keyboards, <span title=\"Switch devices\" data-definition-name=\"Switch devices\" data-definition=\"switch-devices\" data-definition-id=\"6293\" class=\"ace-definition-inserter\"><\/span>, or voice control, focus indicators are essential for knowing what you are selecting or activating. Without visible focus, navigating a website can become confusing, slow, or even inaccessible.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Focus indicators should always be visible, easy to find, and consistent. Removing or hiding them creates barriers for many users and is not compliant with <span title=\"WCAG\" data-definition-name=\"WCAG\" data-definition=\"wcag\" data-definition-id=\"4507\" class=\"ace-definition-inserter\"><\/span>, the Web Content Accessibility Guidelines.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For more guidance, read this Standard alongside <a href=\"https:\/\/allin.online\/standard\/digital-communications\/links-buttons-forms-and-surveys\/identifiable-buttons\/\">Digital Communications 3.02 Identifiable Buttons<\/a>.<\/p>\n<\/div>\n\n\n\n<div id=\"examples\" class=\"wp-block-ace-standard-examples bg_grey inner-padding standard-examples\"><h3>Practical example<\/h3>\n<h4 class=\"wp-block-ace-heading\"><\/h4>\n\n\n\n<div class=\"wp-block-ace-standard-example standard-example\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-ace-image content-image alt-block\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-ace-content-blocks border-top\">\n<ul class=\"wp-block-list\">\n<li>A booking <span data-definition=\"form\" data-definition-id=\"4376\" title=\"Form\" data-definition-name=\"Form\" class=\"ace-definition-inserter\"><\/span>shows a visible blue outline around the currently selected field when using the keyboard. As the user tabs through the form, the outline moves to each input. <\/li>\n\n\n\n<li>A \u201cbuy tickets\u201d <span data-definition=\"button\" data-definition-id=\"4320\" title=\"Button\" data-definition-name=\"Button\" class=\"ace-definition-inserter\"><\/span>switches to a solid border with high contrast when focused, clearly indicating the selected action.<\/li>\n\n\n\n<li>A navigation menu features keyboard focus styles that match the site\u2019s visual design, like a coloured box or underline, helping users know their exact location.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div id=\"key_considerations\" class=\"wp-block-ace-standard-key-considerations standard-key-considerations standard-content\"><h3>Key considerations<\/h3>\n<h4 class=\"wp-block-ace-heading\"><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><span data-definition=\"focus-indicators\" data-definition-id=\"6568\" title=\"Focus indicators\" data-definition-name=\"Focus indicators\" class=\"ace-definition-inserter\"><\/span> are visible by default. It requires action to change this. They can break during website styling, so include specific tests in your web development to ensure <span data-definition=\"tabbing\" data-definition-id=\"4486\" title=\"Tabbing\" data-definition-name=\"Tabbing\" class=\"ace-definition-inserter\"><\/span>functions correctly.<\/p>\n\n\n\n<h4 class=\"wp-block-ace-heading\">Keep focus indicators visible<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Avoid removing or hiding the focus outline using <span data-definition=\"css\" data-definition-id=\"4342\" title=\"Cascading Style Sheets (CSS)\" data-definition-name=\"Cascading Style Sheets (CSS)\" class=\"ace-definition-inserter\"><\/span>(such as \u2018outline: none\u2019) unless you replace it with another clear visual indicator.<\/p>\n\n\n\n<h4 class=\"wp-block-ace-heading\">Make focus easy to see<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Use strong contrast of at least a 3:1 ratio and clear shapes, such as outlines, borders, high-contrast colours, or glows.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Avoid subtle visual changes that are hard to notice, such as slight background shifts or low-contrast outlines.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To meet <span data-definition=\"wcag\" data-definition-id=\"4507\" title=\"WCAG\" data-definition-name=\"WCAG\" class=\"ace-definition-inserter\"><\/span>2.2 AA requirements, the outline or border must be at least one pixel wide.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For more about using colour, refer to <a href=\"https:\/\/allin.online\/standard\/digital-communications\/content-usability\/use-of-colour\/\">Digital Communications 2.02 Use of Colour<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-ace-heading\">Be consistent across your website or app<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><span title=\"Focus indicators\" data-definition-name=\"Focus indicators\" data-definition=\"focus-indicators\" data-definition-id=\"6568\" class=\"ace-definition-inserter\"><\/span> should appear similar across <span title=\"Buttons\" data-definition-name=\"Buttons\" data-definition=\"buttons\" data-definition-id=\"6540\" class=\"ace-definition-inserter\"><\/span>, <span title=\"Links\" data-definition-name=\"Links\" data-definition=\"links\" data-definition-id=\"6563\" class=\"ace-definition-inserter\"><\/span>, and <span title=\"Form\" data-definition-name=\"Form\" data-definition=\"form\" data-definition-id=\"4376\" class=\"ace-definition-inserter\"><\/span> <span data-definition=\"fields\" data-definition-id=\"4377\" title=\"Fields\" data-definition-name=\"Fields\" class=\"ace-definition-inserter\"><\/span>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Consistency helps users recognise the focus indicator and builds confidence as they navigate your site.<\/p>\n\n\n\n<h4 class=\"wp-block-ace-heading\">Test focus with a keyboard<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Use the Tab key to cycle through <span title=\"Links\" data-definition-name=\"Links\" data-definition=\"links\" data-definition-id=\"6563\" class=\"ace-definition-inserter\"><\/span>and <span title=\"Form\" data-definition-name=\"Form\" data-definition=\"form\" data-definition-id=\"4376\" class=\"ace-definition-inserter\"><\/span> <span data-definition=\"fields\" data-definition-id=\"4377\" title=\"Fields\" data-definition-name=\"Fields\" class=\"ace-definition-inserter\"><\/span>on your page, ensuring you can always see which element is in focus.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use Shift + Tab to move backwards and confirm that menus, links, and forms still show focus clearly.<\/p>\n\n\n\n<h4 class=\"wp-block-ace-heading\">Support assistive technologies<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Ensure your focus styles work with <span title=\"Screen readers\" data-definition-name=\"Screen readers\" data-definition=\"screen-readers\" data-definition-id=\"5638\" class=\"ace-definition-inserter\"><\/span>, voice navigation tools, and <span title=\"Switch devices\" data-definition-name=\"Switch devices\" data-definition=\"switch-devices\" data-definition-id=\"6293\" class=\"ace-definition-inserter\"><\/span>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Check that the <span data-definition=\"focus-order\" data-definition-id=\"4374\" title=\"Focus order\" data-definition-name=\"Focus order\" class=\"ace-definition-inserter\"><\/span> is logical, following the natural reading and visual flow of the page.<\/p>\n<\/div>\n\n\n\n<div id=\"specification_table\" class=\"wp-block-ace-specification-table bg_white specification_table hide\"><h3>Standard &#8211; specifications<\/h3><div class=\"bg_grey inner-padding\"><table class=\"specification-table\"><tbody><\/tbody><\/table><\/div><\/div>\n\n\n\n<div id=\"influencing_accessible_practice\" class=\"wp-block-ace-standard-influencing-accessible-practice standard-influencing-accessible-practice standard-content hide\"><h3>Influencing accessible practice<\/h3>\n<h4 class=\"wp-block-ace-heading\"><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div>\n\n\n\n<div id=\"definitions_list\" class=\"wp-block-ace-definitions-list bg_white\"><h3>Definitions and acronyms<\/h3><div class=\"ace-definitions-list bg_grey inner-padding\"><div class=\"ace-definition-item\"><h4>Assistive technology<\/h4><div><p>Software and hardware that disabled people can use to interact with digital technology.<\/p>\n<\/div><\/div><div class=\"ace-definition-item\"><h4>Button<\/h4><div><p>An interactive element that is used to trigger an action or process, such as submitting a form, opening a dialogue, or making a booking. Buttons should be created using the native semantic HTML &lt;button&gt; element.<\/p>\n<\/div><\/div><div class=\"ace-definition-item\"><h4>Buttons<\/h4><div><p>An interactive element that is used to trigger an action or process, such as submitting a form, opening a dialogue, or making a booking. Buttons should be created using the native semantic HTML &lt;button&gt; element.<\/p>\n<\/div><\/div><div class=\"ace-definition-item\"><h4>Cascading Style Sheets (CSS)<\/h4><div><p>CSS is a stylesheet language used to describe the visual presentation of HTML documents, controlling layout, colours, fonts, spacing, and other stylistic aspects of web pages. CSS enables developers to maintain a consistent design across multiple web pages efficiently, separating content structure from visual appearance.<\/p>\n<\/div><\/div><div class=\"ace-definition-item\"><h4>Fields<\/h4><div><p>A box or space on a website where you can choose or type in information (for example, choosing a date, typing in your name or selecting \u201cyes\u201d or \u201cno\u201d).<\/p>\n<\/div><\/div><div class=\"ace-definition-item\"><h4>Focus indicators<\/h4><div><p>A visible outline or highlight that shows where you are on a page when navigating by keyboard. Helps people see which button or link is currently selected.<\/p>\n<\/div><\/div><div class=\"ace-definition-item\"><h4>Focus order<\/h4><div><p>The order that focusable elements are selected as someone tabs through a webpage. This should match the visual and reading flow.<\/p>\n<\/div><\/div><div class=\"ace-definition-item\"><h4>Form<\/h4><div><p>A set of fields (boxes or spaces on a website) that collects information from people. Forms are often used during processes such as booking tickets, mailing list sign-up, completing contact forms, or gathering feedback.<\/p>\n<\/div><\/div><div class=\"ace-definition-item\"><h4>Links<\/h4><div><p>A hyperlink (&lt;a&gt;) used to take people to another page, section of a page, or external website. Links are for navigation, not triggering actions.<\/p>\n<\/div><\/div><div class=\"ace-definition-item\"><h4>Screen readers<\/h4><div><p><span class=\"EOP SCXW153709951 BCX8\" data-ccp-props=\"{}\">A software tool that reads out content from websites, documents, and applications, including alt text and image descriptions. Screen readers are often used by blind and visually impaired people, neurodiverse people, and others. <\/span><\/p>\n<\/div><\/div><div class=\"ace-definition-item\"><h4>Switch devices<\/h4><div><p>A switch device is a button or control that someone can use to operate a computer, tablet or other technology. The person will press or move the switch to make choices, instead of using something like a mouse, keyboard or touch screen.<\/p>\n<\/div><\/div><div class=\"ace-definition-item\"><h4>Tabbing<\/h4><div><p>Using the Tab key on your keyboard to switch between focus indicators on a web page.<\/p>\n<\/div><\/div><div class=\"ace-definition-item\"><h4>WCAG<\/h4><div><p>Web Content Accessibility Guidelines. A set of international accessibility standards for digital content.<\/p>\n<\/div><\/div><\/div><\/div>\n\n\n\n<div id=\"learning_resources\" class=\"wp-block-ace-standard-learning-resources standard-content\"><h3>Learning resources<\/h3><div class=\"links-on-newtab-text\"><\/div>\n<h4 class=\"wp-block-ace-heading\"><strong>Relevant&nbsp;WCAG&nbsp;sections<\/strong>&nbsp;<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/focus-visible.html\" target=\"_blank\" rel=\"noreferrer noopener\">2.4.7&nbsp;Focus&nbsp;Visible (Level AA)<\/a>&nbsp;Keyboard&nbsp;users must always be able to see where they are on the page&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/keyboard.html\" target=\"_blank\" rel=\"noreferrer noopener\">2.1.1&nbsp;Keyboard&nbsp;(Level A)<\/a>&nbsp;All functionalities must be available using only the&nbsp;keyboard&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/focus-order.html\" target=\"_blank\" rel=\"noreferrer noopener\">2.4.3\u00a0Focus\u00a0Order\u00a0(Level A)<\/a>\u00a0Focus\u00a0must move in a logical and expected order across the page\u00a0<\/li>\n<\/ul>\n<\/div>\n\n\n\n<h4 class=\"wp-block-ace-heading\"><strong>More resources<\/strong>&nbsp;<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/aaardvarkaccessibility.com\/wcag-plain-english\/\" target=\"_blank\" rel=\"noreferrer noopener\">AAArdvark:&nbsp;WCAG&nbsp;in Plain English<\/a>&nbsp;&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.a11yproject.com\/posts\/navigate-using-just-your-keyboard\/\" target=\"_blank\" rel=\"noreferrer noopener\">The A11y Project: Navigate Using Just Your&nbsp;Keyboard<\/a>&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Techniques\/css\/C40\" target=\"_blank\" rel=\"noreferrer noopener\">W3C: Creating a Two-Colour&nbsp;Focus&nbsp;Indicator&nbsp;to Ensure Sufficient Contrast with all Components<\/a>&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/webaim.org\/techniques\/keyboard\/\" target=\"_blank\" rel=\"noreferrer noopener\">WebAIM:&nbsp;Keyboard&nbsp;Accessibility<\/a>&nbsp;<\/li>\n<\/ul>\n\n\n\n<div id=\"skills_development\" class=\"wp-block-ace-standard-skills-development standard-skills-development standard-content hide\"><h3>Support and skills development<\/h3>\n<h4 class=\"wp-block-ace-heading\"><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div>\n\n\n\t<div id=\"linked_standards\" class=\"wp-block page-links wp-block-ace-linked-standards \">\n\t\t\t<h3 class=\"block-title\">\n\t\t\t\tLinked Standards\t\t\t<\/h3>\n\t\t\t\t\t\t<div class='flex flex_50 link_blocks'>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"flex_item post_item bg_grey--dark\">\n\t\t\t\t\t\t\t<picture class=\"featured-img alt-block\">\n\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/allin.online\/wp-content\/themes\/ace\/assets\/fallback.jpeg\" alt=\"Placeholder image\" \/>\t\t\t\t\t\t\t\t<div class = \"alt_block\">\n\t\t\t\t\t\t\t\t\t<button class=\"alt_trigger\" aria-label=\"Open the Image Description\">Amgen<\/button>\n\t\t\t\t\t\t\t\t\t<div class=\"alt_modal\" id=\"0\" role=\"dialog\" aria-label=\"Image Description\" aria-describedby=\"desc_4520\">\n\t\t\t\t\t\t\t\t\t\t<p id=\"desc_4520\">Placeholder image<\/p>\n\t\t\t\t\t\t\t\t\t\t<button class=\"close\">Cau <span class=\"screen-reader-text\">Disgrifiad Delwedd\n<\/span><\/button>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/picture>\n\t\t\t\t\t\t\t<div class=\"linked_standard--content inner-padding card\">\n\t\t\t\t\t\t\t\t<h4>DC 2.02 Use of Colour<\/h4>\n\t\t\t\t\t\t\t\t<p>Make accessible colour choices and avoid relying on colour alone or using colour combinations with poor contrast to communicate information. Check your colour choices to ensure they work for everyone. <a href=\"\/login\" class=\"locked card_target\"><span aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14.999\" height=\"18\" viewBox=\"0 0 14.999 18\">\n  <path id=\"unlock\" d=\"M13.507,7.5H3.75V5.249A3.741,3.741,0,0,1,11.022,4l1.133-1.133a5.234,5.234,0,0,0-9.9,2.378V7.5H1.493A1.5,1.5,0,0,0,0,9V16.5A1.5,1.5,0,0,0,1.493,18H13.507A1.5,1.5,0,0,0,15,16.5V9a1.5,1.5,0,0,0-1.492-1.5\" transform=\"translate(0)\" fill=\"#472961\" fill-rule=\"evenodd\"\/>\n<\/svg><br \/>\n<\/span>This content is only available to logged in users.<\/a><\/p>\n\t\t\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"31.832\" height=\"24\" viewBox=\"0 0 31.832 24\">\n  <path id=\"arrow\" d=\"M33.728,24.848l-10.2-10.2a1.773,1.773,0,1,0-2.508,2.508l7.189,7.189H4.272a1.772,1.772,0,0,0,0,3.545H28.178L21.022,35.08a1.755,1.755,0,0,0,0,2.508,1.827,1.827,0,0,0,1.271.536,1.747,1.747,0,0,0,1.271-.536L33.8,27.355a1.827,1.827,0,0,0,.536-1.271,2.283,2.283,0,0,0-.6-1.237Z\" transform=\"translate(-2.499 -14.123)\" fill=\"#472961\"\/>\n<\/svg>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"flex_item post_item bg_grey--dark\">\n\t\t\t\t\t\t\t<picture class=\"featured-img alt-block\">\n\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/allin.online\/wp-content\/themes\/ace\/assets\/fallback.jpeg\" alt=\"Placeholder image\" \/>\t\t\t\t\t\t\t\t<div class = \"alt_block\">\n\t\t\t\t\t\t\t\t\t<button class=\"alt_trigger\" aria-label=\"Open the Image Description\">Amgen<\/button>\n\t\t\t\t\t\t\t\t\t<div class=\"alt_modal\" id=\"0\" role=\"dialog\" aria-label=\"Image Description\" aria-describedby=\"desc_4552\">\n\t\t\t\t\t\t\t\t\t\t<p id=\"desc_4552\">Placeholder image<\/p>\n\t\t\t\t\t\t\t\t\t\t<button class=\"close\">Cau <span class=\"screen-reader-text\">Disgrifiad Delwedd\n<\/span><\/button>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/picture>\n\t\t\t\t\t\t\t<div class=\"linked_standard--content inner-padding card\">\n\t\t\t\t\t\t\t\t<h4>DC 3.02 Identifiable Buttons<\/h4>\n\t\t\t\t\t\t\t\t<p>Create buttons that look like buttons, are big enough to use, and tell people what they do when clicked.<a href=\"\/login\" class=\"locked card_target\"><span aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14.999\" height=\"18\" viewBox=\"0 0 14.999 18\">\n  <path id=\"unlock\" d=\"M13.507,7.5H3.75V5.249A3.741,3.741,0,0,1,11.022,4l1.133-1.133a5.234,5.234,0,0,0-9.9,2.378V7.5H1.493A1.5,1.5,0,0,0,0,9V16.5A1.5,1.5,0,0,0,1.493,18H13.507A1.5,1.5,0,0,0,15,16.5V9a1.5,1.5,0,0,0-1.492-1.5\" transform=\"translate(0)\" fill=\"#472961\" fill-rule=\"evenodd\"\/>\n<\/svg><br \/>\n<\/span>This content is only available to logged in users.<\/a><\/p>\n\t\t\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"31.832\" height=\"24\" viewBox=\"0 0 31.832 24\">\n  <path id=\"arrow\" d=\"M33.728,24.848l-10.2-10.2a1.773,1.773,0,1,0-2.508,2.508l7.189,7.189H4.272a1.772,1.772,0,0,0,0,3.545H28.178L21.022,35.08a1.755,1.755,0,0,0,0,2.508,1.827,1.827,0,0,0,1.271.536,1.747,1.747,0,0,0,1.271-.536L33.8,27.355a1.827,1.827,0,0,0,.536-1.271,2.283,2.283,0,0,0-.6-1.237Z\" transform=\"translate(-2.499 -14.123)\" fill=\"#472961\"\/>\n<\/svg>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\n\n\t<div id=\"references\" class=\"wp_block references wp-block-ace-standard-references \">\n\t\t<h3 class=\"block-title\">\n\t\t\tReferences\t\t<\/h3>\n\n\t\t<div class=\"links-on-newtab-text\"><\/div>\n\t\t<ol class=\"references-list\">\n\t\t\t\t\t\t\t<li class = \"references-list-item\"><p>The A11y Project. (n.d.) Navigate Using Just Your Keyboard [online] Available at: <a href=\"https:\/\/www.a11yproject.com\/posts\/navigate-using-just-your-keyboard\/\">A11y project article<\/a> [Accessed 18 August 2025]<\/p>\n<\/li>\n\t\t\t\t\t\t\t<li class = \"references-list-item\"><p><span class=\"TextRun SCXW251158754 BCX8\" lang=\"EN-GB\" xml:lang=\"EN-GB\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW251158754 BCX8\">World Wide Web Consortium (W3C), (n.d.) <\/span><\/span> Creating a Two-Colour Focus Indicator to Ensure Sufficient Contrast with all Components [online] Available at: <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Techniques\/css\/C40\">W3C article Two-colour Focus Indicator<\/a> [Accessed 18 August 2025]<\/p>\n<\/li>\n\t\t\t\t\t\t\t<li class = \"references-list-item\"><p>WebAIM. (n.d.) Keyboard Accessibility [online] Available at: <a href=\"https:\/\/webaim.org\/techniques\/keyboard\/\">Webaim article keyboard accessibility<\/a> [Accessed 18 August 2025]<\/p>\n<\/li>\n\t\t\t\t\t\t\t<li class = \"references-list-item\"><p>World Wide Web Consortium (W3C), (n.d.) Web Accessibility Initiative WAI Standards Guidelines [online] Available at: <a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/\">W3C Standards guidance<\/a> [Accessed 26 October 2025]<\/p>\n<\/li>\n\t\t\t\t\t<\/ol>\n\t<\/div> \n<\/div><aside class=\"sidebar flex-item\"><h3>DC 3.03 Focus Indicators<\/h3><nav class=\"sub-nav\"><ul><li><a href=\"#overview\">Overview (Back to top)<\/a><\/li><li><a href=\"#examples\">Practical example<\/a><\/li><li><a href=\"#key_considerations\">Key considerations<\/a><\/li><li><a href=\"#definitions_list\">Definitions and acronyms<\/a><\/li><li><a href=\"#learning_resources\">Learning resources<\/a><\/li><li><a href=\"#linked_standards\">Linked Standards<\/a><\/li><li><a href=\"#references\">References<\/a><\/li><\/ul><\/nav><div class=\"hide fixed scroll_menu\" aria-live=\"polite\"><h3>DC 3.03 Focus Indicators<\/h3><ul><li><a href=\"#overview\">Overview (Back to top)<\/a><\/li><li><a href=\"#examples\">Practical example<\/a><\/li><li><a href=\"#key_considerations\">Key considerations<\/a><\/li><li><a href=\"#definitions_list\">Definitions and acronyms<\/a><\/li><li><a href=\"#learning_resources\">Learning resources<\/a><\/li><li><a href=\"#linked_standards\">Linked Standards<\/a><\/li><li><a href=\"#references\">References<\/a><\/li><\/ul><a href=\"https:\/\/form.jotform.com\/252393341563356?standard=Digital Communications 3.03 Focus Indicators\" class=\"feedback_link button bg_secondary white\">Give us feedback on this Standard<\/a><a href=\"https:\/\/allin.online\/cy\/standard\/digital-communications\/\" class=\"return_link\">Back to Digital Communications<\/a><\/div><a href=\"https:\/\/form.jotform.com\/252393341563356?standard=Digital Communications 3.03 Focus Indicators\" class=\"feedback_link button bg_secondary white\">Give us feedback on this Standard<\/a><a href=\"https:\/\/allin.online\/cy\/standard\/digital-communications\/\" class=\"return_link\">Back to Digital Communications<\/a><\/aside><\/div>\n","protected":false},"featured_media":0,"parent":4550,"menu_order":3,"template":"","class_list":["post-4553","standard","type-standard","status-publish","hentry"],"acf":{"short_description":"Provide accessible focus indicators that help people visually identify links and where they are on a page, for example when using a website with keyboard navigation.","make_visible_to_taster_account":false},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Focus Indicators - All In<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/allin.online\/cy\/standard\/digital-communications\/links-buttons-forms-and-surveys\/focus-indicators\/\" \/>\n<meta property=\"og:locale\" content=\"cy_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Focus Indicators - All In\" \/>\n<meta property=\"og:url\" content=\"https:\/\/allin.online\/cy\/standard\/digital-communications\/links-buttons-forms-and-surveys\/focus-indicators\/\" \/>\n<meta property=\"og:site_name\" content=\"All In\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-09T12:23:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/allin.online\/wp-content\/uploads\/2023\/11\/All-In_OG-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/allin.online\\\/cy\\\/standard\\\/digital-communications\\\/links-buttons-forms-and-surveys\\\/focus-indicators\\\/\",\"url\":\"https:\\\/\\\/allin.online\\\/cy\\\/standard\\\/digital-communications\\\/links-buttons-forms-and-surveys\\\/focus-indicators\\\/\",\"name\":\"Focus Indicators - All In\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/allin.online\\\/cy\\\/#website\"},\"datePublished\":\"2025-11-12T14:52:04+00:00\",\"dateModified\":\"2026-09-09T12:23:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/allin.online\\\/cy\\\/standard\\\/digital-communications\\\/links-buttons-forms-and-surveys\\\/focus-indicators\\\/#breadcrumb\"},\"inLanguage\":\"cy-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/allin.online\\\/cy\\\/standard\\\/digital-communications\\\/links-buttons-forms-and-surveys\\\/focus-indicators\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/allin.online\\\/cy\\\/standard\\\/digital-communications\\\/links-buttons-forms-and-surveys\\\/focus-indicators\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Hafan\",\"item\":\"https:\\\/\\\/allin.online\\\/cy\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Digital Communications\",\"item\":\"https:\\\/\\\/allin.online\\\/cy\\\/standard\\\/digital-communications\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Links, Buttons, Forms, and Surveys\",\"item\":\"https:\\\/\\\/allin.online\\\/cy\\\/standard\\\/digital-communications\\\/links-buttons-forms-and-surveys\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Focus Indicators\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/allin.online\\\/cy\\\/#website\",\"url\":\"https:\\\/\\\/allin.online\\\/cy\\\/\",\"name\":\"All in\",\"description\":\"Croeso i bawb\",\"publisher\":{\"@id\":\"https:\\\/\\\/allin.online\\\/cy\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/allin.online\\\/cy\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"cy-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/allin.online\\\/cy\\\/#organization\",\"name\":\"All in\",\"url\":\"https:\\\/\\\/allin.online\\\/cy\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"cy-GB\",\"@id\":\"https:\\\/\\\/allin.online\\\/cy\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/allin.online\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/696x696.png\",\"contentUrl\":\"https:\\\/\\\/allin.online\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/696x696.png\",\"width\":696,\"height\":696,\"caption\":\"All in\"},\"image\":{\"@id\":\"https:\\\/\\\/allin.online\\\/cy\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Focus Indicators - All In","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/allin.online\/cy\/standard\/digital-communications\/links-buttons-forms-and-surveys\/focus-indicators\/","og_locale":"cy_GB","og_type":"article","og_title":"Focus Indicators - All In","og_url":"https:\/\/allin.online\/cy\/standard\/digital-communications\/links-buttons-forms-and-surveys\/focus-indicators\/","og_site_name":"All In","article_modified_time":"2026-09-09T12:23:57+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/allin.online\/wp-content\/uploads\/2023\/11\/All-In_OG-image.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/allin.online\/cy\/standard\/digital-communications\/links-buttons-forms-and-surveys\/focus-indicators\/","url":"https:\/\/allin.online\/cy\/standard\/digital-communications\/links-buttons-forms-and-surveys\/focus-indicators\/","name":"Focus Indicators - All In","isPartOf":{"@id":"https:\/\/allin.online\/cy\/#website"},"datePublished":"2025-11-12T14:52:04+00:00","dateModified":"2026-09-09T12:23:57+00:00","breadcrumb":{"@id":"https:\/\/allin.online\/cy\/standard\/digital-communications\/links-buttons-forms-and-surveys\/focus-indicators\/#breadcrumb"},"inLanguage":"cy-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/allin.online\/cy\/standard\/digital-communications\/links-buttons-forms-and-surveys\/focus-indicators\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/allin.online\/cy\/standard\/digital-communications\/links-buttons-forms-and-surveys\/focus-indicators\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Hafan","item":"https:\/\/allin.online\/cy\/"},{"@type":"ListItem","position":2,"name":"Digital Communications","item":"https:\/\/allin.online\/cy\/standard\/digital-communications\/"},{"@type":"ListItem","position":3,"name":"Links, Buttons, Forms, and Surveys","item":"https:\/\/allin.online\/cy\/standard\/digital-communications\/links-buttons-forms-and-surveys\/"},{"@type":"ListItem","position":4,"name":"Focus Indicators"}]},{"@type":"WebSite","@id":"https:\/\/allin.online\/cy\/#website","url":"https:\/\/allin.online\/cy\/","name":"All in","description":"Croeso i bawb","publisher":{"@id":"https:\/\/allin.online\/cy\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/allin.online\/cy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"cy-GB"},{"@type":"Organization","@id":"https:\/\/allin.online\/cy\/#organization","name":"All in","url":"https:\/\/allin.online\/cy\/","logo":{"@type":"ImageObject","inLanguage":"cy-GB","@id":"https:\/\/allin.online\/cy\/#\/schema\/logo\/image\/","url":"https:\/\/allin.online\/wp-content\/uploads\/2023\/11\/696x696.png","contentUrl":"https:\/\/allin.online\/wp-content\/uploads\/2023\/11\/696x696.png","width":696,"height":696,"caption":"All in"},"image":{"@id":"https:\/\/allin.online\/cy\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/allin.online\/cy\/wp-json\/wp\/v2\/standard\/4553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/allin.online\/cy\/wp-json\/wp\/v2\/standard"}],"about":[{"href":"https:\/\/allin.online\/cy\/wp-json\/wp\/v2\/types\/standard"}],"up":[{"embeddable":true,"href":"https:\/\/allin.online\/cy\/wp-json\/wp\/v2\/standard\/4550"}],"wp:attachment":[{"href":"https:\/\/allin.online\/cy\/wp-json\/wp\/v2\/media?parent=4553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}