QA Standards

• Anchor link in the navigation does not link to the intended section specified in DCT

• Anchor link should not be added to page elements that exist above the fold on the page
  • Often, when an unnecessary anchor link is added, it causes the screen to “jump”. This means the page loads to the correct spot on the page, but then the anchor link is executed, causing the screen to scroll momentarily, then scroll back to its original place.
• Example: In this screenshot, the contact form has an unnecessary anchor link under the “ID” field. The anchor link is unnecessary because the contact form is above the fold when the user navigates to the page. Putting an anchor link here would cause the page to “jump” when the user clicks the link, which is poor design.

• Navigation links must go to the intended page requested in the DCT
  • If a nav link is linked correctly, the user can see the name of the page the link goes to by hovering over the nav link, then looking at the link displayed in the status bar at the bottom left of the screen. If the page name in the status bar does not match the page title, this could be an issue.

• Navigation menu order must follow what is requested in the DCT
  • In the Site Map section under the Website Details tab in DCT, the site’s pages are listed out and in the order they should go in.

DCT screenshot showing the proper order:

Site screenshot showing incorrect order:

• “Poor Contrast” means the text color is too similar to the background color, which makes the text difficult to read.
• “Poor Color Pairing” means the color clashes with the rest of the colors on the site.
  • Color(s) do not go with the theme usedA color that was requested was not used
  • A color was used that was specifically requested NOT to be used.
• Any color combinations are going to need to be marked as a “pass” for text 17pt and below, text 18pt and above / 14pt bold and above, and icons and actionable graphics. The minimum overall contrast ratio that is passable is 4.5 : 1.

Example:

• Poor Navigation link hover coloring:

• The sub-navigation items do not have consistent spacing between pages. This might happen if there are custom headers for different pages, and the same nav items have different Spacing or Padding settings between header styles.