Slack with NVDA: Simplified Layout, Quick Switcher Tips (Full Transcript)

[00:00:01] Speaker 1: In this tutorial, I'm going to demonstrate several settings and features that can improve the experience of using Slack with a screen reader. And for this tutorial, I'm using Windows 11 with NVDA. I'm going to start by explaining how Slack is organized. The interface is divided into sections, and you navigate between them by pressing F6.

[00:00:19] Speaker 2: At the top is a toolbar. Screen Reader. F6. History navigation toolbar.

[00:00:23] Speaker 1: Slack menu button submenu. Here you'll find history navigation, search, and other functionality.

[00:00:28] Speaker 2: Screen Reader. Right arrow. Show workspace. Switch or toggle button. Press control plus shift plus S. Right arrow. Back in history button. Unavailable. Alt plus left arrow. Right arrow. Forward in history button. Unavailable. Alt plus right arrow. Right arrow. Show history menu button submenu.

[00:00:40] Speaker 1: Right arrow. Search button. The toolbar is followed by a set of tabs, and each of these represents a workspace that you're signed into.

[00:00:48] Speaker 2: Screen Reader. F6. Workspaces tab control. Acme incorporated tab.

[00:00:51] Speaker 1: Selected control plus one. One of two. Within the selected tab panel is another set of tabs, and each of these represents a way of working within the selected workspace.

[00:01:01] Speaker 2: And the first is home. Screen Reader. F6. Acme incorporated property page. Acme incorporated tab control.

[00:01:06] Speaker 1: Home tab selected. One of six. Home is where you're going to find all the channels and direct messages for the currently selected workspace. But there are other ways of working in Slack as well. For example, if you want to focus on just direct messages, there is the DMs tab.

[00:01:20] Speaker 2: Screen Reader. Down arrow.

[00:01:21] Speaker 1: DMs tab two of six. There's also the activity tab, and this is where you would go if you wanted to catch up on reactions or replies to messages that you have sent.

[00:01:29] Speaker 2: Screen Reader. Down arrow.

[00:01:30] Speaker 1: Activity tab three of six.

[00:01:32] Speaker 2: Next is the files tab. Screen Reader. Down arrow.

[00:01:34] Speaker 1: Files tab four of six. Here you'll find all the files you've created, or files that have been shared with you.

[00:01:40] Speaker 2: And lastly, there's the later tab. Screen Reader.

[00:01:41] Speaker 1: Down arrow. Later tab five of six. And here's where you're going to find messages that you have saved for later. For the purposes of this demo, I'm going to remain on the home tab, so I'm going to press home to go back to it.

[00:01:52] Speaker 2: Screen Reader.

[00:01:52] Speaker 1: Home. Home tab selected. Regardless of your selected way of working, the content of the selected tabs panel typically has two sections.

[00:02:01] Speaker 2: The first is a sidebar. Screen Reader. F6. Home property page. Home sidebar. Channels and direct messages three view.

[00:02:06] Speaker 1: Accounting marketing current one of 46 level two. For the home tab, the sidebar contains a tree representing channels and direct messages for the currently selected workspace. Choosing an item from the sidebar changes the content of the next section, which is the primary view.

[00:02:21] Speaker 2: Screen Reader. F6. Channel accounting marketing grouping. Composer grouping.

[00:02:25] Speaker 1: Accounting marketing edit multiline blank. For channels, the primary view contains a rich text editor for composing new messages to send to the channel.

[00:02:33] Speaker 2: Screen Reader. NVDA plus tab. Message to accounting marketing edit focused multiline blank.

[00:02:37] Speaker 1: And the composer is preceded by the list of messages for the channel, and you can focus it by pressing the up arrow key.

[00:02:44] Speaker 2: Screen Reader. Up arrow. Accounting marketing channel list. Level one. Jennifer. Today is Alexa's last day. Let me know if you want to join us for her goodbye dinner 3.53 PM one reaction. Lastly, there's the control strip. Screen Reader. F6.

[00:02:54] Speaker 1: Create new menu button submenu. Together with the history navigation toolbar, these two bookend the application. The control strip contains other application-wide actions.

[00:03:04] Speaker 2: For example, there's the create button. Screen Reader. NVDA plus tab.

[00:03:07] Speaker 1: Create new menu button focused submenu. And when you open this, you'll find a menu that allows you to create things like new messages.

