Sitecues tips and demo for screen reader users



Download 23.52 Kb.
Date29.01.2017
Size23.52 Kb.
#12155
Sitecues tips and demo for screen reader users

Last revised: 1/14/16


Overview


It is important to recognize that not every person can fully benefit from Sitecues. For example, someone who is totally blind will not directly benefit from page zoom and other visual enhancements provided by Sitecues. We always advocate for people with disabilities to use the most effective and appropriate assistive technologies. Therefore, we believe that people who are blind or have a severe visual impairment would benefit more from using a stand-alone screen reader or screen magnifier instead of Sitecues. When a screen reader user encounters Sitecues on a webpage, the following message is announced: “Sitecues zoom and speech tools; Sitecues assists users who do not have their own screen reader or magnifier.” This message helps reinforce our belief that each person should use the tool that is most appropriate for them based on their abilities and needs.

With that being said, any user has the ability to interact with Sitecues (i.e. demonstrate or teach the product) because it was implemented using universal design principles and accessibility best practices. Sitecues is tested with several popular screen readers including Window-Eyes, NVDA and JAWS to help verify a positive user experience. If you find any issues interacting with Sitecues using a screen reader, please let us know by sending an email to support@sitecues.com.


Tips for screen reader users

Web Browsers


While Sitecues is cross browser compatible, we currently recommend using Firefox and a Windows PC for the best screen reader experience. This recommended set of technologies is subject to change.

Keyboard commands


Sitecues has a number of features that can be triggered via keyboard commands. For example, you can increase the Sitecues zoom level by one increment with the Plus key. If you wish to issue a Sitecues keyboard command, you will first need to disable your screen reader’s browse mode or virtual cursor. Doing so, will allow the keyboard command to bypass your screen reader and be executed by Sitecues.

Sitecues graphical user interface


In addition to the Sitecues keyboard interface, there is also a graphical user interface (GUI) that provides access to all of the available features and options. A great deal of thought and effort was put into making the sitecues GUI fully accessible and usable with a screen reader.

Scalable Vector Graphics (SVG), JavaScript and the Accessible Rich Internet Applications Suite (ARIA) were used to create and deliver an accessible screen reader user experience. All aspects of the Sitecues GUI can be accessed with a screen reader directly without using browse mode or the virtual cursor.


Walkthrough of interacting with Sitecues using a screen reader


Below are step by step instructions that showcase how to interact with and demonstrate Sitecues using a screen reader.

Discovering the Sitecues badge


The Sitecues badge appears on webpages as a button. The Sitecues badge contains static images of the Zoom slider and Speech button and provides a call to action for users who want to customize the appearance of the page or have text read aloud. The exact location of the Sitecues badge is controlled by the web page author but in most cases it is positioned near the top in the header section.

Please use the following steps to navigate to the Sitecues badge. First, make sure you are positioned at the top of the web page (Control-Home) and have browse mode enabled (Forms mode off). Next, navigate to the Sitecues badge using your screen reader’s next button command. Depending on the position of Sitecues on the page, you may need to press the next button command more than once.

Once you reach the Sitecues badge, your screen reader will announce: “Sitecues zoom and speech tools; Sitecues assists users who do not have their own screen reader or magnifier; button collapsed”.

For those who are not familiar with your screen reader’s quick key navigation commands, you can also navigate to the Sitecues badge using other techniques such as moving down the page with Down Arrow or moving through the interactive elements on the page with Tab.


Opening the Sitecues main panel


You can open the Sitecues main panel by activating the badge button via the keyboard or by hovering over it with the mouse pointer. When you activate the badge, the Sitecues main panel will open and expand 16 times in size increasing the visibility of its functions. Once the main panel is opened, you can interact with its controls.

To open the Sitecues main panel via the keyboard, activate the Sitecues badge button with Spacebar or Enter. If the main panel doesn’t open, try turning off browse mode/virtual cursor before activating the badge button. After activating the badge, the main panel will open and focus will be placed on the Zoom slider. Your screen reader should announce the control’s name, value and type (e.g. Zoom 1.3X slider).

Since focus is now on an interactive control, most screen readers will automatically turn off browse mode/virtual cursor. You can close the main panel and return focus to the web page at any time by pressing ESC.

Orientation to the Sitecues main panel


Take a quick Tab tour to discover the three controls on the Sitecues main panel (i.e. Speech checkbox, More Features button, Zoom slider). Each control’s name and value (if applicable) will be announced. A more detailed explanation of each control is provided below.

Zoom slider


