Spatial Working Memory (SWM) is an essential cognitive function that supports learning processes, reasoning, mathematical abilities, and academic achievement among students. Despite its importance, accessible and digital-based tools for assessing spatial working memory remain limited, particularly for junior and vocational high school students. This study focuses on designing and developing the frontend of a web-based SWMT application, guided by the Waterfall development approach involving literature studies, interviews with psychology experts, observations, questionnaires, interface design using Figma, implementation with Laravel, HTML, and CSS, and usability and accessibility evaluations. Accessibility testing was conducted using the WebAIM Contrast Checker based on Web Content Accessibility Guidelines (WCAG), while usability assessment was carried out through the SUS instrument with 72 participants from junior and vocational high school levels. The results indicate that seven out of eleven evaluated interface elements successfully met WCAG 2.0 Level AA accessibility standards, with contrast ratios exceeding the minimum requirement of 4.5:1. Four elements, namely the login form and login button, the independent test start button, the test score display, and the PDF download button, require further improvement due to insufficient contrast levels. Usability evaluation produced an average SUS score of 66.15, categorized as "OK" with marginal acceptance, indicating that the application can be used independently while still requiring improvements in navigation consistency, instruction clarity, and overall user experience. This study offers a meaningful contribution toward building an open and inclusive digital tool for cognitive assessment in Indonesian educational settings and provides a foundation for future integration of backend functionality and psychometric validation.