Skip to main content

Accessibility

Web Content Accessibility Guidelines (WCAG)​

In order to be compliant with the Americans with Disabilities Act (ADA), Kyber follows the criteria specified in the Web Content Accessibility Guidelines (WCAG) v2.1, Level AA (which includes Level A).

Following these guidelines ensures our content is accessible to a wider range of people with disabilities like vision impairment, hearing loss, limited movement, and other disabilities. These guidelines will also make web content more usable to users in general.

Principles​

Web Accessibility Initiative - Accessible Rich Internet Application (WAI-ARIA)​

Kyber also follows WAI-ARIA, the Accessible Rich Internet Applications Suite, which defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with HTML, JavaScript, and related technologies.

Contrast and Color Accessibility​

Kyber's contrast ratio is 4.5:1 for body text or 3:1 for large text which matches the WCAG 2.1, Level AA guidelines.

Useful Tools​

Image Accessibility​

Images should have the correct attributes applied to make them readable by assistive technologies if they are conveying information or skipped entirely if they are decorative or used strictly for styling.

Images using the <img /> tag​

If an image is for decoration only and/or used for formatting, such as a spacer it should be assigned a null (empty) ALT attribute. This tells screen readers that the image is decorative and not important for the user to know about it. Otherwise, a screen reader will announce the presence of the image and read its descriptive alt attribute when it has one.

CSS Background Images​

Remember that background images (ones rendered using the CSS background-image property) will not be accessible, so if the picture is meant to convey meaning we should consider an alternative approach.

Econs (Icon Fonts)​

While our Econs will work with a <i> tag, we prefer to use <span> in order to be slightly more semantic.

Examples​

An example of an image that shows a check mark illustrating that the user's form input is valid:

<img src="status_ok.gif" alt="Acceptable" />

An example of an image that doesn't represent anything meaningful to the user:

<img src="spacer.gif" alt="" />

For an icon that conveys meaning you can annotate it by adding the aria-label attribute:

<a href="..."><span class="icon-plus" aria-label="Add Account"></span></a>

Alternatively, you can use the aria-labelledby attribute to link the icon's meaning to another element's text:

<a href="...">
    <span class="icon-plus" aria-labelledby="link-text"></span>
    <span id="link-text">Add Account</span>
</a>

The advantage of the bottom one is that if you change the text of the button, the meaning of the add icon stays in sync.

When the icon does not represent anything meaningful to the user you can annotate it with aria-hidden="true":

<a href="..."><span class="icon-plus" aria-hidden="true"></span> Add Account</a>

Form Accessibility​

Keyboard Accessible​

Kyber form elements are keyboard accessible by default and follow the WCAG and ARIA guidelines.

Labels associate with form controls​

Kyber's form components don't have labels on their own. To assign a label to your form element, wrap it in a <FormField>.

<FormField label="Label">
    <TextField {...props} />
</FormField>

Alternatively, pass an aria-label to the form element so assistive technologies know how to describe it if you won't be using a visible label.

<TextField aria-label="Label" {...props} />

Semantic HTML​

Semantic HTML means using HTML elements to structure your content based on each element's meaning, not its appearance. A semantic HTML element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

Accessibility Object Model (AOM)​

The browser parses the HTML document and builds an accessibility tree or Accessibility Object Model (AOM). Assistive devices, such as screen readers, use the AOM to parse and interpret content. Using semantic HTML helps the browser build a better AOM.

Page Structure​

HTML provides a number of block level elements used to define areas of your page that will help assistive devices understand the structure of the page and its content.

  • header: <header>
  • navigation bar: <nav>
  • main content: <main>, with various content subsections represented by <article>, <section>, and <div> elements
  • sidebar: <aside>; often placed inside <main>
  • footer: <footer>