-
Notifications
You must be signed in to change notification settings - Fork 0
Home
USCIS websites have common typographic needs: clear and consistent headings, highly legible body paragraphs, clear labels, and easy-to-use input fields. We recommend a font system that uses two open-source font families: Source Sans Pro and Merriweather, both of which are designed for legibility and can beautifully adapt to a variety of visual styles.
Source Sans Pro is an open-source sans serif typeface created for legibility in UI design. With a variety of weights that read easily at all sizes, Source Sans Pro provides clear headers as well as highly-readable body text.Inspired by twentieth-century American gothic typeface design, its slender but open letters offer a clean and friendly simplicity. Advanced hinting allows Source Sans Pro to render well on Windows systems which run Cleartype, and across browsers and devices. Moreover, it supports a variety of languages and alphabets, including Western and European language, Vietnamese, pinyin Romanization of Chinese, and Navajo.
Merriweather is an open-source serif typeface designed for on-screen reading. This font is ideal for text-dense design: the letterforms have a tall x-height but remain relatively small, making for excellent readability across screen sizes while not occupying extra horizontal space.
The combination of slim and thick weights gives the font family stylistic range, while conveying a desirable mix of classic, yet modern simplicity. Merriweather communicates warmth and credibility at both large and smaller font sizes.
Readable text allows users to efficiently read and take in textual information, whereas text that is not readable turns off readers or makes it challenging for them to stay focused. The following guidelines promote good readability. A flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements. This palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue and red, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.
This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.[insert color snippets here ]
These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.[insert color snippets here ]
WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device. To meet these standards, text and interactive elements should have a color contrast ratio of at least 4.5:1. This ensures that viewers who cannot see the full color spectrum are able to read the text.
The options below offer color palette combinations that fall within the range of Section 508 compliant foreground/background color contrast ratios. To ensure that text remains accessible, use only these permitted color combinations.
If you choose to customize beyond this palette, this color contrast tool is a useful resource for testing the compliance of any color combination.
A box that allows users to search for specific content if they know what search terms to use or can’t find desired content in the main navigation As you customize this form template, ensure it continues to follow the accessibility guidelines for form templates and the accessibility guidelines for form controls. Always include the word “search” inside the element for screen readers. * There will always be users who are confused by your navigation system and who would benefit from being able to search your site. * On single-page or very small sites, you may be able to get away without a search bar. * Allow the search bar to be as wide as possible, but a minimum of 27 characters wide. This allows users to enter multiple search terms and still be able to see all of them. The more users can see their search terms, the easier it is to review, verify, and submit their search query. * The magnifying glass has been shown to be almost universally recognized by users as an indicator of search, and doesn’t need to be visually paired with the word “Search” as long as it remains for screen readers. * Maintain this search bar when displaying the search results with the original search terms. * On a site’s home page the search function should appear as a search box instead of a link so users can locate it easily. * Don’t offer advanced search as the default option. The majority of people will do a simple search with one or two search terms. If advanced search is offered, it increases the likelihood of a person making a mistake in their query. * Even if the search bar isn’t visually displaying a label, the form field should include a label for screen reader users. The search button itself should be a submit button for the form to reduce the number of keystrokes required to use the form. Hierarchical, vertical navigation to place at the side of a page. The width of the current menu item’s highlight border is set with the $sidenav-current-border-width variable. Ensure the side navigational system is keyboard accessible. Users should be able to tab through each link. * To display a navigational hierarchy with one to three levels. * To display the “sub-navigation” within a section of the website.When to consider something else
- If the site has fewer than five pages, consider organizing the page without a navigational hierarchy.
- If your page already has a horizontal and vertical navigation bar, consider ways to simplify your navigation system.
- If your content is within a frame or sub-area of a page, consider ways to simplify your navigation system. Guidance
- Indicate where a user is within the navigational hierarchy. Use the “active” state to show users which page they have navigated to.
- Keep the navigation links short. They can be shorter derivatives of page titles themselves.
- If the navigation hierarchy is too long, users may miss items at the bottom. If it’s too deep, users may miss items that require too many clicks. Usability test to find the right balance between breadth and depth.
All button labels are sentence case. They should be as short as possible while clearly explaining what will happen when the button is clicked.
There are 6 button styles:Default, the general button style. Primary, indicates the critical, or most important action on a form/page. Danger, indicates a dangerous, generally destructive action, such as deleting. Success, indicates a positive action. Warning, indicates an action that may have some side effects, such as giving a user admin access. Link, used for non-critical actions. Useful for keeping the interface simple.
All buttons are prefixed with the btn class. The btn class can be applied to any element. Try to use
elements when an action won’t change the URL/route, and elements when the action will change the URL/route.Button sizes There are 4 different button sizes:
Large, use the btn-lg class. Normal, no extra classes necessary. Small, use the btn-sm class. Extra small, use the btn-xs class.
http://uspto.github.io/designpatterns/1.x/docs/components/buttons.html
Accessibility tips to help you deliver delightful experiences to all users. Checkout the Office of Accessible Systems & Technology (OAST) home page. Get a copy of DHS Section 508 Application Testing Process Read and become very familiar with pages 22-76; this is the Test Script and explains the standards and testing procedures. If you intend on taking the Section 508 Trusted Tester training course, it is a good idea to know, practice, and get familiar with the testing process before taking the course. OAST (Office of Accessible Systems & Technology - DHS accessibility authority) OAST's Test Script (DHS Section 508 Testing Process) DHS Testing Tools (installation and setup instructions) WAF (Web Accessibility Favelets) US Access Board (fed agency that promotes accessibility and sets the 508 standards) The Paciello group (WAT creators) Web Accessibility Toolbar or OAST's copy (sorry, only IE for now) WAT contrast analyzer (stand alone color contrast analyzer) There will be cases in which you will need to selectively “show” and “hide” content by either removing it from the visual flow or preventing screen readers from reading it. We have settled on the following conventions for each use case:| Visual browsers | Screen readers | Solution |
|---|---|---|
| hide | hide | Add the boolean hidden attribute to dynamically hide content from all users. Remove the attribute to show it again. |
| show | hide | Use the aria-hidden="true" attribute to “hide” content from screen readers while keeping it visually perceivable. |
| hide | show | Use the usa-sr-only class to show content to screen readers only. This removes the content from the visual flow of the document but retains its legibility by screen readers. |