Product Requirements Document (PRD)

Title

BITS Accessible Calculator

Purpose

To provide a fully accessible, web-based calculator (BITS Accessible Calculator) that supports basic and advanced mathematical operations, persistent memory/variable storage, and a user-friendly interface meeting WCAG 2.2 AA guidelines. The application will be built using only basic JavaScript, HTML, and CSS, without any external frameworks.

Features

1. Calculator Functions

Basic arithmetic: addition, subtraction, multiplication, division
Advanced functions: square root, exponentiation, parentheses, and more
Support for keyboard input and on-screen buttons
Calculator includes a clearly labeled “Clear” button for resetting input and result
Calculator buttons use English names (e.g., Plus, Minus, Multiply, Divide, SquareRoot, Exponent, Decimal, Clear, LeftParen, RightParen) for clarity and accessibility
Calculator buttons are hidden by default and can be expanded/collapsed with a toggle button
Accessible Undo and Redo buttons are provided in the UI, in addition to keyboard shortcuts
Calculator modes (Basic, Scientific, Programmer) are available as toggle buttons; only one mode is active at a time, with accessible state maintained via aria-pressed and a visual indicator. The selected mode is persisted and restored after browser restart.
Calculation templates are provided for common calculations (e.g., percentage, loan, etc.)

2. Memory & Variable Storage

Users can store results in generic memory slots (M1, M2, etc.) or create named variables
Memory/variables persist across browser sessions using local storage
Memory names are case-insensitive; all names are normalized to lowercase for consistency
Accessible, expandable/collapsible list of memory locations/variables
Buttons to select memory/variables for use in calculations
Users can type memory/variable names directly into the calculation input (case-insensitive)
Multiple memory slots are displayed with quick actions: Recall, Overwrite, Clear, and Rename for each slot
Memory slots can be labeled/renamed for easier recall (e.g., “TaxRate” instead of “M1”)

3. History

Accessible history of previous calculations
History persists across sessions
Option to clear history
History items are rendered as accessible buttons; clicking a history button moves its result into the result field, with a status message for screen readers
History search and filter bar allows users to quickly find previous calculations
Calculation history can be exported to CSV via an Export History button

4. Copy & Paste

Dedicated buttons to copy results to clipboard
Paste button to insert clipboard contents into calculation input
Clipboard history keeps a list of copied results for quick access and reuse

5. Result Persistence and Clear Button

The last calculation result is persisted and restored after page refresh
Dedicated accessible “Clear” button resets both input and result
Calculator button for clearing is labeled “Clear” for clarity and accessibility
Session restore feature restores the full calculator state (input, memory, history, mode) after browser restart

6. Undo/Redo Functionality

Undo and redo actions are available via both keyboard shortcuts (Ctrl+Z, Ctrl+Y) and dedicated buttons

7. Accessibility (WCAG 2.2 AA)

Fully keyboard navigable
Sufficient color contrast
Screen reader support for all interactive elements
Focus indicators for all controls
Expand/collapse memory list is accessible and ARIA-compliant
All buttons and controls have descriptive labels
Responsive design for desktop and mobile
Semantic heading levels (<h1>, <h2>) used throughout
Skip link provided for keyboard users
Main content uses a landmark (role="main")
All dynamic regions (result, memory list, history, status messages) use aria-live="polite"
Status message region included for error/status updates
All dynamic updates are accessible to screen readers
Additional ARIA landmarks (e.g., navigation, complementary) for improved screen reader navigation
Input field references preview and status via aria-describedby for added context
History includes a search input with live filtering and proper labeling
Dark mode toggle uses aria-pressed and persists preference
Buttons specify type to avoid accidental form submissions
Color is not the only means of conveying information; visible focus styles meet contrast

8. Additional Enhancements