[00:03:13] Speaker 2: Screen Reader. Enter. Create menu. Down arrow. Message CTRL plus end.

[00:03:16] Speaker 1: Start a conversation in a DM or channel one of seven.

[00:03:18] Speaker 2: Or new channels. Screen Reader. Down arrow.

[00:03:20] Speaker 1: Channel start a group conversation by topic two of seven.

[00:03:22] Speaker 2: Or to start a huddle. Start a chat three of seven. Screen Reader. Escape.

[00:03:26] Speaker 1: Create new menu button submenu.

[00:03:28] Speaker 2: There's also a button labeled with your username. Screen Reader. Down arrow. User. Johan menu button submenu.

[00:03:32] Speaker 1: Johan active. And it has a menu that allows you to change things like your current status or your settings.

[00:03:36] Speaker 2: Screen Reader. Enter. User menu. Johan menu. Down arrow. Update your status one of seven. Escape. User. Johan menu button submenu.

[00:03:42] Speaker 1: Johan active. So if you were keeping track, that was six sections.

[00:03:45] Speaker 2: The history navigation toolbar. Screen Reader. F6. History navigation toolbar.

[00:03:48] Speaker 1: Slack menu button submenu.

[00:03:50] Speaker 2: The workspaces tab list. Screen Reader. Acme incorporated tab control.

[00:04:02] Speaker 1: Home tab selected one of six. The sidebar for the selected way of working.

[00:04:06] Speaker 2: Screen Reader. F6. Home property page. Home sidebar. Channels and direct messages three view.

[00:04:09] Speaker 1: Accounting marketing current one of 46 level two.

[00:04:12] Speaker 2: The primary view. Screen Reader. F6. Channel accounting marketing grouping. Composer grouping.

[00:04:16] Speaker 1: Message to accounting marketing edit multi-line blank.

[00:04:18] Speaker 2: And the control strip. Screen Reader. F6. Control strip toolbar.

[00:04:21] Speaker 1: Create new menu button submenu. It's worth mentioning that the number of tabs in the tab list is different for each tab.

[00:04:34] Speaker 2: Screen Reader. The number of tabs in the tab list is different for each tab. The number of tabs in the tab list is different for each tab. Screen Reader.

[00:04:45] Speaker 1: The number of tabs in the tab list is different for each tab. Screen Reader. The number of tabs in the tab list is different for each tab. Screen Reader. The number of tabs in the tab list is different for each tab. and how it impacts the layout. and how it impacts the layout. To solve for this we've added an accessibility preference to give you control over the aforementioned complexity. We call it simplified layout mode. Whereas by default Slack is a nested set of tab panels with multi-column views When unable simplified layout mode we remove all that complexity in favor of a single column layout. You enable simplified layout mode by opening the preferences dialog which you can do via the Ctrl, Shortcut.

[00:05:55] Speaker 2: CTRL plus. Categories tab control.

[00:05:57] Speaker 1: Notifications tab selected, 14. Use the arrow keys to find the accessibility tab.

[00:06:01] Speaker 2: Down arrow. VIP tab selected 2 of 14. Down arrow. Navigation tab selected 3 of 14. Down arrow. Home tab selected 4 of 14. Down arrow. Appearance tab selected 5 of 14. Down arrow. Messages and media tab selected 6 of 14. Down arrow. Language and region tab selected 7 of 14. Down arrow.

[00:06:15] Speaker 1: Accessibility tab selected 8 of 14. Press tab, and the first button you'll find within the accessibility preferences is the button that enables simplified layout mode.

[00:06:24] Speaker 2: Tab. Accessibility property page display grouping. Simplified layout mode grouping. Turn on toggle button not pressed. Enter. Simplified layout mode enabled. Acme Incorporated grouping. Acme Incorporated navigation list.

[00:06:32] Speaker 1: Home 1 of 6 level 1. The first thing that's different about simplified layout mode is the navigation is designed to be a linear flow. You start by choosing your mode of working, and these are the same modes of working, home, DMs, activity, etc., previously represented as tabs.

[00:06:50] Speaker 2: NVDA plus tab. Homelist item focused read only 1 of 6 level 1. Down arrow. DMs 2 of 6 level 1. Down arrow.

[00:06:56] Speaker 1: Activity 3 of 6 level 1. For the purpose of this demo, I'm going to go back to home.

