I'm working on a CSS-only terminal-style UI for a project and would love your thoughts on it. I've put together a small prototype that you can check out here: https://letieu.github.io/terminal.css/. What are your recommendations for improving the HTML structure, class naming conventions, or ensuring accessibility? Are there any standard designs or patterns I should be aware of when creating these components? Thanks in advance!
3 Answers
Your project looks great! For the HTML, consider using the `
` tag instead of ``s. It's more semantically correct for displaying terminal output. Also, think about using CSS custom properties for easier theming down the line. One note: the blinking cursor might become bothersome, so maybe adding an option to disable it or slow it down could enhance user experience.
Honestly, it doesn't really feel like a terminal component yet. Right now, it’s just a monospace font with no borders or any typical terminal UI elements. You might want to either fully commit to creating a terminal-style UI with all the necessary components, which is a more complex task, or consider changing the focus of your project into something else.
Have you checked the contrast ratio of your colors? It's crucial for accessibility. According to guidelines, body text should have a contrast ratio of at least 4.5:1. I noticed your default text contrast is only around 3.55:1, which makes it hard to read. You can learn more about it here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable/Color_contrast?utm_source=devtools&utm_medium=a11y-panel-checks-color-contrast.
Related Questions
How to Build a Custom GPT Journalist That Posts Directly to WordPress
Cloudflare Origin SSL Certificate Setup Guide
How To Effectively Monetize A Site With Ads