DIY Testing

hands typing on keyboard with oversize letter labels

Test the content

  1. Ensure the writing is succinct and well organized.
  2. Break up long blocks of text into smaller chunks or lists.
  3. Check menus, links and headers for clarity.
  4. Review your content using the Content Accessibility Checklist.
  5. Check your content on a phone to ensure proper scaling.
  6. Run automated tests.
    1. For sites in the University's SiteBuilder platform, use the built-in accessibility checker.
    2. For public-facing sites that are already published, run a test in DubBot.
    3. WebAIM's WAVE plug in highlights content errors, offers explanations and suggests fixes. It also makes invisible elements visible (image alt elements, heading structure, etc), so you can see how screen readers interpret the page.
    4. Deque's AXE tool works similarly but provides feeback in a linear form, in a separate frame.

Test the design & code

  1. Using WAVE, check the Structure tab: 
    1. Do the headings form a logical outline, including visually hidden headings for critical non-content elements like the main navigation and search?
    2. Are there landmarks for key regions like the banner, navigation(s), main content and footer?
  2. In WAVE, check the Contrast tab to manually check colors the tool won't detect:
    1. Text on top of image backgrounds
    2. Hover and focus states on links and buttons
    3. Tooltips or validation errors in forms
    4. Color choices in charts and graphs, etc.
  3. Check your responsive design:
    1. Does the theme reflow cleanly down to 320px widths without undue horizontal scrolling, and up to 2560px widths without blurry images or overly long lines?
    2. Can the menu and other components be used via touch on a phone?
    3. Can users pinch-to-zoom on a phone? Never disable user-scalable.
  4. Either install Microsoft Accessibility Insights and run a full assessment, or perform manual keyboard testing: 
    1. Make sure your browser is configured to enable full keyboard access.
    2. Use the Tab key to advance through the page.
    3. Every element should clearly change on focus. The cursor change must be obvious.
    4. As you Tab, you should be able to reach every link, button and form item, and you should be able to Shift+Tab back through them in reverse. Make sure it works in both directions if elements show and hide on scroll.
    5. The order that items are highlighted when tabbing should match the order you read them -- left to right, top to bottom. Exceptions should be rare and logical (e.g., it might make sense for the "close" button in an alert to come after its content, even if it is at the top right).
    6. Pages with navigation before the content should have a "skip to main" link -- and clicking it should transfer focus to the content area.
    7. Any custom interactive components such as dropdowns, modals and slideshows should also respond to expected key commands, possibly including arrow keys, spacebar, enter and / or esc.
    8. If a button causes a modal to appear, focus should be moved into it, and be returned to the button when it closes. And focus should be "trapped" in the modal until the modal is closed, so that the cursor doesn't end up hidden beneath the modal with no way back into it.
    9. All this should work on the mobile / responsive design as well; be sure to test both.
  5. Request a test with us so we can test your site on our collection of assistive devices.