11tyCMS: Major accessibility improvements, CSS and editor tweaks, a new welcome wizard and better site support

posted on Nov 26, 2025

Finally, our 11th post! Appropriately enough, its a special one. This update has been developing on the last one's legacy: getting 11tyCMS ready for early beta launch. It's involved adding a bunch of new features, vastly improving accessibility and ensuring that most 11ty sites are supported out the box. These are all crucial features I want finished before release, and we're now well on track. Let's dive in!

Major accessibility improvements

I'm very excited about this one! I've been learning a lot about accessibility guidelines recently, and reading up on how best to improve 11tyCMS's accessibility. I want 11tyCMS to be a tool that encourages people to grow the indie web, I don't want anyone left out of that vision.

I had noticed that a lot of 11tyCMS's major clickable elements in lists, and even some buttons were actually just divs. This makes it difficult for keyboard navigation. There's probably workarounds for divs, but using buttons felt both more appropriate and better for HTML semantics anyway. Now all these divs have been replaced with buttons, almost every single clickable element (aside from the metadata area, that's next!) is navigable by keyboard!

The 11tyCMS sidebar, with the "posts" collection menu item highlighted with a thick, vibrant orange border.

The posts list of 11tyCMS, showing a post list item highlighted with a vibrant, orange border

As you can see, this works perfectly now! And yes, you can also tab into the buttons inside the menu items too. Hopefully this will make 11tyCMS more accessible to a wider range of users.

The accessibility work doesn't stop here. We still have so much more to do: ensuring a consistent, fully WCAG AA+ compliant color scheme and much much more. However, this will require the refactoring of our CSS.

Alternative description support for Milkdown!

I really wanted image alt support from day 1 with 11tyCMS. I don't want people using 11tyCMS to be discouraged from making their content more accessible. Unfortunately, the editor we use (Milkdown) uses alt tags for image ratio data. This is deeply unfortunate, there's no plans to fix this according to the GitHub issues. I took a look at the source code for Milkdown to see if I could build my own image block for the editor.

I found the default image-block component, also finding where it uses the alt tag for image size ratios. Because markdown doesn't support image sizes, I'm confused as to why this is a thing. Anyway, I removed it and replaced it with alt functionality. The editor now uses the custom 11tyCMS image-block component I've tweaked from the base image-block one. It works perfectly. To add an alternative description to your image, simply click the wheelchair icon in the top right and type in the textbox below:

11tyCMS's editor displaying a stock image of a dog, in the top right is the "disability" emoji. Beneath the image is a text box with a placeholder saying: "Image alternative description"

Now, any sites using 11tyCMS will be able to make their images more accessible for all! Wehay!

CSS improvements

I've been learning more about good design principles recently. It's had me noticing a lot of inconsistencies: janky padding and margins, off hue/color scheme colors, buttons out of alignment, and visual density problems to name a few. These are mostly down to badly written CSS, which I plan on completely rewriting soon. However, to launch ASAP, I've focused on fixing the code we have for this update.

The sidebar's buttons are now in full alignment. The delete, add collection and "log out" buttons are all in alignment on their X axis:

11tyCMS's sidebar, showing all the buttons on the right lining up on the X axis.

Much better than what we had before:

11tyCMS's old sidebar, where the add collections button was out of alignment with the "log out" button in the site info "pill"

Same goes for the site dashboard: the text boxes now line up with each other:

11tyCMS screenshot, displaying the site dashboard menu. All the text boxes for each settings category are aligned, in uniform length.

In contrast to before:

11tyCMS screenshot, displaying the site dashboard menu. All the text boxes are cramped together, no spacing and are out of alignment with each other. It looks very crowded and messy.

The tweaks don't stop there either: Now each view/menu has consistent padding and margins. So now, whenever you change menus, you don't get that jarring flash of the text elements shifting about.

Editor tweaks

Accessibility aside, I've also implemented the Codemirror plugin for our Milkdown editor. Code of any language can now be highlighted by using standard markdown syntax. It looks great:

11tyCMS's milkdown editor, highlighting JavaScript code with appropriate coloring

I've also adjusted the text highlight colors to be consistent with the color scheme, along with dampening the bright white we had before. This makes text much more pleasant to read.

Introducing: The welcome wizard! (and better site support)

One of the biggest barriers to releasing an early beta is the onboarding process. For 11tyCMS to work, you have to tell it information about your site: where the input, includes, data and output folders are. Particularly because some folk (myself included, in the past!) have their input folders in the root directory of their 11ty sites. There's also the matter of configuring it for build and publish commands too! To remedy this problem, I created a stepper wizard which is triggered when opening a new site in 11tyCMS.

Each step walks you through what 11tyCMS needs to function:

The first step of the welcome wizrd. At the top is a horizontal, numbered list of the steps (1. Welcome!, 2. Site folders, 3. Build & publish, 4. Finished!) . Beneath is the 11ty CMS logo to the left, with text to the right saying: "Welcome to 11tyCMS! You've not opened this site in 111tyCMS before, so we just need to configure a few things before we get started.

The "Site folders" step of the welcome wizard. At the top there's text saying: "For 11tyCMS to work, we need to specify your 11ty site's folders". Beneath it are 5 text boxes with labels to their left: "Input/content folder", "includes folder", "Media uploads", "Data folder", "Output folder"

Eventually, I'll make the text inputs a folder browser button, making things a little more user friendly. But for now this works perfectly for the onboarding process!

Implementing this has meant refactoring 11tyCMS's code to not rely on hardcoded assumptions for where each folder is located in an 11ty site. This means that it now supports a far wider range of sites than before: you specify where your folders are!

The only downfall with this, is that the layouts are fetched from the root of the includes folder. If you have layouts in a separate layouts folder, 11tyCMS won't find them. I'm working on a solution for this, but it'll be a while.

Conclusion

Another huge progress update for 11tyCMS! I'm so proud of the strides its making! We are tantalizingly close to releasing. Our biggest barriers are so small:

  • Improving the "add post" dialog (right now its near unusable)

  • Figure out how to handle file names for posts (you can't rename files, its very annoying)

  • Adding support for nested collection folders

  • Figure out a default favicon, and support more than just svg ones.

  • Some minor refactoring of the code base

    • There's some Zustand best practices I need to follow, should be pretty quick to implement

    • Remove the use of absolute paths in IPC communication wherever possible

  • Maybe refactor the CSS code (depending on how long it'll take)

After this, we'll be in a good state to release. Then, I'll likely start work on the website for 11tyCMS. The one we have right now is functional, but it's not got the right color scheme or the design I want.

All being well? We could be heading for an end of year release! I'm so SO excited to share what I've been working on with you all, and to get all your feedback and suggestions!

I also want to give a huge thank you to 11ty's community and Discord. Everyone is so friendly, patient and helpful in teaching me how they use 11ty. It's been a huge help in developing 11tyCMS to be as agile as possible.

Until next time, be sure to follow the Mastodon account for quick updates!