UKHO / admiralty-design-system

MIT License
4 stars 0 forks source link

[BUG] Customised table has been organised in a way that affects information relayed to screen reader users. #177

Open KatiePUX opened 3 months ago

KatiePUX commented 3 months ago

Outcome of DAC Accessibility Audit:
https://ukho.sharepoint.com/sites/EXT_Data_Upload/Shared%20Documents/Forms/AllItems.aspx?OR=Teams%2DHL&CT=1711376954679&clickparams=eyJBcHBOYW1lIjoiVGVhbXMtRGVza3RvcCIsIkFwcFZlcnNpb24iOiIyNy8yNDAyMjkyMDYwMiIsIkhhc0ZlZGVyYXRlZFVzZXIiOmZhbHNlfQ%3D%3D&id=%2Fsites%2FEXT%5FData%5FUpload%2FShared%20Documents%2FGeneral%2FAccessibility%20Audit%2FPrivate%20Beta%2FDAC%20Accessibility%20Report%20WCAG%202%2E2%20UKHO%20UDU%20130324%20Final%20Version%2Epdf&viewid=8b1f0a9e%2D2897%2D4a4d%2D8283%2Dcc660e97e3e4&parent=%2Fsites%2FEXT%5FData%5FUpload%2FShared%20Documents%2FGeneral%2FAccessibility%20Audit%2FPrivate%20Beta

(Pages 31 - 34)

Customised table has been organised in a way that affects information relayed to screen reader users.

WCAG Reference: 1.3.1 Info and Relationships (Level A) Understanding Info and Relationships | How to Meet Info and Relationships 4.1.2 Name, Role, Value (Level A) Understanding Name, Role, Value | How to Meet Name, Role, Value Issue ID: DAC_Customised_Table_01 URL: https://ukhodataupload.admiralty.co.uk/external/add-files?isTemplateRoute=false Page title: Add Files Journey: 1.9

A customised table has been implemented in a way that causes confusion for screen reader users. This instance can be found with the table showing information regarding the uploaded file. Additionally, Table headers have not been adequately stated as such programmatically and so screen reader users do not receive the information. The customised table has various roles with their own values, however the way it is implemented appears to be causing issues with navigation when using screen reader software.

Screen reader users navigating the page by pressing control and arrow keys will find the structure very difficult to follow, in some places content can only be read by pressing up and down, and then some instances by left and right, which is not consistent with native html table markup.

A missing heading affects the understanding of the button within the table, visually the remove button is associated to ‘fake document.pdf’, however this information is not relayed to screen reader users, which means that users navigating visually are provided with more information.

KatiePUX commented 3 months ago

Considered A so high priority