Piccalilli·2yHow I build a button component
Learn how to build a versatile button component in HTML and CSS with multiple variants including a ghost button and one with hard edges. The guide emphasizes using semantic elements instead of <div> and JavaScript handlers, outlines the use of custom properties for maintainable styles, and incorporates best practices for accessibility using ARIA attributes.
DEV·2y7 Old-School Practices in HTML Should Be Avoided
Avoid using outdated HTML practices like specifying type attributes for <script> and <style>, using frameborder on <iframe>, and including support for IE 8. Utilize semantic elements like <header> and <footer> properly within sections, and choose heading tags based on page structure rather than design. Lastly, simplify boolean attributes by omitting unnecessary values.
freeCodeCamp·2yHow to Use CSS to Improve Web Accessibility
CSS can significantly enhance web accessibility by updating focus styles, avoiding content shifts, reducing motion for users with vestibular disorders, and customizing contrast options. Techniques such as using the :focus pseudo-class, prefers-reduced-motion, prefers-contrast media queries, and enabling dark mode help create a more inclusive user experience. CSS animations can also enhance UX by visually guiding users and providing feedback. Ensure purposeful and user-friendly implementation to support assistive technologies and improve overall accessibility.
LogRocket·2yTypes of fonts and when to use them
Understanding typography is crucial for creating clean, high-quality websites. Typography affects visual hierarchy, readability, and user experience. Different font types like serif, sans-serif, script, and display serve various purposes and convey different moods. Key considerations include accessibility, font contrast, and pairing techniques. Tools like Fontshare, Fontjoy, and WhatFont can help in selecting and combining fonts effectively.
LogRocket·2yChoosing the best color combinations for UX design
Colors play a crucial role in UX design by enhancing usability, brand identity, and emotional connections. Understanding color psychology, the color wheel, and principles like the 60-30-10 rule can help designers create effective color combinations. Tools such as PaletteMaker, Adobe’s Contrast Checker, and Adobe Color aid in selecting and testing palettes. Designers must ensure their choices meet accessibility standards and consider user behavior through A/B testing. Real-world examples like Headspace and Mondly illustrate the impact of thoughtful color selection in UX.
Community Picks·2yImpactful Web Development Projects in 8 steps
Impactful web development projects start with intention. This guide emphasizes understanding your audience, starting with local businesses, building reusable templates, prioritizing accessibility, and using Test-Driven Development (TDD). Foster real client relationships, develop effective pricing strategies, and transition from creating a portfolio to building a sustainable business. Finally, focus on long-term branding to distinguish yourself in the competitive field of web development.
CSS-Tricks·2yAnchor Positioning Quirks
Anchor positioning is a new CSS feature that brings new dynamics in positioning absolute elements, accompanied by quirks and potential bugs. It introduces concepts like the inset-modified containing block (IMCB) and properties such as position-area and position-try-fallbacks. Despite fast browser adoption, some discrepancies between the specification and implementations persist. The feature also calls for attention to accessibility considerations when linking elements semantically and visually.
HeydonWorks·2yThe b element
The HTML `<b>` element, which once stood for 'bold' in HTML4, now means 'Bring Attention To' in HTML5. However, it shares visual styling with the `<strong>` element, which indicates strong importance, leading to confusion. The post discusses the challenges in differentiating these elements both visually and for assistive technologies, and it suggests generally avoiding `<b>` in favor of `<strong>` for clarity.
Hacker News·2yBuilding a robust frontend using progressive enhancement
Progressive enhancement is a web development strategy focused on building a robust foundation with HTML. CSS and JavaScript enhancements are added subsequently, ensuring high quality, accessibility, and cross-browser compatibility. The approach promotes fault-tolerant design, improving service resilience and user experience. Best practices involve using semantic markup, feature detection, polyfills, and avoiding dependency on client-side JavaScript frameworks for core functionality.
CSS-Tricks·2yAnother Stab at Truncated Text
The post delves into the complexities of managing truncated text in web development, emphasizing accessibility concerns. It explores using CSS techniques like line clamping, flexbox, and text-overflow, and investigates how to appropriately handle buttons for assistive technologies using ARIA attributes. The post includes a case study involving a Chrome-only auto-height transition triggered by a button, highlighting the challenges and solutions in providing inclusive user experiences.
Telerik·2yA Guide to Image SEO
Learn about the importance of image SEO and how it can enhance the usability, accessibility, and ranking potential of your website's visual content. This guide introduces nine strategies, including adding alt text, resizing and compressing images, using appropriate file formats, and implementing structured data to improve image search results. Discover how to prioritize and optimize specific images to boost engagement and loading speed for an overall better user experience.
Community Picks·2yThe “Other” C in CSS | Sara Soueidan | CSS Day 2024
Sara Soueidan, an inclusive design engineer, discusses the significant impact CSS can have on web accessibility, particularly how it affects the semantic accessibility of HTML. She breaks down the accessibility tree and how it interacts with screen readers, highlighting that CSS does more than just control visual presentation. CSS properties can influence an element's role, name, description, state, and even its presence in the accessibility tree. Sara provides practical advice on using CSS to maintain accessibility, especially for screen reader users, and underscores the importance of combining CSS with ARIA attributes and semantic HTML for a better user experience.