Skip to main content
Docs
Components
Foundation
1.0.0Next5.1.05.0.35.0.25.0.15.0.04.0.94.0.84.0.73.2.03.1.03.0.13.0.02.1.12.0.101.0.0
Version: 1.0.0

Accessibility

The Kognifai Design System strives to be inclusive and allow users with diverse abilities to access and use Kognifai products to their fullest potensial.

Necessary for some, good for everyone​

From 1 July 2014, all new web sites and vending machines must comply with the Universal Design of ICT Regulations. The requirements apply to both private and public entities. The purpose is for everyone to have equal access to information and services. The norwegian Agency for Public Management and eGovernment (Difi) provides advice, guidance, and also supervises.

It’s important to consider accessibility and universal design as a first class citizen when making products.

Accessibly is like a blueberry muffin—you can’t push the berries in there afterward — Cordelia Dillon

Web Accessibility beginner’s guide​

We aim to use components built with HTML and ARIA roles in accordance with the W3C standards and best practices. By doing this, we can further ensure that assistive technologies can recognize and extract meaningful content to present this to users depending on such tools.

Landmarks​

  • <header role="banner" - A region of the page that is site focused. Typically your global header
  • <nav role="navigation"> - Contains navigational links.
  • <main role="main"> - Focal content of document. Use only once “per page”.
  • <article role="article"> - Represents an independent item of content. Use only once on outermost element of this type.
  • <aside role="complementary"> - Supporting section related to the main content even when separated.
  • <footer role="contentinfo"> - Contains information about the document (meta info, copyright, company info, etc).
  • <form role="search"> - Add a search role to your primary search (how to implement).

Language Attribute​

Declaring a language attribute on the html element enables a screen reader to readout the text with correct pronunciation. Also add an attribute for reading direction (either ltr = “left to right”, or rtl = “right to left”).

  • <html lang="en"> - Specify a language with the lang attribute on the element.
  • <html dir="ltr"> - Specify a reading direction with the dir attribute on the element

Document Outline​

Use semantic headings and structure.

  • Ensure links have :focus state.
  • Ensure links are recognizable (underlined).
  • Provide a “Skip to main content” link.

Images​

  • Use appropriate alt text.

Javascript​

  • Try to provide alternatives for users who do not have Javascript enabled and for environments where Javascript is unavailable.

Forms​

  • Use logical layout. Tab order of the form follows a logical pattern.
  • Associated label for all form controls (e.g. input, select etc.) (e.g. <label for="name">Name:</label><input id="name" type="text">)
  • Make sure placeholder attributes are NOT being used in place of label tags. An exception to this rule would be smaller forms with one or two fields (eg. search or log in forms)
  • Group related form elements with fieldset and describe the group with legend Important for <input type="radio"> and <input type="checkbox">

Media (Audio and Video)​

Providing text alternatives makes the audio information accessible to people who are deaf or hard of hearing. This also goes for search engines who are deaf and hard of hearing as well.

  • Provide text transcripts
  • Synchronized subtitles for videos

Color Contrast​

  • Test color contrast. Best done early in the process, by ensuring that the foreground and background colors of your site have sufficient contrast you will help make your site more readable for everyone.

Resources​

  • Web Content Accessibility Guidelines (WCAG) 2.0, WCAG 2.0 covers a wide range of recommendations for making Web content more accessible
  • Contrast Grid from Eightshapes, Test many foreground and background color combos for compliance with WCAG 2.0 minimum contrast
  • WebAIM Color Contrast Checker, Test single values for foreground and background color for WCAG compliant contrast
  • WAVE Chrome/Firefox Extension, The Web Accessibility Evaluation tool (WAVE) allows you to evaluate web content for accessibility issues directly within the browser.
  • Using alt Text Properly
  • How-to: Skip Navigation links
  • WW3C WCAG 2.0 - Name, Role, Value