Take Control of Web Pages with Flexible Web

Frequently, you will encounter Web pages that contain a lot of excess content which can make it difficult to locate the actual information you want, or interrupts the flow when reading. For instance, many sites contain advertisements which can be troublesome for JAWS users as they disrupt the reading order of surrounding content.

Flexible Web enables you to take more control of Web pages by allowing you to quickly find the information you are looking for, as well as hide content that interrupts the reading experience. You can hide sections of content, such as frames containing advertisements or other types of unnecessary info, for a smoother reading experience. In addition, you can specify where JAWS begins reading on a page in order to quickly access the most important material. For instance, you may frequent a news website where the main text of articles always starts with a level 2 heading.

Starting Flexible Web

To use Flexible Web, do the following:

1. Open a web page you want to customize in Edge, Chrome, or Firefox.
2. Move the Virtual PC Cursor to the page element you want to hide, or from where you want to start reading when the page first loads.
3. Activate the Flexible Web wizard by pressing the layered keystroke INSERT+SPACEBAR, followed by X. Alternatively, press INSERT+F2 to open the Run JAWS Manager dialog box, then choose Flexible Web.

Temporary Customization

Through several easy-to-follow steps, The Flexible Web wizard that opens provides you with two options:

• Hide
• Start reading at the selected element

The wizard then guides you through the process of creating a temporary customization by giving you various choices about the selected element and how you want to hide it or from where exactly to start reading. Once the customization has been made, it is immediately applied to the page. For instance, if you choose to hide all frames containing advertisements, you will not see any advertisements when navigating the page after making this temporary customization.

If you are not happy with how a customization is working, you can open the Flexible Web wizard to undo the last customization you made. When you return to the page, you can choose a different element or the same one, and then reactivate the Flexible Web wizard to retry the customization again perhaps with different criteria. For example, in the case of hiding those advertisement frames mentioned earlier, you probably want to hide all of them, not just the first one on the page. The wizard will provide you with choices about whether to hide just the first one or all of them.

Saving Rules

You can create as many customizations for a page as you want. Once you have created one or more customizations, you can save them as a rule, which is applied every time you load the particular page or site. To indicate that a rule has been applied to a page, JAWS plays a sound after the page loads. Rules can be applied to the current Web page, entire Web site, or globally for all Web sites. Otherwise, customizations are only temporary and are lost as soon as you navigate away from the current Web page or close the browser. If you have made temporary customizations and you attempt to navigate to another page or close the browser, a dialog box opens asking if you want to save your customizations as a rule.

Practice with Flexible Web

EXERCISE: Open the Sample News Page and practice with Flexible Web using the procedures below.

Create a Temporary Flexible Web Rule

First, try reading through the page on your own. Notice the following:

• There are typical navigation links across the top of the page that screen reader users must first read through.
• Next, there is a paragraph of text, followed by four frames. These four frames are inline frames, and contain links to several common social media websites. For each, you hear the contents, including a link and some text. Screen reader users must traverse all four frames to get to the main content of the page.
• Take a look at the frames on the page with the JAWS list of frames, INSERT+F9.
• After the four frames is a separate section on the page called a division. Within this division is an advertisement graphic link. Again, screen reader users must navigate through this advertisement to get to the main content of the page. You can press the navigation quick key Z to move from one division to another on a Web page, or press INSERT+CTRL+Z to get a list of divisions.
• Finally, after pressing DOWN ARROW quite a few times on this page, you arrive at the level two heading for Flexible Web, which is where the main content of the page begins.

Now, let's use Flexible Web to hide the social media frames and the advertisement.

1. First, move back to the top of the page, and then press M to move to the first frame on the page.
2. Now, use the layered keystroke to start Flexible Web, INSERT+SPACEBAR followed by the letter X. The initial page of the Flexible Web wizard opens.
3. Press ENTER to activate the Next button. The Choose an Action page of the Flexible Web wizard opens. Focus is on the first of two radio buttons, Hide an Element.
4. That is exactly what you want to do in this case, so press ENTER to activate the Next button. The Choose an Element page of the Flexible Web wizard opens. Focus is in a list view containing the following elements:
   • Graphic Twitter
   • Link Twitter
   • Frame TwitterPageIFrame.html
5. Since we want to hide the entire frame, press DOWN ARROW to select the Twitter frame and press ENTER to activate the Next button. The Choose a Customization page of the Flexible Web wizard opens. Focus is in another list view with several items available:
   • Hide frame 1 from the top with text: "Twitter"
   • Hide all frames with text: "Twitter"
   • Hide frame 1 from the top
   • Hide frame 3 from the bottom
   • Hide all frames
6. For now, just press ENTER to activate the Finish button. The Flexible Web wizard closes, and focus returns to the Sample News page.

Try navigating by frames now by pressing the navigation quick key M. You should now find only three, the Facebook, Instagram, and LinkedIn frames.

Saving a Flexible Web Rule

Don't try this right now, but if you attempt to close the Sample News Page at this point in the exercise without saving the rule you created, a dialog box appears that gives you a chance to save the new rule.

