Two steps forward? Making accessibility easier.

Presented at UCISA-UX: Accessibility in HE, Tuesday 28 June 2022.

Presentation recording and transcript

Play Video: Two steps forward? Making accessibility easier.

Read the transcript

Synopsis

The UCISA-UX team asked whether we "made something easier for everyone to use"? In this five-minute slot I will share two topics on that theme:

  • Brand colour contrast made easy
  • Accessibility inspector for everyone

Resources

Links

Relevant WCAG criteria

Other links

Other similar contrast tools I found after I wrote my script

Other useful colour contrast tools

Interesting presentations about colour contrast

Would you like a brand colour accessibility matrix for your colour palette?

I can generate a brand colour accessibility matrix for your colour palette. To do so I will need to know:
  1. Create text or CSV (comma separated) file containing the HTML colour codes of your brand. Remember to include the color white, it may not be in your official brand, but it is very likely that you use it in your materials.
  2. If you use 'vanity names' for your colours, include them as shown in the example below.
  3. Put the colours in the order in which they should be presented. You might want the colours to be in the order of the colour spectrum for example, or your brand might prefer to group certain colours together.
  4. Email your text or CSV file to me and let me know the name of your institution or brand. The institution or brand name will appear in the title of the page.
  5. Within a week I will send you a zip file containing the HTML files and dataset that you may then use with your colleagues or host on your website. You are free to make any changes you wish to the files, copy them, share them as you like. Here is an example zip file for the University of Southampton accessibility matrix. The script takes between 1 and 4 hours to run depending on the amount of colours in the brand. The length of time is because the WebAIM API is used for checking and I leave a ten second delay between each query so as not to hammer it.
Example file contents
#FFFFFF, White
#FAFF7F, Medicine yellow
#FF5154, Art pink
#91A6FF, Science blue
#FF0000, Humanities red
#228B22, Biology green
#181818, University black.

Addendum 1: Focus indicators

During the question and answer session, I described a technique for using two colour focus indicators so that whatever colour background was in use, the focus indicator would always have sufficient contrast.

I got the use of box-shadow and outline confused in my answer. So I edited that part out of the above recording.

I have created a codepen that demonstrates this technique. Use the button in box 1 to randomise the colours in box 2. Hover your mouse or focus on the button in box 2 to see that the focus indicator is always clear.

See the Pen Demonstration of "C40: Creating a two-color focus indicator to ensure sufficient contrast with all components" by matthewdeeprose (@matthewdeeprose) on CodePen.

Open the example in its own tab.

Addendum 2: Implementation plan for making accessibility inspector check whilst you work by default

We have now successfully implemented this change. It's early days but feedback so far is positive. Here is a slightly anonymised implementation plan, with thanks to my colleague Nick Williams for sharing it.

This guidance is provided on a best-efforts basis. It should be tested in a pre-production environment first. No guarantees or assurances etc.

Implementation plan

  1. Login to a management server
  2. Edit the Group Policy [This will be unique to your environment]
  3. Navigate to User Configuration > Preferences > Windows Settings > Registry
  4. Create a new Registry Collection called "Office Accessibility Checker"
  5. Inside the new collection (folder) create three new registry keys (NB The Value Name for Word is different to Excel and Powerpoint!):

Word

General Tab:

Action: Create
Hive: HKEY_CURRENT_USER
Key Path: Software\Microsoft\Office\16.0\Word\Options
Value Name: enableacccheckerstatusbaritem
Value Type: REG_DWORD
Value Data: 1

Common Tab:

Apply Once and do not reapply.

Excel

General Tab:

Action: Create
Hive: HKEY_CURRENT_USER
Key Path: Software\Microsoft\Office\16.0\Excel\Options
Value Name: enableaccchecker
Value Type: REG_DWORD
Value Data: 1

Common Tab:

Apply Once and do not reapply.

PowerPoint

General Tab:

Action: Create
Hive: HKEY_CURRENT_USER
Key Path: Software\Microsoft\Office\16.0\Powerpoint\Options
Value Name: enableaccchecker
Value Type: REG_DWORD
Value Data: 1

Common Tab:

Apply Once and do not reapply.

Post-implementation Testing

  1. Login to any GPO-managed Windows Workstation
  2. Run a "gpupdate /force" to pick up the new settings
  3. Open (in turn) Word, Excel and PowerPoint
  4. Create a new document
  5. Click "File" > "Options" > "Ease of Access"
  6. "Keep accessibility checker running while I work" should be TICKED (and can be unticked/re-ticked at will)
  7. There should also be "Accessibility: Good to go" in the bottom left of the application's window

Backout plan

  1. Login to a management server
  2. Edit the Group Policy [This will be unique to your environment]
  3. Navigate to User Configuration > Preferences > Windows Settings > Registry
  4. Navigate to the Registry Collection called "Office Accessibility Checker"
  5. Disable the three Registry items inside (to prevent any new deployment of the keys)

To revert the change completely (not recommended)

  1. Login to a management server
  2. Edit the Group Policy [This will be unique to your environment]
  3. Navigate to User Configuration > Preferences > Windows Settings > Registry
  4. Navigate to the Registry Collection called "Office Accessibility Checker"
  5. Disable the three Registry items inside (to prevent any new deployment of the keys)
    1. Copy and paste each key, in turn
    2. Change the "Create" to a "Replace"
    3. Change the Value "1" to a "0"
    4. Make sure "Apply Once and do not reapply" is still ticked on the "Common" tab
    5. Enable each newly create key, in turn