SUMMARY:

When testing with your screen reader, use the same keyboard navigation strategies that you used in the previous section (TAB, ENTER, SPACE, and ARROW KEYS). This time, listen to how  the  screen  reader interprets the page as you navigate with the keyboard.

WCAG SUCCESS CRITERIA & CHECKLIST FOR KEYBOARD USERS

LINKS – DESCRIPTIVE TEXT

One of the ways a screen reader user navigates a page is by using the TAB key to skip through the links on the page, or by bringing up a list of links. Links should be descriptive so that a user can easily determine where they will go even when taken out of context.

• Links are descriptive & concise, without generic text such as “click here” & provides information about the link destination where the user will be taken to if the link is clicked
  ☐ Yes ☐ No
• Distinguishing information is placed at the beginning of links
  ☐ Yes ☐ No
• The texts of links are meaningful & intuitive
  ☐ Yes ☐ No

Example

View the IT Accessibility Website instead of click here

• If a link is already visited by user earlier, screen reader should say visited link & its name
  ☐ Yes ☐ No
• The website should always highlight a link with blue color and underline the link, to confirm its a link
  ☐ Yes ☐ No

LOGICAL HEADINGS  

Screen reader users also navigate content using headings. Headings allow them to jump to a specific section instead of having to listen to the entire page.

• Headings are used logically to provide structure and indicate importance of the content
  ☐ Yes ☐ No
• Heading levels are not skipped
  ☐ Yes ☐ No
• Pages can be navigated using headings
  ☐ Yes ☐ No

Example for section headings

Use headings step-wise

Example: H1, H2, H2, H3, H4, H2

SKIP NAVIGATION LINKS

A skip navigation link is helpful for users who don’t want to work their way through all the links on the page before getting to the main content. This link does not have to be visible on the page, but it should be listed first in the tab order.

• Skip navigation links are present
  ☐ Yes ☐ No
• Skip links work as intended using JAWS, skipping to the main content of the page
  ☐ Yes ☐ No

LANDMARKS

Landmarks are the way to mark the areas of a webpage for the keyboard and assistive technology users (screen readers). By using landmarks we identify the organization and structure of the webpage. Landmarks should provide the same structure programmatically of the webpage as it provides visually.

To understand landmarks, visit https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/general-principles.html

IMPACT: 

• Keyboard only & screen reader users can skip past repetitive navigation links using skip-to-main-content
• Screen reader users can navigate and understand the layout of the page

IMAGES

Any non-text element needs a text description that screen reading software can read aloud to the listener. It should describe the purpose of the image in context. If an image conveys no important information necessary for the user to understand the page content, it can be considered a decorative image because its only function is to enhance the appearance of the page. The main purpose of alt-text for images is to provide a description that can be read out for non-visual users.

• ☐ N/A (There are no images)
• Purely decorative images have null alternate text (alt=””) so that they can be ignored/skipped by screen readers
  ☐ Yes ☐ No
• All meaningful images uses strong & descriptive alternate text
  ☐ Yes ☐ No
• All navigation buttons have descriptive alternate text
  ☐ Yes ☐ No

CHECKBOXES

• Each checkbox has Role ARIA [Accessible Rich Internet Applications] attribute defined, which a screen reader can use
  ☐ Yes ☐ No
• Each checkbox has Checked or Unchecked ARIA attribute defined, which a screen reader can use
  ☐ Yes ☐ No
• Each element can have ‘aria-label=”spelling to pronounce” so that screen readers can read it as you have mentioned it in aria-label otherwise screen readers can read that complex word in other pronunciation way which may not go with user understanding
  ☐ Yes ☐ No

For more details, visit https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/

MULTIMEDIA

Includes features such as videos, audio files, calendars, flash content, and photo carousels.

• ☐ N/A (There are no multimedia)
• Multimedia controls have alternate text
  ☐ Yes ☐ No
• Video or audio do not start to play automatically, only when triggered by the user
  ☐ Yes ☐ No
• You hear what you expect when selecting controls
  ☐ Yes ☐ No
• Using the controls is intuitive
  ☐ Yes ☐ No
• Videos have audio descriptions available for any information that is only conveyed visually
  ☐ Yes ☐ No

FORMS

• ☐ N/A (There are no forms)
• Form fields have descriptive labels so screen reader can read the same aloud
  ☐ Yes ☐ No
• Is the form or web-page headings read out properly by screen reader
  ☐ Yes ☐ No
• Appropriate descriptive labels are present and read by screen reader when tabbing through form fields
  ☐ Yes ☐ No
• You can reach out to all the fields in the form, fill out the forms and submit them successfully with screen reader
   ☐ Yes ☐ No
• Buttons are labeled and read correctly by screen reader
  ☐ Yes ☐ No
• If a required field is left blank, screen reader reads the error text and navigates dialog buttons
  ☐ Yes ☐ No
• When an error dialog is dismissed, screen reader automatically returns to the empty field
  ☐ Yes ☐ No
• If a form has auto suggestions listed, then is the screen reader detecting the same
  ☐ Yes ☐ No
• Is the screen reader reading out the items count on shop cart icon
  ☐ Yes ☐ No
• Is the screen reader reading out the number of items count inside a drop-down (eg. size of a T-shirt drop-down box)
  ☐ Yes ☐ No
• Is the screen reader reading out the position of the item highlighted in the drop-down along with total count of items present inside a drop-down (eg. 5th item selected out of 10 items in the expanded drop-down box)
  ☐ Yes ☐ No
• Is the screen reader reading out that the drop-down menu is closed after the user chooses an item in the drop-down box (eg. size ‘L’ is selected in the T-shirt drop-down box)
  ☐ Yes ☐ No
• The forms (sign up form, login form, payment form etc) should have auto-suggestions listed, to speed up the process of user data entry
  ☐ Yes ☐ No
• The email field in a form submission for a mobile app user should pop up the keypad which is relevant for email entry such as keypad includes @ symbol, . symbol
  ☐ Yes ☐ No
• The phone number field in a form submission for a mobile app user should pop up the keypad which is relevant for phone number entry such as numeric keypad, symbols like + * # for international number entry  
            ☐ Yes ☐ No
• The search field in a form submission for a mobile app user should pop up the keypad which is relevant for quick search results such as keypad includes GO button
  ☐ Yes ☐ No
• Screen reader recognizes and reads the math or other content special symbols (formatted using MathML, MathJax, LaTeX)
  ☐ Yes ☐ No
• If your site has information that requires a plugin to view it, direct people to the appropriate plugin

Example:

Adobe Acrobat Reader is required to view this PDF