Calculator modes (Basic, Scientific, Programmer, Financial, Statistical, Unit Conversion, Date/Time, Hex/Binary, Matrix, Fraction, Scientific Constants) are available as toggle buttons; only one mode is active at a time, with accessible state maintained via aria-pressed and a visual indicator. The selected mode is persisted and restored after browser restart. A global toggle button allows users to show or hide all calculator mode toggles for accessibility and UI clarity. The current mode is always displayed in the calculator titlebar for clarity.
Financial Mode: Functions for interest, loan payments, amortization, ROI, and currency conversion.
Statistical Mode: Mean, median, mode, standard deviation, variance, probability, and regression.
Unit Conversion Mode: Convert between units (length, weight, temperature, volume, etc.).
Date/Time Mode: Date difference, add/subtract days, time zone conversion.
Hex/Binary Mode: Operations and conversions for hexadecimal, binary, and octal numbers.
Matrix Mode: Matrix addition, multiplication, determinant, inverse, and transpose.
Fraction Mode: Operations with fractions, mixed numbers, and simplification.
Scientific Constants Mode: Quick access to constants (π, e, Avogadro, Planck, etc.) via accessible buttons; constants can be inserted directly into calculations from the Scientific Constants mode.
Programming Mode: Bitwise operations, logical shifts, and base conversions.
Formula library: Users can save, manage, and quickly insert reusable formulas/templates.
Smart error correction: The calculator suggests corrections for common input mistakes (e.g., missing parentheses, invalid syntax).
Calculation sharing: Users can share calculations/results via link, email, or social media.
Offline support: The calculator is fully functional offline using service workers, compatible with Safari and other major browsers.
Custom keypad for mobile: A large, touch-friendly keypad is displayed for mobile users, including Safari on iOS.
Advanced clipboard integration: Users can copy/paste entire calculation sessions or memory sets, with compatibility for Safari and mobile devices.
Expression preview area shows a live parsed expression before calculation
Multi-step calculations are supported, with intermediate results displayed
Keyboard shortcuts for common actions (Enter to calculate, Esc to clear, Ctrl+C to copy result)
Accessible help/instructions section or tooltips for advanced functions, memory usage, and keyboard navigation
Dark mode toggle for improved accessibility and user comfort
Clear, accessible error messages for invalid calculations or inputs
Automatic focus management after actions (e.g., after storing a result in memory)
Responsive layout improvements for various screen sizes and orientations, including landscape on mobile
Internationalization support for multiple languages
Accessibility testing integration and audit mode
Voice input for entering calculations
Customizable button layout and themes
Session restore for full calculator state
Collapsed settings panel with a toggle for speech output mode; when enabled, calculation results are spoken aloud for accessibility.

Technical Requirements

All functionality implemented with basic JavaScript, HTML, and CSS
No external JavaScript frameworks or libraries
Use browser localStorage for persistence (memory, history, last result, mode, templates, clipboard history)
Use native Clipboard API for copy/paste
Semantic HTML and ARIA attributes for accessibility
Custom JavaScript for UI interactions (expand/collapse, keyboard navigation, etc.)
CSS for responsive and accessible design
Compatible with all major browsers
All inline styles moved to external CSS

User Stories

As a user, I want to perform basic and advanced calculations easily.
As a user, I want to store results in memory or named variables and recall them for future calculations.
As a user, I want my memory/variables and history to persist across sessions.
As a user, I want memory names to be case-insensitive for convenience.
As a user, I want the last result to persist after refresh.
As a user, I want a dedicated clear button to reset input and result.
As a user, I want a clearly labeled “Clear” button for clarity and accessibility.
As a user, I want calculator buttons to use English names for clarity and accessibility (e.g., SquareRoot instead of Sqrt).
As a user, I want calculator buttons to be hidden by default and expandable for accessibility.
As a user, I want Undo and Redo buttons in the UI as well as keyboard shortcuts.
As a user, I want to quickly select or type memory/variable names for calculations.
As a user, I want to copy and paste results easily.
As a user, I want to use history items as buttons to move the result into the result field.
As a user, I want to undo or redo my last calculation or input.
As a user, I want to use keyboard shortcuts for common actions.
As a user, I want accessible help or instructions for advanced features.
As a user, I want to toggle dark mode for comfort and accessibility.
As a user, I want clear error messages for invalid input.
As a user, I want improved navigation with ARIA landmarks as the app grows.
As a user, I want focus to move automatically to relevant elements after actions.
As a user, I want the layout to work well on all screen sizes and orientations.
As a user, I want to search and filter my calculation history.
As a user, I want to rename memory slots for easier recall.
As a user, I want to use calculation templates for common operations.
As a user, I want my clipboard history available for reuse.
As a user, I want my calculator state restored after browser restart.
As a user with disabilities, I want the calculator to be fully accessible and meet WCAG 2.2 AA standards.
As a keyboard user, I want to skip directly to the main content.
As a screen reader user, I want all dynamic updates to be announced.
As a user, I want to use voice input for calculations.
As a user, I want to customize button layout and themes.
As a user, I want to use the calculator in my preferred language.
As a user, I want to see accessibility audit results in the UI.

Non-Functional Requirements

Performance: Fast and responsive UI
Security: No sensitive data stored; all data remains local
Compatibility: Works on all major browsers and devices

Success Metrics

100% WCAG 2.2 AA compliance
No critical accessibility issues in audits
Persistent storage works reliably
All features function as described
Automated accessibility audit (e.g., axe-core) reports 0 critical/serious issues on main flows

Out of Scope

Graphing functions
Multi-user/cloud sync

This PRD can be further refined with wireframes or technical details as needed.