The Zoom slider can be used to adjust the zoom level for all of the pages on the current website and the zoom level will be remembered by Sitecues the next time you visit the website. As you increase the zoom level, several other helpful features are enabled automatically. These include mouse size, focus enhancements and automatic horizontal page scrolling. The mouse size grows larger and the focus enhancement becomes stronger as the zoom level increases.

With browse mode/virtual cursor off, navigate to the Zoom slider and use the left and right arrow keys to adjust the zoom level. The value of the Zoom slider should be announced as it changes. Be ready for the audible cue that is spoken by sitecues once you increase the zoom level past a certain threshold. The message should relate to using your Spacebar to zoom in on content even further. These audible tips are designed to help expose a new user to the important functions available in the product.

Please note that you can also adjust the zoom level using simple keyboard commands. The Plus and Minus keys can be used to adjust the zoom level on the fly without having to open the Sitecues main panel.

Speech button


The Speech check box can be used to turn the text-to-speech capabilities of Sitecues on and off. Tab to the Speech checkbox and check it with Spacebar. Sitecues will provide an audible cue that instructs the user to press Spacebar to zoom in even more on highlighted content and have read it aloud.

You should find that the speech synthesizer used by Sitecues is human sounding and pleasant to listen too. Sitecues supports numerous languages and can switch languages on the fly.

Sitecues is multi lingual capabilities and supports automatic language detection.

Please note that you can also toggle speech on and off using the keyboard command Alt-Apostrophe.


More Features button


The More Features button is the last element to cover on the main panel. This button can be used to open the Sitecues secondary panel. The secondary panel contains additional Sitecues features, options and tools. To open the secondary panel, simply Tab to the More Features button and activate it with Spacebar or Enter. The Sitecues secondary panel will be explained in more detail in the next section of this resource.

Orientation to the Sitecues secondary panel


The secondary panel contains five buttons: Tips, Settings, Rate us, About and Sitecues main panel. When the secondary panel is opened, focus should automatically move to the first item Tips. Take a Tab tour to discover all of the available buttons on the secondary panel.

The Tips, Settings, Rate us and About buttons each open a corresponding tap panel with additional options. These tab panels will be explained in the next few sections of this resource. If you would like to return to the Sitecues main panel where you can find the Zoom slider and Speech button, press ESC or activate the Sitecues main panel button.


Tips


Tips provide helpful getting started instructions for new Sitecues users. Tips are divided into the following categories: Zoom, Highlight, Lens, Speech and More. Activate the Tips button in the secondary panel to display the Tips tabs widget. Focus should move to the first tab, Zoom, automatically.

Press Right or Left arrow to navigate through the available tabs in the Tips tabs widget: Zoom, Highlight, Lens, Speech and More. When you navigate to a tab, it will get activated and its associated tab panel contents will be displayed.

Once you land back on the Zoom tab, press Tab repeatedly until you reach the Zoom tab panel contents. The panel’s contents should be voiced automatically. You can use this same technique to access tips in the other tabs. Press ESC to close the Tips panel and focus will return to the Tips button on the secondary panel.

Settings


You can customize the size and appearance of the mouse pointer as well as the colors on the web page using the Settings tabs widget. Tab to the Settings button on the secondary panel and activate it to display the Settings tabs widget. Focus should move to the Colors tab automatically.

Press Right or Left arrow to move through the available tabs in the Tips tab panel: Colors and Mouse. These tabs represent the different categories of settings that can be customized.

Once you land back on the Colors tab, press Tab repeatedly until you reach the Colors tab panel content. The Colors tab panel contains four buttons: None, Warm, Bold and Dark. Tab to the Dark button and activate it with Spacebar. All of the colors on the current web page will be adjusted to a Dark theme with reverse contrast. Please note that Sitecues will not invert the colors of images which is a really cool and innovative feature!

After choosing a color theme, two slider controls will appear below the color buttons: intensity and text color. These options are available to allow the user to further customize the currently selected color theme. You can Tab to these sliders and use the Left and Right arrow keys to adjust the values. Please note that the values of the sliders are announced as numbers which may make it difficult for a blind user to identify the visual changes being made.

Return focus to the Colors tab using Tab or Shift-Tab and press Right arrow to focus and activate the Mouse tab. This will display the Mouse tab panel which contains two slider controls, one for mouse size and one for mouse color. Your focus should move automatically to the Size slider. You can use the Left and Right arrow keys to adjust the value of the Mouse size slider. Press Tab to move focus to the Mouse color slider. You can use the Left and Right arrow keys to adjust the value of the Mouse color slider. Please note that the current value of the slider is announced as numbers which may make it difficult for a blind user to identify the visual changes being made to the mouse pointer.

Press ESC to close the Settings panel and focus will return to the Tips button on the secondary panel.


Rate us


