Skip to Main Content
Warning!

This browser is not supported by the Playbook.

You should switch to a supported browser. Learn more

Toolkit
Toolkit

Web Resources

LSC recommends the following tools and resources for addressing the opportunities identified in the Statewide Website Assessment project.

Be a Good Tour Guide

Build a framework of user-centric workflow-based experiences that help pro-se litigants identify their legal issue, receive education, and then complete a legal form or find legal help.


Design With a Purpose

Improve visual and interaction design to enhance usability.

Create logical header structure for page templates

  • Tota11y is an automated tool to check sites for appropriate heading levels. Once installed as a browser extension, go to the page you want to test, click on "tota11y" in your bookmarks bar, then click on the sunglasses in the bottom left corner of the browser. With tota11y, you can test a number of features and functions such as heading levels, alt-text on images, and contrast ratio.
  • Iconography page: The icons used in the design concepts offer a potential starting point for creating a system of icons.
  • Design Concepts: View the design concepts to see how iconography is used consistently throughout an experience to create familiarity and enhance usability.
  • Legal Services of Northern California: For an example of how a legal aid website leverages visual design and iconography to enhance usability, see the new legal aid site for Northern California.
  • See online icon libraries for an examples of updated icons that apply style consistently.

Provide a Robust Search Feature

Enable users to search for content as a way to navigate the experience.

  • Reference a mobile design pattern library (e.g., Pttrns) for design inspiration for components such as navigation, search, filters, libraries, etc.
  • Consult the following websites for examples of strong search functionality: West Virginia (auto-suggest and result sorting), Massachusetts (forgiveness), and Michigan (enhanced filtering).

Aim for Quality Over Quantity

Make content consumable, written in plain language, and findable through search engines and website navigation.

Implement SEO technical solution (e.g., tag content)

  • Use an SEO tool (e.g., Website Grader) to check fundamental SEO components to identify big issues and establish a baseline measurement.

Enhance all content for plain language, readability, and SEO


Clarify Site Hierarchy

Simplify site structure and connecting content to related navigation and actionable next steps.

Collect user feedback

As a first step, add a feedback form on the site to better understand how users expect to find content. LawHelp templates provide a built-in feedback feature. Other resources for online feedback forms include: Usabilla and Usersanp.

Find ways to connect more directly with users and gather qualitative data through interviews and observations and/or usability testing. Use this Usability Testing Guide as a starting point.

If moderating face-to-face testing is not feasible, consider remote, unmoderated usability testing (e.g., UserZoom, Loop11), among others. For an extended list of remote usability testing tools and tips on how to choose the one that's right for your site, see Nielsen Norman Group's article on Selecting an Online Tool for Unmoderated Remote User Testing.

Reorganize information based on user needs

Inverted pyramid hierarchy is a writing technique that facilitates scanning by presenting readers with the most important content up front and additional details further down the page. For more details on inverted pyramid hierarchy, reference credible writing resources and instructional material such as Purdue Online Writing Lab.

Include next steps for site visitors in context of articles and other key workflows

Help users help themselves to additional content by cross-linking relevant content on detailed content pages (e.g., articles and guides). See articles by Nielsen Norman Group for examples of how to write meaningful, descriptive hyperlinks.

Additionally, help users understand legal jargon without leaving the page by using an in-line glossary (e.g., OpenAdvocate ReadClearly).

For more ideas on how to implement contextual help, reference a design pattern library like Pttrns. Components such as coachmarks (a form of contextual help) are a good place to start.

Remove extraneous content from the left and right side bar

  • Visit Michigan Legal Help or Legal Aid of West Virginia to view great examples of secondary navigation from within the network of statewide sites.
  • Reference Nielsen Norman Group for right rail design tips.
  • Reference Nielsen Norman Group to better understand computer literacy of adults in the U.S. and how it impacts the way we design navigation.

Implement guided workflows

In the long-term, aim to provide guided workflows so users can fully engage in self-help. For insight on how to organize content that supports self-help, reference the "toolkits" provided on the Michigan website (Custom) and West Virginia website (Custom). These "toolkits" assemble articles and forms for a particular issue and guide users to the help they need.


Leverage an Inclusive Framework

Support the needs of a broad range of users by supporting access to users on assistive devices (e.g., keyboard navigating and screen readers), on mobile devices, and in multiple languages for limited english proficiency users.

  • HTML_CodeSniffer: HTML_CodeSniffer is a bookmarklet available on GitHub. With this tool, you can check if your website conforms with the most commonly accepted web accessibility standards: Section 508, WCAG 2.0 Level A, AA, and AAA. The tool's report will explain each issue and show where it resides in the code. Additionally, it links you to relevant sections of the official WCAG 2.0 Guidelines and tips for addressing the error.
  • Tota11y: Use an automated accessibility tool (e.g.,Tota11y) to check sites for appropriate heading levels.
  • Varvy SEO Tool: To check for the presence and quality of image alternate text (also referred to as alt text), use an accessibility audit tool or Search Engine Optimization (SEO) tool (e.g., the Varvy SEO tool). This tool assesses the quality of alt text as well.
  • Wave: To test for conformance with WCAG 2.0 Level AA and AAA contrast ratio standards, use an online contrast checker tool (e.g.,WebAim's Wavetool). To test a site on Wave, copy and paste the URL into Web page address field. Among other features, Wave identifies broken ARIA tags and missing alternate text. The tool is also useful for identifying color contrast errors. By clicking on the contrast tab, you can view the number and location of contrast errors. Additionally, Wave shows you which colors each element uses, and alerts you to its conformance (or nonconformance) with WCAG 2.0 Level AA and AAA contrast ratio standards.
  • NVDA: NVDA, which stands for Non-visual Desktop Access, is free screen reader software for Windows that you can use to make sure your site is accessible for screen reader users.
  • Voiceover: Voiceover is a free, built-in screen reader software for OSX and iOS users.
  • Gov.UK Accessibility Blog -- This blog helps website managers and developers understand the tools, techniques, and underlying research necessary for building accessible websites. 

Manual Test for Keyboard Accessibility

Keyboard users primarily navigate using the "Tab" key to move forward and "Shift + Tab" to move backward through a site experience. To make a site usable for users who navigate by keyboard (i.e., instead of with a mouse or trackpad), sites should accommodate: skip link navigation, focus state, and tab order consistency.

  • Skip link navigation is a link that appears at the very top of a page the first time a keyboard user hits "Tab" on the site; it allows keyboard users to jump straight to main content on the page instead of forcing them to tab through navigation headings or the main menu first.
  • Focus state is a visual indication of tab selection (e.g., selected text is underlined, highlighted, or outlined). If the user cannot determine which element of the page is selected, focus state is not apparent enough. A site's focus state should be high contrast and visible at all times.
  • Tab order is the sequence in which the user moves from one element to the next. Tab order is dependent on the code, and it should reflect the layout of the page. It should flow logically from one element to the next, not jump around unexpectedly.

To quickly test all three functions, go to the site you want to test. Use the "Tab" key to go forward, or "Shift + Tab" to move backward. Skip link navigation (if available) should appear the first time you hit "Tab".