Useful Tools and References for Manual Testing
Pre-testing Guidance
  • Review your website, taking note of content displayed: Menus, images, multimedia, slideshows/carousels, and mouse-over/hover behavior. 
  • Determine pages to be tested on your website. 
  • Increase zoom in your web browser to 400%. Make sure that there is no loss of content or functionality even at this level of magnification.
Testing Guidance
  1. Navigate the site by keyboard only, both with and without a screen reader running. Look for: 
    • A clear and consistent visual indicator of the current item in focus.  Tip: Chrome and Safari (Mac) include a default blue outline around the item in focus, but can be overridden by website styling. Developer Recommendation: use the same styling and focal patterns across all browsers when navigating with keyboard. Logical ordering as you navigate through the page.  Tip: The ANDI tool can help by providing a visual display of the navigational elements and their tab order on the page.  The ANDI tool can also highlight issues with logical ordering of headings (h1 should precede an h2, etc.). Skip Navigation: As you tab through a website the first item you should reach is a “Skip to Content” link (or similarly named item) which is hidden until you navigate to it.  Test that pressing “Enter” or “Return” on the item will refocus your browser to the content section of the web page, and your next tab forward is to the first navigation element in the content section. Menu Navigation: As you tab through the menu items, are you able to reach sub-menus and all items in those sub-menus?  
      • Can you select items in a menu?  Can you visually see the item that is selected?  Can you open sub-menus via the keyboard?  Is it clear how to open them or do they open automatically? Can you exit the menu via the keyboard alone? Does the menu automatically close when the last menu item is reached, or is there clear guidance on how to close the menu? 
      Forms: 
      • If multiple form fields are present is there a consistent and logical tab order for the form fields and labels  Is the cursor displayed when a form field is in focus? Can you submit the form via keyboard alone? 
      Multimedia, Carousels, Widgets, Maps: 
      • Can you navigate and control the items with the keyboard as you would with a mouse? 
    • Multimedia:
      • Are the player controls available and usable to pause, play, mute, etc. the multimedia?  
    • Carousels:
      • Can you navigate through the items in the Carousel and select the items in the Carousel? 
      • If there are mouse-over behaviors or additional text displayed when an item is displayed, does the same occur when navigating with a keyboard? 
    • Widgets:
      • Can you interact with all controls contained within the widget?  For example, if a widget controls the results returned from a news feed by allowing the user to select categories of interest, or items in a date range, can all of those controls be interacted with via the keyboard? 
      • When you select items in the widget is the focus retained on the item selected? 
    • Maps:
      • If a map is being used to provide directions to a location, are text based directions are also included? 
      • If embedding a Google map, please follow this guidance. 
    • Were you able to navigate via keyboard to all items on the page which you could otherwise click on with a mouse? 
    • Is there a “return to content” link as you approach the end of the page? When used, does it return focus to the top of the page, and is the next item you can tab to the first element in the content section? 
  2. Images
    • Inspect the image to confirm that an alt-text description is included.  Please see this page for alt-text additional guidance / The ANDI tool can identify images where an alt-text description has not been included 
    • Does the description accurately describe the contents of the image? 
    • Is the image simply decorative? Alt tag can be empty. 
  1. Multimedia (Video/Audio)
    • Are there captions and/or a transcript available for video? 
    • If it is an audio only file, is there a transcript?
  1. Color Contrast
    • The WAVE and ANDI tools can help identify content where color contrast is not sufficient.   
    • Compare color contrast manually where text is displayed on top of a static image or a series of rotating images.  
  1. Tables
    • Are you only displaying data in tables, and not using them for page layout? 
    • Is the first row in all tables marked up as a header row? 
  1. Responsive / Zoom in on the page to 400%
    • Did the page adapt to a mobile view? 
    • Is all meaningful content present? 
    • Re-evaluate the above criteria using the mobile view, giving particular focus to navigation. 
    • Can you access the website on any size device? 
  1. Device based accessibility tools

Questions?  

Please contact [email protected] with questions, comments, or concerns.