[00:07:00] Speaker 2: Home.

[00:07:00] Speaker 1: Home 1 of 6 level 1.

[00:07:02] Speaker 2: And I'll choose home by pressing enter. Enter. Home grouping. Channels and direct messages 3 view.

[00:07:06] Speaker 1: Level 2 accounting marketing current 1 of 46. After selecting home, focus is transitioned to the tree view containing the channels and direct messages for the current workspace. And this is the same tree view previously represented as a sidebar. I'm going to find the accounting marketing channel.

[00:07:21] Speaker 2: I'm going to select it by pressing enter. Channels and direct messages 3 view. Level 2 accounting marketing current 1 of 46. Enter. Channel accounting marketing grouping. Accounting marketing channel list. Level 1 Jennifer. Today is Alexa's last day. Let me know if you want to join us for her goodbye dinner 3.53pm 1 reaction.

[00:07:34] Speaker 1: Focus is transitioned into the view for this channel, and this is the same view that was previously represented as one of the two columns of the selected tab panel. And I want to pause here and emphasize three key points. First, rather than the entire interface on screen at once, in simplified layout mode, we render the same interface, just one section of it at a time. And so with less on screen, it's easier for blind people to perceive the boundaries of each section, and also there is less interface to hunt through. The second point is that in simplified layout mode, you navigate sequentially. And as you navigate, we populate the contents of a breadcrumb bar to help make this sequence clear. And you can find the breadcrumb bar after the history navigation when you're navigating via F6.

[00:08:20] Speaker 2: F6. History navigation toolbar. Slack menu button submenu. F6. Breadcrumbs toolbar.

[00:08:25] Speaker 1: Acme Incorporated button. So here we can find the workspace that we're signed into, which is Acme Inc.

[00:08:31] Speaker 2: NVDA plus tab.

[00:08:32] Speaker 1: Acme Incorporated button focused. The way of working that we chose, which was home. Right arrow. Home button.

[00:08:38] Speaker 2: And the current channel we've selected. Right arrow.

[00:08:40] Speaker 1: Channel accounting marketing button current. The last point about simplified layout mode is it offers you more predictability. There are always three sections of the layout, and therefore there are always three F6 stops. While simplified layout mode reduces the complexity and improves the predictability of the layout, there is one more optimization you can take advantage of for faster navigation or context switching, and that's using the quick switcher. The quick switcher allows you to navigate anywhere in Slack by name. Remember those modes of working? Home. DMs. Activity. Let's say you wanted to switch to activity. If you were doing that via the breadcrumb navigation, you would use F6 to navigate to the breadcrumb bar.

[00:09:20] Speaker 2: F6. History navigation toolbar. Slack menu button submenu. F6. Breadcrumbs toolbar.

[00:09:25] Speaker 1: Channel accounting marketing button current. Then use the arrow keys to find the button that represents the current workspace.

[00:09:30] Speaker 2: Left arrow. Home button.

[00:09:31] Speaker 1: Left arrow. Acme Incorporated button.

[00:09:33] Speaker 2: Select it by pressing enter. Enter. Acme Incorporated grouping. Acme Incorporated navigation list. Home 1 of 5 level 1. Down arrow.

[00:09:39] Speaker 1: Activity 3 of 5 level 1.

[00:09:40] Speaker 2: And then press enter to select activity. Enter. Activity grouping. All activity list. Alex and Software Dev Connect reacted with Boom 2 with file attachment. CSContentProjects.docs.

[00:09:48] Speaker 1: July 15, 2022 at 2 o'clock a.m. level 1. But if you know the name of where you want to navigate to, the quick switcher saves you from having to move through a sequence of navigation controls.

[00:09:57] Speaker 2: You open the quick switcher by pressing control K. C2. Jump to. Dialogue. Accounting marketing. 1 of 10 suggestions.

[00:10:03] Speaker 1: Query combo box expanded editable opens list blank. Focus is moved to an input in a dialogue, and the input is paired with a pre-populated list of suggestions.

[00:10:11] Speaker 2: Down arrow. Suggestions list. Accounting marketing has details 1 of 10. Down arrow.

[00:10:14] Speaker 1: Helping has details 2 of 10. And you can type the name of what you want to switch to. As you type the name of the first result, it's announced along with the total number of suggestions. So, for example, I want to switch back to the accounting marketing channel, so I'll type ACC.

