1
showcase
Shipped: Conference schedule
What I built:
A single page for a two day conference with 3 tracks (Build, Design, Workshop). Sessions are buttons that open a dialog with their details. It's all HTML, CSS and a tiny script, no libraries. On wide screens the 3 tracks are laid out side by side in their time slots. On narrower screens they flow into a single list, sorted by time, with each session noting the track and room. The reasoning is in the README.
How a reviewer can check it:
Keyboard order: Everything is a real link or button in the order you see them on the page, so tabbing takes you through the items in the same order they're displayed at any viewport width.
Visible focus: Tabbing through the page will show an outline on each link and button, including while in the dialog.
No horizontal scroll at 320px width: check that the browser window isn't scrolling horizontally at 320px width.
Keyboard Operations: Hitting enter on a session opens it in a dialog, which can be dismissed with escape or tabbing to the close button. The focus returns to the session that was opened when the dialog closes.
README: Contains an explanation about the choice to stack sessions on narrow screens rather than using tabs or a horizontal scroll.
Repository: https://github.com/sindhu-dev02/conference-schedule
Live: https://sindhu-dev02.github.io/conference-schedule/
Built for the Verified Frontend Internship · accessible layout
Add a comment
0/2000