Using ARIA roles and background-image

Here’s something I just learned about, so I’ll make a note here so I can remember it for later.

Here’s the main source:

Often, when adding an image to a web site, I need to have particular control over the images behavior. These needs lead me to use a div with a CSS background-image property, rather than an img.

This is great because it gives access to many powerful formatting rules, like background-cover and background-clip. Unfortunately, it also lowers accessibility. Screenreaders assume that background images are ignorable and decorative.

Here’s how you can fix that. Give the div the ARIA-role of img, and alt text, like this:

<div role="img" alt="description of the background image" />

And that’s it!

I’m using JSX and TypeScript, and TypeScript doesn’t expect a div to have an alt attribute, but as far as I can tell it’s perfectly valid and necessary HTML. You’ve just got to extend the types.


Leave a comment

Filed under Uncategorized

Fighting Ableism by Improving Accessibility in Technology

Or, The Why and the What of Accessibility.

I’ve written this article after a conversation about accessibility (aka a11y) with a friend who is a relatively new programmer. So that’s the general audience. You don’t need to know how to program to get the gist of this article, but at some points it might be helpful. There’s also prior art to all of this. I’m just adding a voice to my side.

As a non-disabled person, I cannot pretend to fully grapple with or understand the immensity of ableism or its myriad and complex intersections with capitalism, patriarchy, and white supremacy. I cannot solve it on my own. I build dorky little web apps. But here is what I can do: I can respect and believe the experiences of disabled people. I can build web apps that as many people as possible can use, and I can encourage my clients and peers to do the same. I can advocate for codification and stronger enforcement of accessibility standards.

Neither I, nor any other single person, nor any app, can on their or its own dismantle ableism. But I want you to take this idea for granted: If you are designing or building something and not considering how disabled people might interact with it, you are actively taking part in their oppression. Instead, I want to encourage you to question, fight, advocate, and build.

Specifically, when you build something and imagine the user, do better. Question critically, how would a blind person use this? Are the colors you’ve chosen in this graph usable by a person with colorblindness? What if someone lacks fine motor control, can they use the keyboard to navigate?

If you don’t ask and answer these questions, you are implicitly and actively, if accidentally, excluding these people. You will find, I hope, that these questions are deeply challenging and exciting and fun and rewarding; disabled people are a wildly diverse group, and the ways the interact with technology are equally diverse. Despite this, there are a few simple things you can do to dramatically widen the accessibility of your work.

It is past time to learn, but learn now. Instead of, or in addition to, thinking about how Uber for Dogs is going to improve the world, do the good work to make the world better.

Two anecdotes about resistance to accessibility in tech

If you’re already convinced on the “why”, skip ahead to the next section to read a brief primer on the “what”. Here are two personal anecdotes about the barriers to building accessible apps.

If you’re a programmer or designer, you’ve probably experienced how little time, attention, and money is given to the subject of accessibility. Business interests are orthogonal at best to the interests of humanity.

For example, at my last job, I advocated for increasing the use of Semantic HTML and ARIA Roles in a particular web app; these techniques make it easier for screenreader software to traverse the page and read it coherently. My boss told me not to spend time on it, because we had no blind users. The question of why we had no blind users didn’t occur to them. We had a greater proportion of users using an ancient version of Internet Explorer, so we spent our energy supporting them instead.

That was a story of a depressingly lazy self-fulfilling prophecy. The business thus became an anti-human cult narrowly obsessed with Internet Explorer 8. Note that I don’t think that supporting IE users is the problem here.

Here’s another story: I was working on solving a problem having to do with tab focus and browser history in React. The UI worked fine when using the mouse, but degraded severely when using keyboard navigation. My boss told me to stop working on it; not because of time constraints, but because he was concerned that I would degrade the user experience for mouse-users in my quest to make it usable for keyboard users.

That was a story of how ableism had tricked my boss into thinking that access to our work was a zero-sum game; that for one group to win, another had to lose.

What to do better

The good news is that modern browsers and operating systems are, by default, magical vortices of accessibility. They have built-in keyboard navigation, and they offer tools for zooming in, increasing contrast, and reading content out loud.

The bad news is that a modern developer’s job is often to pave over that magic with JavaScript.

In practice, most accessibility work is simply re-enabling the built-in tools that we’ve paved over.