[00:10:28] Speaker 2: ACC. Accounting marketing.

[00:10:30] Speaker 1: 1 of 10 suggestions. And you can either press enter to accept the first suggestion, or explicitly select an item from the list with the arrow keys and press enter.

[00:10:38] Speaker 2: I'm just going to press enter. Enter. Accounting marketing. 1 of 10 suggestions. Channel accounting marketing grouping. Accounting marketing channel list. Jennifer, today is at Alexa's last day. Let me know if you want to join us for her goodbye dinner 3.53pm.

[00:10:47] Speaker 1: 1 reaction level 1. And now the quick switcher has closed, and focus has been transitioned to the channel that I wanted to switch to, which is the accounting marketing channel. Next, I'm going to give you a tutorial of reading messages in Slack. So, I'm currently in the accounting marketing channel with focus in the message composer.

[00:11:03] Speaker 2: NVDA plus tab.

[00:11:04] Speaker 1: Message to accounting marketing edit focused multi-line blank. And as I mentioned, when you're in the composer, you can press the up arrow key to move focus from the composer to the list of messages that precede it. And when a message is focused, a summary of its content is announced.

[00:11:17] Speaker 2: Up arrow. Blank. Accounting marketing channel list. Jennifer, today is at Alexa's last day. Let me know if you want to join us for her goodbye dinner 3.53pm.

[00:11:23] Speaker 1: 1 reaction level 1. And you can keep pressing the up arrow key to read messages in the order that they were sent to the channel.

[00:11:29] Speaker 2: Up arrow. Johan, at Jennifer I'm going to be out on vacation next week. Would you mind covering my meetings?

[00:11:32] Speaker 1: 3.08pm. 4 replies level 1. Depending on your preferences, you might want to hear the content of a message in a different order. For example, by default, the date and time are announced after the message text.

[00:11:42] Speaker 2: NVDA plus tab. Johan, at Jennifer I'm going to be out on vacation next week. Would you mind covering my meetings? 3.08pm.

[00:11:47] Speaker 1: 4 replies list item focused read only level 1. You might want to hear the date and time after the sender, or not at all. You can configure which parts of the message anatomy you want to hear and the order you want to hear them in in the message verbosity preferences. As before, you'll open preferences by pressing control comma.

[00:12:03] Speaker 2: CTR categories tab control.

[00:12:05] Speaker 1: Notifications tab selected 1 of 11. Use the down arrow key to again navigate to the accessibility tab.

[00:12:11] Speaker 2: Down arrow. VIP tab selected 2 of 11. Down arrow. Navigation tab selected 3 of 11. Down arrow. Home tab selected 4 of 11. Down arrow. Appearance tab selected 5 of 11. Down arrow. Messages and media tab selected 6 of 11. Down arrow. Language and region tab selected 7 of 11. Down arrow.

[00:12:26] Speaker 1: Accessibility tab selected 8 of 11. And then press tab to navigate to the message verbosity section.

[00:12:32] Speaker 2: Tab. Accessibility property page display grouping. Simplified layout mode grouping. Turn off toggle button pressed. Choose how to display message actions grouping. Always show collapse menu doesn't support one click reactions. Radio button checked 1 of 2. Tab. Zoom grouping. You can also change the zoom level by pressing CTRL plus slash. 125% radio button checked. You can also change the zoom level by pressing CTRL plus slash. Tab. Alt text reminders grouping reminds me to add an image description on image uploads. Checkbox checked. Tab. Other display options grouping show previews when hovering over tabs. Checkbox unavailable not checked. Tab. Underline links to websites. Checkbox not checked. Tab. Automatically play animations in Slack. Checkbox checked. Tab. Keyboard grouping handy keyboard shortcuts button. Press up arrow in the empty message field to grouping. Move focus to the message list. The most recent message in the list will be selected. Radio button checked. Tab. Lists keyboard interactions grouping. Choose how you want to use your keyboard with lists. Data entry mode default. Use tab to move horizontally. Enter to move vertically between cells. Radio button checked 1 of 2. Tab. Screen reader grouping. Customize your screen reader experience. Message verbosity grouping. Choose which parts of a message to include and the order in which they are announced. Message components list. Center unavailable selected. Checked. Can be reordered but not turned off.

