Keyboard Navigation

Relevant source files

The following files were used as context for generating this wiki page:

• static/script.js
• static/index.html
• README.md
• static/style.css
• src/main.rs
• Cargo.toml

Keyboard navigation is a core accessibility feature of the HDRify application, allowing users to perform all primary actions without a mouse. This includes selecting an image for processing, adjusting HDR intensity, and resetting the application state. The implementation combines semantic HTML attributes with JavaScript event listeners to create an intuitive and accessible user experience.

The primary keyboard interactions are activating the file upload with Space or Enter, and using the Escape key as a global shortcut to reset the interface. Standard HTML controls like sliders and buttons also retain their default keyboard behaviors.

Sources: README.md:12, static/script.js:37-44, 120-125

Implemented Shortcuts

The following table summarizes the keyboard shortcuts available within the application.

Key(s)	Component	Action
Enter or Space	Upload Area	Triggers the file selection dialog to upload an image.
Escape	Global (Document)	Resets the application to its initial state, but only if an image has been processed.
ArrowLeft / ArrowRight	HDR Slider	Decreases/Increases the HDR intensity value.
Tab	All focusable elements	Navigates between interactive elements (Upload Area, Slider, Buttons).
Enter	Reset/Download Buttons	Activates the focused button.

Sources: static/script.js:38-44, 120-125, static/index.html:24, 41-49

Core Components

File Upload Activation

The main upload area is made interactive for keyboard users through a combination of HTML attributes and a dedicated JavaScript event listener.

• HTML Structure: The uploadArea div is made focusable by setting tabindex="0". The role="button" and aria-label="Upload image" attributes provide semantic context for assistive technologies.

  Sources: static/index.html:24

• Event Handling: A keydown event listener is attached to the uploadArea. It checks if the pressed key is Enter or Space. If so, it prevents the default browser action and calls the triggerFileInput() method, which programmatically clicks the hidden <input type="file"> element.

  Sources: static/script.js:37-44, static/script.js:128-130

The diagram below illustrates the flow when a user activates the upload area with the keyboard.

Global Reset Shortcut

A global keydown event listener is attached to the document to provide a convenient way to reset the application from any state.

• Event Listener: The listener checks for the Escape key.
• State Condition: The reset action is only triggered if an image has been loaded, which is determined by checking if this.currentImageData is not null. This prevents accidental resets from the initial upload screen.
• Action: If the conditions are met, the reset() method is called, which clears all data and transitions the UI back to the initial upload view.

The following sequence diagram shows this interaction.

Standard Control Navigation

The application leverages native browser behavior for standard form elements, ensuring a predictable experience.

• HDR Slider: The <input type="range"> element for the HDR slider is navigable using the left and right arrow keys to decrease or increase its value.
• Buttons: The "Download" and "Reset" buttons (<a> and <button>) can be activated with the Enter key when focused.
• Tab Order: The logical source order of elements in index.html combined with tabindex="0" on the upload area ensures a correct tab-flow through the application's interactive elements.

Sources: static/index.html:24, 38-49

Accessibility and Visual Feedback

To support keyboard navigation, clear visual feedback is provided for focused elements. This is achieved through CSS focus styles.

A specific CSS rule applies a visible outline to buttons, range inputs, and link-styled buttons when they receive focus, making it clear to the user which element is currently active.

/* static/style.css:400-404 */
button:focus,
input[type='range']:focus,
a.btn:focus {
  outline: 2px solid #6b7280;
  outline-offset: 2px;
}

Sources: static/style.css:400-404

Furthermore, ARIA (Accessible Rich Internet Applications) attributes are used throughout index.html to enhance accessibility for screen reader users.

Element	ARIA Attribute(s)	Purpose
uploadArea	role="button", tabindex="0", aria-label="Upload image"	Defines the div as a focusable, button-like control.
processingOverlay	role="status", aria-live="polite"	Informs screen readers about processing status changes.
hdrValue	aria-live="polite"	Announces changes to the HDR value as the slider is adjusted.
hdrSlider	aria-label="HDR intensity level"	Provides a descriptive label for the slider control.

Sources: static/index.html:24, 31, 41, 43

Conclusion

The keyboard navigation in HDRify is implemented through a thoughtful combination of JavaScript event handling, semantic HTML, and CSS visual cues. By supporting activation of the upload area via Enter/Space and providing a global Escape shortcut for resetting, the application ensures that users who rely on keyboards have a functional and efficient experience. This commitment to accessibility is a key aspect of the application's modern and user-centric design.

Sources: README.md:18, static/script.js