Muhammad Rafi Arsya
Back to All Projects
HCI · Accessibility · 2025

NASE Accessibility

A web accessibility improvement project for the NASE platform — applying WCAG 2.1 guidelines, redesigning key UI flows, and building a prototype with Python, TensorFlow, and OpenCV.

HTML/CSSAccessibilityJavaScriptHCIWCAG 2.1
Status
Completed
Year
2025
Role
Developer & Researcher
Platform
Web
Category
HCI Project
Overview

The NASE Accessibility Platform project was a Human-Computer Interaction (HCI) assignment focused on evaluating and improving the accessibility of an existing web platform. The project applied WCAG 2.1 principles across contrast accessibility, keyboard navigation, screen reader compatibility, and focus management to create a more inclusive and user-friendly experience.

The strongest aspect of the project was the accessibility analysis and interface redesign process,where accessibility issues were identified and translated into improved UI solutions through structured Figma redesigns and usability-focused adjustments.

The project also emphasized, practical implementation by developing a responsive web prototype that demonstrated the improved accessible interface and navigation flow.

The final deliverables included a complete accessibility evaluation report, redesigned UI mockups, presentation materials, and a functional prototype deployed through Cloudflare Pages.

Key Features
WCAG 2.1 Audit
Systematic review of contrast ratios, keyboard navigation paths, ARIA labels, and focus order across all major pages.
AI Contrast Detector
Python + TensorFlow + OpenCV pipeline to automatically detect and flag low-contrast text regions in UI screenshots.
Redesigned UI Flows
High-fidelity Figma mockups for the flagged pages — improved colour contrast, larger tap targets, clearer labels.
Full Accessibility Report
Documented findings, WCAG criterion violations, severity ratings, and recommended fixes for each identified issue.
Live Website
Deployed accessible prototype on Cloudflare Pages demonstrating all implemented improvements from the audit.
Demo Video

Walkthrough of the redesigned NASE platform — demonstrating accessibility improvements across all 5 pages.

Website Screenshots

About Us

NASE About Us page

Membership

NASE Membership page

Membership Application

NASE Membership application page

Our Team

NASE Our Team page

Contact Us

NASE Contact Us page
Project Timeline
1
Feb 2025
Project Brief & Planning
Received the HCI assignment brief. Selected NASE as the audit target, defined scope, and set up evaluation criteria based on WCAG 2.1.
2
Mar 2025
Accessibility Audit
Conducted a full manual audit of the platform — screen reader testing, keyboard-only navigation, contrast checks using browser DevTools.
3
Apr 2025
AI Pipeline & Redesign
Built the Python/TensorFlow/OpenCV contrast detection script. Created Figma mockups for the redesigned pages addressing the top-severity issues.
4
May 2025
Prototype & Report
Implemented the redesigned components in HTML/CSS, deployed to Cloudflare Pages, and compiled the full accessibility report.
May 2025
Submitted & Presented
Project submitted and presented to the HCI course panel. Live website available at hciproject.pages.dev.