Accessibility: Accessible Alternative

[dougmet]

Broken off #1067

This covers the hard bit. When the chart updates a person with a screen reader has no way to see the changes.

An accessible alternative that displays all of the ratios is also required.

[dougmet]

This is quite a challenge. I have three suggestions. From easy to hard.

Easy: We provide a clear link to the Download source CSV and link to wiki explaining how to use it. This is an accessible alternative to what's on the chart. See #1071

Medium: In an earlier iteration of the website we had the pivot table of all the data that was on the chart. We could have a "download chart data" button that downloads this as a CSV (but doesn't display it to screen).

Hard: We have a toggle to view the data as a chart or a table c.f. ONS and the table is the same pivot table as in the medium version.

I have to say I quite like the idea of medium as it's a useful feature for all users. Hard is, in principle, quite similar but will have an extra burden of displaying the data (potentially very wide).

[dougmet]

We want to do the hard version. But should implement the easy version immediately so that a fall back is in place.

[AnnCorp]

@shaneporter no expectation to get anything more than 'easy' option in place for soft launch tmrw (already done) but need to talk through the other 2 options please to see what we do next. When/how best to do this for you please? Should we go for 'medium' and then build on this if do 'hard' option?

[shaneporter]

I'll join the call tomorrow if that's ok.

[shaneporter]

The code for filtering the data is already there and used by the chart. So outputting that data in a table or tables should be relatively straightforward.

Because this data is generated on the client, downloading it will need JavaScript and although that feature is supported by Chrome, Firefox and mobile browsers, will only be supported by IE versions 10 and 11.

So, I need guidance on:

1. The format of the tables, based on the selections. Because selections can be made across categories, I assume there would be one table per 'selection category'.
2. Do you want a tab to switch between graph and table(s)? That's trivial to implement, in a similar way to the existing tabs.
3. Are you happy that this will only be available with JavaScript and that downloading is not available with IE10 or 11. (Actually, I may be able to do something with IE9)?

Right now, I don't see this is particularly difficult to implement. Please let me know if I've forgotten anything. Thanks.

[AnnCorp]

Thanks @shaneporter . Will discuss this further with SDGs team and DAC. Re (3) we would definitely want to have something working in IE9 - have been advised this is widely used within government departments. IE8 may be less of an issue. Its the whole progressive enhancements thing too - build simple first and add in on top of that. Will get back to you on this next week...

[AnnCorp]

From DAC: There is a really good resource on accessible tables at the following URL: https://www.w3.org/WAI/tutorials/tables/ It also gives a lot of different options for different layout types

For reference from ONS Style Guide: https://style.ons.gov.uk/category/data-visualisation/tables/

[AnnCorp]

@shaneporter Max and my thoughts are that can't get the table data nesting properly right unless fix #1204. However, wondering if an interim MVP solution to meet the accessibility requirement would be to just display the data in a v simple table where the legends in the chart translate into column headings all in one row. We could poss refine from there with rules re the order display the columns (eg stuff in top level of hierarchy to appear first) - but can consider that once get the basics up and running. Could this be your top priority job please?

[shaneporter]

would you be able to give me a specific indicator example of what it is you'd like? Thanks.

[AnnCorp]

@shaneporter How about https://datasciencecampus.github.io/sdg-indicators/3-2-1/ ? Under Geography select England, Wales, Scotland and Norther Ireland then under Sex select both Male and Female. Whatever appears in the chart legend could be the same text that labels the various columns in the table version. With this example there's 15 different data lines in the chart, so with year you'd have 16 columns in the table. The column order might not be perfect logic if it follows the order of chart legend labels on the chart (eg would probably want the UK Male and Female figures to come after UK) but at least all the data in the chart would be present in table format. Its similar to what the US do with their tables - one row with all the column headings and nothing nested.

[AnnCorp]

@shaneporter @gingerbenw Great to get the table up and running! Since the change has gone through team have noticed there's an issue with some indicators where no categories or data are displaying - poss ones where no headline data. Examples of issue are: https://datasciencecampus.github.io/sdg-indicators/4-1-1/ https://datasciencecampus.github.io/sdg-indicators/11-6-2/ [Added another example from Max below} https://datasciencecampus.github.io/sdg-indicators/3-b-1/

[dougmet]

11-6-2 is creating a javascript error. There's definitely an issue. The message is not very informative, not sure if it's in the model or the view.

[shaneporter]

Added truthy test to createTable table parameter.

[dougmet]

I'd say this has fixed this.

[AnnCorp]

@MaxEngledewAdmin please could you restest following latest fix and close the issue if all looks ok>

[Mengledew]

All seems fine to me!