Keyboard Shortcuts and Accessibility
StandShare is built as a web application using standard HTML elements and follows web accessibility best practices. This page documents keyboard navigation, accessibility features, and screen reader support.
Keyboard Navigation
StandShare supports standard browser keyboard navigation throughout the application.
Global Navigation
| Shortcut | Action |
|---|
Tab | Move focus to the next interactive element (links, buttons, form fields). |
Shift + Tab | Move focus to the previous interactive element. |
Enter | Activate the focused link or button. |
Space | Activate the focused button, toggle a checkbox, or open a dropdown. |
Escape | Close an open dropdown menu, modal dialog, or popover. |
Navigation Bar
| Shortcut | Action |
|---|
Tab | Move between navigation links in the top bar. |
Enter | Navigate to the focused page link. |
Enter / Space on "More" | Open the secondary navigation dropdown. |
Escape | Close the "More" dropdown. |
Arrow Down / Arrow Up | Move through items within an open dropdown (when supported by the browser). |
Tables and Data Grids
| Shortcut | Action |
|---|
Tab | Move focus between interactive elements within a table (action buttons, links). |
Enter | Activate the focused row action or link. |
| Shortcut | Action |
|---|
Tab | Move between form fields. |
Shift + Tab | Move to the previous form field. |
Enter | Submit the form (when a submit button is focused, or in single-field forms). |
Space | Toggle a checkbox or radio button. |
Escape | Close a date picker or autocomplete dropdown. |
Arrow Keys | Navigate within date pickers and select menus. |
Modal Dialogs
| Shortcut | Action |
|---|
Tab | Cycle focus through interactive elements within the modal (focus is trapped inside). |
Escape | Close the modal and return focus to the element that triggered it. |
Enter | Activate the focused button (e.g., Confirm, Cancel). |
Accessibility Features
Semantic HTML
StandShare uses semantic HTML elements (nav, main, button, table, form, label, etc.) to provide meaningful structure for assistive technologies.
ARIA Attributes
- Interactive components use appropriate ARIA roles and attributes.
- Dropdown menus use
aria-expanded to indicate open/closed state.
- Form fields are associated with their labels via
for/id pairing or aria-label.
- Status messages and alerts use
aria-live regions to announce changes to screen readers.
Focus Management
- Focus is visually indicated with outline rings on interactive elements.
- When a modal opens, focus moves to the first interactive element inside the modal.
- When a modal closes, focus returns to the element that triggered it.
- Navigation changes preserve focus context where possible.
Color and Contrast
- The interface uses a color palette designed to meet WCAG 2.1 AA contrast requirements for text.
- Status indicators (event statuses, document statuses) use both color and text labels so information is not conveyed by color alone.
- Error messages on form fields use red text alongside descriptive messages.
Responsive Design
- The layout adapts to screen sizes from mobile (320px) to desktop.
- Touch targets for buttons and links meet the minimum 44x44 pixel recommendation.
- The mobile navigation hamburger menu provides full access to all navigation links.
Screen Reader Support
StandShare is compatible with common screen readers:
| Screen Reader | Platform | Notes |
|---|
| VoiceOver | macOS, iOS | Tested with Safari and Chrome. |
| NVDA | Windows | Tested with Chrome and Firefox. |
| JAWS | Windows | Tested with Chrome. |
| TalkBack | Android | Tested with Chrome. |
Screen Reader Tips
- Use heading navigation (
H key in most screen readers) to jump between sections on a page.
- Use landmark navigation to move between the navigation bar (
nav), main content (main), and other regions.
- Tables include header rows so screen readers announce column names when navigating cells.
- Notification badges on the bell icon include
aria-label text describing the unread count.
Reporting Accessibility Issues
If you encounter an accessibility barrier, please submit feedback through the Feedback page in the application or contact your organization's administrator. Include:
- A description of the issue.
- The page or feature where the issue occurs.
- The browser and assistive technology you are using.
Next Steps