Skip to content

Accessiblity problem introduced on new site's code editors #666

Open
@calebfoss

Description

Most appropriate sections of the p5.js website?

Examples

What is your operating system?

Windows

Web browser and version

No response

Actual Behavior

Code editors on the Examples and Reference pages trap keyboard navigation, breaking WCAG Success Criterion 2.1.2: No Keyboard Trap.

This obstructs people with disabilities who navigate web pages using tab.

Expected Behavior

The site supports keyboard navigation, following basic accessibility standards.

This problem can be solved by setting the indentWithTab prop to false on the CodeMirror React component.

If you still want to allow site visitors to insert tabs into code, there are a few ways to do so. CodeMirror, the tool the new site uses, includes documentation on handling tab in an accessible way. This issue was solved on the old site by @katlich112358 by using shift+space to insert tabs into code instead of the tab key.

I urge the maintainers to run an accessibility audit on the new site to catch issues like this.

Steps to reproduce

No response

Would you like to work on the issue?

Yes

Metadata

Assignees

No one assigned

    Labels

    BugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions