Esri incorporates inclusivity, diversity, and equality throughout ArcGIS software, including products and services compatible with the latest assistive technologies under the guidance of current software accessibility standards and guidelines.
Accessibility in ArcGIS Hub includes the features and functionality described in the following sections. Hub allows you to create sites to collaborate, communicate, and share content, and it includes many built-in components that support accessibility. Site editors can additionally incorporate accessibility when configuring their sites. Use the features and recommendations below to improve the accessibility of your site.
Choose high-contrast colors across the site
High-contrast colors allow individuals with varying visual abilities to see the information on your site. According to the WCAG guideline 1.4.3 Contrast (Minimum), color luminance contrast between text and background color must be greater than or equal to 4.5:1 for small text and 3:1 for large text.
Large text is text that is 14 pt (18 px) or larger in bold or 18 pt (24 px) or larger in normal weight. Small (regular) text is everything else. To ensure that your site uses sufficient contrast, consider the following recommendations.
Use a high-contrast theme
If you are using the ArcGIS Online shared theme, sites created in Hub automatically import that shared theme. This theme allows you to compare the contrast between foreground and background colors.
To ensure that your site has an accessible theme, verify that you’ve passed regular text contrast requirements for header text and background, global navigation text and background, body text and background, and body link and background. Hub uses these pairings to generate the theme that is applied to all components.
Tip:
To improve contrast between text and a row background image, add a light or dark background color to the row and adjust the color's transparency. This color also serves as a background as some users browse the web with images disabled.
Ensure the accessibility of visual content
Color luminance contrast standards also apply to the graphical elements of your site. The WCAG guideline 1.4.11 Non-Text Contrast recommends a 3:1 ratio to create enough contrast between icons and graphical elements and the background. Depending on the graphic, you may be able to adjust the configuration settings for embedded elements to meet color luminance contrast standards. For example, some social media posts can be configured to use a high-contrast theme.
Verify the accessibility of the site with automated tools
If you set a theme for the site, you can verify the contrast of your selected colors with an external tool. Various free color contrast analysis tools are available. For example, use WebAIM's Color Contrast Checker to compare two hex code colors, or install TPGI's desktop app to compare hex, RGB, HSL, and HSV colors, and use eyedropper tools to extract colors from any part of your screen.
Several tools can run automated tests of your entire site to check for accessibility violations. Deque offers an aXe browser plugin that can be used with Chrome, Firefox, or Edge.
Automated accessibility testing tools cannot check the legibility of text on background images, so you may want to do this manually. If you have a background image and automated tools report failures, check your background and foreground color contrast. These tools compare colors as if the background image does not exist.
Ensure that row cards have sufficient color contrast
Row cards are the building blocks of a site and can contain any combination of other layout cards. When configuring the settings for a row, you can set a background color or upload an image. For both options, ensure that there is sufficiently high color contrast between the background and any content displayed by other cards in the row.
Organize an accessible content structure
Structure your text content with sections and headings so that screen readers can more accurately navigate the text. Learn more in the related WCAG guidelines. Additionally, you can improve the information hierarchy of the content by using section heading levels. Avoid using tables to structure your content in a layout. When using layout cards, you can use the WCAG guidelines 2.4.4. Link Purpose (In Context) and 2.4.6 Headings and Labels to create structured text that facilitates navigation.
Structure narratives with sections and section headings
On each page you publish, include at least one <h1> heading to provide context to visitors. Do not skip heading levels and do not apply a heading style to text to increase font size for aesthetic purposes.
When using the Text card, use sections and heading levels to structure the text. Use the table header toggle (H) option that comes with the Text card table to optimally structure tables for assistive technologies. When using the Gallery card, adjust the title heading to assist with nested headings. This does not change font size.
Ensure that links are accessible
Links that open in a new window or tab can disrupt browsing and be confusing for some users. In the new window or tab, the back button does not work and users must close the tab to return to the previous content. If you link to resources such as external sites and pages, provide a notice when a link opens in a new tab or window, as this is a change of context (On Input 3.2.2, G201). It's also helpful when the destination is a different type of file format, such as a PDF. Use text or an icon to provide this notice.
Use a stand-alone launch icon with its own label inside the link:
<calcite-link href="#" target="_blank">Get started <calcite-icon icon="launch" text-label="opens in new tab" scale="s"></calcite-icon></calcite-link>
Icons in the library are marked as decorative because the necessary context on the links is provided by aria-labels that differ from the visible text. When an aria-label is used on a link, the aria-label overwrites the link text when communicated to assistive technologies.
If the icon-end slot is used for a visual indicator, include the text of the link and provide programmatic context within the aria-label:
<calcite-link href="#" target="_blank" icon-end="launch" aria-label="Get started, Opens in new tab">Get started</calcite-link>
For external links, also ensure that your text describes the link's purpose or destination. Invite visitors to follow a link with phrasing such as: to learn more about instead of click here. This means assistive technologies using shortcuts to navigate through links on a page do not need to read the surrounding context.
Make visual content accessible
Add images and media to enrich your sites and pages. Choose visual content that provides unique information.
Add alternative text to images
All visual content, unless decorative, requires a text equivalent (Non-text Content 1.1.1) often referred to as alternative or alt text. Alt text is an objective description of a non-decorative image used to describe the image to those using screen readers. Screen readers read alt text aloud to describe the images that are displayed.
The Image card settings provide several options for customizing the display of your image, including the option to provide image alt text. For the Category card, upload your own image or choose from our library of icons. Our icons are Scalable Vector Graphics (SVGs), an image file format that can be scaled to different sizes without affecting image quality. Icons are automatically marked as decorative in the library as the link text provides more context than the icon.
When using your own image, provide a URL for an SVG or transparent PNG file. Add alt text if the image provides supplemental information or leave it blank to indicate the image is decorative. Consider these best practices for writing the alt text for images:
- Describe the image succinctly.
- Do not include words such as picture, image, or graphic of in the description. This is communicated automatically.
- Provide details relevant to the context.
- Use alt text that is distinct from the image caption. A caption serves a different purpose as a more subjective description of the image. Alt text has a programmatic association with an image while captions do not. Screen readers can read both alt text and captions, so if these are the same, the screen reader may repeat the phrase.
- If using an image as a link, describe the destination or purpose of the link, not the image.
Add captions and titles to video content
WCAG guideline 1.2.2 Captions requires that you add captions to videos included on the Video card. Hub supports Facebook, Vimeo, and YouTube video. Learn more about captioning YouTube videos on their support page, which offers instructions for how to upload caption files or manually transcribe and sync captions with video.
Embedded content must contain titles so that people using assistive technologies can decide whether to enter that section of the page. Use the Title setting on the Video card to describe the content of your video.
Tip:
This also applies to content embedded with the Iframe card. Add a title describing the content within the iframe as it won't be read automatically for those using screen readers. They must choose to enter the iframe.
Learn more
For information on the accessibility conformance level for ArcGIS Hub in accordance with the current version of Web Content Accessibility Guidelines (WCAG), refer to the Esri Accessibility Conformance Reports. These reports are based on the current Voluntary Product Accessibility Template (VPAT) and are completed by an evaluation of ArcGIS Hub by certified accessibility professionals.
For more information about Esri and accessible technology, visit Esri Legal Accessibility. Refer to the following resources on product accessibility: