A function that lets you circularly tab through a part of a page.

keep-focus.js

var tabbableElements = 'a[href], area[href], input:not([disabled]),' +
	'select:not([disabled]), textarea:not([disabled]),' +
	'button:not([disabled]), iframe, object, embed, *[tabindex],' +
	'*[contenteditable]';

var keepFocus = function (context) {
	var allTabbableElements = context.querySelectorAll(tabbableElements);
	var firstTabbableElement = allTabbableElements[0];
	var lastTabbableElement = allTabbableElements[allTabbableElements.length - 1];

	var keyListener = function (event) {
		var keyCode = event.which || event.keyCode; // Get the current keycode

		// Polyfill to prevent the default behavior of events
		event.preventDefault = event.preventDefault || function () {
			event.returnValue = false;
		};

		// If it is TAB
		if (keyCode === 9) {

			// Move focus to first element that can be tabbed if Shift isn't used
			if (event.target === lastTabbableElement && !event.shiftKey) {
				event.preventDefault();
				firstTabbableElement.focus();

			// Move focus to last element that can be tabbed if Shift is used
			} else if (event.target === firstTabbableElement && event.shiftKey) {
				event.preventDefault();
				lastTabbableElement.focus();
			}
		}
	};

	context.addEventListener('keydown', keyListener, false);
};

// Call the function when the part of the page gets focus
var modal = document.querySelector('.modal');
keepFocus(modal);

modal.focus();

For reference... the theory & how-to behind this code can be found here: http://drublic.de/blog/accessible-dialogs-modals/

Thanks, @drublic!

Hey guys, I've been working on an accessibility project for a client, and I used the idea in your blog to what I think is a nice effect. You can see the version I made here (dependant on jquery).

https://gist.github.com/realalexhomer/cd3d816fd6e5b1d28211

It's nice because it take into account the possibility of elements being hidden, and doesn't make the mistake of tabbing over them. Another difference is that it lets you specify which elements to include in your markup.