Skip to content

Fix heading structure for improved accessibility #883

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.

Sign up for GitHub

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

Merged
merged 3 commits into from
Jul 10, 2025
Merged

Fix heading structure for improved accessibility #883

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
80cd586
Add missing H1 to / route for proper heading hierarchy and accessibility
AshmitSherigar Jun 27, 2025
e34a24d
Fix heading levels on /download page (H3 → H2 for accessibility)
AshmitSherigar Jun 27, 2025
a2c1cf8
Merge branch 'main' into fix-heading-structure
perminder-17 Jul 10, 2025
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
10 changes: 5 additions & 5 deletions src/content/text-detail/en/download.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,29 +12,29 @@ import {

Welcome! This page contains the links to start using p5.js in the way that suits you best. Open the p5.js Editor in your web browser, or download the library to your own computer. We’ve tried to order the links to reflect what a beginner might want first, then what a more experienced programmer may be looking for.

### Start Coding Online
## Start Coding Online
This link redirects you to the p5.js Editor online so you can begin using p5.js immediately.

<LinkButton variant='link' url='https://editor.p5js.org/'> p5.js Editor </LinkButton>

### Download the Complete Library
## Download the Complete Library
This is a download containing the p5.js library file, the p5.sound addon, and an example project. It does not contain an editor. Visit [Get Started](/tutorials/get-started) to learn how to setup a p5.js project.

<LinkButton variant='download' url={fullDownloadUrl}> Complete Library </LinkButton>

### Download Single Files
## Download Single Files
These are downloads or links to the p5.js library file. No additional contents are included.

<div class="flex gap-sm md:gap-lg justify-between lg:justify-normal">
<LinkButton variant='download' url={libraryDownloadUrl}> p5.js </LinkButton>
<LinkButton variant='download' url={minifiedLibraryDownloadUrl}> p5.min.js </LinkButton>
</div>

### Use p5.js from CDN
## Use p5.js from CDN
p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing.

<CodeContainerWithCopy>{cdnLibraryUrl}</CodeContainerWithCopy>

### Older versions
## Older versions
Looking for older versions?
Head over to GitHub for [earlier releases](https://github.com/processing/p5.js/releases) of p5.js.
3 changes: 3 additions & 0 deletions src/layouts/HomepageLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,9 @@ setJumpToState(null);
/>

<BaseLayout title="" variant="homepage" homepageConfig={config}>

<h1 class="text-5xl font-bold mb-xl col-span-full">Welcome to p5.js</h1>

<div class="content-grid-simple mb-xl">
<div
class="col-span-2 lg:col-span-3 order-1 grid grid-cols-subgrid content-start"
Expand Down