[00:13:29] Speaker 1: 1 of 15. This list enumerates all the components of a message spoken as part of the summary. You can disable some of them and reorder all of them. I might want to hear the date and time immediately after the sender. And so to do that I'll use the down arrow to find the date and time option.

[00:13:46] Speaker 2: Down arrow. Message unavailable selected. Checked. Can be reordered but not turned off. 2 of 15. Down arrow. Image alt text checked. 3 of 15. Down arrow.

[00:13:52] Speaker 1: Date and time checked. 4 of 15. Then to change the order of date and time I'll press tab.

[00:13:57] Speaker 2: Tab. Move up button.

[00:13:57] Speaker 1: Alt plus up. Move date and time up.

[00:13:59] Speaker 2: I can press the move up button if I want to move it up. Enter. Move date and time between message and image alt text.

[00:14:03] Speaker 1: In position 3 of 15. And as you heard every time I move something I get a confirmation of its new position. I want the date and time after the sender so I'm going to press the move up button again.

[00:14:13] Speaker 2: Enter. Move date and time between sender and message.

[00:14:15] Speaker 1: In position 2 of 15. Now if you want a preview of this new order you can use the tab key to navigate to the play preview button that follows the list.

[00:14:23] Speaker 2: Tab. Move down button. Alt plus down. Move date and time down. Tab. Play preview button. Enter. Slack bit at 3.51 p.m. Hello world. Image. Team photo. 3 reactions. 7 replies. 2 links. 1 attachment. Has draft reply. Pinned. Edited. Save for later. Also sent to the channel. In reply to. Anyone available for review.

[00:14:36] Speaker 1: Translation available. It's worth calling out 2 additional things. Next to the play preview button is a button for resetting these components to their default order.

[00:14:45] Speaker 2: Tab.

[00:14:45] Speaker 1: Reset to default button. And the second thing. The message verbosity settings apply to the current workspace allowing you to configure different verbosity settings for each workspace you're a member of. But you can also sync your settings across workspaces. Next to the reset to default button is a sync across workspaces button. Use it to apply your verbosity settings across all or a select number of your workspaces.

[00:15:09] Speaker 2: Tab.

[00:15:09] Speaker 1: Sync across workspaces button opens dialog. Lastly I wanted to demonstrate how you can remove some of the components from the summary. So for example let's go back and remove date and time from the summary. I'll use shift tab to move focus back to the list of components.

[00:15:24] Speaker 2: Shift plus tab. Reset to default button. Shift plus tab. Play preview button. Shift plus tab. Move down button. Alt plus down. Move date and time down. Shift plus tab. Move up button.

[00:15:32] Speaker 1: Alt plus up.

[00:15:33] Speaker 2: Move date and time up. Message components list.

[00:15:35] Speaker 1: Date and time check 2 of 15. As you navigate this list you're going to hear a check state announce. And you can toggle the check state by pressing the space bar. So to remove date and time from this list I'm going to press space. Not checked. And to get a preview of what messages will sound like without the date and time I'll go back to the preview button.

[00:15:54] Speaker 2: Tab. Move up button.

[00:15:54] Speaker 1: Alt plus up.

[00:15:55] Speaker 2: Move date and time up. Tab. Move down button. Alt plus down. Move date and time down.

[00:15:59] Speaker 1: Tab.

[00:16:00] Speaker 2: Play preview button. Enter. Slack bit. Hello world. Image. Team photo. Three reactions. Seven replies. Two links. One attachment. Has draft reply. Pinned. Edited. Save for later. Also sent to the channel. In reply to. Anyone available for review.

[00:16:10] Speaker 1: Translation available. And that concludes how to use the message verbosity settings. The next thing I wanted to demonstrate is the automatic announcement of new messages feature. When you are in a channel or direct message, by default Slack will announce new messages as they're delivered. The intention is to make Slack feel more conversational. Rather than have to move focus between the message list and the composer to read messages, you can simply type a message and listen to the responses. For example, I'm in a direct message with Jennifer. I'm going to ask her if she has anything to add to today's meeting agenda. Now it could easily be the case that you either miss or mishear a message after it was announced. To replay a message, press alt followed by the number of messages that you want to hear again. For example, if I want to re-hear the message that Jennifer just sent me, I can press alt plus 1. And that's it. That concludes this tutorial of the different configurations and features of Slack that you can leverage to make for a better experience of using Slack with a screen reader.