Accessibility at Pigeonhole Live

A quick word on accessibility

Accessibility refers to the useability of a product regardless of a person's special needs, whether temporary or permanent. 

At Pigeonhole Live, we believe in making conversations happen for and with everyone, by actively working on making the product accessible and useable for everyone. If you or someone on your team has any disability, whether temporary or otherwise, that is preventing you from fully using or enjoying our product, we would love to hear from you and make things right.

For the use of Pigeonhole Live, we will be focusing on considerations for eyesight, visual processing, and keyboard input. 

Eyesight

Some people may have their vision compromised, from a variety of causes, such as injury, ageing, or illness. There are also various types of colour blindness that should be considered when designing one's product with accessibility in mind, 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 themes, which are applied to the Audience Web App and the Projector Panel. We have a gallery of preset themes available for all plans, to suit a variety of needs. In addition, Engage and Captivate plans have access to Custom Themes, allowing you to create your own.

Visual Processing

While this might seem related to eyesight, it's actually governed by cognitive processes. Poor eyesight is the result of damage or deterioration to some components of the eye, such as the lens or cornea, while difficulty with processing images is cognitive in nature. For example, dyslexia is a form of visual processing that makes reading difficult, but a person can have perfect eyesight and be dyslexic. There are diagnosable conditions that can include visual processing difficulties, such as dyslexia, ADD, or autism, or it may just be a matter of sensitivity, such as a vulnerability to migraines.

Design

As with catering for those with poor eyesight or forms of colour blindness, much of this is in the choice of colours and typography.

As mentioned above, the ratio of our body text colour to the background colour is 10.29:1. The contrast ratio for pure black text colour on a white background is 21:1, which is too high and can cause difficulties for dyslexic people; 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.

Another consideration for those with dyslexia is to do with text formatting. Walls of text are avoided. We also favour left text alignment, and never use justified alignment, as the varied spacing between words and letters makes it more difficult to see where individual words begin and end. Another concern is that many people are in the habit of using a double space after a full stop; this is a holdover from typewriters and early word processors, but, like justified alignment, can contribute to the "waterfall" effect that makes it more difficult to discern where individual words begin and end. For this reason, our content writers use only a single space after a full stop. 

Our font stack is Roboto, Helvetica, and sans-serif for all of our content — the one exception being our blog, which uses Avenir, Trebuchet MS, and sans-serif — avoiding serif fonts altogether, as this can cause a "blurring" effect that makes text more difficult to read.

Development

While we use animations to provide visual feedback for user input on our product, animations can be difficult for some people to process visually. Animations used for visual feedback are short and simple, with only a single component moving at a time, such as a loading spinner. We also use smooth CSS transition properties.

Features

Our themes feature can also be useful in this regard. As well as our gallery of preset themes, the Custom Themes feature is available for Engage and Captivate plans. We do occasionally include animations in our themes, particularly our holiday themes, and these will be clearly signposted as containing animation. 

Keyboard input

Keyboard input is essential for those who cannot use a mouse with their computer. A mouse cursor is a very visual way of navigating a screen and may not be viable for someone sufficiently visually impaired. Or someone may not be able to use their hand to operate a mouse, perhaps because of an injury that has yet to heal.

Pigeonhole Live's Dashboard, AWA, and panels can all be navigated with keyboard input, using tab to move and enter to press links or buttons.

Screenreader UI flow

About screen readers

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.

Screen readers and Pigeonhole Live

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

Many operating systems now ship with inbuilt screen readers that can be toggled on and off and configured from the accessibility settings. VoiceOver comes with all Mac OSs since Mac OS X 10.4, while Windows has had its Narrator utility since Windows 2000. There is also now a Chrome extension called ChromeVox.

For those who are registered visually impaired, they will usually obtain some sponsorship for some dedicated software, like Jaws or NVDA.

Screen readers are operated with keyboard input, with some combination of screen reader command buttons together with whatever the desired function is, 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

Passcode page

When the user arrives at pigeonhole.at, they can use the tab key or screen reader control + left/right keys to navigate to the Pigeonhole's passcode input.

We have a function to generate a random passcode, but we recommend that organisers set a more human-readable passcode. Other options for attendee sign-in are the QR code scan on the Projector Panel (accessed by navigating to a session and setting the display to "Sign-in instructions") or to email attendees directly from your Pigeonhole Workspace with the link to join your Pigeonhole.

Agenda page

After entering the passcode, the user will land on the Agenda page. Your Pigeonhole name will be read out to let users know where they are. Keyboard focus will be on the button to exit the Pigeonhole. Scrolling through with screen reader control + left/right arrow keys will take them to:

  • user sign in if they're anonymous or the user profile edit if they are already signed in
  • the session information (the content in your Event Settings in your Pigeonhole set up), and
  • your Pigeonhole sessions, in this order. 

Using screen reader control + left/right arrows, users can scroll through your sessions, hearing first the session start time, the session name as specified in your session set up, and then the link to join the session (here they will hear the custom call-to-action(CTA) if you have opted for one). They can enter a session with the Enter key. To move straight to the session CTAs, the user can use the tab key.

Session page

Once in a Q&A session, the first item in the tab index is the question input. After that will be question sorting options (either by their own submissions, top voted, or latest) followed by other submissions.

The user can navigate with screen reader control + right arrow to first check they're within the character limit and then the submit button ("Ask" for Q&A). Alternatively, they can use the tab key to get to the submission button. Here, pressing the enter key will open a submission check, which the user can scroll through using the screen reader control + left/right arrow keys: first the user's submission for review, then the option to submit the question anonymously, and then button input to confirm or cancel this input. Once a question is submitted, moving through the tab index will take the user to the question sorting and other submissions.

Navigating through other submissions with screen reader control + left/right keys, users will first hear the number of the votes this submission has and then have the option to click through to browse through any comments or leave their own.

The UI flow for leaving comments to other submissions is similar to the flow for asking questions.

 

While we have made efforts to cater to a range of preferences and needs, we are always looking for ways to do better. If you have any feedback on how we can improve on our platform's accessibility, please drop us an email at productteam@pigeonlab.com.