Builders' accessibility features and updates
Summarize
Summary of Builders' accessibility features and updates
ServiceNow provides accessibility solutions within its Builder tools to help partners design inclusive and compliant user interfaces. These features assist development and design teams in identifying and resolving accessibility issues during the interface creation process, ensuring adherence to standards like WCAG and Section 508.
Show less
Find and Fix Issues feature in UI Builder
This real-time diagnostic tool scans UI designs for common accessibility problems such as missing alt text for images and ARIA labels for dynamic content. It offers actionable guidance to help developers build more accessible experiences. However, some accessibility aspects—like keyboard navigation and screen-reader optimization—require manual evaluation beyond the tool's automated checks.
Color contrast checker in Theme Builder
To prevent accessibility barriers for users with low vision or color blindness, the Theme Builder includes a built-in color contrast checker. This tool evaluates color combinations against established guidelines and alerts designers to any contrast issues via error indicators next to problematic components. Regular use of this checker promotes improved usability and compliance throughout the design process.
Custom fonts in Theme Builder
The Custom Font option allows developers to upload fonts tailored to improve readability and accessibility. Selecting appropriate fonts can reduce eye strain for users with visual impairments, support cognitive accessibility needs (such as for dyslexia or ADHD), and enhance globalization by better supporting non-Latin alphabets. This flexibility helps deliver a more inclusive user experience across diverse audiences.
ServiceNow provides accessibility solutions for partners. Builder tools include features that help teams design more accessible interfaces and find and fix issues during the design process.
Find and fix issues feature in UI Builder
- Alt text for images
- ARIA labels for dynamic content
- Other nuanced accessibility factors
This feature helps developers create more accessible experiences. However, some accessibility considerations require manual assessment, including:
- Keyboard navigation functionality
- Screen-reader experience optimization
- Other nuanced accessibility factors
For a comprehensive understanding of how to use this feature effectively, refer to the detailed guide: Find and fix issues in UI Builder.
Color contrast checker in Theme Builder
Customizing color palettes for UI components can impact the accessibility of your interface. Designers must verify that their color choices meet color contrast requirements so that they do not inadvertently create barriers for users with low vision or color blindness.
- Color contrast: Users with visual impairments require strong contrast between UI components to navigate effectively.
- Design oversight: Without proper tools, designers might overlook contrast issues, leading to accessibility errors.
Theme Builder's Solution:
- Evaluates the contrast between UI components against established guidelines.
- Alerts designers to potential issues by displaying an error next to components that fail to meet these standards.
The color contrast checker in Theme Builder helps designers verify that UI designs are accessible to a broader audience. Regularly checking for color contrast during the design process is a general guideline that enhances overall user experience.
See the following links for more information:
- Edit Components: Learn how to edit component and understand the color contrast error alerts.
- Adjust a component to meet accessibility standards : Discover how to use the color picker and other tools to select colors that meet accessibility standards.
Custom fonts in Theme Builder
The Custom Font option in Theme Builder enables developers to upload a font to use on the interface.
- Improved readability: Custom fonts can be selected to enhance readability, making text easier to see, understand, and retain. This is beneficial for users with visual impairments, as clear letter forms reduce eye strain.
- Support for cognitive differences: Custom fonts can address cognitive accessibility needs. For instance, users with dyslexia or Attention- Deficit/Hyperactivity Disorder (ADHD) may benefit from fonts that reduce reading strain and improve information processing.
- Improved globalization support: Custom fonts tailored to specific languages improve the readability for non-Latin alphabets and help provide consistent, accessible user experiences across global audiences.
To learn more, see Upload a custom font to your theme.