Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WCAG 1.4.4 AA: Loss of table content when text resized (Issue 15) #386

Open
CJE001 opened this issue Sep 17, 2024 · 5 comments
Open

WCAG 1.4.4 AA: Loss of table content when text resized (Issue 15) #386

CJE001 opened this issue Sep 17, 2024 · 5 comments
Assignees
Labels
A11y Issue is related to accessibility Core CivicTheme Core CivicTheme issue State: Done The issue is complete and waiting for a release Type: Defect Issue is a defect
Milestone

Comments

@CJE001
Copy link

CJE001 commented Sep 17, 2024

Summary

Via Vision Australia assessment: August 2024

Impact: medium

Note: DTA have a 90 day remediation period to address the identified issues within the audit, all issues must be resolved to obtain WCAG 2.2 certification for digital.gov.au.

Steps to reproduce

Risk assessment for use of AI | digital.gov.au (https://www.digital.gov.au/policy/ai/risk-assessment)

Observed outcome

When text is resized to 200%, the layout of the "Risk Matrix" table breaks, and table header cell content is lost.

Table - default view

Picture8

Table - Text resized to 200%

Picture9

Code used

<table>
<thead>
<tr>
<th>
&nbsp;
</th>
<th>
&nbsp;
</th>
<th colspan="5">
<p class="text-align-center ct-text-large">
Consequence
</p>
</th>
</tr>
<tr>
<th>
&nbsp;
</th>
<th>
&nbsp;
</th>
<th>
Insignificant
</th>
<th>
Minor
</th>
<th>
Moderate
</th>
<th>
Major
</th>
<th>
Severe
</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="5" data-title="&nbsp;">
<p class="ct-text-large">
Likelihood
</p>
</td>
<td data-title="&nbsp;">
<strong>
Almost certain
</strong>
</td>
<td data-title="Consequence">
Medium
</td>
… 
</tr>
</tbody>
</table>

Implications

Users with low vision who zoom content may not be able to make sense of the table or understand its content.

Expected outcome

Ensure that text can be resized to 200% without any loss of content or functionality.
For data tables, it is acceptable for a horizontal scrollbar to be present and required for viewing the table content.

Please refer to Issue 19 for further information: #387

@CJE001 CJE001 added the Type: Defect Issue is a defect label Sep 17, 2024
@CJE001
Copy link
Author

CJE001 commented Sep 17, 2024

1.4.4 Resize Text WCAG 2.0 Level AA Except for captions and images of text, text can be resized without assistive technology up to 200% without loss of content or functionality.

Many users with mild visual disabilities need to enlarge the text size on web pages. Since all recent versions of the most popular web browsers offer the option to zoom in content, it is important to ensure that pages scale effectively when users utilise this feature.

@fionamorrison23
Copy link
Collaborator

@jcloys can you please check this to ensure it's a core issue? Thanks.

@febdao
Copy link
Collaborator

febdao commented Oct 30, 2024

Hi @fionamorrison23
This issue will be fixed by this PR #420

@jcloys
Copy link
Collaborator

jcloys commented Oct 30, 2024

@fionamorrison23 confirmed core issue

@fionamorrison23 fionamorrison23 added the Core CivicTheme Core CivicTheme issue label Nov 1, 2024
@fionamorrison23 fionamorrison23 moved this from Todo to In Progress in UI Kit Nov 1, 2024
@fionamorrison23 fionamorrison23 moved this from In Progress to Done in UI Kit Nov 1, 2024
@fionamorrison23 fionamorrison23 modified the milestones: 1.10, 1.9 Nov 1, 2024
@fionamorrison23
Copy link
Collaborator

@febdao @sonamchaturvedi28 will this be tested in PR 420?

@fionamorrison23 fionamorrison23 added the State: Done The issue is complete and waiting for a release label Nov 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A11y Issue is related to accessibility Core CivicTheme Core CivicTheme issue State: Done The issue is complete and waiting for a release Type: Defect Issue is a defect
Projects
Status: Done
Development

No branches or pull requests

4 participants