Here is a personal codification of the things I consider when building an app. I’m avoiding descriptions of implementation details, but if you find a glaring omission or fallacy, please let me know.

An accessible site or app

  • has text which is legible, e.g. sufficiently large and high-contrast;
  • does not rely solely on color to indicate important information;
  • remains legible when zoomed up to 200%;
  • is keyboard-navigable;
  • plays nice with screenreader software like JAWS or Voiceover;
  • works even when JavaScript and CSS are disabled, aka progressive enhancement or at least graceful degradation.

Some related ideas that are less commonly considered under umbrella of accessibility are that a site or app should:

  • remain usable over a 2G or satellite connection;
  • remain usable over a wide range of viewport sizes, aka responsive;
  • not require the user to learn novel rules and systems;
  • not subject the user to potentially triggering content without warning.

Although these last ideas aren’t related to widening access to technology to disabled people, they widen access in general. People who rely on satellite internet or 2G connections have a right to take part in technology. People whose only computer is a smartphone have a right to use our products. I would argue that there are few valid technical reasons why not.

There are difficult edge cases where it’s not clear what best practices are. How can a JavaScript-dependent single-page app degrade gracefully? How should an inherently visual product be presented to a screenreader?

For that last question, I am thinking specifically of interactive data visualizations, which is what I specialize in at Periscopic. These are difficult questions without obvious answers, but that’s what makes them so engaging. Let’s figure it out.

Leave a comment

Filed under Accessibility, code

I’m gonna go into that Dragon Ball Z trainingroom where gravity is like 100 times stronger and time slows down and I will become extremely powerful

I will become extremely powerful and noone will be able to stop me.

Leave a comment

Filed under Uncategorized

I left Twitter

Around, like, 2013, I stopped eating meat. First I just cut out pork, then meat altogether, and eventually I was consistent about it. The meat industry is unfathomably horrible, and its horribleness extends in many dimensions. I didn’t want any part in it, and I still don’t. I still eat dairy, so I’m not perfect, but I’ve picked my battle and drawn my line. I stand by it. It is worth it to me to not cross that line.

In the same vein, I used to like Twitter. There’s a lot of cool stuff on there, like good jokes. There’s also a lot of amazing political activists who have done so much work to educate people about vital and critical issues. For example, I credit people I followed on Twitter with teaching me about trans rights, or the concepts of prison and police abolition. Women and nonbinary techies on Twitter became my unwitting mentors and exemplars. They did a lot to broaden my world. Also I read many many jokes about dogs. It was fun and useful.

Unfortunately, there’s also a lot of Nazis. There are an unjustifiable amount of Nazis.

Many other people have done very good jobs of explaining how Twitter is a bad website, but I really like Mike Monteiro’s blog post here. Twitter is sad, and it makes me sad. In that way it is a microcosm of entire tech industry. It could be, and very nearly is, so much more than the cesspool that it has consciously allowed itself to become.

The straw that broke the camel’s back, though, was that Twitter recently posted profit for the first time. So that means, in the shallowest and most cynical of use of the term, Jack Dorsey’s artificial controversy engine is “working”. I am aghast. I am revolted. And I am leaving.

I didn’t have a lot of followers. Just 159 at the time of this writing, and very few ever engaged with me, so I know I was never making @jack as much money the POTUS. Here’s my most successful tweet ever. @jack won’t notice, I think, another small account shutting off its lights in response to the sustained and unaddressed harassment encouraged by his platform.

So, folks, consider not being on Twitter anymore.

Leave a comment

Filed under Uncategorized

The One Shot Podcast Network

I listen to several shows on the One Shot network. The content is kind of niche but I generally really dig it, and I always boost them to friends. Most of their shows focus on tabletop RPGs, either playing them or talking about them. It’s some nerd shit.

I used to support them on Patreon at $5 a month, but recently, one of their show hosts was accused of harassment. You can read their synopsis and response here. They handled the situation with bravery, grace, and an admirable commitment to justice. I’m proud of them.

They seem to be a good organization. Doing the right thing was undoubtedly expensive, but they did the right thing anyways. I want to support them. I want to live in a world in which doing the right thing is viable and rewarded. Thus, I’ve raised my Patreon subscription to $15 a month.