You can also provide Ai Squared with feedback and rate your satisfaction with sitecues using the Rate us panel. This panel contains a multi-line edit field for feedback, links for rating sitecues on a five star scale and a Send button to submit your feedback and/or rating. Tab to the Rate us button on the secondary panel and activate it to display the Rate us panel.

Your focus will move automatically into the Tell us something multi-line edit field. Type any feedback you may have into this field. Press Tab and your focus will move into the Rating group of buttons. Tab until you reach the 5 star button and activate it. You should receive a verbal confirmation that the button has been pressed. Press Tab and your focus will move to the Send button. Activate the button to submit your feedback and rating. A thank you message will be displayed and announced.

Press ESC to close the Rate us panel and focus will return to the Tips button on the secondary panel.

About


You can find a link to the Sitecues website as well as another entry point to the Rate us tab panel in the About panel. This panel contains two paragraphs of text, a link to the Sitecues website and a Rate us button. Tab to the About button on the secondary panel and activate it to display the About panel. The contents of the About panel should be voiced automatically when it is opened.

If you would like to visit the Sitecues website, activate the sitecues.com link. If you would like to return to the Rate us panel, Tab to and activate the Rate us button.

Press ESC to close the Rate us panel and focus will return to the Tips button on the secondary panel. Press ESC again to close the secondary panel and return to the main panel. Press ESC one last time to close the sitecues panel and return focus to the underlying webpage.

Demonstration of using Sitecues to read a web page


Now that you have an orientation to the Sitecues badge and panel, let’s turn our attention to using Sitecues to interact with the page content. At this point, it is recommended that the primary screen reader be closed or disabled. This is because it can be difficult to use two screen readers at once and if this isn’t done, you will get double speaking and other conflicts that are not desired.

First, we have to find a way to select some content on the page using the keyboard as this is the first step in reading or zooming in on web page content. Mouse users can hover the pointer over web page content to highlight an area of interest.


Highlighting and reading content


Please use the following instructions to highlight and read web page content with the keyboard:

  1. Move to the top of the page and make sure your focus is not on the Sitecues button.

  2. After increasing the zoom level with the Plus key, press Spacebar. Sitecues will try to highlight the first piece of content it thinks is part of the main content on the page. Note: If the web page author uses headings and ARIA landmarks, it will be easier for Sitecues to accurately identify the main content on the page.

  3. Once the content is highlighted, press SHIFT to have it read aloud.

  4. If you are reading an article or blog, press SHIFT-DOWN to make Sitecues highlight and read the next block of content. Repeat this step as needed until you reach the end of the text passage.

Unlike traditional screen readers, Sitecues allows you to navigate spatially around the page. For example, if the page has three columns of content, you can press Left and Right Arrow to navigate across these three columns. This navigation technique will be beneficial for those who can see the overall layout of the page and want to move the highlight to a specific area.

Heading navigation


Sitecues also enables heading navigation and reading via the keyboard. Please follow the steps below to navigate and read by heading:

  1. Make sure you are on a page that contains multiple headings. After increasing the zoom level on the page with the Plus key, press H. Sitecues will highlight the first heading on the page.

  2. Press SHIFT to read the text of the highlighted heading.

  3. Press H again to navigate to the next heading.

  4. Press SHIFT to read the text of the highlighted heading.

  5. Press SHIFT-H to move to the previous heading.

  6. Press SHIFT to read the text of the highlighted heading.

Using the Lens


The Lens won’t enhance the reading experience for a user who is blind but it is important that everyone understands this feature and its benefits. Most notably, the Lens provides a distraction reduced reading experience that can boost reading rates and comprehension. This is done by enlarging, auto-wrapping and displaying the highlighted text in a foreground window, while dimming the rest of the web page content in the background.

Please follow the steps below to practice using the Lens to display and read highlighted web page content:



  1. Make sure zoom and speech are enabled.

  2. Go to the top of the page with CONTROL-HOME.

  3. Press H to highlight the first heading on the page.

  4. Press Spacebar to display the highlighted content in the Lens and have it read aloud.

  5. Press Down arrow to place the next logical block of content into the Lens and have it read aloud.

If you are reading a long article, you could repeat step #5 until you reach the end. This keyboard based approach of consuming lengthy passages of text using the Lens can provide a delightful reading experience for many different types of users.

Other notable keyboard commands


  • Control – silences speech temporarily

  • Alt-Quote – turns speech on and off

  • Alt-0 – turns off zoom and speech


Download 23.52 Kb.

Share with your friends:



The database is protected by copyright ©ininet.org 2024
send message
    Main page
next section
most effective
exact location
following steps
current value
steps below
different categories
following instructions
last element
main content
highlighted text