Accessibility at Pigeonhole Live

Accessibility and Pigeonhole Live

Accessibility refers to the usability of a feature, product, or service regardless of a person's cognitive or mobility faculties, whether temporary or permanent. 

As a web application, we are committed in ensuring that our platform caters to those who experience visual impairment and difficulties in visual processing.

At Pigeonhole Live, we believe in enabling meaningful conversations — for everyone. If you or someone on your team has a disability that is preventing you from fully using or enjoying our product, we would love to hear from you and make things right. Reach out to us at productteam@pigeonlab.com.

We track our WCAG compliance through an Accessibility Conformance Report, based on ITI's VPAT (Voluntary Product Accessibility Template) v2.4 International Edition. If you would like to review this report, contact us at productteam@pigeonlab.com.

Eyesight

Poor eyesight and types of colour blindness should be considered when designing a product with accessibility in mind. This is primarily to do with the choice of colours and typography styles.

Design

Our body text is always at least 16px/1rem on browsers. We also test our content in a variety of browsers and resolutions, including higher-DPI resolutions, to ensure readability and quality of illustration assets.

The colour for our body text is #3b3b4e / rgb(59, 59, 78) / hsl (240, 14%, 27%), which, against white backgrounds, has a contrast ratio of 10.29:1.

Features

All Pigeonholes include a setting to alter their appearance, using our Themes feature, which is applied to the Audience Web App, Projector Panel, Admin Panel, and Moderator Panel. We have a gallery of preset themes available for all plans, to suit a variety of needs. In addition, Business, Engage, Captivate, and Enterprise (Meetings and Events) plans have access to Custom Themes, allowing you to create your own.

Visual Processing

There are many different reasons someone may have difficulty processing certain types of visual stimulus — conditions like autism or dyslexia, vulnerability like epilepsy or being prone to migraines — or it may simply be a matter of preference.

Design

As mentioned above, we ensure that the contrast ratio of our body text colour to the background colour is 10.29:1. For context, the contrast ratio for pure black text colour on a white background is 21:1, which is too high and can cause difficulties for persons with dyslexia; it can cause a "strobing" effect due to the high contrast, making texts more difficult to read. For this reason, we opted for a lighter, not-quite black colour for our body text.

Typography

We do everything possible to maximise readability of text — sticking to sans-serif fonts, avoiding justified alignment and double spaces after periods.

In addition, our Themes feature is able to cater for a variety of contrast preferences and requirements. We have our gallery of preset Themes and also a Custom Themes feature; if you have specific requirements, you can contact us for Custom Branding.

Animation

Excessive movement can cause discomfort and even be dangerous for some, risking effects like nausea, migraines, and even seizures.

We make use of animated elements for visual feedback in our UI, such as a loading spinner. However, these are implemented with CSS transitions, so they are smooth and make changes — such as opening modals — less abrupt and jarring.

Some of the seasonal holiday Themes from our gallery occasionally feature animation. Nonetheless, these will always be clearly signposted. In addition, we also provide non-animated fallbacks, using the prefers-reduced-motion media query. This means that if you have configured your machine to reduce motion, it will display the non-animated fallback.

To configure this on Windows

1. Settings 
2. Ease of use 
3. Display/Make the computer easier to see 
4. Show animations/Reduce motion.

To configure this on Mac

1. System Preferences
2. Accessibility
3. Reduce Motion

Keyboard input

Keyboard input is essential for those who cannot use a mouse with their computer due to visual impairment or partial immobility of the hands due to an injury.

Pigeonhole Live's Workspace, Audience Web App, and Panels can all be navigated with keyboard input, using tab to move and enter to press links or buttons.

Visual impairment

Visual impairment or vision loss is characterised by the decreased ability to see to a degree that causes problems not fixable by usual means, such as glasses. Persons with vision impairment require the use of screen readers to navigate the product and the website. 

Screen Reader Use

Screen readers are a type of assistive technology that allows a user to navigate any application via keyboard input while the screen reader reads any text and describes interactive elements. The nature of the navigation, element descriptions, and flow is determined through how the application is built.

Many operating systems now ship with screen readers built in — all versions of Windows since Windows 2000 include Narrator, while Mac operating systems since OSX 10.3 include the VoiceOver utility — and some plug-ins are available for specific browsers, such as Vox for Chrome and Orca for Firefox. We specifically test with NVDA and VoiceOver on various browsers for screen reader compatibility. 

Screen readers use on the Pigeonhole Live Website

All of our web content makes use of semantic markup, including HTML5 landmark tags.

Screen readers are operated with keyboard input, with some combination of screen reader command buttons to achieve the desired action, such as the arrow keys to scroll through content. For example, the Mac VoiceOver utility is by default with control + shift + option and the VoiceOver command, such as the up/down arrow keys to enter or leave content and the left/right arrow keys to scroll through content. This is referred to as screen reader control.

For web pages and other HTML documents, screen readers can be navigated by two document flows:

1) the screen reader document flow using the screen reader control and the arrow keys; and

2) the tab index, navigated with the tab key even without a screen reader. You can use the tab key to navigate to the interactive elements of the page, such as links, buttons, and form inputs.

Both of these flows are determined by the document's structure but are slightly different flows.

Screen reader use on the Audience Web App

The Pigeonhole Live Audience Web App is fully operable with screen reader input. The screen reader UI echoes the visual UI, with labels and explanatory content added for screen users where needed, i.e. notice that dropdown content is expanded, an arrow denoted "Back" being labelled as such with screen reader-accessible text.

General page layout 

We use landmark tags to communicate the visual layout of the pages for screen readers. In all cases, this depends on the page purpose and layout, but we try to remain consistent across the app.

Example: Agenda page

Example: Session page

Example: Attendee login page

Banner/Header

The banner contains: back navigation (exit Pigeonhole, back to Agenda, back to Session, back to Comment/Question), attendee login, Pigeonhole name

Main

The main contains: Question/Comment submit, submitted Questions/Comments, Attendee/Session/Speaker name

Footer

The footer contains: Privacy Policy and Terms & Conditions, language select, our sign-up link

Dynamic updates

New submissions appear dynamically in the feed for each session as they are submitted. For all sessions, the feed is built with the aria-live attribute, meaning a screen reader will be notified of new additions therein.

In all cases, we have opted for the "polite" variation of aria-live, wherein the notification of new content will be queued and read out once the queue is cleared (as opposed to "assertive", which interrupts the screen reader, like a push notification).

Accommodations have been made in how we have built the content, though users may need to configure their individual screen reader options in order to receive the notifications.