We aim to make our software accessible to the widest audience possible. Empowering all people to easily and successfully use our products requires taking an inclusive, Accessible by Design, approach to both Product Design and Engineering.
Accessibility compliance goalsCopy URL
For all of Sprout’s web applications, we strive to achieve the Web Content Accessibility Guidelines 2.0 AA level of compliance. This ensures:
- our products exhibit our core company values
- we are using internationally recognized standards for benchmarking accessibility compliance
- we are building our software using industry best practices
Best practicesCopy URL
Accessibility is for everyone.
- Accessibility is about ensuring equitable access to our applications for all people.
- This includes people with disabilities, and also has many other beneficial aspects such as accommodating a user’s personal preference or temporary limitations, power users, SEO and more.
- We practice Inclusive Design to make our applications accessible to, and easily used by, the widest possible audience, without the need for special adaptation or specialized design.
- We follow web accessibility best practices such as semantic HTML and the proper use of ARIA to ensure robust support for Assistive Technologies.
- DO: Use the native browser
- DON’T: Subdue or alter the native browser
- DO: Consider Accessibility practices as a continuous responsibility for all team members
- DON’T: Allow Accessibility features to be an after-thought
- DO: Understand expected keyboard navigation before beginning development.
- DO: Understand what parts of the feature/product need to be read aloud for Screen Readers and which parts are decorations that need no explanation.
Accessible by designCopy URL
An Accessible by Design approach means we consistently focus on these aspects of Product Design and Development
- Semantic markup with robust support for Assistive Technologies (ATs)
- Always use HTML5 tags semantically
- Use ARIA (Accessible Rich Internet Applications) roles and
aria-attributes to provide Assistive Technology support, but only when necessary
- Use components from Seeds to ensure maintainability across the entire application
- The focus order of elements within a page should be logical and intuitive
- Any important non-text content should be accompanied by a text alternative (alt-text)
- Simple and intuitive design
- An intuitive and logical design lends itself well to being developed semantically—consider the “outline” version of a page
- Experiences should not overwhelm users or behave in unexpected ways
- The experience should be functional using only a keyboard
- Considerate usage of color
- Color is never used alone to indicate meaning, such as validation errors or prompting user action
- Text and User Interface (UI) elements should have sufficient color contrast with their backgrounds
- Clear and concise copy
- The Sprout Social web app is currently accessible to speakers of English, French, Spanish, Italian and Portuguese. In order to best accommodate these audiences, keep copy short and to the point. Translations are more likely to increase in size (character count) and lose clarity from a verbose English source.
- Acronyms - must always be defined out upon first-use
- The Guiding Questions
- Equitable - Is the design is fair and impartial?
- Flexible - Does the feature allow for multiple input/output methods to accommodate user needs/preferences?
- Perceivable - Can the information be easily consumed? Either visually, through audio, or through other Assistive Technologies?
- Understandable - Is the information and experience easy to understand?
- Low Physical Effort - Is it physically easy to use?
Keyboard navigationCopy URL
We aspire to meet the WCAG 2.0 AA standards.
Expected Keyboard Navigation InteractionsCopy URL
|Navigate to most elements|
|Buttons||Ensure elements with ARIA |
|Radios||Radio selection should update automatically on keyup|
|Select (Dropdown) Menu|
|Autocomplete||Upon selection of an auto-complete option, focus should go back to the autocomplete text field|
|Dialog / Modal / Takeover||This will usually just close the modal unless a confirmation/warning modal is required to fully dismiss|
|Tab Panel (Tab Group)|
|Scrolling||Always minimize or eliminate horizontal scrolling within our supported viewport sizes.|
- Our expected keyboard navigation primarily follows the Keyboard Testing table from WebAim.
- For a detailed look, check out the Web Content Accessibility Guidelines 2.0 AA Standards from W3C.