Creating accessible web content matters for everyone. If your organization uses ArcGIS Hub or ArcGIS Enterprise to create sites and pages, understand and applying the principles of accessible web design supports you in providing the best experience for everyone, whether or not they have a situational, permanent, or temporary disability.
What is accessibility?
From sighted individuals to aging generations, easily accessible, usable content is imperative to providing equal access to people everywhere. This is why many countries around the world are seeking to improve the accessibility of their web content by adhering to the Web Content Accessibility Guidelines (WCAG), a set of international standards that have been used to define a number of regulations in Canada, Germany, New Zealand, and many others. While regulations may vary slightly by country, the goal of inclusivity remains the same.
In this post, we’ll use accessibility as an umbrella term to refer to WCAG 2.1, Section 508, and Title III of the Americans with Disabilities Act (ADA). In the United States, WCAG sets the foundation for Section 508, a federal regulation that applies to all federally produced web content, as well as being the recommended practice for ADA compliance.
Accessibility and the Site Builder
Our Site Builder enables you to feature a range of content types on your sites, including web maps, images, video, and text, by using drag-and-drop cards. While the ArcGIS Hub team strives for WCAG 2.1 compliance by putting in work behind the scenes to make the site building experience navigable for sighted keyboard users and for those who use assistive technologies, there are still several guidelines that you should consider as you customize your site.
Organize and structure accessible content
- Structure your narratives with sections to make it easier for screen readers to navigate text. Be sure to use a correct hierarchy of header levels by not skipping heading levels.
- If you link to additional resources, such as external sites and pages, ensure that your text is descriptive. Rather than saying, “click here”, invite people to follow the link with phrasing like, “to learn more about x…”; this helps assistive technologies that may be using shortcuts to rapidly jump through all links on a page without having read the context around those links.
- As part of , recommends that you avoid opening links in new tabs or windows unless you provide advanced warning.
- Organizing content into tables? Avoid using them to structure your layout. Assistive technologies handle basic data tables best. Use the Table Header Toggle (H) option that comes with our text card table to structure your tables for an optimal experience for assistive technologies.
To learn more about adding and formatting text, read on the text card. You can also learn more about the enhancements we’ve made this month to the text card by checking out .
Category cards visualize groups of similar datasets. Upload your own image for your category card 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. We automatically provide alt-text for each of these images by tying it to the link text you provide via an aria tag.
If you want to use your own image, you can provide a URL for an SVG or transparent PNG file. Be sure to write alt-text in the provided field to make sure that your image is accessible to screen readers.
Share accessible visuals & media
- Alt text should be provided for all images on your site.
- Descriptions should be brief, but provide enough context to justify the value of the image.
- Alt text is different from an image caption. Don’t copy and paste an image caption as alt text. The screen reader will read the same thing twice.
- Refrain from using “image/picture of” in your alt text.
- Want your image to link somewhere? Make sure that your image hyperlink is set to open in the same tab; it makes things easier for a sighted user to navigate.
Gallery cards are used to display a range of content types like apps, dashboards, webmaps, documents, and additional sites and pages. Opt to style your gallery with icons or thumbnails. If displaying thumbnails, we automatically configure the alt-text for you based on the title of the content item. That’s why it’s important to provide a descriptive title for the content item. For more information on editing your item’s thumbnail and title, visit our .
Event List card
While you will have to caption any videos that you add to our video card yourself, as recommended by WCAG guideline , we do support YouTube, Vimeo, and Facebook video (Note: ArcGIS Enterprise 10.7 provides support for Facebook video only). You can find out more about captioning YouTube videos on , which offers instructions on how to upload caption files or manually transcribe and sync captions with video.
Social Media card
Automated accessibility testing tools
Create a new site or review existing sites for accessibility improvements. If you have any questions or comments, reach out to us on GeoNet. We update our changelog regularly to reflect updates we’re making to our product in terms of accessibility.
If you’re new to ArcGIS Hub, enable open data to launch ArcGIS Hub basic. Interested in learning more about what ArcGIS Hub can do for your community? Take the Hub readiness assessment and learn more in our FAQs.
We want to hear from you
Whether you’re new to ArcGIS Hub or have been with us since the beginning of Open Data, let us know what you think. We’d be happy to hear from you.
About the authors
Katie is a documentation writer working on ArcGIS Hub and Enterprise Sites in the R&D Center in Washington, D.C.
I'm a UX/UI designer for Esri on ArcGIS Hub who has a passion for web accessibility.