Skip to content

Code blocks potentially fail 1.4.10 Reflow #166

@andrewhick

Description

@andrewhick

Where there are code blocks, for example on the Language of Parts page, the code requires horizontal scrolling.

This seems to fail 1.4.10 Reflow, although there are counter-arguments:

  • Default behaviour for code blocks is not to wrap text, so changing that could cause more problems.
  • It could be argued that code should not wrap, to make it easier to understand. Reflow includes an exception in this case: "Except for parts of the content which require two-dimensional layout for usage or meaning".
  • The Design System includes code blocks which do not wrap. For example, the HTML code blocks on the Design System Tables page.

Here's how it looks on a 320 x 240 screen:

HTML code block with text overflowing off to the right hand side

To address the wrapping, I tried adding this to /source/stylesheets/screen.css.scss but it didn't do anything. However I'm not sure if this should be addressed as a WCAG issue or not. Any comments/guidance appreciated.

// Style pre elements to wrap
.technical-documentation > pre {
  text-wrap-mode: wrap;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    accessibilityAnything relating to accessibilitybugSomething isn't workingtech-docsMost likely relates to the Tech Docs platform

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions