PIC Base Level Accessibility

Minimum aspects that should be on every PIC Sites

Color Contrast

Some users have difficulty perceiving text if there is too little contrast between foreground and background. The W3C Web Content Accessibility Guidelines (WCAG) 2.1 define specific contrast ratios that must be met in order comply at particular levels:
  • Level AA: 4.5:1
  • Level AA (large text): 3:1
  • Level AAA: 7:1
  • Level AAA (large text): 4.5:1

The contrast requirements for large text are less stringent than those for regular-sized text, and the contrast requirements for Level AA are less stringent than those for Level AAA.  One goal could be to meet the Level AA requirements.


Example of Contrast Ratio.

Techniques

When designing the color scheme of a website, web page, or document, be sure to consider whether there is sufficient contrast between foreground text and background.
Several free tools have been developed that make it easy to check color combinations for WCAG  compliance.

Resource to check Color Contrast


Text Sizes

A person can increase or decrease text-size only. Non-text content does not change. A key functionality to preserve is that complete lines of text fit within the viewport. For any block of text, the last word of a line is the immediate predecessor of the first word in the next line in reading order. No exceptions. Also, text fits within bounding boxes, lines, and columns if present. Finally, margins should not change with text size.

Text on colored backgrounds

Black text is recommended for use on light backgrounds, and white text on dark backgrounds. If your app has both light and dark themes, make...Black text is recommended for use on light backgrounds, and white text on dark backgrounds. If your app has both light and dark themes, make sure the text is available in a contrasting color against each theme. Colored backgrounds or typography additionally change the rules regarding text opacity and different states of text.

Don't


Dark text on light backgrounds

Dark text on light backgrounds (shown here as #000000 on #FFFFFF) applies the following opacity levels:
  • High-emphasis text has an opacity of 87%
  • Medium-emphasis text and hint text have opacities of 60%
  • Disabled text has an opacity of 38%


Form Labels . not placeholders

  • All form fields must have accurate labels or prompts so screen reader users know what each field is asking for.
  • The tab order must be logical. As users navigate through the form using the tab key on the keyboard, they should land on fields in the expected order.
  • Feedback, such as error messages, must be accessible to screen reader users.
  • Fields that require users to perform actions with a mouse, such as drag-and-drop, must  be avoided unless they have accessible alternatives for keyboard users.


Alt Tags

When using the img element, specify a short text alternative with the alt attribute.
Note. The value of this attribute is referred to as "alt text".
When an image contains words that are important to understanding the content, the alt text should include those words. This will allow the alt text to play the same function on the page as the image. Note that it does not necessarily describe the visual characteristics of the image itself but must convey the same meaning as the image.




Focus States - Keyboard Navigation

A focus state highlights interactive components, and is crucial for wayfinding when using a keyboard to navigate.

Focus state users may be someone using a screen reader, a person with limited mobility, or a power user that utilizes the keyboard for faster navigation.
Don’t count on hover states to reveal links



  • Focus styles are a design opportunity, not a compromise. With some care, they can enhance a product’s appearance and don’t have to look clunky.
  • Focus states are meant to draw attention to the element. Trying to make them blend in with the UI defeats the purpose.
  • Focus states need to have at least  a 3:1 contrast ratio  against the background color.
  • All interactive components on a page need a focus state, not just buttons or links.
  • Focus states cannot just be a color change. You need a  dedicated visual indicator . This could be an outline, a highlight, any sort of shape or pattern that is different from the hover state.
  • Focus states cannot be the same as the hover states. However the hover state should be included with the focus styles.
  • Be aware of the thickness of lines used for a focus state. Lines smaller than 2px may be technically accessible, but will be hard to see. Try using a squint test to see how low vision users might be viewing your site.


Link at the top

Adding a link at the top of each page that goes directly to the main content area

The objective of this technique is to provide a mechanism to bypass blocks of material that are repeated on multiple Web pages by skipping directly to the main content of the Web page. The first interactive item in the Web page is a link to the beginning of the main content. Activating the link sets focus beyond the other content to the main content. This technique is most useful when a Web page has one main content area, rather than a set of content areas that are equally important, and when there are not multiple navigation sections on the page.

Example 1: An online newspaper
An on-line newspaper contains many sections of information: a search function, a corporate banner, sidebars, minor stories, how to contact the newspaper, etc. The lead story is located in the middle of the page. The first link that the user reaches when tabbing through the page is titled "Skip to Lead Story". Activating the link moves visual focus to the story. Pressing tab again takes the user to the first link in the main story.

Example 2: A "Skip to main content" link
A Web page includes a variety of navigation techniques on each page: a bread crumb trail, a search tool, a site map, and a list of related resources. The first link on the page is titled "Skip to Main Content". A user activates the link to skip over the navigation tools.

What to do - Steps

    Check that a link is the first focusable control on the Web page.
    Check that the description of the link communicates that it links to the main content.
    Check that the link is either always visible or visible when it has keyboard focus.
    Check that activating the link moves the focus to the main content.
    Check that after activating the link, the keyboard focus has moved to the main content.