Accessibility evaluation

[agbeltran]

Description: We want to make sure that the web app is accesible.

Some resources to consider: https://www.gov.uk/government/publications/doing-a-basic-accessibility-check-if-you-cant-do-a-detailed-one

https://www.gov.uk/guidance/make-your-website-or-app-accessible-and-publish-an-accessibility-statement?utm_source=CampaignPage&utm_campaign=access_regs#decide-how-to-check-the-accessibility-problems-on-your-website-or-mobile-app

https://wave.webaim.org/

Acceptance criteria:

• [ ] evaluation results

[agbeltran]

https://www.w3.org/TR/WCAG21/

[louise-davies]

@MRichards99 this should probably now be handed over to someone else, as you're now busy with datagateway-api issues

[MRichards99]

@louise-davies who would you like this to be handed over to? I'm happy to write up a few notes and meet with the newly assigned person to go through where I got to and what needs to be done once this is decided.

[MRichards99]

@louise-davies I have added my handover notes onto the SciGateway wiki, also accessible via the sidebar.

I've also created a spreadsheet containing each of the WCAG success criteria and the current status of the audit (pass, fail, N/A or not checked yet). It's on the TopCAT redevelopment SharePoint site but I've deliberately not added a link to it in the markdown.

When we come back to this work, I'm happy to meet with the new person working on it to go through what I've written and answer any questions.

[louise-davies]

we were just given feedback that the blues & purples we use aren't very visible for a colour blind user in darkmode. We may have to come back to this user for more specific feedback, but we should also be considering this. For now I assume that they'd be fine with using light mode...

[joshuadkitenge]

I have found a tool that can simulate different types of colour blindness, and I'm going to redo my contrast evaluation using that.

[joelvdavies]

@louise-davies Using the tool @joshuadkitenge suggested I can immediately see the buttons may cause a problem . We could make the buttons lighter, or as Joshua pointed out we could create a high contrast dark mode theme like Github does.

[louise-davies]

@joelvdavies I think making a separate theme would probably be suitable as otherwise we'd be chasing the probably impossible dream of getting one theme looking nice for both colourblind and non-colourblind people (although GitHub's colourblind themes are still in beta so we shouldn't beat ourselves up too much about this)

However, if light mode is sufficient and passes tests for colour blindness then I think making a colourblind accessible dark mode could be a lower priority

[louise-davies]

@joshuadkitenge could you perhaps summarise here what are the outstanding things

[joshuadkitenge]

WCAG 1.3.1 (A): Info and Relationships

• "Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text."
  
  
  • filters on table view (aria-hidden-focus in filters), Table view (many aria-required-parent/children errors in table).The majority of these are caused by the table component in common, and the way it used React virtualised table
    
    
• Status: Not fixable

WCAG 1.4.10 (AA): Reflow

• "Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions"
  
  

  • Table view doesn't show any data above 250% zoom. (400% required)
    
    

• Status: Not fixable

WCAG 2.1.1 (A): Keyboard , WCAG 2.1.3 (AAA): Keyboard (No Exceptions)

• "All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints."
  
  
  • the Only reason for failure is that columns cannot be resized in table view using keyboard-only navigation.
    
    
• Status: Not fixable

  WCAG 2.2.6 (AAA): Timeouts

• "Users are warned of the duration of any user inactivity that could cause data loss, unless the data is preserved for more than 20 hours when the user does not take any actions."
  
  
  • If cart is lost on anon user, maybe we should warn when their session is nearing expiry with user is inactive?
    
    
• Status: Fixable

  WCAG 2.4.9 (AAA): Link Purpose (Link Only)

• "A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general."
  
  
  • The lack of context would make link text (on table and card view on investigation titles) unclear
    
    
• Status: Fixable

  WCAG 2.5.5 (AAA): Target Size

• "The size of the target for pointer inputs is at least 44 by 44 CSS pixels"
  
  
  • Checkboxes on table view are only 20x20 and drop down is only 24x24
    
    
• Status: Fixable

WCAG 3.1.4, 3.1.5, 3.16 (AAA): Abbreviations, Reading Level and Pronunciation

• There's a lot of complex text data stored in ICAT
  
  
• Status: Not Fixable

WCAG 3.3.5 (AAA): Help

• "Context-sensitive help is available."
  • There is help text in the form of the tour, but that's more general rather than "related to the function currently being performed"
    
    
  • Status: Hard to Fix

WCAG 3.3.6 (AAA): Error Prevention (All)

• For Web pages that require the user to submit information, at least one of the following is true:

  • Reversible
    • Submissions are reversible.
  • Checked
    • Data entered by the user is checked for input errors and the user is provided an opportunity to correct them.
  • Confirmed
    • A mechanism is available for reviewing, confirming, and correcting information before finalizing the submission.
      
      

• For this to pass, we should add a confirmation on download (when a user inputs email address etc.) although I wonder if this would be annoying for a user

• Status: Fixable

WCAG 4.1.2 (A): Name, Role and Value

• "For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies."
  
  
  • filters on table view and the sort by on card view (aria-hidden-focus in filters)
    
    
• Status: Hard to Fix

WCAG 4.1.3 (A): Status Messages

• "In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus."
  
  
  • Check whether the warnings and notifications have a relevant property or aria label
    
    
• Status: Fixable- ongoing pr #904

More information

• https://stfc365.sharepoint.com/:x:/s/TopcatRedevelopment/EdclB82juphJo1Qd1NYN04YBzqRcFn9kOiHcTai_WiyJ9Q?email=joshua.kitenge%40stfc.ac.uk&e=ulKIPG
• https://github.com/ral-facilities/scigateway/wiki/DataGateway-Accessability
• Chrome extensions
  • https://chrome.google.com/webstore/detail/accessibility-insights-fo/pbjjkligggfmakdaogkfomddhfmpjeni
  • https://chrome.google.com/webstore/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf

[joshuadkitenge]

• Adding a minimum height to table view (everywhere)

• https://github.com/ral-facilities/datagateway/pull/1063/files (searchPageContainer , line 154)

• This would allow WCAG 2.1 AA Reflow to pass