{"id":11453,"date":"2021-05-24T15:31:46","date_gmt":"2021-05-24T14:31:46","guid":{"rendered":"https:\/\/help.instantatlas.com\/report-builder\/?page_id=11453"},"modified":"2023-07-20T15:54:50","modified_gmt":"2023-07-20T14:54:50","slug":"web-accessibility-in-report-builder-2-0","status":"publish","type":"page","link":"https:\/\/help.reports.esriuk.com\/report-builder\/web-accessibility-in-report-builder-2-0\/","title":{"rendered":"Web Accessibility in Report Builder 2.0"},"content":{"rendered":"

When websites and web tools are properly designed and coded, people with disabilities can use them. However, currently many sites and tools are developed with accessibility barriers that make them difficult or impossible for some people to use.<\/p><\/blockquote>\n

The quote above comes from the Web Accessibility Initiative’s (WAI) “Introduction to Web Accessibility” page<\/a>. Report Builder 2.0 has been designed with accessibility in mind and makes use of a number of technologies and techniques to try and ensure that the reports it builds have as few accessibility barriers<\/em> as possible. The most important features are described below, along with some tips<\/em> to help you when authoring\/designing your own reports (marked with a \u2139\ufe0f icon).<\/p>\n

Web accessibility is a huge topic with many linked and overlapping problems, techniques and solutions. This article should be seen as an introduction to accessibility in Report Builder<\/em> and is not a standalone document – a familiarity with at least some of the Accessibility Fundamentals outlined by the WAI<\/a> is assumed. If you have a specific accessibility concern not detailed here please contact contact the Esri UK\u00a0Technical Support helpdesk<\/a>\u00a0(UK and Ireland customers only). International customers please email\u00a0internationalsupport@esriuk.com<\/a>.<\/p>\n

\n

Web Content Accessibility Guidelines (WCAG)<\/h2>\n

Report Builder aims to achieve level AA conformance<\/a> with version 2.1 of the Web Content Accessibility Guidelines (WCAG)<\/a>. Data-driven widgets like tables, charts and maps are all designed to meet these guidelines and use a variety of techniques to either adjust their appearance for different viewers or, where that is impossible, to provide alternative means of accessing the data (this is discussed in more detail below).<\/p>\n

\u2139\ufe0f Note: not all reports will meet all success criteria or be AA compliant because the design of each report is ultimately controlled by the report’s author. Report Builder cannot guarantee, for example, that a report will not contain confusing language, poor color choices, charts with no labels or badly designed page “flow”. Report authors are encouraged to make themselves familiar with the WCAG Quick Reference documentation<\/a>, especially section 1.4 Distinguishable<\/a> and the Tips for Writing<\/a>.<\/p>\n

\n

Page Structure and Semantic Elements<\/h2>\n

Reports built using Report Builder 2.0 all use HTML5 and make use of semantic HTML elements<\/a> and landmarks<\/em><\/a> to help screen readers or other assistive technologies. For example, everything that acts like a button is a <button><\/code>, a report is always an <article><\/code> and a page within a report is a <section><\/code>. A fuller discussion of these techniques is available on the accessibility pages of developer.mozilla.org<\/em><\/a>\u00a0and the W3C ARIA<\/em>\u00a0documentation<\/a>.<\/p>\n

\u2139\ufe0f You should also take care when designing reports and make correct use of headings within pages to help users make sense of the information in the report. For example, it is recommended that each page within a report contains an <h2><\/code> that summarizes the contents of the page. The WAI’s Tips for Writing<\/a> page is a good place to start.<\/p>\n

Note also that if you embed\u00a0 your reports<\/a> inside another, custom, web page then the page structure will change slightly and you need to take care with the structure of the enclosing page – in particular making sure you use a <main><\/code> landmark<\/a> to enclose the embedded report.<\/p>\n

\n

Keyboard Navigation<\/h2>\n

All links and buttons within the view report<\/em> pages are keyboard accessible\/navigable using standard browser mechanisms (e.g. Tab<\/code> to Move, Enter<\/code> to activate). As noted above, every element that performs an “action” will be a <button><\/code> or a link (<a><\/code>). If a button opens a dialog<\/em> then that dialog will “trap” the focus so that keyboard navigation continues to work logically (i.e. within the dialog whilst it is shown, then back to the same point in the page where the focus was before the dialog was opened). Dialogs opened in this way can always be closed using the Esc<\/code> key.<\/p>\n

\n

Buttons, Text & Labels<\/h2>\n

Where a button or link is visually<\/em> presented as a single icon (for example the button that allows a user to export a chart as an image) then there will be text\u00a0 describing what the button does either hidden within the button (visually hidden but accessible to screen readers) or as an aria-label<\/code> attribute on the button.<\/p>\n

\u2139\ufe0f If you include links within a report you are authoring it is important to use them correctly to maintain accessibility. There are both technical and “common sense” approaches to authoring links (e.g. never using the words “click here” as the only content in your link). Report Builder allows you to access the raw HTML for text widgets if you need to to add labels etc. – see the help pages for text widgets<\/a>\u00a0and the WAI’s tips for writing links<\/a>.<\/p>\n

\n

Tables<\/h2>\n

Report Builder has a number of widgets that use HTML <table><\/code>s. These have all been designed to meet accessibility guidelines and use a number of techniques to associate data cells with headers etc. More detail on some of the techniques used can be found in the tables page of the WAI tutorials site.<\/a><\/p>\n

Report Builder does not<\/em> use tables for purely layout<\/em> purposes (e.g. aligning unrelated items on a page, sizing charts and captions).<\/p>\n

\n

Colours<\/h2>\n

Report Builder has a built-in set of color palettes<\/a> that allow you to quickly and easily change the text, border and background colors for all widgets in your report. These colors have been carefully chosen so that they meet the WCAG color contrast criteria<\/a>. If choosing your own colors Report Builder will show a warning in this dialog when colors do not meet the relevant contrast criteria.<\/p>\n

\"Report<\/a><\/p>\n

Charts<\/h2>\n

Charts can be problematic for some users – mainly because they often use color as the only or primary way of conveying information. This goes against many of the principles in the WCAG documentation<\/a>. Report Builder has a number of mechanisms to address this which are discussed below. \u2139\ufe0f Page authors who want to use charts in their reports are encouraged to read the accessibility user stories on the WAI site<\/a>.<\/p>\n

Charts are drawn when the report is first loaded and re-drawn if the report’s viewport<\/a> changes. This ensures that (as far as possible) charts are reactive to user actions such as zooming the browser window or changing the orientation of a mobile device. This ensures that the charts remain as clear as possible at all screen resolutions.<\/p>\n

Chart Options: Labels & Styles<\/h3>\n

\u2139\ufe0f Charts in Report Builder have the ability to attach data labels<\/strong> to each item in the chart (for example to every bar in a bar chart). In many cases this can improve accessibility by giving an alternative way of identifying the data in the chart rather than solely color. This is an opt-in<\/strong> mechanism – the report author must choose to add data labels. This technique is not applicable to all charts and can in fact reduce<\/em> accessibility if used incorrectly (for example by showing labels at a very small or very large font size in charts with many features) so it is not applied automatically.<\/p>\n

\"Bar<\/a>
Bar chart using data point labels to highlight data series – series labels are set to (#INDEX) #NAME<\/code>, data point labels to #INDEX<\/code> and the values are auto-populated by Report Builder when the chart is drawn.<\/figcaption><\/figure>\n
\"Bar<\/a>
The same bar chart – but in greyscale – the labels still allow the chart to function.<\/figcaption><\/figure>\n

\u2139\ufe0f For line charts<\/a> and radar charts<\/a> the line style can be adjusted to use pattern<\/strong> and point\/marker style<\/strong> as well as color to distinguish lines.<\/p>\n

\"Line<\/a>
Line chart showing alternate line styles and point markers<\/figcaption><\/figure>\n
\"Pie<\/a>
Pie chart showing segment labels with values and a link to the legend using #POINTINDEX<\/code> to generate the number values.<\/figcaption><\/figure>\n

These styling options are kept under constant review to see if we can improve them. For example, we are currently exploring the use of patterns for bar and pie charts to supplement color and labelling.<\/p>\n

Alternative View: Interactive<\/h3>\n

Each chart widget has a \u00a0<\/i> Show Data Table<\/strong> button. If a user clicks on this the data used to draw the chart will be shown in a tabular format in a pop-up dialog. This provides an alternative (albeit less visually appealing) view of the data for users with a visual impairment.<\/p>\n

\u2139\ufe0f Report authors are encouraged to consider placing tables alongside or underneath charts in their reports.<\/p>\n

Alternative View: Automatic & Screen Readers<\/h3>\n

Each chart widget in Report Builder is rendered using an HTML <canvas><\/code> element. Canvases can be problematic for users with a visual impairment, particularly those who use screen readers. Report Builder automatically embeds a <table><\/code> containing the same data as the chart inside<\/em> the <canvas><\/code> element. This table is invisible to users who access the report visually but provides an alternate (or fallback<\/em>) view of the data. More information on this technique can be found in the canvas tutorial at mozilla.org<\/a>.<\/p>\n

\n

Maps<\/h2>\n

Maps can suffer from the same accessibility problems as charts, most often the requirement “don’t use color alone to convey information<\/a>“. Maps in Report Builder use ArcGIS Online web maps<\/a> which have a number of different options to visualize and classify data – as with charts these are generally opt-in<\/strong> techniques since it is not practical to automatically add labels etc. to every map.<\/p>\n

\u2139\ufe0f When using a map as a navigation tool (either to show the current feature’s location or to allow a user to navigate to a report for a different feature) report authors are encouraged to provide an alternate (duplicate) navigation mechanism, for example an “open map in new window” link or a navigator widget<\/a>.<\/p>\n

\n

Page Zoom<\/h2>\n

Reports respond to the screen size in which they are viewed (responsive design<\/em><\/a>). For charts this may mean adjusting their labels and axes to preserve clarity, for text widgets it may mean applying a reflow<\/em> of the text within the widget. Reports have a relatively simple structure of report > page(s) > widget(s)<\/code> which means that they can respond and lay themselves out at a variety of screen resolutions.<\/p>\n

Report Builder has a number of built-in breakpoints<\/em> when the screen is smaller than the\u00a0 report was originally designed for (e.g. on a mobile phone or tablet). At these points widgets may reflow more significantly and some widgets may hide less important information to present their data more clearly. You can read more about responsiveness in Report Builder on the responsive settings help page<\/a>.<\/p>\n

\u2139\ufe0f You should take care when designing reports with a lot of text, tables and images as these can break the reflow behavior if<\/em> they are set to an explicit height, rather than auto-height<\/em> (which is always available with one click in the editor user interface (UI)).<\/p>\n

\n

Web Accessibility Testing<\/h2>\n

There are evaluation tools that help with evaluation. However, no tool alone can determine if a site meets accessibility standards. Knowledgeable human evaluation is required to determine if a site is accessible.<\/p><\/blockquote>\n

From: https:\/\/www.w3.org\/WAI\/test-evaluate\/<\/a><\/p>\n

In developing Report Builder we have used a number of automated testing tools including the axe DevTools browser extension,<\/a> Google Lighthouse<\/a> and WAVE<\/a>. We have also tried hard to follow all the relevant guidelines and best practice and have tested the pages using “real humans”. We are aware, however, that web accessibility is a huge and dynamic area and we are not accessibility experts – if you have a specific accessibility concern not detailed here please contact the Esri UK\u00a0Technical Support helpdesk<\/a>\u00a0(UK and Ireland customers only). International customers please email\u00a0internationalsupport@esriuk.com<\/a>.<\/p>\n

Please note that all of the above discussion relates to the viewing<\/strong> of reports built using Report Builder. The editing<\/strong> user interface (UI) used by report authors uses many of the same techniques but is not currently WCAG AA compliant, mainly because it cannot scale to all screen resolutions and requires the use of a pointer device (rather than the keyboard) to perform many of the editor actions. If you encounter difficulties using the editor UI please contact the Esri UK\u00a0Technical Support helpdesk<\/a>\u00a0(UK and Ireland customers only). International customers please email\u00a0internationalsupport@esriuk.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

When websites and web tools are properly designed and coded, people with disabilities can use them. However, currently many sites and tools are developed with accessibility barriers that make them difficult or impossible for some people to use. The quote above comes from the Web Accessibility Initiative’s (WAI) “Introduction to Web Accessibility” page. Report Builder […]<\/p>\n","protected":false},"author":61,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11453","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/pages\/11453","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/users\/61"}],"replies":[{"embeddable":true,"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/comments?post=11453"}],"version-history":[{"count":0,"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/pages\/11453\/revisions"}],"wp:attachment":[{"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/media?parent=11453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}