ArcGIS Hub and ArcGIS Enterprise Sites: Designing for Accessibility
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 referto 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.
Our Site Builderenables 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
As you use the 17 cards available in our Layout builder, you’ll want to consider WCAG guidelines such as Headings and Labels 2.4.6 and Link Purpose (In Context) 2.4.4 to create a structured narrative that’s easy to navigate.
Row card
Row cards are the building blocks of your site. They can be filled with any combination of additional cards, such as the web map, video, image, text, and chart cards. When configuring the settings for a row, you can set a background color or upload an image. Whichever you choose, ensure that there issufficiently high color contrast between the background and any content displayed by other cards, such as the text or category cards.
Banner card
Similar to row cards, banner cards can be used to structure your site by segmenting sections of content with headlines and subheadlines. Banner cards also give you the option to add a search bar to make it easier for people to search for site related content with keywords and location. To make the search bar more accessible, we’ve also provided a hidden label describing the search barto assistive technologies. We’ve also given the search icon an aria label, which isan attribute similar to alt-text, but can be used on SVG images.
Text card
Sharing narratives connects your audience with the information they need to understand your message and to take necessary action. While editing text color is a simple way to ensure that your content is passing color contrast, there are several other actions you can take to create accessible narratives on your sites and pages.
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 On Input 3.2.2, technique G201 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 our documentation on the text card. You can also learn more about the enhancements we’ve made this month to the text card by checking out this blog post.
Category card
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 imagesby 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.
Don’t forget about color contrast by adjusting the color of your category’s link text by selecting Theme on the Customize panel and adjusting the Body Link Color.
Testing category icon color and background in WebAIM's Color Contrast Checker.
Share accessible visuals & media
Adding images and media is a simple way to add more to your sites and pages. When choosing what type of visuals or media to add, consider content that provides value rather than redundancy.
Image card
The Image card settings provide you with several options for customizing the display of your image, including the option to provide Image Alt Text. Alternative (alt) text is a specific attribute which is attached to an image to give screen readers a description for non-sighted users. Here are some things to consider when providing alt text:
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.
Not sure if your background image provides enough contrast? Add a light or dark background color to your row, and adjust the color’s transparency. Here’s how.
VoiceOver (a screen reader) shows a dialog of the alt-text being read aloud for this image.
Gallery card
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 documentation.
Event List card
Any events you share on your site using the event list card will automatically supportkeyboard navigation support for both sighted and non-sighted people, in addition to including alternative text on all interface icons. All you have to do is add an event!
Video card
While you will have to caption any videos that you add to our video card yourself, as recommended by WCAG guideline Captions 1.2.2, 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 their support page, which offers instructions on how to upload caption files or manually transcribe and sync captions with video.
Embedded content should always contain titles so that people using assistive technologies know whether or not they want to enter into that section of your page, so use the title setting on our video card to describe what will be presented in your video.
Social Media card
With the social media card, you can inline Facebook or Twitter posts. Unfortunately, we cannot affect the content being shown from either of those platforms, so you may observe some color contrast violations. We have included a toggle for the Twitter Dark Theme though, which does pass color contrast requirements.
Automated accessibility testing tools
There are also several tools that can run automated tests of your whole webpage and check for accessibility violations. The ArcGIS Hub team uses aXe by Deque as part of our development process and also Lighthouse by Google. Both aXe and Lighthouse have Chrome extensions that can be installed and which will allow you to run these audits in your browser.
Get started
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.
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.
Commenting is not enabled for this article.