0
showcase
Shipped: Conference schedule
I built a single-page schedule for a two-day conference with three parallel tracks (Build, Design and Ship). It works with the keyboard alone and at 320px wide. It is plain HTML, CSS and JavaScript with no libraries.
How parallel tracks work on narrow screens: the page is a list of time slots, not columns. On wide screens the three sessions in a slot sit side by side so you can compare them. On narrow screens they stack under the time heading in the same order. A track filter (All, Build, Design, Ship) and day buttons keep a phone screen short. The reasoning is in the README.
How a reviewer can verify it:
Keyboard order: press Tab from the top. You pass the skip link, the day buttons, the track filter, then the sessions in time order. There is one DOM order for every layout, so tab order always matches what you see.
Visible focus: every button and the skip link shows a 3px orange outline.
No horizontal scroll at 320px: set the viewport to 320px wide and confirm there is no sideways scrollbar.
Session details without a mouse: press Enter on a session to open its dialog. Escape or the Close button dismisses it, and focus returns to the session you opened.
README: explains the narrow-screen decision and includes a short keyboard test checklist.
Repository: https://github.com/ibn-azam/NorthLight
Live: https://github.com/ibn-azam/NorthLight
Built for the Verified Frontend Internship · accessible layout
Repository: https://github.com/ibn-azam/NorthLight
Live: https://ibn-azam.github.io/NorthLight/
Built for the Verified Frontend Internship · accessible layout
Add a comment
0/2000