Improving Mannings HK Accessibility Prototype

[Audio] BSIM4027 ACCESSIBLE INFORMATION MANAGEMENT GROUP PROJECT IMPROVING DIGITAL ACCESSIBILITY OF MANNINGS HONG KONG WEBSITE FOR PEOPLE WITH DISABILITIES Yeung Sin Yu • Cheung Sin Man • Ng Ka Chun.

[Audio] EQUALITY OF ACCESS LEGAL COMPLIANCE BUSINESS INCLUSION Ensuring people with disabilities have equal access to digital services and information. Meeting WCAG 2.1 AA standards and Hong Kong Disability Discrimination Ordinance requirements. Expanding customer reach through inclusive design that benefits all users. Project Overview.

[Audio] Original Site Audit Key Accessibility Barriers Identified Poor heading structure, lack of alt text on images, inadequate keyboard navigation, low color contrast ratios, and no captions on media..

[Audio] Redesigned Prototype Google Sites Accessibility Approach Clear H1-H3 heading hierarchy, semantic HTML structure, visible keyboard focus indicators, and improved color contrast throughout..

[Audio] LOGICAL HEADING STRUCTURE MEANINGFUL ALT TEXT COLOR CONTRAST COMPLIANCE Clear H1-H3 hierarchy enables screen reader navigation. Descriptive alt text added to all homepage images. 4.5:1 ratio achieved with skip-to-main-content link. Homepage Redesign.

[Audio] ARIA LABELS ON FILTERS & BUTTONS KEYBOARD ACCESSIBLE CONTROLS LOGICAL FOCUS ORDER Screen readers can identify all interactive elements clearly. Users can navigate filters and buttons without a mouse. Tab navigation follows intuitive reading patterns. Product Listing.

[Audio] SIMPLIFIED MEDICAL LANGUAGE SUPPORTING ICONS WITH TEXT MULTIPLE CONTACT METHODS Complex medical terms replaced with plain language for easier comprehension. Visual icons paired with text labels to aid understanding and navigation. Email, chat, and web forms provide accessible communication options. Pharmacy Services Accessibility.

[Audio] High-Contrast Mode Toggle One-click switch to high-contrast colors for improved visibility. Text Resizing Up to 200% Users can enlarge text without losing content or functionality. Animation Pause Controls Stop or pause moving content to reduce distractions and seizure risks. User Preference Settings Personalized accessibility options saved across browsing sessions. ACCESSIBILITY WIDGET FEATURES.

[Audio] WCAG 2.1 AA Compliance Evaluation 100% HOMEPAGE ELEMENTS MEET WCAG 2.1 AA.

[Audio] Visual Disabilities Hearing Disabilities Target Audiences For Accessibility Motor Disabilities Cognitive Disabilities Speech Disabilities.

[Audio] Theoretical Framework Academic Foundations WCAG 2.2 Standards Inclusive Design Principles Norman's Design Principle: Visibility & Understandability Universal Design for Learning (Rose & Meyer, 2002) Fitts' Law for Motor Accessibility.

[Audio] Project Methodology Step-by-Step Approach PHASE 1 Accessibility audit of original Mannings HK website PHASE 2 Prototype redesign using Google Sites platform PHASE 3 Testing with NVDA and VoiceOver screen readers PHASE 4 Documentation and compliance evaluation.

[Audio] Google Sites NVDA & VoiceOver WebAIM Contrast Checker Software Tools Used Design & Testing Google Docs & Word Chrome, Firefox, Safari, Edge.

[Audio] BUILD ACCESSIBILITY IN FROM THE START SIMPLE CHANGES REMOVE REAL BARRIERS INCLUSIVE DESIGN BENEFITS ALL USERS Retrofitting accessibility is costly and incomplete; integrate it from initial design phases. Alt text, color contrast, and keyboard navigation create meaningful impact with minimal effort. Accessibility improvements enhance usability for everyone, not just users with disabilities. Key Learning Outcomes.

[Audio] Solutions Implemented • Poor heading structure → Semantic HTML headings with clear H1-H3 hierarchy • Inaccessible navigation → Keyboard focus indicators and ARIA labels • Complex language → Simplified wording with supporting icons Challenges Identified The original Mannings website presented significant accessibility barriers including disorganized heading structures, navigation inaccessible to keyboard users, and complex medical terminology that created obstacles for users with disabilities..

[Audio] MODEL FOR HONG KONG E-COMMERCE ONGOING ACCESSIBILITY AUDITS CONTINUOUS USER TESTING This project serves as a replicable framework for other retail websites in Hong Kong to improve digital inclusion. Recommend regular accessibility evaluations to maintain WCAG compliance as content and features evolve. Engage users with diverse disabilities in testing to identify real-world barriers and improve usability. Impact and Future Recommendations.

[Audio] Thank You!. Thank You!.