Responsive Components and Accessibility
By the end of this lesson, you'll be able to:
- Build responsive layouts using the SLDS grid system
- Apply accessible labeling and ARIA attributes to custom markup
- Manage focus after actions like opening a modal
Prerequisites: "Toasts, Spinners, and Modals"
The SLDS Grid System
<div class="slds-grid slds-wrap slds-gutters">
<div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3">
<!-- one panel -->
</div>
<div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3">
<!-- another panel -->
</div>
</div>slds-grid establishes a flex container; slds-col marks a column; size classes like slds-size_1-of-1 (full width) and slds-medium-size_1-of-2 (half width at medium breakpoints and up) control how columns stack and resize across screen sizes — the mechanism behind a genuinely responsive layout without any custom CSS.
Accessibility Basics
- Label association — base components (
lightning-input, etc.) handle this automatically via theirlabelattribute; custom markup needs an explicit<label for="...">oraria-label. aria-livefor dynamic content — announces content that changes without a page reload (like a validation error appearing) to screen readers.- Keyboard navigation — every interactive element should be reachable and operable via keyboard alone, not just mouse/touch.
- Focus management — after opening a modal (Lesson 3) or closing one, focus should move somewhere sensible, not get silently lost.
Why This Matters in Real Projects
Components genuinely run inside the Salesforce mobile app on phones, not just desktop browsers — a layout that isn't responsive breaks a real, common usage pattern. Accessibility, similarly, is frequently a genuine legal/compliance requirement for the organizations building on Salesforce, not an optional nicety to skip under time pressure.
Exercise
Write an SLDS grid with two columns that stack full-width on small screens and sit side-by-side (half width each) on medium screens and up.
Show hint
Combine slds-size_1-of-1 with slds-medium-size_1-of-2.
Exercise
Challenge: explain, as a comment, why focus management matters specifically when a modal closes.
Show hint
Think about what a keyboard or screen-reader user experiences if focus is simply lost.
Responsive Components and Accessibility Quiz
My Notes
Log in to keep private notes on this lesson.
Questions about this lesson
No questions yet — be the first to ask.
Log in to ask a question about this lesson.
Summary
Components genuinely run on phones inside the Salesforce mobile app, and accessibility is often a real compliance requirement, not an optional nicety — both deserve deliberate attention, not an afterthought.