Give them a listen if you need to fill a podcast-shaped hole in your life. Their content is often trashy, but it is a light in my life.

Leave a comment

Filed under Uncategorized

My plan to fight Trump

I am not writing this to brag about how amazing I am. I am writing this because I am scared and sad and I want to do everything I can to stop Trump from hurting people. And writing lists has always helped curb my anxiety.

I also want to try and recruit others, especially my friends within the tech industry, to come up with their own plans and share them. I urge you to think about and enumerate what you are going to do. Your plan is allowed to change, but having one, at least for me, means you’re more likely to follow through.

To that end, I ask that you please consider sharing this post.

This is bad. This is a worst-case scenario. This is proto-fascism well on its way to fascism. Have you heard that Hitler Trump might continue to hold large rallies? Have you noticed that in addition to all three branches of government, the GOP controls nearly 2/3 of state governments, the amount needed to amend the constitution? I can’t even begin to talk about how bad this is because I won’t be able to stop, and this article will never get to its point. I trust you, reader, to have your own understanding of how bad this is.

I feel sick. I have had, for the past few days, a dark vortex of despair spinning in the pit of my stomach and the back of my mind. I feel anxious, I feel powerless, I feel totally ripped off.

I also understand that this is how oppressed peoples feel, like, a lot the time.

Many people will find themselves abused by the government and its actors, and stripped of their voices. Women, undocumented immigrants, people of color, LGBTQ folks. They are humans and they have worth. They matter. I will fight for them.

I know that my personal social network, and the tech industry, has no lack of individuals who look and think a lot like me: highly privileged, usually white, fairly liberal men with high incomes and few financial obligations. Let’s step up.

Here’s my plan.

  • I will donate $75 a month each to Planned Parenthood, the ACLU, the EFF, MSF (aka Doctors Without Borders), and the SPLC. That’s $375 a month, a significant, but far from huge chunk of my post-tax income of about $4000 a month. I will remain very comfortable. I may decide to up my contributions.
  • If my post-tax income increases as a result of Trump’s tax cuts, I will spend all of the gains on charitable organizations. This especially I urge you to do.
  • I will volunteer with organizations directly help people. I haven’t yet decided which organization, but I am considering either Big Brothers Big Sisters (a youth mentoring program) or Lines for Life (a suicide prevention hotline).
  • I will continue to strive to be an effective ally. This is a complicated and never-ending goal, but, for example, I will try to put myself between Trumpist abusers and their victims if I witness it. I will offer compassion and material help to those around me who need it.
  • I will contact Democratic congresspeople and ask them to obstruct the GOP.
  • I will continue to not eat meat and try to spread a culture of vegetarianism. I originally became a vegetarian out of compassion for animals, but concerns for the environment have become my strongest internal motivator. The environment will suffer greatly under Trump as he attempts to dismantle the EPA, and eating meat is, plain and simple, really awful for the environment.
    • Many of my liberal friends laugh at the idea of giving up meat, but please consider cutting back, like by only eating meat on weekends or holidays.
  • I will continue to avoid using my car, partially an act of protest against our endless oil wars. This is possible because I live in Portland, OR, which has very decent non-car transport infrastructure. I tend to bike everywhere.

As all this happens, I will continue to be imperfect and make mistakes. I will fall short. I will love myself in spite of that. I will treat myself well, and I will do my best to surround myself with people I love. I will treat them well.

In addition,

Here’s what I will not to do, and what I think you should consider also not doing.

