Tuesday, August 31, 2010

Blogging with Blogger and JAWS Screen Reader

Blogger is the blog creation software supplied by Google. You can access it at blogger.com though you'll notice that the domain name for your blog will be blogspot.com. Unlike WordPress.com (see my article, Accessibility Issues With WordPress.com, JAWS 11 & Internet Explorer 8), Blogger's web site is accessible to JAWS though its editor toolbar is not; some hotkeys are provided but they don't cover all of the functions.

Navigating Blogger Pages With JAWS

Using Blogger involves interacting with forms so you need to become proficient at knowing which cursor is active. Recall that the Virtual PC Cursor is usually on when the web page first displays; it allows you to tab between links and use the Navigation Quick keys. The other cursor that you'll typically use is the PC Cursor; it lets you tab between form controls and interact with them such as typing text into an edit box. Sometimes when you navigate to a form control, JAWS will automatically switch to forms mode whereby the PC Cursor is active. If not, enter forms mode manually by pressing the Enter key; you'll hear a sound when forms mode turns on and off. You may need to exit forms mode (and thus switch from the PC Cursor to the Virtual PC Cursor) to access static text or links on the page; do this by pressing Escape or NumPad Plus.
Navigation Quick keys are a letter that you press on the keyboard that moves you to the next element of that type on the page. So when I tell you to move to a Heading, press H; move to an Edit box, press E; move to a Button, press B; move to an image (or Graphic), press G.
Another navigation strategy is to display a list of page elements of a particular type. You can press any navigation quick key with the Insert and Control keys to display a list of that element. So to display a list of Graphics/images, press Insert Control G; for Buttons, press Insert Control B; for Edit boxes, press Insert Control E. The following elements are so frequently used that they have specific function key assignments:
  • display Links List: Insert F7
  • display Headings List: Insert F6
  • display Form Fields List: Insert F5
  • display Frames List: Insert F9

Creating Your Blog

The process for creating your blog requires fewer steps if you already have a Google account. If you do not, you'll be prompted to create one before creating your blog.
No Google Account
On the blogger.com home page, activate the "Create A Blog" link. Page 1 of 3 appears; it's entitled "Create Your Google Account". Go to the first edit box on the form, Email account (its label in the Forms List will be the text beneath, "(must already exist)." Type in an existing email address. Tab to the Retype email address field and retype it. Tab to the Enter a password edit box; type a password that is at least 8 characters long. Tab to the Retype password field and do so. Tab to the Display name edit box and type the name that will be used to sign your blog posts. Then tab to the Email notifications checkbox. Tab to the Birthday edit box (format is MM/DD/YYYY). Then tab to the Word Verification section.
Word Verification / Audio CAPTCHA
When you create a Google account or a blog, you will need to complete the Word Verification section. This requires you to complete a CAPTCHA i.e. enter the characters you see in a distorted image. There is an audio CAPTCHA that you can choose to do instead. Go to the Word Verification edit box and ensure that you are in forms mode. Then tab a graphic link labelled either "account/accessibility" or "Listen and type the numbers you hear." Press Enter and wait a few moments for the audio to play. The digits will be repeated twice. Once you've memorized them, return to the Word Verification edit box and type them in.
Tab to the Acceptance of Terms checkbox and press Spacebar to select. Tab to the Continue button/link and press Enter. You'll now be on your Blogger Dashboard page. Activate the "Create Your Blog Now" link; this will take you to the "Name your blog" page. Follow the instructions below for completing the Name Your Blog and Choose Template steps.
Google Account (but need to create your blog: sign up, name it, choose a template)
If you do have a Google account, go to the blogger.com home page, find the Username edit box, type in your Google username (your email address), then tab to the Password edit box, type it in, tab to Sign In and press Enter.
The "Sign Up for Blogger" page displays with a form that contains your email address and your name as read-only fields. Following that is an edit box for your Display name (the name used to sign your blog posts); go there and type it in. Then tab to the Email notifications checkbox. Tab to the Acceptance of terms checkbox and press Spacebar to select. Tab to the Continue link and press Enter. You'll now be on your Blogger Dashboard page. Activate the "Create Your Blog Now" link; this will take you to the "Name your blog" page.
Name Your Blog
The focus will be in the Blog title edit box so type the name you want at the top of your blog. Then tab to the Blog address (URL) edit box. Type something like your username (the only special character allowed is the hyphen); "blogspot.com" will be appended to the end so the web address will be <username>.blogspot.com. There is a link below this edit box called Check Availability that you can use; after activating it, the results will appear below the link so use the down arrow to read them. If you are signing up with an existing Google account, go to the Word Verification section and follow the instructions above for completing the audio CAPTCHA. Finally go to the Continue button/link and press Enter; this will take you to the "Choose a starter template" page.
Choose Template
This page consists of several images showing the appearance and layout of a variety of templates. You need to select one of these and then activate the Continue link; after this a page entitled "Your blog has been created!" appears. From here you can activate the Start blogging link to go to the New Post page in the Posting section; see below. To navigate the template graphics, start at the top by pressing H to go to the page heading, "Choose a starter template." Then press G to move to the next graphic. The first template graphic is selected by default; to choose another one, press Enter on it.