1. Press INSERT+SPACEBAR, followed by X to open the Flexible Web wizard now, while you still have a temporary customization in place. The "What would you like to do?" dialog box opens, with more choices, including:
• Create a new customization
• Retry Hide frame 1 from the top with text: "Twitter"
• Undo Hide frame 1 from the top with text: "Twitter"
• Save temporary customizations as a rule
• View or change where rules apply (unavailable until you have saved rules first)
• Enable Flexible Web check box, checked
2. Choose the "Save temporary customizations as a rule" radio button and press ENTER. The Save Temporary Customizations dialog box opens. Focus is in the Rule Name edit box.
3. Type a name for this rule, for example, Hide Twitter Frame.
4. Before you activate the Finish button, press TAB to explore the other controls in this dialog box. The next control is the Customizations list box. Rules that are applied to this Web page have a check box next to them, and the check box is selected. Use this list to review the customizations which will be included in this rule. Use the SPACEBAR to clear the check boxes for any customizations you do not want to include.

NOTE: Remember to press INSERT+F1 on any control in the Flexible Web Wizard dialog boxes to get screen sensitive help for any item.

5. Press TAB to move to the next control. Use this combo box to choose which pages this rule applies to. You can apply the rule to the current page, current site, or all sites. For the purpose of this exercise, choose current page.
6. Press ENTER to activate the Finish button. The dialog box closes, and the rule is now set.

Rename or Delete a Flexible Web Rule

To rename or delete a Flexible Web rule, do the following:

1. Open the web page that has a rule and then press INSERT+SPACEBAR followed by X. The Flexible Web dialog box opens. Focus is on the Create a New Customization radio button.
2. Press DOWN ARROW to move to the View or Change Where Rules Apply radio button, and then press ENTER to activate the Next button. The View or Change Where Rules are Applied dialog box opens. Focus is in the tree view.
3. Press TAB to move to the Rule list view, and then use the ARROW Keys to select a rule.
4. To rename a rule, press F2 and edit the text.
5. To delete a rule, press the DELETE key.

More Practice with the Sample News Page

EXERCISE: Open the Sample News Page and create a rule that hides ALL frames on this page.

1. First, move back to the top of the Sample News Page, and then press M to move to the first frame on the page. In this case, it should be the Facebook frame, since we hid the Twitter frame in an earlier exercise.
2. Now, use the layered keystroke to start Flexible Web, INSERT+SPACEBAR followed by the letter X. The initial page of the Flexible Web wizard opens. Focus is on the Create a New Customization radio button.
3. Press ENTER to activate the Next button. The Choose an Action page of the Flexible Web wizard opens. Focus is on the first of two radio buttons, Hide an Element.
4. Press ENTER to activate the Next button. The Choose an Element page of the Flexible Web wizard opens with focus in a list view of available elements. Press DOWN ARROW to select the Facebook frame.
5. Press ENTER to activate the Next button. The Choose a Customization page of the Flexible Web wizard opens. Focus is in another list view with several items available.
6. Choose Hide All Frames in the list, and then press ENTER to activate the Finish button.

EXERCISE: Open the Sample News Page and create a rule that hides the advertisement in the division on this page.

1. First, move back to the top of the Sample News Page, and then press Z to move to the division on the page, which is where the advertisement is.
2. Now, use the layered keystroke to start Flexible Web, INSERT+SPACEBAR followed by the letter X. The initial page of the Flexible Web wizard opens. Focus is on the Create a New Customization radio button.
3. Press ENTER to activate the Next button. The Choose an Action page of the Flexible Web wizard opens. Focus is on the first of two radio buttons, Hide an Element.
4. Press ENTER to activate the Next button. The Choose an Element page of the Flexible Web wizard opens with focus in the list view of elements that make up the advertisement. Press DOWN ARROW to select the div element.
5. Press ENTER to activate the Next button. The Choose a Customization page of the Flexible Web wizard opens. Focus is in the list view with several items available.
6. Choose Hide Div 1 from the top with id="ad1" in the list, and then press ENTER to activate the Finish button.

EXERCISE: Open the Sample News Page and create a rule that moves focus immediately to the heading level two, Flexible Web.

1. First, move back to the top of the Sample News Page, and then press H to move to the heading level two, Flexible Web, on the page.
2. Now, use the layered keystroke to start Flexible Web, INSERT+SPACEBAR followed by the letter X. The initial page of the Flexible Web wizard opens. Focus is on the Create a New Customization radio button.
3. Press ENTER to activate the Next button. The Choose an Action dialog box opens. Focus is on the Hide an Element radio button.
4. Press DOWN ARROW to choose Start Reading at an Element, and then press ENTER to activate the Next button. The Choose an Element page of the Flexible Web wizard opens. Focus is in the list view with the heading selected.
5. Press ENTER to activate the Next button. The Choose a Customization dialog box opens. Focus is in a list view of choices.
6. Choose the item in the list you want to use for the rule. In this case, let's choose Start at heading level 2 1 from the top, and then press ENTER to activate the Finish button.

Remember to save the rule. If you forget, JAWS will remind you when you try to close the page or when another page tries to load in the same browser window. Now, whenever this page opens you hear the sound indicating the page has Flexible Web rules, and focus is placed immediately on the first heading level two on the page.