October 14, 2021

Beautiful but usable?

New website from Jonny Ive and Marc Newsome’s new(ish) design firm - LoveFrom. It is, as we’d expect, beautiful. The many comma animations (refresh the page a few times) are delightful.

https://www.lovefrom.com

But, is the page usable? It took me a good minute to realize that you can scroll to see more text. No scroll bars. No cheeky text above the fold. Just blank space.

Affordances like that are a cue to users that there’s more. It makes a site more engaging and accessible. Otherwise, you ask the user to expend cognitive energy to engage with you. Sure, it may not be much, but it is still requiring effort on the user that should be expended by designers at the start.

They’re both titans and the aesthetic of the page is on par with the visual appeal of his work. But it’s not accessible.

I expect accessibility from Ive and Newsome. Not just love.

Accessibility

October 10, 2021

Asterisk has no meaning

Meaning is subjective and context driven. My favorite example of “well everyone knows what that means” is the “*” used in a web form to denote a required field. Asterisks themselves do not inherently mean “required”. Historically, according to Wikipedia, asterisks were first used to identify errors in duplicated texts (source).

Aside: I find it funny that modern usage for asterisks means “fill this out or we’ll throw an error” where the first known usage was “hey there’s an error there.” Centuries of usage and the concept stays fairly close to original use. Language is neat.

You still need to explain that in your interface even if “everyone knows that”. Probably especially because of it.

Not everyone knows

The “everyone” in the statement is “everyone that has spent significant time using computers/the internet” which is NOT the majority of people, not even the ,Anorinth of computer users, in the world. To be as inclusive as possible, assuming that users don’t know that “*” = required is the better option in case it’s an unfamiliar convention.

It’s also ableist to see the symbol and expect the cognition to understand

A couple of things…

1. it may be easy to miss seeing the asterisks even if users do know what it means. Small characters on a form are easy to overlook as a user tries to enter data.
2. Recalling that “*” = required requires cognition and not all people will be able to do that sort of mentation effectively due to cognitive disabilities.

Why is meaning?

Fixing this is super simple and not really what I want to focus on here. You can find it below but what I find most interesting is the creation of meaning from repeated use of an element. It’s probably happenstance that the usage of asterisks to denote “error” is some fashion since Ancient Greece. It has otherwise been used to soften swearing by hiding letters, secre passwords by hiding them, use as a wildcard to computer searches, and myriad other things.

Meaning in interface convention is not inherent. Someone decides to use something and either it catches on and becomes convention or it doesn’t. We could just as easily place (required) after the labels in an required field and it would be MORE reliable and understandable because words have understood definitions adm can be translated. But that isn’t used for aesthetic reasons or space constrainers. “*” is considered more attractive and efficient.

What is meaning??

Meaning of symbols is cultural. It derives from usage and exposure and npot something inherent in the thing.

Take another example - the octagon 🛑. Itself, octagon is just a shape. Make it red and/or put STOP in it and you have a conventional English traffic sign.

Aside: the original stop sign was literally just black letters on a white background. It was standardized into the octagonal shape in 1924 but was black and yellow. It wasn’t made red until 1954. The octagonal shape has been adopted by numerous countries, as well as the white text on a red fieldstructure. Source: https://www.myparkingsign.com/MPS/article_history-of-stop-sign.aspx

From years of usage, humans in countries that use that convention, understand red octagons to tell a person to stop and pay attention. It’s still not perfectly reliable but decades of cultural reinforcement means it’s a relatively safe convention to use.

But, again, octagons are just octagons. Red is just red. And you still need to address the obvious sight-bias in signs anyway. We’re out saying that stop signs need an audio equivalent (though walk signs should) given the context - not many folks with zero vision may be driving cars (there are some legally blind folks who CAN drive cars [so take care of your assumptions there…]).

What is meaning????

I tell folks that I work with that we have to separate the meaning from the symbol and ensure the meaning is provided to all users. Red octagon doesn’t mean anything. STOP means a lot. You really need to have both for a symbol to matter and to ensure proper user information and behavior