Signing In (after creating your blog)

On the blogger.com home page, go to the Username edit box, type in your Google username, then tab to the Password edit box, type it in and tab to Sign In. Press Enter to display your Dashboard page.


This page gives you access to the five main areas of the site: Settings, Edit Posts/New Post, Design, Monetize and View/Edit Profile. These are all links so use your Links List to access them. You can return to the Dashboard page by locating its link on any of the other pages.


Once you are logged in, activate the Settings link from any page. You'll be on the Basic settings page. Other types of settings (which you can get to via their link) are: Publishing, Formatting, Comments, Archiving, Site Feed, Email & Mobile, OpenID and Permissions. Each setting consists of a label on the left, a form control on the right and an optional description below the form control. The Form Fields list contains the following about each form control: label, control type, value. At the bottom of each settings page is a Save Settings button that you must activate before leaving the page to save any changes you make. To read the description that may appear below a form control, use the Form Fields list to move to the control. You'll likely be in forms mode; press Num Pad Plus to return to the virtual PC cursor, then press down arrow until you hear the description.


Once you are logged in, activate the Design link from any page. By default you'll be on the Page Elements page where you can add, arrange and edit the page elements that comprise your blog; their layout is displayed via rectangles appearing in rows and columns. There are 3 important links in the upper right: Preview, Clear Edits, Save.
Page elements that already have a content type assigned to them (e.g. Navbar, Header, Blog Posts, Followers, Blog Archive, About Me, Attribution) contain an Edit link while others contain an Add a Gadget link. In the Links List, you'll be unable to determine which Edit link belongs to which page element and where the Add a Gadget link is located on that page. So your best bet is to go to the top of the "editorframe" frame (press M) and press the down arrow key; the Edit link will follow the name of the page element. Activating both types of links causes a new window to open. Edit windows contain Save, Cancel and sometimes Remove buttons. Page elements can be rearranged by clicking and dragging so use the JAWS cursor (NumPad Minus to switch to JAWS cursor, arrow keys to locate page element, Insert NumPad Slash to lock left mouse button, arrow keys to move element, Insert NumPad Slash to unlock left mouse button and thus drop element into new position) or get a sighted user to help you with that.


The Posting section of your site contains four pages: New Post, Edit Posts, Edit Pages, Comment Moderation. The Dashboard's New Post button and the Posting link you'll find on other pages take you to the New Post page. The Dashboard also contains an Edit Posts link.
Form controls on a posting page consist of: text fields (Title, Labels), text area (your post; the name is Unlabeled1), links to change the editor type (Compose, Edit HTML), buttons (Publish Post, Save Now or Save as Draft). There is a Preview link (opens a new window). There is also a link called Post Options which causes 4 groups of radio buttons to display (Reader comments, Post date and time, Edit HTML Line Breaks, Compose Settings).
The visual editor (Compose) contains a tool bar above the post text area. Unfortunately this tool bar is not accessible with JAWS, even when navigating it with the JAWS cursor (most buttons are reported as "blank"). Hot keys exist for some of the functions and are listed on the Blogger Help page, Can I use keyboard shortcuts while posting?. With Internet Explorer 8, I was unable to get the following to work or they had other side-effects: Blockquote, Link, Preview, Publish Post. Also, I discovered that you can use Control + U to underline.
So unfortunately, using more than just basic formatting is going to require putting the editor into "Edit HTML" mode.

Edit Posts

The Edit Posts page lists your posts in rows. You can select one of the following links to filter which posts are displayed: All, Drafts, Scheduled, Imported, Published. By default, all posts are listed.
It's a bit challenging to locate your post for editing. The title of each post is preceded by an Edit link. Preceding that is a Checkbox. So one navigation strategy is to use X to move to the next checkbox and down arrow until you hear the post title, then Shift Tab to activate its Edit link. Or, tab to the Delete link to delete your post.
The checkboxes enable you to select multiple posts upon which to perform the following actions: Publish Selected, Delete Selected. These buttons appear below the list of all of your posts.

View Blog

Your Dashboard page contains a View Blog link. Once you are finished reading it, return to the Dashboard using Alt+Left arrow to go back a page. Your blog contains several headings that will ease navigation with the H navigation quick key or the Headings List (Insert F6). Your blog title is a level 1 heading, the date you published the post is a level 2 heading and each posting title is at level 3. Comments appear below the Comments level 4 heading. Following that section is the "Post a comment" level 4 heading; this section contains a text area, "Select a profile" list box, Post Comment button and Preview button.

No comments:

Post a Comment