ContextQMD
Back to Mattermost

Keyboard accessibility

docs/main/end-user-guide/collaborate/keyboard-accessibility.mdx

11.10.03.6 KB
Original Source
<PlanAvailability slug="all-commercial" />

Navigational keyboard shortcuts help you use Mattermost in a web browser or the desktop app without needing a mouse. Below is a list of supported accessibility shortcuts.

<table> <colgroup> <col style={{width: '100%'}} /> </colgroup> <tbody> <tr> <td><blockquote><p>Keyboard shortcut | Description |</p></blockquote><p>==============================================+==================================================================================+ | Desktop App: <a href="mm-kbd:">F6</a> || Move focus to the next section | | Browser: <a href="mm-kbd:">Ctrl</a> <a href="mm-kbd:">F6</a> || |</p></td> </tr> <tr> <td><div class="line-block">Desktop App: <a href="mm-kbd:">Shift</a> <a href="mm-kbd:">F6</a> || Move focus to the previous section | Browser: <a href="mm-kbd:">Ctrl</a> <a href="mm-kbd:">Shift</a> <a href="mm-kbd:">F6</a> |</div></td> </tr> <tr> <td><a href="mm-kbd:">Tab</a> | Move focus to the next element |</td> </tr> <tr> <td><a href="mm-kbd:">Shift</a> <a href="mm-kbd:">Tab</a> | Move focus to the previous element |</td> </tr> <tr> <td><a href="mm-kbd:">↑</a> or <a href="mm-kbd:">↓</a> | Move focus between messages in the post list or sections in the channel sidebar |</td> </tr> <tr> <td><a href="mm-kbd:">Enter</a> | Take action on the focused element |</td> </tr> </tbody> </table>

Region navigation

Mattermost has eight regions that can be focused for navigation. Use <kbd>F6</kbd> in the desktop app, or use <kbd>Ctrl</kbd> <kbd>F6</kbd> in a browser repeatedly to move focus and loop through the regions in this order:

  1. Message list region
  2. Message input region
  3. Right-hand side message list region
  4. Right-hand side message input region
  5. Team menu region
  6. Channel sidebar region
  7. Channel header region
  8. Search

Message navigation

When the message list region is focused, use the <kbd>↑</kbd> or <kbd>↓</kbd> arrow keys to navigate through messages and reply threads. Press <kbd>Tab</kbd> to navigate through message actions.

Message composition

Mattermost is compatible with most popular screen readers, such as Apple VoiceOver or JAWS for Windows. A custom readout is composed for each message by combining the message elements and reading them together in full sentences. Message elements will read in the following order:

  1. Header: Author, timestamp, message type (i.e. parent post or reply)
  2. Main Content: The message content typed by the author
  3. Attachments: The number of attachments (if applicable)
  4. Emoji Reactions: The number of unique emoji reactions (if applicable)
  5. Saves/Pins: If a message is saved or pinned (if applicable)

For example, a message read by a screen reader may sound like the following:

text
Eric Sethna at 12:57pm Thursday June 13th wrote a reply "Thanks for the review", 3 attachments, 2 reactions, message is saved and pinned.

Channel sidebar navigation

When the channel sidebar region is focused, use the <kbd>↑</kbd> or <kbd>↓</kbd> arrow keys to focus individual sidebar sections, such as Insights, Threads, Favorites, custom categories, public channels, private channels, and direct messages. Press <kbd>Tab</kbd> to navigate through channels or other buttons within a sidebar section.