Creating an accessible website for Kaaos Company was a rewarding and insightful experience. The project followed a smooth workflow, and the outcome was both meaningful and well received.
About Kaaos Company
Kaaos Company, developed by Inklusiivisen tanssin tuki ry (a Finnish nonprofit), redefines dance by celebrating every body since 2010. They see the diversity of physicality and ability among their dancers as their greatest strength. They needed a new website to better connect with their audience—one where people can easily discover their programs and activities, register for events, or sign up to support them as members. They also needed help organising content for an upcoming major event, the XDF Festival.
Our Process
- We defined the audience and the goal of the website
- We defined the structure of the website – the main pages: Home, XD Festival, Programs (Classes, Performances, Workshops, Projects), Calendar (ongoing events), Gallery (past performances), Become a member (to support their activity), About and Contact.
- Figma Design for Homepage
- Development for Homepage
- Testinng for Homepage
- Developing the secondary pages and performances
- Testing + remediations
- Developing pages for the second language
- Pre-launch process
- Launching
- Maintenance
The design process
I created the design inspired by a selection of expressive images from Kaaos Company’s collection. I carefully chose visuals that are not overly busy, and used the main brand colors—black, red, blue, and beige—to ensure strong contrast and visual harmony.
I used a clean, simple style with a few subtle effects—such as slight angles for mimic the movement, alternating black and white backgrounds to create visual rhythm throughout the website. Testimonials play a key role in the design and are featured on multiple pages, as they effectively convey the experiences of participants. The homepage was designed in Figma (external link), while the secondary pages were built directly in WordPress, using design elements and structure derived from the homepage.
Development
I used a similar setup to the DanceWaterloo project: the Kadence Theme & Blocks + The Events Calendar plugin. This setup allows creating accessible websites with ease.
- The Skip link is present;
- The focusable elements are visible;
- The built-in navigation is keyboard and screen-reader accessible;
- The buttons (links) have an ARIA-label field;
- Event custom query can be easily built;
- Kadence blocks have control for adding HTML tags;
- The main landmarks (header, main, footer) are correctly used;
- The screen-reader class is available;
- The code is clean and the page loads quickly.
Testing
Over the process, I used the following tools and testing methods:
- WAVE contrast checker
- Equalize Digital accessibility checker plugin
- Tab testing
- 200%, 400% Zoom Testing
- NVDA, Jaws Screen Readers.
- Alt-text images plugin
- Bookmarklets for Heading, Alt images, Aria-label, Landmarks, Focus
Challenge 1: Multilingual Support for the Events Calendar
I’ve successfully used Polylang on many websites over the years and initially planned to use it again for this project. However, I discovered—after creating all the pages—that The Events Calendar (the free version) is not fully compatible with Polylang. The recommended alternatives were WPML or the Pro versions of either The Events Calendar or Polylang.
I chose to create a multisite instead, to avoid slowing down the site with heavy plugins. This solution worked very well for managing the two language versions of the website: English and Finnish.
Challenge 2: Effective editing the Alt-text images
One of the most time-consuming tasks when building accessible websites is adding alt text for informative images. While it might seem simple, managing all types of images—such as dynamic images, gallery images, and standard content images—in one place can be quite challenging.
I found the Fix Alt text plugin very useful. It allows you to view and edit alt text for all image types in a single interface, making the process much more efficient.
Accessibility-focused Approached
I followed a shift-left approach, which means I planned for accessibility from the very beginning—not just at the end. When accessibility is part of the process early on, it’s not as difficult as it might seem. By using an accessibility-friendly framework as a foundation and a proper combination of colors, it was not so difficult to build an accessible website. The list below is part of the Accessibility Statement.
- The design was created with accessibility in mind, using color combinations that ensure sufficient contrast between text and background.
- The content was organised into pages and sections that allow users of all abilities to easily and quickly find the information they need.
- Breadcrumb navigation was provided to help users understand their location within the website structure and easily navigate back to previous pages.
- The font was thoughtfully chosen for readability and clarity, avoiding ambiguous characters such as 1, l, I, 0, and O.
- The layout was made mobile-responsive and supports up to 200% and 400% zoom without loss of content or functionality.
- Images were given descriptive alternative text when they convey meaningful information.
- A skip link was incorporated to facilitate keyboard navigation, allowing users to bypass the menu and jump directly to the main content.
- The website declares a language in the HTML header: Finnish (Suomi) for kaaoscompany.fi and English for kaaoscompany.fi/en.
- ARIA (Accessible Rich Internet Applications) screen reader-only text was used when links or images require additional context to be understood.
- A text warning was added when a link opens in a new tab or leads to an external site.
- All interactive elements (links, buttons, inputs) were made accessible via the keyboard using the Tab key.
- Structural markup was applied appropriately to indicate headings, lists, buttons, and forms.
The outcome
The new Kaaos Company website delivers an improved user experience with a strong focus on accessibility and performance. It is fully responsive, keyboard-navigable, and designed to support users with different needs, including screen reader users and those requiring high contrast or text scaling.
Before re-design (screenshot)
After-redesign (screenshot)
You can explore the website online at kaaoscompany.fi.
The project was developed over six weeks, and the final result was very well received by the client. It was a great pleasure to work with the Kaaos Company team and to be part of such a meaningful mission.
[Client testimonial]
