Skip to content
Open
Show file tree
Hide file tree
Changes from 6 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions docs/common-issues/clipped-text.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
# Issue: Text is clipped [Draft]

Text is present which does not wrap to stay within the bounds of its parent container when user rely on text resizing. Increasing font size causing the text to either extend beyond the container, causing the layout to break or scrollbars to appear, or the text is clipped by the parent container and content is lost.
This create difficulties for people who rely on text to be resized without loss of the content.


## To resolve

Most recent govuk-frontend should containe fix for this issue panel heading
https://github.com/alphagov/govuk-frontend/pull/2347.
Or apply `.text-overflow` class on element

```
.text-overflow {
word-wrap: break-word; /* old version of overflow-wrap for IE and Edge and FF < 49*/
overflow-wrap: anywhere; /* modern, tries to fit word on a new line rather than fitting on remnants of the current line */
}
```
## Labels

- wcag
- wcag 1.4.4 (AA)
- large text

## Report

| Status | Level | Issue | Success Criterion |
| ------ | ----- | ----- | ----------------- |
| 🟠 (M) | AA | [#issue]():Text is clipped | 1.4.4 Resize text |

## Statement

### Accessibility problems
```
- description: When text is resized [named] text is cut off and so may not display the entire information intended.
```

### Milestones

```
- description: When text is resized, content is lost. This fails WCAG 2.1 success criterion 1.4.4 Resize text
date: TBC

```

## References

[govuk-font mixin - GOV.UK Frontend](https://frontend.design-system.service.gov.uk/sass-api-reference/#govuk-typography-responsive-usage)

[Understanding Success Criterion 1.4.4 Resize text ](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)
6 changes: 4 additions & 2 deletions docs/common-issues/conditionally-revealing-content.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,15 @@ If the content contains a link then it shouldn't be added as hint text as not al
### Accessibility problems

```
tbc
- description: When user selects one of the options, hidden content is revealed below the selected option. This content may not be announced by assistive technology
```

### Milestones

```
tbc
- description: Conditionally revealing content is not always announced due to the implementation not meeting our service standard. This fails WCAG 2.1 success criterion 4.1.2 Name, Role, Value
date: TBC

```

## References
Expand Down
7 changes: 3 additions & 4 deletions docs/common-issues/error-message.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@ Ensure for each error scenario you write [clear and concise error messages](http
## Labels

- wcag
- wcag 1.3.1 (A)
- wcag 3.3.3 (AA)
- usability
- error message

## Report

| Status | Level | Issue | Success Criterion |
| ------ | ----- | ----- | ----------------- |
| 🔴 (H) | A | [#issue](): Error message text | 1.3.1 Info and Relationships |
| 🟠 (M) | AA | [#issue](): Error message text | 3.3.3 Error Suggestion (AA) |

## Statement

Expand All @@ -41,5 +41,4 @@ tbc

[Error message - GOV.UK Design System](https://design-system.service.gov.uk/components/error-message/)

[Understanding Success Criterion 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships)

[Understanding Success Criterion 3.3.3: Error Suggestion](https://www.w3.org/WAI/WCAG21/Understanding/error-suggestion.html)
6 changes: 4 additions & 2 deletions docs/common-issues/error-summary-links.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,15 @@ Ensure you are linking to the correct answer by following the [GOV.UK Design Sys
### Accessibility problems

```
tbc
- description: The error message link in the error summary does not link to the form element in the error.
```

### Milestones

```
tbc
- description: The error message link in the error summary does not contain the valid link destination to the form element in error. This fails WCAG 2.1 success criterion 1.3.1 Info and relationships
date: TBC

```

## References
Expand Down
41 changes: 41 additions & 0 deletions docs/common-issues/link-as-button.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# Issue: Link styled as a button [Draft]

For a link styled as a button, add `role="button"` and initialise the JavaScript polyfill to ensure it acts as a button.

- Adding ARIA `role="button"` will identify the link as a button to assistive technologies.
- The JavaScript polyfill makes sure that the link responds to the <kbd>enter</kbd> and <kbd>spacebar</kbd> keypress.

## To resolve

Follow guidance [Using links as buttons](https://github.com/hmrc/accessibility/blob/master/docs/design-and-usability-quick-wins.md#using-links-as-buttons).

## Labels
- wcag
- wcag 4.1.2 (A)
- button
- code quality
- keyboard-only

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • button
  • not sure if label should be code quality / usability / keyboard-only

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added

## Report

| Status | Level | Issue | Success Criterion |
| ------ | ----- | ----- | ----------------- |
| 🔴 (H) | A | [#issue](): Link styled as a button | 4.1.2 Name, Role, Value |

## Statement

### Accessibility problems
```
on the [page title] page, the [link text] link has been styled as a button, but is not seen as one with assistive technologies and does not work with the spacebar keypress
```

### Milestones
```
for a link styled as a button, the role="button" and the JavaScript polyfill is missing to ensure it acts like a button. This fails WCAG 2.1 success criterion 4.1.2: Name, Role, Value
```

## References

[Using links as buttons](https://github.com/hmrc/accessibility/blob/master/docs/design-and-usability-quick-wins.md#using-links-as-buttons)

[Understanding Success Criterion 4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)
15 changes: 15 additions & 0 deletions docs/common-issues/welsh-translations.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,21 @@ However it is possible to send an override skip link to the @skipLinkBlock code
| ------ | ----- | ----- | ----------------- |
| 🟠 (M) | AA | [#issue](): Content not translated to Welsh | 3.1.2 Language of parts |

## Statement

### Accessibility problems
```
- description: When switching to the Welsh language version, the parts of the text is not translated. Additionally, the not translated text may not be pronounced correctly by screen readers.

```

### Milestones

```
- description: Missing Welsh translations and appropriate language attributes on the copy can cause screen readers to mispronounce the copy. This fails WCAG 2.1 success criterion 3.1.2 Language of parts
date: tbc
```

## References

[Language toggle - HMRC Design System](https://design.tax.service.gov.uk/hmrc-design-patterns/welsh-language-toggle/)
Expand Down