The first step in making the ServiceNow portal accessible is to understand the accessibility guidelines and standards. The most widely accepted guidelines are the Web Content Accessibility Guidelines (WCAG) 2.1, which provides a set of recommendations for making web content more accessible. These guidelines cover a range of topics, including the use of alternative text for images, the use of descriptive labels for form fields, and the use of clear and simple language.
This can involve a range of changes, including updating the code to improve keyboard accessibility, providing alternative text for images, and ensuring that form fields have clear and descriptive labels. It is also important to ensure that the portal is compatible with assistive technologies such as screen readers and that the content is presented in a clear and consistent manner.
In addition to these technical changes, it is also important to ensure that the ServiceNow portal is accessible from a usability perspective. This involves designing the portal in a way that is easy to use and navigate, with clear and concise language, logical navigation, and consistent design elements. User testing can be helpful in identifying usability issues and making improvements based on user feedback.
Now Platform user interface You can configure accessibility features globally or for specific users. Next Experience UI unifies your instance apps and reduces clicks to access the items you need to get working.Set up Next Experience accessibility preferences to achieve a UI that's most accessible to you.Procedure
- Navigate to User Menu > Preferences > Accessibility.
- Select the preferences you want to configure.
Keyboard accessibilityThe Now Platform is designed to be as accessible as possible without user modification or setting changes. Users can tab through the platform UI without enabling accessibility. However, without accessibility enabled, tabbing goes from input to input and skips other items on a form, such as reference icons.Color and style accessibility
Maintain appropriate color contrast ratios: Color contrast ratios assist those who are visually impaired to be able to see the content on your Service Portal. The WCAG 2.1 guidelines state for the minimum contrast ratio for text and images of text must be 4.5:1 for normal text (18-point or larger) and 3:1 for large text (14-point or larger and bold). There are several color and style changes that make the platform more accessible.
Dark theme
Dark theme is supported for configurable workspaces, lists, forms, dashboards, and reports.
Note: Some custom pages do not inherit the dark theme, which may create visual inconsistencies in the classic environment. This is an expected behavior and it is the admins' responsibility to exclude the dark theme from their classic environment if the inconsistencies are unacceptable for company use.
The Next Experience theme has a dark variant enabled by default, but dark variants may not apply to all experiences. To open the Theme menu, do the following.
- Select the user menu, represented by your user icon or initials in the Next Experience Unified Navigation.
- Select Preferences.
- Select the Theme tile.
For more information, see Next Experience system properties.
Note: The dark theme does not apply to classic environment by default.
High Contrast Theming:
In Utah, the “Dark Theme” is more expansive than in previous releases:
Workspaces
Enable the Contrast UI theme
In the system settings, on the themes tab, select the Contrast UI theme. The Contrast UI theme provides a higher contrast range of colors for the platform UI.
In Service Portal, you can apply the Stock — High Contrast theme to a portal for a higher contrast color range. Portal users can enable a contrast theme using the Accessibility option in the User Profile widget.
Patterned charts and graphs
View charts and graphs that rely heavily on color with patterns in addition to colors. Navigate to System settings > General, then select Data visualization patterns enabled.
Accessibility enabled graph
Enable text resize in your portal
Text resizes to increase the size of your text up to 200% through your browser settings. More details on enablement and configuration: https://docs.servicenow.com/bundle/utah-platform-user-interface/page/build/service-portal/task/enabl...
Screen reader accessibility
Screen elements in the platform have enhancements that make them accessible to screen readers. Use NVDA, JAWS, or VoiceOver for non-visual access to the platform.
Skip links allow you to tab straight to the main content instead of tabbing through all the other elements on the page.
When a page reloads or search results display, screen readers inform the user.
To reduce confusion when tabbing through modules, the edit application/edit module and add to favorites icons are accessible to screen readers by tabbing. To skip the Edit application/module and Add to favorites icons, use the up and down arrows on the keyboard.
In Service Portal, users can add alternative text to containers in their own portal for screen readers to read.
Elements such as links or button are listed as such for screen reader awareness.
Properties pages, such as System Properties > UI Properties, include an icon with the property name. Screen readers read the property name when the icon is in focus.
Use skip links
Skip links allow users to quickly navigate to the main content on a page, list, or form, bypassing icons, banner text, navigation links, and other elements. Skip links are not visible until you tab to them. The user interface includes skip links to the navigation menu, and the main content pane. If accessibility is not enabled, users can also use skip links to activate accessibility.
Recap:
- Provide alt text for images and graphics: This enables those who are visually impaired to use your Service Portal with ease. WCAG 2.1 guidelines specify the following requirements for alt text:
- Provide text alternatives for all non-text content: All images, including decorative images, must have alt text that accurately describes their purpose.
- Provide equivalent alternatives: The alt text must provide equivalent information to the visual content of the image.
- Use null alt text: For images that are purely decorative, the alt text should be empty (alt="").
- Avoid using "image of" or "graphic of" in the alt text: The alt text should describe the image, not state that it is an image.
- Be concise: The alt text should be short and concise, usually no more than a few words.
- Test your portal with assistive technologies: Conduct regular testing of your portal with assistive technologies such as JAWS can help identify and resolve any accessibility issues.
- Avoid using jargon or acronyms that users may not understand: Use what makes sense to your users.
- Speak their language, literally: Ensure that the Service Portal is available in every language your users operate in. You can learn more about how to localize your Service Portal here.
- Provide keyboard-only navigation: Users with motor impairments may use the keyboard to navigate your portal.
- Leverage pre-built experiences: Consider using the pre-existing portals listed below to jump start your implementation. Each one has been designed by product designers with a focus on end user experience.
- Employee Center
- CSM Service Portal
- Knowledge Portal
- Use white space efficiently: Proper incorporation of white space allows for you to place focus on the items that really matter.
- Review the Accessibility Conformance Reports: These reports outline the conformance level of Service Portal across the criteria set out by the international version of the VPAT, which incorporates WCAG, Revised Section 508, and European Union accessibility standards.
- Strive for consistency within both your visual and functional components:
- Follow your company’s branding guidelines: Colors schemes, fonts, images, and layouts should be consistent across your organization’s products. If you do not have branding guidelines, look to engage your marketing or user experience teams to develop a look and feel that reflects your organization.
- Using a theme can assist with distributing branding across portals.
- Use widgets from the widget library: If custom functionality is required, aim to clone an existing widget to build upon.
- Use variable sets: Variable sets provide consistency within your Service Catalog items.
- Follow your company’s branding guidelines: Colors schemes, fonts, images, and layouts should be consistent across your organization’s products. If you do not have branding guidelines, look to engage your marketing or user experience teams to develop a look and feel that reflects your organization.
- Ensure the user experience does not deviate across your Service Portal: Ask “why” if there is a need to deviate from an existing pattern.
- Include your users when developing your taxonomy: This ensures that the result resonates with them. A guide to this process is available here.
- For users of Employee Center, you can follow the taxonomy best practices guide in this video.
- Remember that consumers are not providers:
- Consider what a user may know: If a field is complex, add additional information.
- Auto-fill what you can on a form: Consider using knowledge gathered from ServiceNow, your integrations, and previous user answers to populate fields for the user.
- Use the right input field types: Some examples are found below, or you can visit the guide here.
- For a small, finite list of inputs use a drop down.
- For larger lists of data, use a reference field.
- Use date/time fields where applicable.
- Add useful metadata to catalog and knowledge articles to ensure searches return useful results.
- Ensure that the search bar is prominent and available on every page.
- Adding too many sources may lead to a degradation in performance, so ensure you only include sources that a requester would need to see.
- Promote the display of important information: Display important and/or timely messages such as outages, news, or alerts in a manner that is both easy to see and able to be dismissed.
- Target these announcements based on a user’s location, subscription, role, etc.
- Focus on displaying relevant material: Utilize user roles to ensure that users are only presented with catalog items and knowledge articles that are relevant to them and their roles.
For a cumulative release notes summary on accessibility information for the current release, see Release notes for accessibility.
