Web Accessibility in Tessitura's TNEW v16

Many of you will be familiar with Tessitura - an enterprise software used by arts and cultural organisations across the world to manage their ticketing, marketing and fundraising activities. 

Earlier this year, Tessitura released v16 - a significant upgrade to their existing platform, and a simultaneous upgrade to their TN Express Web (TNEW) product. 

Used by approximately 70% of all Tessitura customers, TNEW is a flexible, off-the-shelf eCommerce web application. And with a strong focus on web accessibility, TNEW v16 is worth getting excited about. 

In this blog post, we’ll dive into the web accessibility updates you can expect to see in TNEW v16. 

What is Web Accessibility, exactly? 

Before we begin, it’s worth defining what web accessibility is. It’s a phrase that you may hear and use often - but how do you explain web accessibility, in its simplest terms? 

According to W3C Web Accessibility Initiative, “web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them”. 

Whilst this is a technically correct definition, we much prefer the definition we heard from Tessitura’s Group Product Manager, Nara Zitner, at the recent TLCC London 2022 conference. 

Nara simply described web accessibility as “providing an equitable online experience”. 

We couldn’t have put it better ourselves.

"Web Accessibility is about providing an equitable online experience"

Why is it important for your website to be accessible?

It helps to include everyone 

An accessible website is an inclusive one. It’ll provide the above-mentioned equitable experience for everyone, regardless of ability. 

It will improve user experience 

Accessibility puts user experience at the forefront of considerations. It’ll make the journey for all users quicker, easier and more enjoyable as they traverse through your site. 

It will broaden your online audience  

It’s estimated that around 71% of users with disabilities will abandon an unusable site. By focusing on accessibility, you can help to:

• keep users on your website;
• improve your bounce rate;
• increase your conversions; and
• widen your online audience. 

Does Tessitura's TNEW v16 meet web accessibility standards?

Tessitura designed the latest TNEW version to meet the Web Content Accessibility Guidelines (WCAG) 2.1 AA compliance level. Created by the World Wide Web Consortium (W3C), WCAG is the international standard for web accessibility. 

At the TLCC London conference in September 2022, it was said that every page in TNEW v16 is designed to be accessible. TNEW v16 is currently in the audit process to be WCAG 2.1 AA compliant. It's expected the audit will be completed by early 2023.

It’s worth noting a couple of clarifications when they say ‘every page’. Whilst the customer-facing pages are accessible, the TNEW Administration site is not yet fully accessible. And of course, if you make any customisations to your TNEW instance, you’ll need to ensure that your developer or agency is customising with accessibility in mind. 

Checking out the ‘new’ in TNEW

So what has changed in TNEW v16 to make it more accessible for all users?

Introduction of alt text properties for images 

An ALT tag enables you to add a text description of an online picture or video. This is useful for those with visual impairments. It allows them to understand what the image is conveying, and will likely complement the text on the page. It’s also handy when there are issues with page loading, as users will be able to refer to the alt text instead. 

In TNEW v16, Tessitura has removed the functionality that automatically names an image on an event page with the event name. This lets you set a more appropriate description that reflects what’s in the image. And for users with screen readers, it avoids hearing an event title and alt text description being read twice with exactly the same words.  

Conveying information with colour 

A few very simple but very effective changes have been made in TNEW v16 when it comes to the use of colour.

Text that acts as a link is still in colour but is now underlined. People who are colour-blind might struggle to identify a link in another colour if it is not underlined. 

There is also more use of coloured buttons to make it clearer where the buttons are. 

Use of graphic elements, icons and shapes to convey meaning

In addition to the above changes, TNEW v16 now uses visual decorations to convey meaning rather than just relying on colour. This change supports:

• Users with colour vision deficiency; 
• Users of text-only technologies; and
• Users of technologies with limited-colour displays.

An example of this change is with the Select Your Own Seat maps. TNEW v16 now conveys seat types with characters as well as colour. 

Appropriate colour contrast ratio between text and its background 

