Skip to content. Adrian Roselli Consultant, Writer, Speaker

All Posts Tagged: design

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

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 Messages Under Fields

Sometimes we fail to consider how browser features can jack up our interfaces. This is neither good nor bad, but we do need to account for it. My argument here is simple. Avoid putting important actionable or informational text exclusively below form fields. This includes labels, hints, and error messages.…

Posted:

Tags: browser, design, mobile, usability, UX

Accessible Emoji, Tweaked

LĂ©onie Watson recently posted Accessible Emoji, a simple technique to make emoji characters accessible to those with screen readers. It requires a little bit of extra effort when inserting an emoji into a web page, but it is worth it to convey the meaning to screen reader users. Then there…

Posted:

Tags: accessibility, ARIA, css, design, html, print, usability, UX

Don’t Re-Create Browser Features

There has been some discussion lately around, of all things, text resizing widgets on web sites. It was kicked off by a post from Jeffrey Zeldman suggesting that perhaps it is time to bring them back. Even mighty responsive design benefits from offering a choice of font sizes—because there are…

Posted:

Tags: accessibility, browser, design, fonts, usability, UX

Web Development Advent Calendars for 2016

The chocolate in that calendar was terrible. Terrible enough that I keep re-using this photo since I do not want to buy a new calendar. For a few years now web developers around the world have celebrated Saturnalia Christmas with advent calendars covering topics related to the web. Some come…

Posted:

Tags: css, design, html, standards, UX

On Link Underlines

TL;DR: In general, I recommend underlining links in body content. In the absence of a better style appropriate for a specific site, this is the way to go. Overview It is amazing to me how this suggestion causes so much angst and fighting. Designers often argue that they look ugly,…

Posted:

Tags: accessibility, css, design, standards, usability, UX, WCAG

Chromatic Web Fonts, Redux

In 2012 I wrote about how to use chromatic type with pseudo-elements. My objective back then was to minimize the hassle of a content author using a WYSIWYG while also not overwhelming a screen reader user with triplicate content. Pseudo-elements achieved that, though support for pseduo-elements in screen readers is…

Posted:

Tags: accessibility, ARIA, css, design, fonts, html

Speaking at Guelph Accessibility Conference 2016

This May I will be speaking at the Guelph Accessibility Conference. It will be held Monday and Tuesday, May 30 and 31, 2016 on the University of Guelph campus. The theme of this year’s event is In Letter and Spirit: Realizing the Vision of the AODA. There is also a…

Posted:

Tags: accessibility, ARIA, design, speaking, usability, UX, WAI, WCAG

Links, Buttons, Submits, and Divs, Oh Hell

Screen shot of the Zurb Foundation advice for accessible buttons, where it shows anchors and a div each with role=”button”. In short, a perfect example of everything you could do wrong. NOTE: This was version 5.5.3. Most of this is fixed in the current version as of this writing (6.1.2).…

Posted:

Tags: accessibility, css, design, html, Internet Explorer, standards, usability, UX

Avoid the Hamburger Menu for Desktop Layouts

This is, to some extent, a response to the article at Usability Geek titled Making A Case For The Desktop Hamburger Menu (which I had the Wayback Machine capture because I have learned my lesson). I left a comment on the article, but it motivated me to write something on…

Posted:

Tags: accessibility, design, mobile, usability, UX

Web Development Advent Calendars for 2015

Ganesha may or may not be stealing chocolate from the advent calendar. For a few years now web developers around the world have celebrated Saturnalia Christmas with advent calendars covering topics related to the web. Some come and go, but you’ll probably recognize a few regulars on this list. I…

Posted:

Tags: browser, css, design, html, standards, UX

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.