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
- Get the Chiki Chrome extension (ZIP) from here
- Unzip the file into a directory on your local disk. eg:
c:\chiki\ - Open the Chrome extensions tab –
chrome://extensions/ - Check the
Developer modecheckbox and then click on theLoad unpacked extension...button - 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.