Sa11y
Sa11y.js visually highlights content issues at the source with a simple tooltip on how to fix them:
Better accessibility and sustainability in web development?
It doesn't have to be a complete overhaul, small steps can help you get there. I recommend Michelle Barker's talk "Building a greener web" at "All Day Hey! 2023". Here are some tips:
- Use WebP and native lazyload (images, embeds).
- Use fewer fonts and try to use variable fonts (.woff2).
- Load embeds only on user interaction.
- Test keyboard navigation.
- Test reduced-motion.
- Find a community to test and discuss accessibility and sustainability with real people.
Tools
Checklist
Image Alt Generator
Upload an image to get an image description from ChatGPT. Note that the AI uses a lot of resources and uses your image for training. So use it responsibly!
Samples
Modal
The script also takes care of the focus so that it stays in the modal. Here is a example link to the test. You can also close it with the Escape key.
Modal [popover]
The script also takes care of the focus so that it stays in the modal. Here is a example link to the test. You can also close it with the Escape key.
Accordion
Simple Answer for the Accordion.
Accordion <details>
Accordion
Simple Answer for the Accordion.
Tabs
Content for Tab #. Use the tab key to navigate to the table list, then use the left and right arrow keys to navigate to the other tabs.
Slider
Filter
Richtext
This is a H4 headline.
A paragraph after a headline is here.
Another paragraph after a paragraph is here.
This is a H5 headline.
A paragraph after a headline is here.
Another paragraph after a paragraph is here.
This is a H4 headline.
A paragraph after a headline is here.
Another paragraph after a paragraph is here.
Form accessible upload
Styleguide
Type Scale mobile desktop
- Sample Text
Colors
Spacing
Grid
Features
Fluid Scale
All elements can be scaled using the .scale-content in the HTML node. Along with the CSS grid and responsive font classes, this is a great basis for the design presets from PenPot, Figma, Adobe XD and zeplin.io.
Security & Caching
The .htaccess file has been greatly enhanced with compression, caching and header settings such as content security policy or XSS protection.
MODX
Together with modmore's ContentBlocks you can create a flexible website builder with 100% code control. The modx.css file brings a minimalist layout to the MODX Manager backend.
Interested in MODX? Have a look at JoliTypo and Gitify-Preset.
Get it
Get the latest version
git clone git@
Include the CSS and JS files in your markup and you are ready to go! Override the CSS settings using custom properties and use inline JS via AlpineJS to skip the build process.