Tab
An interactive element allowing users to switch between content panels without leaving the page, saving space and organizing related content. Tabs work best for equally important parallel content, not sequential steps. Ensure tab interfaces are keyboard accessible with proper ARIA roles.
Dropdown
Components
An interactive element that reveals a list of options when clicked, saving space while providing multiple choices. Dropdowns work best with 5-15 options—fewer suggests radio buttons, more suggests search or typeahead. Ensure dropdown menus are keyboard accessible and work well on touch devices.
Keyboard Navigation
Accessibility
The ability to navigate and interact with a website using only keyboard controls, essential for accessibility. Test tab order, focus visibility, and keyboard-activated interactions to ensure full functionality. Many users rely on keyboard navigation due to motor disabilities or preference.
Tab Index
Accessibility
The
tabindexattribute controls whether an element can receive keyboard focus and in what order. Use0to include an element in natural tab order and-1for programmatic focus only. Avoid positive values because they create confusing navigation order.External Link
General
A hyperlink pointing to a page on a different website, opening in a new tab by convention to maintain your site's presence. External links to authoritative sources can boost SEO by demonstrating content quality. Balance outbound links with internal linking to keep visitors engaged with your content.
Lightbox
Components
An overlay that displays enlarged images or media while dimming the background, focusing attention on the content. Lightboxes are ideal for galleries and detailed image viewing without leaving the page. Ensure lightboxes are keyboard accessible with clear close mechanisms.