Do you have any advice for website designers and developers to ensure that the websites they build are accessible through TD browse?

Use semantically correct html elements when it is possible:

  instead of <div class="button">Click me</div> use <button>Click me</button>

Use 'role' attribute if it is not possible to use different html element:

  <div role='button'> or <span role='checkbox'>

Use labels for the interactive elements like:

  <label for="newsletterCheckbox">Subscribe to Newsletter</label>

  <input type="checkbox" id="newsletterCheckbox" />

This creates a larger hit area and clearer context for our users.

 

Dropdowns:  While TD Browse supports various custom menus, we strongly recommend using the standard <select> element. When a user interacts with a <select> tag via eye tracking, TD Browse provides a specialized popup with enlarged targets, making selection significantly easier.

 Mind the "Hover": Avoid UI patterns that rely solely on hover states to reveal content (like "hover-to-expand" menus). Eye-tracking users may trigger these unintentionally or struggle to keep the cursor "steady" enough to keep the menu open. Use click or toggle events instead.

Target Size & Spacing: TD Browse is designed for a special user group that may have difficulties with selecting small element when they are located close to each other. Even though we have a way the user can adjust targets it is good to keep that in mind when designing the web page.