Skip to content. Adrian Roselli Consultant, Writer, Speaker

All Posts Tagged: css

WordCamp Buffalo: CSS Display Properties versus HTML Semantics

I got to roll out a brand new talk today, and WordCamp Buffalo attendees were kind enough to patiently sit through it. As promised I have posted the slides and embedded them below. If the embed is a problem, you can view them at SlideShare. Videos I embedded the videos…

Posted:

Tags: accessibility, ARIA, browser, css, html, slides, standards

Display: Contents Is Not a CSS Reset

CSS resets are a collection of CSS styles that undo the default browser styling of many or most HTML elements. Recently I have seen cases of developers using display: contents on lists and headings to remove the margins and padding, and generally to visually do what a CSS reset might…

Posted:

Tags: accessibility, browser, Chrome, css, Firefox, Safari, standards, tables

SVG Filtering for Windows High Contrast Mode

Two nearly back-to-back tweets this weekend reminded me that you can use CSS filters to mess with the colors of SVGs: Solved With CSS! Colorizing SVG Backgrounds at CSS-Tricks (tweet from Chris Coyier); Filter at MDN Web Docs (tweet from MDN). Generally this technique is not something you would consider…

Posted:

Tags: accessibility, css, Edge

CSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow

I would like to note that my audience was so riled up from my talk, that two guys flipped a table. It was awesome. Or view the slides on Slide Share. Related Links Stack Overflow Developer Survey Results 2018 — Disability Status Bookmarklet to add link underlines to Stack Overflow…

Posted:

Tags: accessibility, css, html, slides, speaking

Tables, CSS Display Properties, and ARIA

This post has two separate but related things going on. One is an example of one of my responsive tables with ARIA added, and the other is the Twitter conversation that started this along with some generalized responses. Responsive Table with Semantics Retained by ARIA The Tweet What You Can…

Posted:

Tags: accessibility, ARIA, css, html, standards, tables, usability, UX

GitHub Contributions Chart

Perhaps a testament to how little I might value GitHub contributions. GitHub profile pages are, to many, the de facto place to quickly judge the value of a developer. The contributions chart is an at-a-glance visual indicator of that value. I disagree completely with the notion of the chart (or…

Posted:

Tags: accessibility, css, html, mobile, standards, usability, UX

Tweaking Text Level Styles

This post is building on the post Short note on making your mark (more accessible) by Steve Faulkner at the Paciello Group blog. In that post, Steve answers a very specific question about the <mark> and making it more accessible for screen readers. I saw some follow-up questions on the…

Posted:

Tags: accessibility, css, html, standards, usability, UX

Web Development Advent Calendars for 2017

The chocolate tasted like sugared wax. Yet it was still less offensive than the typeface. For a few years now web developers around the world have celebrated Saturnalia Christmas with advent calendars covering topics related to the web. I expect you will recognize some of these from prior years. I…

Posted:

Tags: accessibility, css, design, html, internet, standards, UX

Feature Request for Firefox Grid Inspector: Source Order

This post is both a feature request and an opportunity to share my thoughts in a format I find easier to use than a Bugzilla report. And Jen Simmons said I could do it as a blog post. So there. Firefox Grid Inspector I am a big fan of the…

Posted:

Tags: accessibility, browser, css, Firefox, usability, WCAG

A Responsive Accessible Table

Painfully slow demonstration of the example table resizing and different media queries kicking in. After writing (again) that it is ok to use tables, and after providing quick examples of responsive tables, I received questions about why I used some of the code I did. I am going to attempt…

Posted:

Tags: accessibility, ARIA, css, design, html, mobile, standards, tables, usability, UX

Avoid Emoji as Class Names

The title of this post is not broad enough. Avoid emoji as any identifier, whether as strings in your script, IDs on your elements, classes for your CSS, and so on. As soon as you start using emoji, you are blocking some users from being able to understand or use…

Posted:

Tags: accessibility, css, standards, usability

Slides from WordCamp Europe

There is a lot going on in this post. Between embedded slides, video, external Twitter scripts, and animated GIFs, this page will kill your data plan. You may want to hit the browser Stop button if you have a data cap. If the embed above is not working (or is…

Posted:

Tags: accessibility, css, html, slides, speaking, standards, usability, UX, WCAG

Search icon Used in the search form as a button. Search icon Used in the search form as a button. Information icon Lower-case 'i' in a circle. Checkmark icon Symbol showing a checkmark. Alert icon Exclamation mark within a triangle.