CW: Discussion of things Donald Trump has done, like, allegedly, child rape.

  • Act like we are faced with a normal GOP presidency. He is an (alleged) child rapist, overt racist and misogynist, con-man, (alleged) rapist, braggadocios pussy-grabber, lying sociopathic wannabe autocrat, and (alleged, but come on) rapist. This is not normal, and it is not okay. He was helped into office by a coalition of white supremacists, a spineless GOP, a corrupt FBI director, and Vladimir Putin. Many of his electoral gains were made possible by SCOTUS’s gutting of the Voting Rights Act, and the subsequent widespread voter suppression. And though he won the electoral college, Trump lost the popular vote by around 2 million votes.
    • Let me repeat: This is not normal.
  • Pretend that he didn’t win the presidency. I don’t see denial of his ascendency as productive.
  • Hunt for a silver lining in a Trump presidency and firm GOP control of all three houses of government. This is just 100% bad.
    • Other good things happened on election day, though, like our first Latina senator, or the ouster of Joe Arpaio. About fucking time.
    • But these do not diminish the badness of Trump.
    • Specifically, I swear to god if I hear one more person say “I can’t wait for all the great protest music that comes out of this” I’m gonna flip.
  • Fail to recognize the central role of misogyny in Clinton’s (electoral) loss.
  • Give Trump the benefit of the doubt and offer appeasement, as some tech folks are already doing. Words are actions. Trump has already caused a huge amount of damage by mainstreaming our nation’s hip new rebranded white supremacy movement, the Alt Right. Already you’ve heard on social media of attacks on women and minorities by emboldened Trumpists, of swastikas drawn in school bathrooms, of queer folks beaten. There is no need to wait for his damaging legislation to oppose him. Trump does not have good intentions, and I wish him the worst.
    • Even if he doesn’t want to repeal Obamacare anymore, he will almost certainly ruin it. Anything he touches will turn to shit. Because he is a Shit Midas.
  • Fantasize about how Bernie Sanders would have beat Trump.
  • Blame Trump on Clinton.
    • Trump is  the fault of Donald Trump, the GOP, Russia, the FBI, and, by and large, white people.
  • Fawn over the working class whites who elected Trump, and discuss how the Democrats need to win their racist hearts and minds back over. They are not the future of our democracy.
  • Complain about protesters ruining my commute.
  • Cling to the safety blanket of my privilege. As a wealthy (for my age) white man with a foreign passport living in Portland, I among the safest in Trump’s America. I could put on blinders and hide from this terror, but I will not do that. I will stay informed, stay awake (woke, right?), and stay active in the fight against him for the next four years.

Once again, please share. Stay safe. Love is real.

Vincent, 11/12/2016

Leave a comment

Filed under Uncategorized

No Man’s Sky birthday problem

Demo here. Code here.

My birthday is coming up in a couple days, so what better way to celebrate than by implementing a birthday problem calculator in JavaScript?

Don’t answer. I know the answer.

I actually started down this path after reading about how a pair of No Man’s Sky players have already found each other in-game, which was supposed to be nearly impossible. In fact, it’s happened a bunch. I suspect that the developers have underestimated a version of birthday problem. That’s the thing you might have heard about in elementary school, where a surprisingly small group of people will likely have a pair of individuals with the same birthday.

I’m not the only one to come to have this idea, as this comment by reddit user madbadanddangerous shows.

I’ve heard that there are about a billion planets a player can start out on (out of some quintillions of total planets). And the game has sold at least a couple hundred thousand copies, so let’s assume 150,000 players.

Aaaaand my calculator cannot handle those numbers. It just freezes, and I think it might be one of those heat death of the universe length calculations.

UPDATE: I added and approximating calculator. It’ll work for huge numbers.

Aside: factorials shouldn’t be terribly complex calculations, so I think the computer just gets bogged down with trying to handle massive numbers. If you have a fix to this problem, please submit a PR!

Check out this less accurate but actually functional calculator to get a sense of the probability. Going with 1,000,000,000 planets and 150,000 players yields a ~99.998% chance that at least 2 people will start on the same planet. Seems a little high, but that’s the math!

Technical Summary

This was a small project, so there’s not much of a postmortem! It took me maybe 3 or 4 hours to write, which is 2 hours more than I expected. Which sounds about right.

I find the probability with  1 - (d!/((d-n)!) * d^n) , where d is number of days, and n is number of people, from this Wolfram Mathworld article. Wikipedia indicates that there are some ways of approximating the value faster. I might try that.

Much of the time was spent setting up Math.js after realizing that even the standard case with 365 days overflows JS’s integer type. I am surprised to find that Math.js’s factorial function doesn’t cache its calculations, which means repeated calculations aren’t efficient.

Still, factorials shouldn’t have O(n!) time complexity or anything. I think the sluggishness comes from managing the huge numbers involved. A billion factorial is flipping huge.

Another chunk of the time was spent googling how to interact with the DOM without JQuery. Turns out it’s possible, who woulda thought?

Anyways, there you go. The Birthday Problem. No Man’s Sky. Hash collisions.

1 Comment

Filed under code, Uncategorized