Accessibility

At SkillTree, we're dedicated to creating an accessible learning environment that empowers everyone to succeed. This guide highlights our accessibility features and best practices to ensure you can navigate and engage with our platform effortlessly.

This guide is broken down into two section where the first section outlines accessibility features of the SkillTree Dashboard and the second provides instructions about creating a SkillTree gamified accessible training in the platform.

Dashboard Accessibility

This section outlines the accessibility features and best practices for the SkillTree Dashboard.

Tips

Please Note that this accessibility guide is for users interested in creating gamified training experiences in SkillTree Platform. If you are interested in earning credits in existing trainings, please check out our Taking a Training Accessibility Guide for more details.

Basic Navigation

  • Use Tab to move forward through interactive elements
  • Use Shift + Tab to move backward
  • Press Enter or Space to activate buttons and links
  • Use arrow keys to navigate through menus and dropdowns
  • Use Escape to close modals and popups
  • Use Alt + Left Arrow to navigate to the previous page in the browser history
  • Use Alt + Right Arrow to navigate to the next page in the browser history

Landmark Navigation

The heading structure is organized hierarchically to facilitate easy navigation using screen reader landmark navigation.

For example, on a project page, the heading levels are organized as follows:

  • The project title serves as the main heading (Level 1)
  • Subjects (Level 2 heading that groups all subjects)
    • Each subject is a Level 3 heading

This heading hierarchy enables efficient navigation through screen readers. For example, using JAWS Screen Reader:

  1. List all headings with INSERT+F6
  2. Navigate directly to the first subject by pressing 3 for the first Level 3 heading
  3. Press 3 again to move to the next subject heading
  4. Once you reach your desired subject, press Enter to drill down into the subject

Skip to Main Content

The "Skip to content" feature helps you quickly access the main content by bypassing repetitive navigation links. This button appears when you first press the Tab key on any page.

To use this feature:

  1. Press Tab when the page loads
  2. The "Skip to content" button will appear in the top-left corner and be automatically selected
  3. Press Enter to jump directly to the main content area

Tips

You can access this feature at any time by refreshing the page with F5 and then pressing Tab.

Screen Reader Support

  • Decorative images and icons are labeled to be skipped by screen readers
  • Many actions are announced to screen readers for better accessibility, this is in addition to the default announcements provided by the browser
  • All form fields have associated labels
  • Clicking on a form field label will focus the field
  • Required fields are clearly indicated
  • Error messages are announced by screen readers
  • Buttons have descriptive text
  • Interactive elements are keyboard accessible
  • Focus indicators are visible for keyboard navigation

Visual Adjustments

  • The application supports browser zoom up to 200%
  • Text and interactive elements maintain a minimum 4.5:1 contrast ratio
  • Color is not used as the sole means of conveying information
  • All color combinations meet WCAG 2.1 AA level compliance

Video, Multimedia and Images

  • Descriptive alt text is added to meaningful images
  • Video captions are provided where applicable
  • Video and audio transcripts are provided where applicable

Rich Text Editor

The SkillTree description editor is a full-featured Rich Text Editor. The editor is used in the dashboard to provide descriptions for Projects, Subjects, Skills, Badges, and also for sending emails to users and project administrators.

It supports both tab-based navigation and keyboard shortcuts for text editing:

FeatureShortcutExplanation
Copy & PasteCtrl+C / Ctrl+VPaste anything from browser, screenshot, excel, powerpoint, etc.
HeadingsCtrl+Alt+tSupports 6 different sized headings
BoldCtrl+BApply bold formatting to text
ItalicsCtrl+IApply italic formating to text
StrikeCtrl+SApply strike-through formating to text
Font SizeCtrl+Alt+sApply a specific font size to text
LineCtrl+LInsert a horizontal line seperator
BlockquoteAlt+QApply quote formatting to line(s) of text
Unordered ListCtrl+UA bulleted list
Ordered ListCtrl+OA numbered list
IndentFn+TabWhen creating a list, this will indent the list one level
OutdentFn+Shift+TabWhen creating a list, this will outdent the list one level
ImageCtrl+Alt+iInsert an image. Images may be chosen from a local file, a URL, or copy and pasted.
LinkCtrl+Alt+rA hyperlink to an external resource
AttachmentsCtrl+Alt+aAttach a file to the description. Attached files will be stored on the SkillTree server and a link for downloading the attachment will be provided.
Inline CodeCtrl+Shift+CApply code style formatting inline
Code BlockCtrl+Shift+PApply code style to a multiline section

How Make Accessible Trainings

Video and Audio Content

When creating training content, ensure accessibility for all users by:

  • Providing transcripts for video files
  • Including captions for audio content
  • Refer to the Audio/Video section for detailed upload instructions

Image Accessibility

For meaningful images in descriptions:

  1. Use the upload image feature
    • Click the Insert Image button
    • Or use the keyboard shortcut CTRL+ALT+i
  2. Add descriptive alt text in the Description input box of the insert image popup

Text Formatting

When pasting content into the description editor:

  • Use CTRL+SHIFT+v or right-click and select Paste as Plain Text
  • Avoid default paste operations from sources like Microsoft Word
  • Default paste operations can:
    • Carry inaccessible styles and formatting
    • Alter background colors
    • Create inaccessible and unattractive displays in dark mode

These practices ensure your content is accessible to all users, regardless of their needs or preferences.

Feedback

At SkillTree, we're committed to making our platform accessible to everyone. We regularly test our system using both automated tools and manual reviews. Your feedback is incredibly valuable to us! If you encounter any accessibility barriers or have suggestions for improvement, please don't hesitate to reach out.