Accessibility at Spekit

Spekit's stance on accessibility 

Accessibility at Spekit is not it's own item on the roadmap but rather something we're consistently striving to improve upon as we touch old areas of the product or build new features.

We acknowledge that many legacy aspects of Spekit do not meet WCAG accessibility standards and we are working to improve the accessibility of the product incrementally over time.

Types of accessibility limitations 

Accessibility and usability are often used interchangeably, however, they are defined differently. Accessibility is the idea that all users can use the product regardless of how they interact with it. Usability is the idea of how difficult or easy a product is to use.

Accessibility limitation categories*

• Visual: This impacts users with varying degrees of colorblindness. This affects approximately 1 in 12 men (8%) and 1 in 200 women in the world according to ColourBlindAwareness.org.
• Auditory: This impacts users with hearing loss. One in eight people in the United States (13 percent, or 30 million) aged 12 years or older have hearing loss in both ears, based on standard hearing examinations according to the National Institute of Deafness and Other Communication Disorders.
• Thinking: This is any disability that impacts how a user processes thoughts, problem-solving, memory, emotions, and other ways that we use our brains. This form of disability is not a part of the W3C standards yet. Here is a link to the developing work that is in progress that W3C will add to the standards.

This disability includes but is not limited to Dyslexia, Attention-Deficit/Hyperactivity Disorder (ADD/ADHD), Dyscalculia (recognizing numbers and symbols), and Memory loss.

*This is not meant to be an exhaustive list

WCAG accessibility standards 

The Web Content Accessibility Guidelines (WCAG) 2.0 Level AA is recognized and acknowledged as the international standard measure of success.

WCAG 2.0 has outlined the following four principles for designing and implementing an accessible digital product.

Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.

Principle 2: Operable - User interface components and navigation must be operable.

Principle 3: Understandable - Information and the operation of user interface must be understandable.

Principle 4: Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

There are supporting guidelines for each principle mentioned above.

1. Perceivable
   • Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
   • Provide alternatives for time-based media.
   • Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
   • Make it easier for users to see and hear content including separating foreground from background.
2. Operable
   • Make all functionality available from a keyboard.
   • Provide users enough time to read and use content.
   • Do not design content in a way that is known to cause seizures.
   • Provide ways to help users navigate, find content, and determine where they are.
3. Understandable
   • Make text content readable and understandable.
   • Make Web pages appear and operate in predictable ways.
   • Help users avoid and correct mistakes.
4. Robust
   • Maximize compatibility with current and future use

Search accessibility 

Tab order

Tabs

Once you have the first tab focused, select a different tab using the left and right arrow keys on your keyboard. 

Search result items

Once you have the first search result item focused, use the tab key on your keyboard to move to the next search result. There is a known issue where if the current search result that is focused has links in the content preview text, those links will be next in the tab order (even if they are not visible in the preview). 

Results per page dropdown

Once you have the dropdown focused, use the down arrow key on your keyboard to open the dropdown and then use the up and down arrow keys to navigate to the dropdown item of your choosing. To select a dropdown item, hit the enter key on your keyboard. To close the dropdown without making a selection, use the tab key on your keyboard. 

Pagination

Once you have the first button in the pagination focused, use the left and right arrow keys on your keyboard to move between buttons and hit enter when you want to make a selection. 

Focus states

Success Criterion 2.4.11 Focus Appearance (Minimum) (Level AA): When a user interface component has keyboard focus, the focus indicator:

• Encloses the visual presentation of the user interface component;
• Has a contrast ratio of at least 3:1 between its pixels in the focused and unfocused states;
• Has a contrast ratio of at least 3:1 against adjacent colors.

Exceptions:

• The focus indicator is determined by the user-agent and cannot be adjusted by the author, or
• The focus indicator and the indicator's background color are not modified by the author, or
• An area of the focus indicator meets all the following:
  • At least as large as the area of a 1 CSS pixel thick perimeter of the unfocused component, or is at least as large as a 4 CSS pixel thick line along the shortest side of the minimum bounding box of the unfocused component, and
  • has a contrast ratio of at least 3:1 against the same pixels in the unfocused state, and
  • has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.

Tabs

List items

Search bar

Dropdown

Create & clone Spek accessibility 

Tab order

Focus states

Success Criterion 2.4.11 Focus Appearance (Minimum) (Level AA): When a user interface component has keyboard focus, the focus indicator:

• Encloses the visual presentation of the user interface component;
• Has a contrast ratio of at least 3:1 between its pixels in the focused and unfocused states;
• Has a contrast ratio of at least 3:1 against adjacent colors.

Exceptions:

• The focus indicator is determined by the user-agent and cannot be adjusted by the author, or
• The focus indicator and the indicator's background color are not modified by the author, or
• An area of the focus indicator meets all the following:
  • At least as large as the area of a 1 CSS pixel thick perimeter of the unfocused component, or is at least as large as a 4 CSS pixel thick line along the shortest side of the minimum bounding box of the unfocused component, and
  • has a contrast ratio of at least 3:1 against the same pixels in the unfocused state, and
  • has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.

Single or multiple select

Text input

Checkbox

Buttons

View Spek accessibility in the extension 

Tab order

Focus states

Success Criterion 2.4.11 Focus Appearance (Minimum) (Level AA): When a user interface component has keyboard focus, the focus indicator:

• Encloses the visual presentation of the user interface component;
• Has a contrast ratio of at least 3:1 between its pixels in the focused and unfocused states;
• Has a contrast ratio of at least 3:1 against adjacent colors.

Exceptions:

• The focus indicator is determined by the user-agent and cannot be adjusted by the author, or
• The focus indicator and the indicator's background color are not modified by the author, or
• An area of the focus indicator meets all the following:
  • At least as large as the area of a 1 CSS pixel thick perimeter of the unfocused component, or is at least as large as a 4 CSS pixel thick line along the shortest side of the minimum bounding box of the unfocused component, and
  • has a contrast ratio of at least 3:1 against the same pixels in the unfocused state, and
  • has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.

Buttons

What's NOT accessible in Spekit today 

There are several area's of Spekit that are not accessible today (as of 10.04.2023). This means that these features have not been optimized for WCAG accessibility standards at any level. While portions of these features may be categorized as accessible, the feature as a whole is not able to be used in its entirety by those with disabilities as noted in Types of accessibility limitations. 

The following items, pages, or features are NOT accessible:

• Home
• Data dictionary
• Content Library
• Topics
• Wiki
• Flows
• Spotlights
• Settings

Accessibility improvements coming soon 

In the short term, the following features will be undergoing changes that will improve accessibility: 

• Spek edit
• Spek view in the webapp

Related accessibility laws and policies

• Section 508
  • Information and news about the accessibility standards introduced by Section 508 of the Rehabilitation Act.
• U.S Access Board
  • Provides design guidelines for the built environment, transit vehicles, telecommunications equipment and for electronic and information technology.
• W3C’s Web Accessibility Initiative (WAI)
  • Resources, strategies and guidelines to help make the web fully accessible to persons with disabilities.
• Dyslexia in the workplace
• W3C on Cognitive Accessibility
• React on Accessibility