1
showcase
Shipped: Conference schedule
What I Built
I built a responsive, accessible single-page conference schedule for a two-day conference with three parallel tracks.
The interface allows visitors to:
* Switch between Day 1 and Day 2.
* View sessions across three conference tracks.
* Open individual session details.
* Navigate the complete interface using only a keyboard.
* Use the schedule comfortably on narrow screens, including a 320px viewport.
How a Reviewer Can Verify the Acceptance Criteria
1. Keyboard Operation
The reviewer can start at the top of the page and use only:
*
Tab to move forward.
* Shift + Tab to move backward.
* Enter or Space to activate buttons.
* Arrow keys to switch between the conference day tabs.
* Escape to close the session details dialog.
Every interactive element uses native HTML controls such as <button> and <a>, so all controls are keyboard reachable.
The DOM order also follows the visual order, ensuring that keyboard navigation follows the same logical sequence as the page.
2. Visible Focus Indicators
When navigating with the keyboard, every focused interactive element displays a clear focus indicator using :focus-visible.
css
:focus-visible {
outline: 4px solid #f59e0b;
outline-offset: 4px;
}
The focus indicator is not removed, ensuring that keyboard users can always see where they are on the page.
3. Responsive Behavior
On desktop screens, the three conference tracks are displayed side by side so visitors can compare sessions happening at the same time.
On narrow screens, the three parallel columns are replaced with a single chronological vertical layout.
This prevents horizontal scrolling and keeps every session readable and accessible.
4. 320px Testing
The reviewer can open the browser's responsive/device mode and set the viewport to:
text
320px wide
At this width:
* The three tracks become a single vertical list.
* Session cards fit within the viewport.
* Text wraps naturally.
* Navigation adapts to the available width.
* No horizontal scrolling is required.
5. Session Details
Every session has a native button:
html
<button type="button">
View session details
</button>
The reviewer can:
1. Tab to any session.
2. Press Enter or Space.
3. Verify that the session dialog opens.
4. Navigate through the dialog using the keyboard.
5. Press Escape to close it.
6. Verify that focus returns to the session button that opened the dialog.
Therefore, the complete session-details interaction can be performed without a mouse.
6. Parallel Track Decision
The three tracks remain side by side on larger screens because this makes simultaneous sessions easy to compare.
On narrow screens, keeping three columns would make the content too narrow and could introduce horizontal scrolling. Therefore, below the responsive breakpoint, the tracks are converted into a single chronological list.
This was chosen to prioritize:
* No horizontal scrolling.
* Readability.
* Chronological understanding.
* Keyboard accessibility.
* Access to all sessions.
7. README Documentation
The repository README documents:
* Keyboard operation.
* Focus behavior.
* Session dialog behavior.
* Responsive behavior.
* The reason parallel tracks are changed on narrow screens.
* 320px testing instructions.
* Accessibility testing checklist.
A reviewer can therefore verify both the implementation and the design decisions directly from the repository.
Repository: https://github.com/techtuber9988/conference-schedule
Live: https://conference-schedule-rust.vercel.app/
Built for the Verified Frontend Internship · accessible layoutAdd a comment
0/2000