Operable.

What does "Operable" mean in the context of accessibility?

• Users can perceive all information on the webpage.

• Users can interact with and navigate the webpage using various input methods.

• Users can fully customize the visual appearance of the webpage.

• Users can automate all actions on the webpage.

Which of the following fails the WCAG guideline for providing a "Keyboard Accessible" interface?

• A dropdown menu that expands on hover and can be opened with the "Tab" key.

• A button that performs an action when pressed with the "Enter" key.

• A carousel that only allows navigation using a mouse click.

• A form field that highlights when focused using the keyboard.

Code Example: What is the issue with the following button element?

<button onclick="submitForm()">Submit</button>

• The button cannot be clicked.

• The button lacks a visible label.

• The button is not operable via the keyboard.

• No issue; it meets WCAG requirements.

What is the purpose of the "Focus Order" guideline (WCAG 2.4.3)?

• Ensures users can switch input methods seamlessly.

• Ensures focus moves logically through content when using a keyboard.

• Ensures visual focus indicators are prominent.

• Ensures all animations are disabled by default.

Code Example: What WCAG principle does this code violate?

<a href="#" onclick="openModal()">Open Modal</a>

• Operable: The link is not keyboard-accessible.

• Operable: The link does not have a descriptive label.

• Robust: The link might not function across devices.

• Understandable: The purpose of the link is unclear.

Which guideline is violated if keyboard focus is trapped inside a modal dialog?

• 2.1.1 Keyboard

• 2.4.3 Focus Order

• 2.1.2 No Keyboard Trap

• 2.5.1 Pointer Gestures

What does "Pause, Stop, Hide" (WCAG 2.2.2) require for content like carousels?

• They should only move when the user interacts with them.

• They must not have any animation.

• They should allow users to pause, stop, or hide the animation.

• They must have captions for all images in the carousel.

Code Example: Which update makes this menu operable for all users?

<ul>

  <li onmouseover="expandMenu()">Menu 1</li>

  <li>Menu 2</li>

  <li>Menu 3</li>

</ul>

• Add onclick for mouse users.

• Use onfocus and onblur to expand/collapse menus with keyboard.

• Ensure menus are keyboard-navigable with Tab.

• Both B and C.

Why is providing a visible keyboard focus indicator important (WCAG 2.4.7)?

• It improves page load times.

• It lets users track where they are when using the keyboard.

• It is only necessary for screen readers.

• It helps users understand complex forms.

Code Example: Why does this fail WCAG's operability standards?

<style>

  button:focus {

    outline: none;

  }

</style>

<button>Click Me</button>

• The button does not have enough contrast.

• The button is not keyboard-operable.

• The focus indicator is removed, violating 2.4.7.

• No issue; it meets all WCAG requirements.