Update map color coding to textures

[lizzycederberg]

As it is right now, the map graphic is not accessible for most individuals with a color vision deficiency (about 8% of all men, for example). The drop-down helps for accessibility, but because it doesn’t provide the same information (the regions), we recommend updating the map. A pattern fill should be added to denote individual regions.

cc @SpenceJMNelson

[matbrady]

The drop-down helps for accessibility, but because it doesn’t provide the same information (the regions),

@lizzycederberg If they are referring to the record count, that was updated in #206. It's been updated in the test env, but likely not on the live site.

[lizzycederberg]

I think they are saying the contrast between the colors of adjacent regions is not high enough for someone who is color blind to be able to clearly determine where one starts and one ends, e.g. the Eastern region and the Midwest region are pretty close in color: https://bia.test.drupalme.net/research/native-americans/bia/photos/states

So really we need a new design for the map that uses textures instead of colors (or in addition to colors maybe) to help those users.

[lfrancis]

The existing colors are fine in the three major color-blind types until you get to grayscale, which is the rarest of all -- that 8% figure cited above covers mostly the three major types of deficiencies.

You can test this yourself on MacOS with the Accessibility Control Pane by turning on color filters:

[matbrady]

I think they are saying the contrast between the colors of adjacent regions is not high enough for someone who is color blind to be able to clearly determine where one starts and one ends,

@lizzycederberg I was just mentioning that if the select is fully accessible and provides the same content, it doesn't sound like there is a need to correct the colors further.

[SpenceJMNelson]

@matbrady if possible suggest surrounding colored regions with a white border instead of trying to add different textures to the states. @lizzycederberg @lfrancis do you think this solves the problem?

[SpenceJMNelson]

spoke with mat on slack and the map doesn't support grouping state shapes together and drawing a line around that group, so mat is going to try using moving different regions apart so there's space around them

[lizzycederberg]

@matbrady @SpenceJMNelson I asked NARA if adding the regions to the drop down was an acceptable alternative and they said:

Including the regions for each state in the dropdown, along with a header for each region that lists each state included in that region, will provide comparable information.

I'm not sure I understand that. What do you think?

[matbrady]

@lizzycederberg I don't fully understand this or why we asked to add regions to the dropdown if the original issue was for color contrast.

[lfrancis]

@lizzycederberg I don't fully understand this or why we asked to add regions to the dropdown if the original issue was for color contrast.

I think what they we're saying was -- in the absence of additional colorblind measures -- adding the region header to the states select solves the accessibility problem.

[lizzycederberg]

@matbrady I don't see anything different on the page. Did you make a change?

[lizzycederberg]

We will move some colors around so the regions are not close to other regions with similar colors and update the drop down with regions

[lfrancis]

Confirmed addressed

[lizzycederberg]

Looks good! Just reopening until I send the update to NARA