ATLAS Review - Accessibility of home page DESIGN

[jimjam-slam]

The ATLAS interactive tool is looking really good! However, there are some accessibility problems that will prevent users navigating the page using a keyboard or a screen-reader (including users with vision problems). I think there are some small changes that can be made to fix this.

• [x] Keyboard focusable/tabbable elements

The only parts of the page that are focusable using a keyboard are the primary navigation elements and the IPCC logo along the top. This means that users without a pointing device cannot locate other page elements, and users with a screen-reader cannot focus on them in order to hear descriptions of them.

This can be fixed by adding a tabindex="0" attribute to those elements (which will allow them to be focused on in the order they appear in the HTML). See MDN's page on tabindex for more details.

I've included a list of elements that require attention at the bottom of the issue (although many have classes but no unique ID, so there might be some hunting required). The content of the map (including individual regions) would ideally also be tabbable, but I'm less sure about how this is accomplished when it's inside a canvas. The charts included when you click on the regions should, I think, be enhanceable; I know other Recharts users have requested this.

• [x] Add list roles to list containers

A few navigation elements and menus also require the attribute role="list", so that screen-readers can correctly identify the size of their contents (for example, to tell a user that they are focused on a list of 9 radio buttons, without reading each radio button out unless they want to). Other elements might benefit from other role attribute values (there's a full list here), but I'm not entirely sure which ones have been subsumed into HTML and which are still in active use.

• [x] Add ARIA labels to elements that don't describe contents to screen-readers

I strongly recommend using a screen-reader browser extension to test the page. Use Tab and Enter to focus on elements that have been augmented as described above, and ensure that they are correctly described to users. Those elements that aren't can be further enhanced with the aria-label attribute—for example, aria-label="Button: select map projection" or aria-label="Region: Southern Australia".

Element description	ID	Class
Home logo		.ipcc-logo
Page navigation		.ipcc-app__link-container
--Links x 4		.ipcc-header-link
Mobile "hamburger" menu		.ipcc-menu-button
--Links x 4		.ipcc-mpbile-link
--Language selector		.lang-select
Map navigation (also applies to left and right mirrored views)		.map_container_options
--Top-level options x 4 (Dataset, Variable, ...)		.option__dropdown-box
----Radio set x 3		.radio-list-selector
----Radio buttons		.radio
Region set selector		.region-set-selector
Map	#map__[id]	.map
--Controls		.ipcc-conrols__container
----Control x 8		.ipcc-base control
----Projection buttons x 3		.ipcc-base control
----Download options x 2		.ipcc-base control
--Legend		.ipcc-html-legend-container
----Collapse legend button		.resize-legend
--Map content (canvas element)
--Caption	#primary-map-caption
Permalink button		.permalink-button
Region tab sizing wrapper		.resize-handler-wrapper
--Resize handle		.resize-handler
--Maximize window
--Close window
Region tab		.ipcc-tabs
--Tabs navigation		.ipcc-tabs__header
----Tabs x 5		.ipcc-tabitem
--Tabs body: Recharts container		.recharts-wrapper, .recharts-responsive-container
--Tabs body: summary table		.summary-table
----Table rows (not sure if these need to be addded?)
--Tabs body: climate stripes		.climate_stripe

Looking forward to seeing the tool go live! I think these improvements will open the tool up to broader audiences 🥳

[jesusff]

Thank you for your review. Your suggestions were passed to the Interactive Atlas development team and they are now implemented in the current test version which will be released soon.