{"id":6538,"date":"2025-05-05T08:45:21","date_gmt":"2025-05-05T08:45:21","guid":{"rendered":"https:\/\/accessbydesign.uk\/?p=6538"},"modified":"2025-04-20T13:06:43","modified_gmt":"2025-04-20T13:06:43","slug":"focus-trap","status":"publish","type":"post","link":"https:\/\/accessbydesign.uk\/abd\/focus-trap\/","title":{"rendered":"Focus Trap"},"content":{"rendered":"<p class=\"article-editor-content__paragraph article-editor-content__has-focus\">In my last post, I talked about Popups (Modals) and the importance of making sure that screen readers are alerted when they appear on a website or any validation messages appear.<\/p>\n<p class=\"article-editor-content__paragraph\">You may be thinking that is all you need to do.<\/p>\n<p class=\"article-editor-content__paragraph\">Not quite!<\/p>\n<p class=\"article-editor-content__paragraph\">Today I am going to talk about an issue I come across more often than so many of the others.<\/p>\n<p class=\"article-editor-content__paragraph\">We are going to talk about Focus Traps!<\/p>\n<h2>What is a focus trap?<\/h2>\n<p><img decoding=\"async\" class=\"ngg-singlepic ngg-none\" src=\"https:\/\/accessbydesign.uk\/abd\/wp-content\/gallery\/brightonseo2025\/Slide30.JPG\" alt=\"A login popup appears on a website, highlighting the focus on the login form.\" width=\"502\" height=\"282\"><\/p>\n<p class=\"article-editor-content__paragraph\">Above, we have a login modal. There is a username field, a password field, a login button and a close button<\/p>\n<p class=\"article-editor-content__paragraph\">You may remember from my previous article that keyboard users will tab between elements on a page.<\/p>\n<p class=\"article-editor-content__paragraph\">If there is a focus trap, all they can do is stay on this modal until they press the login button or the close button and then it goes away.<\/p>\n<p class=\"article-editor-content__paragraph\">Just like a sign-up form, a shopping basket, or anything that is overlaid on the website.<\/p>\n<p class=\"article-editor-content__paragraph\">This is how it should be, you cannot go anywhere else until you get rid of it, just like it will always still be visible on the screen until you click on the login button.<\/p>\n<p><img decoding=\"async\" class=\"ngg-singlepic ngg-none\" src=\"https:\/\/accessbydesign.uk\/abd\/wp-content\/gallery\/brightonseo2025\/Slide31.JPG\" alt=\"A login popup is highlighted with arrows showing movement between fields, labeled Focus Trap.\" width=\"502\" height=\"282\"><\/p>\n<h2>No Focus Trap<\/h2>\n<p class=\"article-editor-content__paragraph article-editor-content__has-focus\">So what happens if there is No Focus Trap?<\/p>\n<p class=\"article-editor-content__paragraph\">Well, if you are using a keyboard, you tab from the username to the password screen, to the submit button, to the close button; and then you just keep on going! Eventually, you may find your way back but it can take a very long time!<\/p>\n<p><img decoding=\"async\" class=\"ngg-singlepic ngg-none\" src=\"https:\/\/accessbydesign.uk\/abd\/wp-content\/gallery\/brightonseo2025\/Slide32.JPG\" alt=\"A login popup with arrows showing keyboard navigation can move outside the popup; titled No Focus Trap.\" width=\"500\" height=\"281\"><\/p>\n<p class=\"article-editor-content__paragraph article-editor-content__has-focus\">This is one of the most common issues I witness in my audits.<\/p>\n<p class=\"article-editor-content__paragraph\">3 of my team use screen readers, they share their screens with me and I record their journey, as part of my audits.<\/p>\n<p class=\"article-editor-content__paragraph\">I have lost count of the number of times I have seen my team members tabbing off the popup and going round the rest of the page, blissfully unaware that anything is wrong!<\/p>\n<p class=\"article-editor-content__paragraph\">A focus trap fixes the problem, so hopefully you can perhaps now begin to see that you will be able to fully utilise your digital marketing skills but in a more inclusive and accessible way!<\/p>\n<h2 class=\"article-editor-content__heading\">Not a keyboard trap!<\/h2>\n<p class=\"article-editor-content__paragraph\">By the way, it is very important to understand that I am talking about a focus trap, NOT a keyboard trap.<\/p>\n<p class=\"article-editor-content__paragraph\">A keyboard trap is a very bad thing because that is when you end up stuck in a modal and you can\u2019t get out of it.<\/p>\n<p class=\"article-editor-content__paragraph\">Not without using a mouse anyway!<\/p>\n<p class=\"article-editor-content__paragraph\">Apologies for the U2 pun. It was Bad. Oh dear and again... I'll get my coat.<\/p>\n<p class=\"article-editor-content__paragraph\">I would love to hear your experiences of focus traps, or the lack thereof!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In my last post, I talked about Popups (Modals) and the importance of making sure that screen readers are alerted when they appear on a website or any validation messages appear. You may be thinking that is all you need to do. Not quite! Today I am going to talk about an issue I come [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[2],"tags":[],"class_list":["post-6538","post","type-post","status-publish","format-standard","hentry","category-blog"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.3.1 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Focus Trap - Access by Design<\/title>\n<meta name=\"description\" content=\"In my last post, I talked about Popups (Modals) and the importance of making sure that screen readers are alerted when they appear on a website or any\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Focus Trap\" \/>\n<meta property=\"og:description\" content=\"In my last post, I talked about Popups (Modals) and the importance of making sure that screen readers are alerted when they appear on a website or any\" \/>\n<meta property=\"og:url\" content=\"https:\/\/accessbydesign.uk\/abd\/focus-trap\/\" \/>\n<meta property=\"og:site_name\" content=\"Access by Design\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-05T08:45:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/accessbydesign.uk\/abd\/wp-content\/gallery\/brightonseo2025\/Slide30.JPG\" \/>\n<meta name=\"author\" content=\"Clive Loseby\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Clive Loseby\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/focus-trap\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/focus-trap\\\/\"},\"author\":{\"name\":\"Clive Loseby\",\"@id\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/#\\\/schema\\\/person\\\/ed61e68b1b4dc827d3e59ea02c9f2c07\"},\"headline\":\"Focus Trap\",\"datePublished\":\"2025-05-05T08:45:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/focus-trap\\\/\"},\"wordCount\":447,\"publisher\":{\"@id\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/focus-trap\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/wp-content\\\/gallery\\\/brightonseo2025\\\/Slide30.JPG\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/focus-trap\\\/\",\"url\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/focus-trap\\\/\",\"name\":\"Focus Trap - Access by Design\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/focus-trap\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/focus-trap\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/wp-content\\\/gallery\\\/brightonseo2025\\\/Slide30.JPG\",\"datePublished\":\"2025-05-05T08:45:21+00:00\",\"description\":\"In my last post, I talked about Popups (Modals) and the importance of making sure that screen readers are alerted when they appear on a website or any\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/focus-trap\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/focus-trap\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/focus-trap\\\/#primaryimage\",\"url\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/wp-content\\\/gallery\\\/brightonseo2025\\\/Slide30.JPG\",\"contentUrl\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/wp-content\\\/gallery\\\/brightonseo2025\\\/Slide30.JPG\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/focus-trap\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Focus Trap\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/#website\",\"url\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/\",\"name\":\"Access By Design\",\"description\":\"Award-Winning Web Design Chichester\",\"publisher\":{\"@id\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/#organization\",\"name\":\"Access By Design\",\"url\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/logo.png\",\"width\":350,\"height\":80,\"caption\":\"Access By Design\"},\"image\":{\"@id\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/#\\\/schema\\\/person\\\/ed61e68b1b4dc827d3e59ea02c9f2c07\",\"name\":\"Clive Loseby\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/clive-sqaure-150x150.jpg\",\"url\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/clive-sqaure-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/clive-sqaure-150x150.jpg\",\"caption\":\"Clive Loseby\"},\"description\":\"Clive Loseby is a TED Speaker and a Global Leader in Website Accessibility. He is the owner of Access by Design, which has creating accessible websites since 2006. He helps others with their digital accessibility with his incredible team of disabled people, striving to fulfil his mission: To Change the World, One Website at a Time. \u00a0 Watch Clive's TED Talk on Website Accessibility Follow Clive on Linked In Book an Appointment to see Clive\",\"url\":\"https:\\\/\\\/accessbydesign.uk\\\/abd\\\/author\\\/cliveloseby\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Focus Trap - Access by Design","description":"In my last post, I talked about Popups (Modals) and the importance of making sure that screen readers are alerted when they appear on a website or any","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_GB","og_type":"article","og_title":"Focus Trap","og_description":"In my last post, I talked about Popups (Modals) and the importance of making sure that screen readers are alerted when they appear on a website or any","og_url":"https:\/\/accessbydesign.uk\/abd\/focus-trap\/","og_site_name":"Access by Design","article_published_time":"2025-05-05T08:45:21+00:00","og_image":[{"url":"https:\/\/accessbydesign.uk\/abd\/wp-content\/gallery\/brightonseo2025\/Slide30.JPG","type":"","width":"","height":""}],"author":"Clive Loseby","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Clive Loseby","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/accessbydesign.uk\/abd\/focus-trap\/#article","isPartOf":{"@id":"https:\/\/accessbydesign.uk\/abd\/focus-trap\/"},"author":{"name":"Clive Loseby","@id":"https:\/\/accessbydesign.uk\/abd\/#\/schema\/person\/ed61e68b1b4dc827d3e59ea02c9f2c07"},"headline":"Focus Trap","datePublished":"2025-05-05T08:45:21+00:00","mainEntityOfPage":{"@id":"https:\/\/accessbydesign.uk\/abd\/focus-trap\/"},"wordCount":447,"publisher":{"@id":"https:\/\/accessbydesign.uk\/abd\/#organization"},"image":{"@id":"https:\/\/accessbydesign.uk\/abd\/focus-trap\/#primaryimage"},"thumbnailUrl":"https:\/\/accessbydesign.uk\/abd\/wp-content\/gallery\/brightonseo2025\/Slide30.JPG","articleSection":["Blog"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/accessbydesign.uk\/abd\/focus-trap\/","url":"https:\/\/accessbydesign.uk\/abd\/focus-trap\/","name":"Focus Trap - Access by Design","isPartOf":{"@id":"https:\/\/accessbydesign.uk\/abd\/#website"},"primaryImageOfPage":{"@id":"https:\/\/accessbydesign.uk\/abd\/focus-trap\/#primaryimage"},"image":{"@id":"https:\/\/accessbydesign.uk\/abd\/focus-trap\/#primaryimage"},"thumbnailUrl":"https:\/\/accessbydesign.uk\/abd\/wp-content\/gallery\/brightonseo2025\/Slide30.JPG","datePublished":"2025-05-05T08:45:21+00:00","description":"In my last post, I talked about Popups (Modals) and the importance of making sure that screen readers are alerted when they appear on a website or any","breadcrumb":{"@id":"https:\/\/accessbydesign.uk\/abd\/focus-trap\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/accessbydesign.uk\/abd\/focus-trap\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/accessbydesign.uk\/abd\/focus-trap\/#primaryimage","url":"https:\/\/accessbydesign.uk\/abd\/wp-content\/gallery\/brightonseo2025\/Slide30.JPG","contentUrl":"https:\/\/accessbydesign.uk\/abd\/wp-content\/gallery\/brightonseo2025\/Slide30.JPG"},{"@type":"BreadcrumbList","@id":"https:\/\/accessbydesign.uk\/abd\/focus-trap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/accessbydesign.uk\/abd\/"},{"@type":"ListItem","position":2,"name":"Focus Trap"}]},{"@type":"WebSite","@id":"https:\/\/accessbydesign.uk\/abd\/#website","url":"https:\/\/accessbydesign.uk\/abd\/","name":"Access By Design","description":"Award-Winning Web Design Chichester","publisher":{"@id":"https:\/\/accessbydesign.uk\/abd\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/accessbydesign.uk\/abd\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/accessbydesign.uk\/abd\/#organization","name":"Access By Design","url":"https:\/\/accessbydesign.uk\/abd\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/accessbydesign.uk\/abd\/#\/schema\/logo\/image\/","url":"https:\/\/accessbydesign.uk\/abd\/wp-content\/uploads\/2022\/09\/logo.png","contentUrl":"https:\/\/accessbydesign.uk\/abd\/wp-content\/uploads\/2022\/09\/logo.png","width":350,"height":80,"caption":"Access By Design"},"image":{"@id":"https:\/\/accessbydesign.uk\/abd\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/accessbydesign.uk\/abd\/#\/schema\/person\/ed61e68b1b4dc827d3e59ea02c9f2c07","name":"Clive Loseby","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/accessbydesign.uk\/abd\/wp-content\/uploads\/2024\/10\/clive-sqaure-150x150.jpg","url":"https:\/\/accessbydesign.uk\/abd\/wp-content\/uploads\/2024\/10\/clive-sqaure-150x150.jpg","contentUrl":"https:\/\/accessbydesign.uk\/abd\/wp-content\/uploads\/2024\/10\/clive-sqaure-150x150.jpg","caption":"Clive Loseby"},"description":"Clive Loseby is a TED Speaker and a Global Leader in Website Accessibility. He is the owner of Access by Design, which has creating accessible websites since 2006. He helps others with their digital accessibility with his incredible team of disabled people, striving to fulfil his mission: To Change the World, One Website at a Time. \u00a0 Watch Clive's TED Talk on Website Accessibility Follow Clive on Linked In Book an Appointment to see Clive","url":"https:\/\/accessbydesign.uk\/abd\/author\/cliveloseby\/"}]}},"_links":{"self":[{"href":"https:\/\/accessbydesign.uk\/abd\/wp-json\/wp\/v2\/posts\/6538","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/accessbydesign.uk\/abd\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/accessbydesign.uk\/abd\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/accessbydesign.uk\/abd\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/accessbydesign.uk\/abd\/wp-json\/wp\/v2\/comments?post=6538"}],"version-history":[{"count":3,"href":"https:\/\/accessbydesign.uk\/abd\/wp-json\/wp\/v2\/posts\/6538\/revisions"}],"predecessor-version":[{"id":6541,"href":"https:\/\/accessbydesign.uk\/abd\/wp-json\/wp\/v2\/posts\/6538\/revisions\/6541"}],"wp:attachment":[{"href":"https:\/\/accessbydesign.uk\/abd\/wp-json\/wp\/v2\/media?parent=6538"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/accessbydesign.uk\/abd\/wp-json\/wp\/v2\/categories?post=6538"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/accessbydesign.uk\/abd\/wp-json\/wp\/v2\/tags?post=6538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}