There is more to styling lists in CSS than you might think. In this article, Rachel starts by looking at lists in CSS, and moving onto some interesting features defined in the CSS Lists specification — markers and counters. Lists in CSS have particular properties which give us the standard list styling we expect.ContinueContinue reading “CSS Lists, Markers, And Counters”
Tag Archives: css
Functions to Add ARIA to Tables and Lists
… Generally when I write and present things, I provide techniques, ideas, examples, and experience to address issues. When I write copy-paste-ready code, with a few older exceptions, I write generic code not tied to a framework nor library. … I have, however, written a couple vanilla JavaScript functions that you can drop into yourContinueContinue reading “Functions to Add ARIA to Tables and Lists”
VoiceOver and list-style-type: none – Unfettered Thoughts
A bug that keeps hitting me at work is VoiceOver not announcing unordered lists properly when either the list-style-type is set to none or display is set to inline. The expected behavior is that the unordered list is announced with a role of list along with the number of items, for example “list 4 items.”ContinueContinue reading “VoiceOver and list-style-type: none – Unfettered Thoughts”
WICG/focus-visible: Polyfill for `:focus-visible`
Based on the proposed CSS :focus-visible pseudo-selector, this prototype adds a focus-visible class to the focused element, in situations in which the :focus-visible pseudo-selector should match. … Curated by (Lifekludger) Read full article at Source: GitHub – WICG/focus-visible: Polyfill for `:focus-visible`
Focusing on Focus Styles
Not everyone uses a mouse to browse the internet. If you’re reading this post on a smartphone, this is obvious! What’s also worth pointing out is that there are other forms of input that people use to get things done. With these forms of input comes the need for focus styles. #People People are complicated.ContinueContinue reading “Focusing on Focus Styles”
How to create a simple CSS loading spinner & make it accessible
Since CSS animations are now so well supported using an animated .gif for a loading spinner is now no longer necessary. The mighty Developer Jon Pearse, showed me how to make a CSS loading spinner so I thought I’d share his technique using a flexible SCSS mixin step by step. This spinner will work inContinueContinue reading “How to create a simple CSS loading spinner & make it accessible”
Short note on what CSS display properties do to table semantics
The CSS display properties are powerful. You can change the visual display of elements to match your desired styling, but sometimes doing this can have an unintended effect of nuking the semantics of the elements, as conveyed to screen reading software, in the browser accessibility tree. Screen readers and other assistive tech, in general, do not have directContinueContinue reading “Short note on what CSS display properties do to table semantics “
Advocating for Accessible UI Design | CSS-Tricks
Accessibility is a hot topic these days, and the older we web-makers get, the hotter it’s going to become! That might be a snarky outlook, but what I’m trying to say is that it’s about time we start designing the web for everyone because the web was meant to be for everyone, and less and less areContinueContinue reading “Advocating for Accessible UI Design | CSS-Tricks”
The math of CSS locks
A CSS lock is a Responsive Web Design technique that lets you transition smoothly between two values, depending on the current viewport size, rather than jump straight from one value to the other. … I found this technique in Tim’s article and, when I tried wrapping my head around it, and creating variants of it,ContinueContinue reading “The math of CSS locks”
Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility | CSS-Tricks
For a beginner, accessibility can be daunting. With all of the best intentions in the world, the learning curve to developing compliant, fully accessible websites and apps is huge. It’s also hard to find the right advice, because it’s an ever-changing and increasingly crowded landscape. I’ve written this post to give you some tips onContinueContinue reading “Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility | CSS-Tricks”
Writing CSS with Accessibility in Mind
An introduction to web accessibility. Tips on how to improve the accessibility of your web sites and apps with CSS. … a lot of things have changed and CSS now gives us an incredible set of tools to style the web. We went from Verdana to Webfonts, from fixed widths to Responsive Web Design, from table-based layouts to Grid, andContinueContinue reading “Writing CSS with Accessibility in Mind”
HTML Source Order vs CSS Display Order
Last month in my post Source Order Matters I wrote about why we need to consider how the source order of the HTML of a page can affect users when the CSS re-orders the content visually. While I used a recipe as an analogue and cited WCAG conformance rules,I failed to provide specific examples. IContinueContinue reading “HTML Source Order vs CSS Display Order”
WebAIM: Accessible CSS
Introduction Cascading Style Sheets, or CSS, allow you to modify characteristics of existing HTML elements. All web browsers have a built-in style sheet that defines the default styling for all elements. For instance, when the browser sees the tag, it knows to skip a line and start a new section because that’s what the built-inContinueContinue reading “WebAIM: Accessible CSS”
An Introduction to the Reduced Motion Media Query | CSS-Tricks
The open web’s success is built on interoperable technologies. The ability to control animation now exists alongside important features such as zooming content, installing extensions, enabling high contrast display, loading custom stylesheets, or disabling JavaScript. Sites all too often inundate their audiences with automatically playing, battery-draining, resource-hogging animations. The need for people being able toContinueContinue reading “An Introduction to the Reduced Motion Media Query | CSS-Tricks”
An Introduction to the Reduced Motion Media Query | CSS-Tricks
A brief history of Reduced Motion When it was released in 2013, iOS 7 featured a dramatic reworking of the operating system’s visuals. Changes included translucency and blurring, a more simplified “flat” user interface, and dramatic motion effects such as full-screen zooming and panning. While the new look was largely accepted, some people using theContinueContinue reading “An Introduction to the Reduced Motion Media Query | CSS-Tricks”
Source Order Matters | Adrian Roselli
CSS is providing newer and more complex methods of laying out your pages. Given the multiple form factors a responsive site has to support, it makes sense that developers want easy ways to structure the layouts that aren’t all floats, clears and position: absolutes. Regardless of how you want your layout to appear in aContinueContinue reading “Source Order Matters | Adrian Roselli”
How Our CSS Framework Helps Enforce Accessibility | eBay Tech Blog
An extremely well written detailed in-depth article.. nice to see. A user interface control not only needs to look like a certain control, it must be described as that control too. Take for example a button, one of the simplest of controls. There are many ways you can create something that looks like a button, but unless youContinueContinue reading “How Our CSS Framework Helps Enforce Accessibility | eBay Tech Blog”
Diagnostic.css – Super quick web accessibility testing – Karl Groves
In my quest to make accessibility accessible, I’ve created a super-easy-to-use tool that people can use to do accessibility testing. If you can view the page in the browser, you can use this tool. Diagnostic.css is a CSS (Cascading Stylesheets) file which, when applied to a web page, will highlight accessibility errors in the page.ContinueContinue reading “Diagnostic.css – Super quick web accessibility testing – Karl Groves”
