What HTML elements can be focused on?

 Focusable HTML Elements

HTML elements that can receive focus and be interacted with using keyboard navigation are called “focusable” elements. Here are some examples of commonly used focusable HTML elements:

1. Links (`<a>` elements): These are used to create hyperlinks to other web pages or resources.
2. Buttons (`<button>` elements): These are used to trigger actions or submit forms.
3. Input elements (`<input>` elements): These include text inputs, checkboxes, radio buttons, and more.
4. Select elements (`<select>` elements): These are used to create dropdown menus for selecting options.
5. Textareas (`<textarea>` elements): These are used to allow users to enter longer amounts of text.
6. Contenteditable elements (`<div contenteditable=”true”>` elements): These are used to allow users to edit the contents of a specific area of a web page.
7. Tabindex attribute: Any HTML element can be made focusable by setting its tabindex attribute to a value greater than or equal to 0.

It’s important to ensure that all interactive elements on a web page are focusable and can be accessed using a keyboard, in order to ensure accessibility for users who may not be able to use a mouse or other pointing device.

An element is considered focusable if it meets the following conditions:

1. The element must be included in the page’s tabindex (either explicitly, by setting a `tabindex` attribute with a value of 0 or greater, or implicitly, by being a standard focusable element like a link, button, or input).
2. The element must not have the `disabled` attribute set. Disabled elements cannot receive focus or be interacted with.
3. The element must be visible on the page. If an element is hidden with CSS or has a `display: none` style, it cannot be focused.
4. The element must not be obscured by another element. If an element is behind another element, it cannot be focused even if it meets the other criteria.

Meeting these conditions allows an element to be focusable and accessible via keyboard navigation. It’s important to ensure that all interactive elements on a web page meet these criteria in order to provide an accessible and inclusive user experience.

 CSS-selector to select any focusable HTML element

To select any focusable HTML element using a CSS selector, you can use the `:focusable` pseudo-class selector. This selector targets all elements that are focusable by keyboard navigation.

Here’s an example of how to use it:

CSS

:focusable {

  /* styles for focusable elements */

}

This will target all elements that can receive focus, including links, buttons, input fields, and any other elements that meet the criteria for focusability that we discussed earlier.

It’s worth noting that the `:focusable` pseudo-class is not currently part of the CSS standard, and is not supported in all browsers. However, it can be used with certain libraries and polyfills to provide broader browser support.

 CSS-selector based on Bobince’s answer to select any focusable HTML element

Bobince’s answer suggested using the `[tabindex]` attribute selector along with the `:not()` pseudo-class to select all focusable elements except those that are disabled. Here’s an example of how to use this selector:

CSS

*:not([disabled])[tabindex]:focus,

a[href]:not([disabled]):focus,

area[href]:not([disabled]):focus,

input:not([disabled]):not([type=”hidden”]):focus,

select:not([disabled]):focus,

textarea:not([disabled]):focus,

button:not([disabled]):focus,

iframe:not([disabled]):focus {

  /* styles for focusable elements */

}

This selector targets all elements with a `[tabindex]` attribute that is not disabled and can receive focus, as well as specific elements such as links, form controls, and iframes. It uses the `:not()` pseudo-class to exclude any elements that are disabled.

This selector provides a more comprehensive approach to targeting all focusable elements but can be more complex than using the `:focusable` pseudo-class selector.