Accessibility

In this article, we will cover:

• Overview
• How to add/edit/remove alternative text to/from a post
• How to change the title for Web Embeds and Signage

Overview

It is our goal to make TINT accessible to all users of the web and to comply with all accessibility best practices.  We use ARIA (Accessible Rich Internet Applications) to make our UGC more accessible to people with disabilities.

The following themes are regularly audited for accessibility:

• Classic
• Testimonials
• Artsy
• Square Photo
• News
• Horizontal Slider
• Tall Photo
• Grid

To audit our accessibility and compliance with WCAG and WAI-ARIA, we use an open-source, automated tool called Lighthouse. All of the themes listed above score 90% or higher using this tool. Lighthouse tests for the following:

• Elements Have Discernable Names
• Color Contrast is Satisfactory
• Elements Use Attributes Correctly
• ARIA Attributes Follow Best Practices
• Elements Have Discernable Names
• Elements Are Well Structured
• Page Specifes Valid Language
• Meta Tags Used Properly

How to add/edit/remove alternative text to/from a post

In your TINT board, you have the ability to put a description of the post so a screen reader can read it out.

1. Go to your TINT board
2. Go to a post that you want to add a description to
3. Click on ... 
4. Click on Add Alternative Text
5. Type in your description
6. Click Done

To edit or remove the Alternative Text

1. Go back to the post
2. Click on ...
3. Click on Edit alternative text
4. Edit or delete the text
5. Click done.

How to change the title for Web Embeds and Signage

You can also change the title that a speech reader reads out for our TINT boards when being displayed on Web Embeds and via the URL for Signage.

Web Embed

As standard, it will say Social Feed but change this in your web embed, insert the following parameter: data-embed-title="test"

For example: 

<script async src='https://www.tintup.com/app/dist/embedded.js'></script>
<div class="tintup" data-id="article_board" data-columns="" data-expand="true" style="height: 500px; width: 100%;" data-personalization-id="1095531" data-infinitescroll="true" data-embed-title="test" ></div>

Signage

To change the title for your signage, add the parameter &title=test to your URL

For example:

https://www.tintup.com/app/tint/tint.html#article_board?personalization_id=1095457&title=test 

If you have any questions on Accessibility, please don't hesitate to contact Support at support@tintup.com.