SF-PD2 User Interface Practice Question
A developer is building a Lightning Web Component that renders a custom list of navigation links. The component must follow the Salesforce Lightning Design System (SLDS) styling and remain accessible to screen readers. Which approach best satisfies both the styling and accessibility requirements?
⚠ Common exam trap
The trap here is treating visual similarity as sufficient, when replacing native links with styled divs or buttons silently removes keyboard and screen reader semantics.
Answer choices
Why each option matters
Answer the question above first, then reveal the full breakdown to understand why each option is right or wrong.
Correct answer & explanation
✓
Apply SLDS utility classes to standard anchor elements and add appropriate ARIA attributes such as aria-current for the active link.
Semantic anchor elements styled with SLDS utility classes satisfy both the visual and accessibility requirements. Native links are keyboard accessible and understood by screen readers, and adding aria-current identifies the active item. Non-semantic divs, custom CSS, or button components either break semantics or duplicate the design system without addressing accessibility.
Answer analysis
Option-by-option breakdown
For each option: why learners choose it and why it is or isn't the right answer here.
- ✗
Use lightning-button components for each link and set the variant attribute to base for all of them.
Why it's wrong here
lightning-button renders a button element, not a link, so it does not convey navigation semantics to assistive technology and does not support opening URLs natively. Setting variant to base only changes styling. For a navigation list, buttons are semantically incorrect, and screen reader users would not receive the expected link behavior or current-page indication.
- ✓
Apply SLDS utility classes to standard anchor elements and add appropriate ARIA attributes such as aria-current for the active link.
Why this is correct
Using SLDS utility classes on semantic anchor elements gives the visual styling the design system defines while preserving native link semantics that assistive technology understands. Adding aria-current marks the active item so screen readers announce it correctly. This combination keeps markup semantic, follows SLDS conventions, and meets the accessibility requirement without custom CSS or non-semantic elements.
- ✗
Create custom CSS that mimics SLDS colors and typography, and omit ARIA attributes because the visual design is sufficient.
Why it's wrong here
Reimplementing SLDS styles in custom CSS duplicates the design system, drifts from platform updates, and provides no accessibility benefit. Omitting ARIA attributes means screen reader users cannot determine which link is current or understand the list structure if non-semantic elements are used. This approach increases maintenance cost while failing the accessibility requirement.
- ✗
Use div elements with onclick handlers and SLDS classes, and add role="link" to each div.
Why it's wrong here
Divs with click handlers do not behave like links: they are not focusable by default, do not respond to Enter for activation, and do not expose link semantics reliably. Adding role="link" partially compensates but still requires manual keyboard handling and focus management, which is error-prone. Native anchors styled with SLDS classes achieve the same appearance with correct semantics and less code.
About these practice questions
One of 226 original SF-PD2 practice questions on Courseiva, each with a full explanation and wrong-answer analysis — not exam dumps or protected exam content. Learn why practice questions differ from exam dumps →
JA
Written and reviewed by Johnson Ajibi, MSc IT Security
Senior Network & Security Engineer · founder of Courseiva
Last reviewed September 2026 · checked against the official Salesforce exam blueprint
This SF-PD2 practice question is part of Courseiva's free Salesforce certification practice question bank. Courseiva provides original exam-style practice questions with explanations, topic-based practice, mock exams, readiness tracking, and study analytics to help learners prepare for the SF-PD2 exam.