Updates have been made to the colour contrast ratio in TNEW v16 to assist users with moderately low vision or colour vision deficiency. 

You can expect to see crisper contrasts, darker blues and greys and more pronounced borders.

Ability to resize text

Tessitura has introduced screen magnification in TNEW v16. Users will now easily be able to resize text to make it more clearly legible, eliminating or reducing the need for extra assistive technology. 

Button widths have now also changed so that text will fit inside an appropriately-sized box, instead of being displayed in a long one-lined button that requires a lot of annoying scrolling. 

Ability to convey dynamic information

TNEW now uses “Accessible Rich Interface Applications” or ARIA attributes. Using ARIA, websites emulate dynamic browser behaviour to create experiences that can be used with assistive technologies. 

In TNEW v16, this means changes to features like the ‘time remaining in basket’ display at the top of the page. 

For sighted users, it’s clear when their time remaining is low as the text turns red and they can see the time counting down. But what about users who can’t see those prompts?

For those users, TNEW v16 will now warn them audibly when their time remaining is low. An ARIA alert event is sent to assistive technology products which can then notify the user by reading out the alert message. The user will hear an audible alert when 5 minutes are remaining and will continue to hear alerts more and more frequently e.g at 3 minutes, 2 minutes, 1 minute, 30 seconds etc. This is designed to replicate a sense of urgency. 

Appropriate keyboard controls for interactive elements 

Modifications have been made for interactive elements such as hover states, menus and form inputs to be functional using a keyboard. 

This is an important and helpful change for those who use a keyboard rather than a mouse or touchscreen to navigate websites. 

Easy wins like the use of colour to highlight the field that you’re currently tabbing through will also be a welcome improvement to the user experience. 

Heading tags to facilitate navigation of content

You’ll be able to use heading tags like H1, H2 etc to improve the readability of your TNEW pages. 

These descriptive titles make it easier for all users to sift through your content quickly and easily. Users can tab through the H2 headings of a page to get a feel for what’s on it, without having to go through every single word. Especially useful for those who use screen readers. 

How can you make your TNEW website more accessible?

There are a number of things you can do to make sure you’re making the most of Tessitura’s latest web accessibility updates to TNEW. 

Whilst we can’t cover off every single point, a few recommendations to start with include:

• Review your website content and make sure it’s all relevant
• Include alternative text for visual (non-text) content
• Make sure information is conveyed with visual cues in addition to colour 
• Make sure the colours on your site meet the appropriate contrast ratio
• Use appropriate and useful headings on your web pages

Customising your TNEW website 

If you’re looking to create a more seamless and less jarring transition from your marketing site to your TNEW site, you might want to consider making some customisations to your TNEW templates.

In our experience, we find the best way to approach this is to take an organisation’s brand guidelines (as lean or detailed as these may be) and create a number of key screens from the standard TNEW checkout experience.

While doing this, there are a number of commonly applied layout updates we recommend to improve the overall user experience and presentation of content.

We’ve successfully implemented TNEW customisations for many organisations including Perth Festival, Australian Brandenburg Orchestra, City Recital Hall, Musica Viva Australia, Barking Gecko Theatre, WA Museum and Sydney Writers Festival to name a few!

Working with Bravo, you can rest assured that web accessibility will remain a key consideration when making updates to your TNEW pages.

Wrapping Up 

It’s great to see that Tessitura has made such a strong effort to improve web accessibility in TNEW v16. An equitable online experience should be something that all website owners, companies and digital agencies strive towards, and TNEW v16 certainly helps to achieve that.

From simple changes like the introduction of alt text fields and ability to resize text, to more forward-thinking features like conveying dynamic information in a more inclusive way, Tessitura has opened up TNEW to a more inclusive online world.

* All images in this blog post are from Tessitura's "Introduction to web accessibility in TN Express Web (TNEW) v16" presentation slides from TLCC London 2022.*

Can we help you to create a more accessible online experience? Are you considering customising your TNEW pages? If so, reach out to our experienced team at hello@studiobravo.com.au.