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, and

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. I

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-in

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 to

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 the

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 a

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 you

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.