The Fix For *

Addressing the issue is pretty simple though. In your interface, include “*” indicates a required field” or similar text that is of an appropriate literacy level for your audience. Short, easy words. Fewer symbols. Simple sentences.

Make the text high-enough contrast to be visible to users.

And write your HTML to spec. The HTML REQUIRED attribute is widely supported by browsers and assistive technology so that low vision users can still understand the requirement. You don’t even need to use the aria label anymore because it is so well supported.

Bit consider this anywhere you’re thinking of using something “understood” by everyone. We get far better results if we don’t assuming for previous knowledge and just… be obvious.

Tell people what they need to know, when they need to know it, and encode it into your interface.

References

Aria-required: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute Asterisks: https://en.m.wikipedia.org/wiki/Asterisk Blind driving: https://lowvisionmd.org/legally-blind-and-driving/ Contrast miniums: https://www.w3.org/TR/WCAG21/#contrast-minimum Literacy levels: https://www.w3.org/WAI/WCAG21/Understanding/reading-level.html Stop signs: https://www.myparkingsign.com/MPS/article_history-of-stop-sign.aspx

September 12, 2021

Building them nodes

I have been building out my Second Brain more. First screen shot was from August 4th and he second is today.

August 4th’s graph

Today’s Graph. Such dense. Very node. Wow.

Wait what was this again?

Second Brains are ways to externalize and traverse our knowledge. I’m using Obsidian, an application that allows for easy linking between text notes. Think like Wikipedia. Note 1 links to note 2 though a note title link. Do that for lots of notes and you get a network of ideas.

What’ve I been doing?

The hardest thing has been recognizing when I should be writing something down.

Example:

Someone asks me to interpret a WCAG criterion for a bug fix. I look up the criterion, review the bug report, review the functionality, and read the design. What I HAD been doing was just answering that question over email, or design, or whatever.

NOW I write all that down as I go. I grab source links, references and text within the sources, my understanding of the question, and my final interpretation.

But write it down where?

In Obsidian, I create a daily note that holds all my calendar holds, tasks, and general note section. I start writing things there. If the information gets “big” enough, I cut it out into its own note and leave a reference link to it from my daily note.

When writing those notes, I create notes for other concepts that I want to expand because, say, I have opinions/ideas on related concept that contributes to my understanding of the thing I’m writing notes about.

I’ve also been just… brain dumping into notes occasionally to build things up or grabbing old blog posts and dropping them into notes to then go pick apart into smaller notes.

Over time, these notes expand and the links get bigger and nodes get larger where more things reference them.

Here is an example from today: http://blog.angrybunnyman.com/Example-Note

Anatomy of the note

At the top sandwiched between ’— is YAML markup. This is just metadata I add to extend functionality in Obsidian.

MOC - this is a link to my “map on concept” note. MOCs are intended to be a note that aggregates kinda my understanding of A Thing. Here, this note is contributing to my understanding of “accessibility” more broadly.

Then the body of the text. This note was about making “real” buttons in HTML instead of ’ Me

September 7, 2021

Ok look

Ok look

Ok look. #accessibility matters. If you don’t think so, you don’t matter.

I will not accommodate your existence if you won’t recognize mine.

Permanent link: Http://blog.angrybunnyman.com/Ok-look

That's it. That's the tweet.

September 1, 2021

Needs are human.

Needs are human

If you require something of a person that isn’t directly compatible with their physical reality, addressing that incompatibility is an #accessibility #accommodation, not a special need.

Permanent link: Http://blog.angrybunnyman.com/Needs-are-human

That's it. That's the tweet.

August 15, 2021

Accessibility starts with empathy. If you don’t or won’t care about people there’s nothing I or society can do for you.

Permanent link: Http://blog.angrybunnyman.com/Accessibility-starts-with-empathy

That's it. That's the tweet.