About Chiki

Chiki is an accessibility aid for web users who primarily use a keyboard to navigate sites – it’s basically “Skip Links” with attitude!

One of Chiki’s aims is to rationalise the document outline of a web page and present it in a consistent way using a traditional semantic structure – regardless of the underlying code quality or markup used. It also highlights Landmark Areas within the page and provides the means to jump directly to these areas.

When it comes to Page Links, Chiki will remove duplicates from the same Landmark Area whilst standardising the link text across various screen readers.

Additionally, Chiki overcomes issues where JavaScript events bound to a link may prevent the default link behaviour – causing the link to appear unresponsive to a keyboard user – this problem is discussed further in this excellent article: Keyboard-Only Navigation for Improved Accessibility.

Additional benefits of Chiki

  • Allows you to Promote certain Links so they appear first in the tab order.
  • Exposes the page tabbing order for sighted keyboard users who are attempting to navigate without a mouse.
  • Allows you to override the behaviour of Links which are coded to automatically open in a new window.
  • Provides the means to access Footer navigation links which are on “endlessly scrolling” pages.
  • For web site owners, Chiki is a great way to visually sense check the tab order and associated link texts that a keyboard/screen reader user will experience.

Promoted Links

One really useful feature of Chiki is the ability to Promote Links. Using a simple configuration field you are able to specify word combinations which, if found in the text of a Page Link, will promote that link to a special section within the Chiki Link Panel – at the top of the tab order.

This makes it easier to find links that are important to you.

Using Chiki Links

The default action when selecting a Chiki Link will be to focus you at the relevant point within the underlying web page – whether it’s a Landmark Area, Page Heading or Page Link.

In the case of Page Links you can invoke the default link behaviour directly by holding down the shift key when selecting the Chiki Link – thereby overriding any “new window” behaviours and also re-enabling links that are broken due to JavaScript event binding.

Try it yourself

For an example of how a bad accessibility experience can be improved using Chiki, try loading Chiki as a bookmarklet on next.co.uk.

Although Next claim to be working to make the Next site as accessible as possible to be used by everybody the following accessibility issues have been long-standing:

  • Main navigation is unusable with a keyboard due to restrictive jQuery event binding
  • Lack of “skip links” means you have to tab over 82 country links before getting to Customer services, Site map or Accessibility links
  • When you do get to the Customer services or Accessibility links, they will open in a new window without warning

Web users: Loading Chiki as a Bookmarklet

A bookmarklet is simply a bookmark stored on your web browser favourites bar (or in the bookmarks folder) that contains JavaScript to dynamically extend the currently loaded page. You can load Chiki this way by visiting any web page, and after the page has loaded, copy and paste the following code into your browser URL bar and press return:

javascript:(function(){h=document.getElementsByTagName('head')[0];s=document.createElement('script');s.src='//www.dev.powered-by-haiku.co.uk/chiki/chiki.min.js';h.appendChild(s);void 0;})();

NOTE: Ensure the javascript: part is included – Chrome tends to remove it after you paste into the URL bar.


Site owners: Add it to your site

Obviously when loading Chiki as a Bookmarklet it will only exist temporarily for the page it is manually loaded on – when you change page, you will need to reload the Bookmarklet.

The real value of Chiki comes when it is loaded site-wide.

Web site owners can add Chiki to their sites by including a link to the Chiki library in their page <HEAD> for example:

<HEAD>
...
<!-- Chiki library -->
<script src="//www.dev.powered-by-haiku.co.uk/chiki/chiki.min.js"></script>
...
</HEAD>

 

Configuring Chiki

Once the Chiki library has been added in this way, you can customise the colours used, along with the text displayed in the dialog footer and the default terms included in the Promote Links configuration field.

This can be achieved by calling the .customise() method as follows:

<script>
chiki.customise({
    footer_text: "Chiki © Powered By Haiku",
    promote_default: "Accessibility\nSite map",
    dialogBorderColor: "#888",
    dialogFooterTextColor: "#fff",
    dialogBackgroundColor: "#F5F5F8",
    dialogButtonColorOn: "#d14",
    dialogButtonColorOff: "#08c",
    dialogButtonTextColorOn: "#fff",
    dialogButtonTextColorOff: "#fff",
    dialogPromotedLinkBorderColor: "#08c",
    dialogLinkHighlightColor: "#d14"
});
</script>


