CSS UI & Accessibility — Interview Questions & Answers

Ques: What is the role of CSS in UI/UX and accessibility?

Ans: CSS enhances accessibility by making content visible, readable, and usable for all users — including those using assistive technologies.

• Focus visibility
• Readable text and contrast
• Reduced motion for sensitive users
• Custom UI feedback (hover, active, etc.)

Ques: What are pseudo-classes used for interactivity?

Ans: These pseudo-classes style elements in response to user interaction:

Example:

button:hover { background: #007bff; }
button:active { background: #0056b3; }
button:focus-visible { outline: 2px solid orange; }

Ques: What is the difference between :focus and :focus-visible?

Ques: What is the cursor property in CSS?

Ans: cursor defines the type of mouse pointer displayed when hovering over an element.

Examples:

button { cursor: pointer; }
input { cursor: text; }
.disabled { cursor: not-allowed; }

Ques: What is the outline property, and how is it different from border?

Example:

button:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 4px;
}

Ques: What is prefers-reduced-motion in CSS?

Ans: prefers-reduced-motion detects if the user prefers less animation due to motion sensitivity.

Example:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Ques: What is the prefers-color-scheme media query?

Ans: It detects whether the user’s system is in light or dark mode.

Example:

@media (prefers-color-scheme: dark) {
  body { background: #111; color: #fff; }
}

Ques: What is the caret-color property?

Ans: It changes the cursor (text caret) color inside text fields.

Example:

input {
  caret-color: red;
}

Ques: What is the accent-color property?

Ans: accent-color customizes the color of form controls (checkboxes, radio buttons, sliders, etc.).

Example:

input[type="checkbox"] {
  accent-color: #007bff;
}

Ques: What is the scroll-behavior property?

Ans: It defines how scrolling behaves when the user clicks anchor links or uses navigation.

Example:

html {
  scroll-behavior: smooth;
}

Ques: How do you style scrollbars using CSS?

Ans: You can style scrollbars using vendor-prefixed pseudo-elements:

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #888;
}

Ques: What are CSS focus indicators and why are they important?

Ans: Focus indicators (like outlines) show which element is active for keyboard users or screen readers.

• Accessibility compliance
• Keyboard-only navigation
• Visual feedback during tabbing

Avoid removing focus styles like:

*:focus { outline: none; } /*  Bad for accessibility */

Ques: What is the :focus-within pseudo-class?

Ans: :focus-within selects a parent element when any of its child elements are focused.

Example:

.form-group:focus-within {
  border-color: #007bff;
}

Ques: What is the pointer-events property?

Ans: It controls whether an element responds to mouse events.

Example:

button.disabled {
  pointer-events: none;
  opacity: 0.5;
}