18 Questions
What is the term used to describe users who have good vision but cannot use a mouse?
Sighted keyboard users
Why is it vital to visually display the current state of keyboard focus?
So the user knows where they are at all times
What is the purpose of visual focus states?
To help users navigate the page using a keyboard
What is the default visual focus style in Chrome and Safari?
A blue halo
What is the minimum color contrast ratio required for custom visual focus states?
3:1
What is the main reason for designing custom visual focus states?
To differentiate from browser defaults
What happens to the visual focus when a user presses the Tab key?
It moves down the list
What should you consider when designing custom visual focus states?
WCAG 2.1 requirements for non-text contrast
What is the purpose of visually indicating the state of a component?
To convey the overlap of states
What is the limitation of using placeholder text instead of actual labels in forms?
The user may forget the purpose of the form field
Why is a red outline around a form field with an error not sufficient?
It is not accessible to color-blind users
What is the purpose of providing error text below a form field with an error?
To provide a hint to fix the error
Why is it important to guide the user in completing a form successfully?
To improve the user experience and reduce anxiety
What is the benefit of providing safeguards in forms?
To provide a way for users to go back and edit their input
What is the purpose of visually distinct states in a component?
To convey the overlap of states
What is the limitation of using a red outline around a form field with an error?
It is not accessible to color-blind users
Why is it important to set clear expectations for longer forms?
To improve the user experience and reduce anxiety
What is the purpose of providing a way for users to review, confirm, or reverse changes in forms?
To provide a way for users to review and confirm their actions
Study Notes
Visual Focus States
- Sighted keyboard users rely on visually displayed keyboard focus to navigate web applications.
- WCAG 2.4.7 requires visible focus states to help users know where they are.
- Visual focus states can be customized, but must meet or exceed a 3:1 color contrast ratio according to WCAG 2.1.
Various Component States
- Components, such as checkboxes, require distinct visual states to indicate their state.
- States to consider: default, focused (not selected), focused (selected), not focused (selected), and disabled.
- Each state should have a visually distinctive element to convey the overlap of states.
Forms
- Always include visible labels to help users understand the purpose of each form field.
- Avoid using placeholder text as it can be confusing.
- Design helpful error messages that include error text and explanation of how to fix the error.
- Guide the user in completing the form successfully by setting clear expectations and providing safeguards.
- Avoid setting time limits on completing forms, and provide ways for users to edit, save, or restart the form.
Best Practices
- Design interactive controls and form inputs with clear visual differences for all states.
- Provide clear guidance and safeguards to remove barriers for people with cognitive disabilities and provide a more enjoyable experience for everyone.
Learn about visual focus states and how they impact sighted keyboard users who navigate computers and web applications with limited motor control. Understand the importance of accessibility in web design.
Make Your Own Quizzes and Flashcards
Convert your notes into interactive study material.
Get started for free