Chrome users: Adding an extension

By downloading and enabling this Chiki Chrome extension, you can have Chiki automatically load for any web page that you visit.

Enabling the Chiki Chrome extension

  1. Get the Chiki Chrome extension (ZIP) from here
  2. Unzip the file into a directory on your local disk. eg: c:\chiki\
  3. Open the Chrome extensions tab – chrome://extensions/
  4. Check the Developer mode checkbox and then click on the Load unpacked extension... button
  5. From the dialog, select the directory where you have extracted the Chiki Chrome extension

Any comments, thoughts or suggestions regarding Chiki would be welcome. You can contact me @jherrieven on twitter.

About Key Drive for JW Player

The aim of Key Drive for JW Player is to provide full keyboard navigation and control of JW Player media in a bid to make online video/audio more accessible.

Inclusive design features of Key Drive include:

  • Quick interaction through either Tab/Enter key navigation or through common Short-cut keys.
  • Skip links included at the top of the page to quickly enable and access Key Drive.
  • Skip links included to wrap the original video player – allowing Flash or poorly labelled players to be jumped over.
  • Reasonable screen reader support.

Screen reader support

The following screen readers have been used to assist with the development of Key Drive, with mixed results:

  • NVDA – Good results on Firefox and IE. The latest update to Google Chrome [Version 32.0.1700.76 m] has caused NVDA to stop working with it.
  • VoiceOver – Good results – on OS X.
  • ChromeVox – Good results – on Chrome only.
  • Window Eyes – Good results on Firefox and IE. There was an issue with it only announcing the first part of a link in Google Chrome. The latest update to Google Chrome [Version 32.0.1700.76 m] has caused Window Eyes to stop working with it completely.
  • JAWS – Good results on Firefox and IE. Doesn’t work at all with Google Chrome.

It appears that NVDA and Window Eyes will actually work with Chrome – provided ChromeVox has been installed, enabled and then disabled first!

 

Implementing Key Drive

Key Drive for JW Player is a simple JavaScript library which can be loaded as part of the web page design – and hence would be available to all visitors to the page, or can be applied dynamically to the page on a user needs basis – by creating a bookmarklet.

Because Key Drive is a 3rd party library which makes use of the JW Player Application Programming Interface (API), it is compatible across all versions retrospectively and going forward (provided the API supports the functionality).

This means you will not be limited to a particular version of JW Player or the JW Team’s “interpretation” of how accessibility should be implemented (when they get round to addressing it).

Looking forward

Although the specific implementations of rich media support varies quite a bit across browsers and devices, JavaScript support is universally pretty consistent.

Using a similar approach to that taken in developing Key Drive for JW Player, I aim to produce a toolkit of accessibility “aids” which can easily be applied to any web page – with consistency, and independently of the original design or functionality.

Any comments or thoughts regarding this approach would be welcome. You can contact me @jherrieven on twitter.

Try it yourself

You can use Key Drive for JW Player to manage any video on this site by either typing ?jw or by accessing the link via the tab key.

Add it to your site

Adding Key Drive to your site is as simple as including a link to the Key Drive library in your page <HEAD> after the jwplayer.js library, for example:

<!-- JW Player Library -->
<script src="[/path/to/jwplayer]/jwplayer.js"></script>
<!-- Key Drive for JW Player -->
<script src="//www.dev.powered-by-haiku.co.uk/jw-html-config/keydrive/keydrive.min.js?no-splash"></script>

By including the ?no-splash query string as part of the loading URL you can make Key Drive load without displaying the initial dialog.

Load it as a Bookmarklet

A bookmarklet is simply a bookmark stored on your web browser favourites bar (or in the bookmarks folder) that contains JavaScript to dynamically extend the currently loaded page. You can load Key Drive this way by visiting any page with a JW Player on it, and after the page has loaded, copy and paste the following code into your browser URL bar and press return:

javascript:(function(){h=document.getElementsByTagName('head')[0];s=document.createElement('script');s.src='//www.dev.powered-by-haiku.co.uk/jw-html-config/keydrive/keydrive.min.js';h.appendChild(s);void 0;})();

NOTE: Ensure the javascript: part is included – Chrome tends to remove it after you paste into the URL bar.