Accessible modals

I’ve been working on an application (redesign) recently that uses a significant number of modals to display and manage data. If you’re custom rolling your modals (i.e., not using a framework) you’ll want to make sure you consider accessibility and keyboard functionality as you’re building them.

The problem: z-index

Modals are HTML elements that appear on top of the content, often accompanied by a cover or shade that darkens the screen bringing visual focus to the modal that’s been placed on top. To fire a modal, users might click a link or press a button. However, if focus isn’t sent to the modal, users who rely on keyboards to navigate will never be able to interact with the content in it.

The solution: tabindex

To bring focus to your modal, you’ll want to send focus to it after the click event is fired. This is done using a combination of JavaScript and CSS. But first, the HTML.

HTML

<button id="foo" class="modal" ... >Launch modal</button>
<div id="bar" class="modal-container"> ... </div>

CSS

Obviously, to get a modal on top of the content, you need to give it a higher z-index. Generally, you give the modal window a z-index that’s higher than that of the other stuff.

.modal { z-index: 100; }

You’ll also probably use absolute positioning.

.modal { position: absolute; z-index: 100; }

If you know all of this, then you also probably know how to center it, etc., so I won’t go into detail about that. In your HTML though, or wherever you’ve got the markup for the modal, you’ll want to add a tabindex to the modal element.

<div class="modal" tabindex="-1" aria-hidden="true">

We use a tabindex of -1 instead of 0 (zero) so it’s not in the normal tab order, but can receive focus. If we used zero (0) then tabbing around the interface would eventually land us on the modal, which wouldn’t be ideal as the content within it might not be meaningful as it might be out of context. A tabindex of -1 however allows focus to be sent to the element by way of JavaScript. Additionally, we use aria-hidden=”true” to hide it from screen readers until it’s needed.

JavaScript

The second part of making an accessible modal is to use JavaScript to send focus to the  new modal when the link or button is clicked. For that you’ll need a listener. You’ve probably got a class for links or buttons that fire modals, so just use that. Be sure to change the ‘aria-hidden’ property to false when showing the modal and set it back to true when you hide it again.

<button id="foo" class="modal" data-target="bar" ... >Launch modal</button>
$('.modal').click(function() {
    // Capture the triggering element so we can return to it when the modal is closed
    var original_element = $(this).attr('id');
    var modal_to_fire = $(this).data('target');
    // ...
    // Fire your modal
    // ...
    // Now we send focus to the modal so it all makes sense!
    $('#' + modal_to_fire).prop('aria-hidden', 'false').focus();
});

When we’re done with the modal, either via Close, Save, or Cancel, we want to send focus back to the originating element.

$('.modal').on('click', '.close-modal', function() {
    $('#bar').prop('aria-hidden', 'true').hide();
    $('#foo').focus();
});

Doing this will provide users with a smooth, accessible, and usable experience.

One note: if you’re using ‘display: none’ then using ‘aria-hidden’ isn’t really necessary as it won’t show up to screen readers anyway.

Over-the-air (OTA) updates with a rooted phone (i535 SGS3, D2VZW)

I awoke this morning to a notice on my phone about a new system software update available from Samsung and Verizon. I had two choices: Update now or Update later. Why not? Update now! Five seconds later the phone reboots and I’m staring at an error screen saying unauthorized software was found on my device and that I had to go to the nearest Verizon Wireless store to fix it. What’s worse is that whatever the update did, hijacked my rooted bootloader and so the phone wouldn’t even boot. Going through the usual motions to boot into CWM Recovery also failed. Oh noes.

Until I could get to work, plug it into a computer and do some diagnostics, my phone was essentially bricked. (To be honest, being forced off of my device felt pretty good, so much in fact that I spent about ten seconds considering whether I should get an old school flip phone instead.)

I got to work, did some research, plugged in my phone, loaded Odin and the Android SDK and started to see what I could do. Meanwhile, I started to download the very same update from Sam Mobile. Unfortunately the Sam Mobile site for free users feels like it’s slower than dialup. In fact, the download has been running for the past 2.5 hours and it’s still going. But, this is the only source I’ll trust for the official updates so…

I decided to just pull out the battery and see if that would clear the memory. Hours since my phone became bricked and a little stress and all I had to do was remove the battery, put it back in, and reboot the phone. That was it. Of course it was. Gah.

The phone booted right back up and once it was back into the OS I got an alert saying the update was unsuccessful. Wah wah. But, I’m back up and running. The phone still has everything, all of my customizations, and it’s still rooted.

I did some research to see what the update entailed (because Verizon doesn’t just push out measly updates – they’re usually big, important updates). Turns out to be mainly stuff addressing roaming issues for Canadian users. Again, wah wah.

If you have a rooted device on Verizon and you attempt an OTA update…

Make sure you unroot first, update, and then re-root the device.

If you perform an OTA update without unrooting…

Just pull out the battery, wait a few seconds, pop it back in, and reboot. You should be good to go.

Presentation: The Sociology of Accessible Technology

I recently presented on the Sociology of Accessible Technology to my sociology class and have placed the slides (Google Slides) here for public viewing.

The slides give a broad overview about accessibility around the US and the world, touches on some of the more common disabilities and impairments, briefly touches on some of the issues with current assistive technology, and offers a look into the future at where we might be headed. Enjoy!

View my presentation on Google Slides

Mouse scroll direction changes entire experience

I’ve got an Apple Magic Mouse (the one with the touchpad built in, button-less) and I recently decided to change the scroll direction to “Natural”, which mimics the way we interact with mobile and table devices. Unlike a scrollwheel mouse where scrolling down scrolls the page down, we now interact with the content – which scrolls up.

To clarify, touching the top of the mouse and dragging down would drag the content down and effectively scroll the page up, whereas previously it would interact with the scrollbar position, move it down, and scroll the page down (and the content up).

I was only able to handle this “natural scrolling” for a few days before going back to my (apparently) unnatural scrolling direction. The “old way” feels more comfortable to me, and feels more consistent. At least on Mac OS X, scroll direction is carried into games, so scrolling in games felt incredibly unintuitive and downright frustrating. I had to switch mindsets when going from normal work to a game because interacting within a game is different than interacting with content.

It’s very presumptuous to label people’s preferences as natural or unnatural. (Because if you’re not natural, you are unnatural, amirite.) What about gamers who rely on a mouse with a scrollwheel?

Using a finger or a touchpad is different than using a mouse. If you’re touching I feel that a “natural” scroll direction is best, because it’s intuitive and makes sense, and it matches our we use our phones and tablets. However, when using a mouse, the “unnatural” scroll direction is best. Unless of course, you’re in your teens and you’ve never known the “Old Ways”.

Site registration: Is it necessary?

User registration is everywhere, required, even for the smallest of tasks. Why?

I see only two uses for website registration:

  1. For online shopping accounts, shopping carts, and sensitive personal or financial information
  2. For web applications such as personal dashboards, user-specific settings that need to be remembered and can’t be remembered with simple cookies

Outside of these two uses, there’s really no need for websites to require registration.

It’s sneaky and it feels dirty and suspicious. It’s common knowledge that the more information companies have about you, the more their company is worth. That’s why Facebook, Twitter and other social networks are worth so much – they obtain and collect insane amounts of personal information about their users which is a treasure trove for marketers and advertisers.

Something as simple as an email address is worth a lot. There are companies out there that make their money on collecting, buying, and selling huge lists of email addresses (as well as physical addresses) to marketing agencies who then use those purchased lists (which contain our email addresses) to send advertisements and other junk that we don’t generally care to see.

For businesses who don’t care to purchase lists, they can easily sell theirs for money. Have you ever wondered how when you subscribed to a specific outdoors catalog, you suddenly started receiving magazines for Eddie Bauer and L L Bean? It’s quite likely that Company A sold your information to other companies and now you’re receiving – possibly unwanted – marketing materials. Most of the time when I get some marketing information it goes directly into the recycling bin. If I didn’t request it then I’m obviously not interested. To me, it’s a form of harassment. Not to mention it’s just wasteful.

To give an example, WinMagic (makers of SecureDoc) required me to create an account just to browse their knowledgebase. Why do I need an account to browse help documents? I’ve got no intention of contributing. I’m simply looking for something. Since I was required to register I’ve got to be on the lookout for unwanted spam from WinMagic, or worse, one of their advertising partners. Furthermore, my use of their knowledgebase will likely be a one-time thing. I’ll find what I’m looking for and probably never touch the site again, but since I’m required to create an account, now I’m that much more susceptible to find junk mail in my email inbox.

Does everything have to become monetized?

Focus styles and marketing?

If you were to search this site you’d probably find a handful of posts discussing the importance of focus styles on links, buttons and anything else accessible via the Tab key. I’ve said this before and I’ll say it again: focus styles are important. Do not remove them!

I recently came across a pretty high profile site (I won’t name names at this point) which was beautifully done visually, but had its focus styles removed. When I come to a site, I browse differently based on my goals. If I’m exploring (without a real goal in mind) I’ll use the Tab key to piddle around here and there. On the other hand, if I’ve got a goal to accomplish then I’ll use my mouse because it’s faster and more “to the point” (no pun intended). So I was using the Tab key to move around and realized I had no idea which link was currently focused. Needless to say I got frustrated, left, and sent and “FYI” email to the webmaster.

“…if I were in the market for their services and one who used a keyboard to navigate (or one who depended on a keyboard to navigate), you’d have just lost a potential customer.”

This lack of focus styling – aside from the fact that it blatantly hurts the accessibility of the site – got me to thinking about marketing. For many people, finding out which services one needs is a matter of exploring the sites of companies. Some people, probably most people, do this with a mouse. However I’ll wager there are some, like myself, who use the keyboard. Going back to the site I visited, if I were in the market for their services and one who used a keyboard to navigate (or one who depended on a keyboard to navigate), you’d have just lost a potential customer.

As a designer I understand the importance of a good looking interface. A pixel off here or there can really take away a little piece of the overall experience. And I get how that little blue glow around links and buttons might not be the “coolest” looking thing. And I get why so many designers turn them off. But they are there for a reason and people need them. And, designers have the option to style them differently. There’s no need to disable them entirely.

Best practices for focus links

  • It’s best to leave the default browser behavior. Those who rely on it are used to seeing it behave and look a certain way. You’ll trip them up if you change it u.
  • If you must change the styles, create a style that’s easily and immediately seen. The whole point is for keyboard users to know which link or button has focus.
  • It’s okay to use the same styles you’re using for :hover so long as it’s easily and immediately seen.
  • If you’re a designer, make sure you’re objective and not subjective.
  • Try testing your interface with a few different people and have them use the Tab key to navigate.

Making icon fonts accessible

In a recent battle with icon fonts, I was struggling on making them hidden from screen readers and I could not figure out why. I spent weeks researching information, talking to people on Twitter, and trying different techniques, and it wasn’t until recently that I found the solution. And what’s funny, is that it was right in my face the whole time – I just missed it.

My problem with icon fonts and techniques tested

In my implementation I had an icon, followed by a label. For example, an icon of a wrench followed by the word “Settings”. The original fonts we used words to describe the icons, so, the word ‘wrench’ would be converted to the icon of a wrench and so on and so forth.

This technique is great if you are only using an icon (no word following it) because sighted users see the icon, but users who are blind or who rely on screen readers will hear ‘settings’ and understand the link.

However, since I had an icon followed by the word which described it, screen readers announced the word twice: “settings settings, link”. Okay, but not ideal.

I found another icon font service that used letters instead of words. Since every icon would have a word following it, we didn’t need to use words for the icons. So, the wrench became the letter ‘a’.

This really didn’t change how the icons worked, but now I was left with screen readers reading “asettings, link”. Not only was this audibly confusing, but it meant pressing ‘s’ to skip to “esses” in the link list dialog box wouldn’t work. There was now no way to skip to ‘settings’ – you’d have to press ‘a’ first. Unacceptable and unintuitive.

So then I tried adding aria-hidden="true" to the icon, which was a span, and that worked when reading the page normally, but not when reading links out of context in the link list dialog box.

The solution

On the icon font generator, you have the option to use normal encoding for the letters or Private Use Areas (PUA). Normal encoding generates HTML entities using the normal range of available characters in the Unicode Consortium. However, PUA uses an extended range of undefined characters specifically for this use, so as not to conflict with the Unicode Consortium.

When I was creating my icon font and assigning letters, I should have been using characters from the PUA. So for example, while an ‘a’ in the Unicode Consortium is represented by U+0041, the PUA ‘a’ is represented by anything from U+E000 to U+F8FF. What this does is create a ‘new’ character unrecognizable by any language. What this means is that screen readers don’t read it because they don’t understand it.

Icon font best practices

  • Always use Private Use Area characters for your icon fonts if you’re wanting the icon to not read because it’s a duplicate. If you do want the icon equivalent read – say, if the icon doesn’t have a label before or after it – then use a word that can be read.
  • Remember what icons are for and use them appropriately.
  • If using image-based icons, use appropriate alt text if the image is necessary for the action.

Xbox One or Playstation 4

The Halo series is one of my all-time favorite series, not just for a game, but for an episodic journey. It’s the reason I’ve stuck with Xbox for so long, despite a few “red circle of death” crashes and the Xbox Live monthly fee. However, after seeing the final specs for both the new Xbox One and the Playstation 4, I think the Playstation wins. However Playstation won’t have the new Halo, so despite all of its wins, that is a huge loss in my book.

And then there’s the controller…

Xbox wins and fails

Xbox One wins

  • Halo 5
  • Familiar controller
  • Maintain current Xbox Live membership
  • Lots of connectivity options, including HDMI in’s
  • Skype
  • Kinect ships with it

Xbox One fails

  • Internet is required to do anything
  • It’s always on, which is kind of freaky
  • Cloud-based everything
  • No backwards compatibility with my Xbox 360 games
  • Seriously annoying DRM and a game sharing fee
  • $499

Playstation wins and fails

Playstation 4 wins

  • Faster hardware
  • Cheaper online subscriptions ($4.99 compared to Xbox Live $9.99)
  • No DRM!
  • Doesn’t require a constant internet connection
  • $399

Playstation 4 fails

  • No Halo (yes, this is a big deal for me)
  • Unfamiliar controller
  • Gamer reputation and achievements back to square one

I’m leaning towards a Playstation, but I’m not kidding when I say that Halo is a huge draw for me. The game is absolutely fantastic. Seriously.

Your thoughts

If you’re thinking of picking up a new console, which are you considering and why?

Displaying multiple items, such as a list of amenities

I’m working on some wireframes at work, which include a list of “amenities” for classrooms. And I realized that I’ve never designed anything with this many amenities before. For smaller lists I’ve used bulleted lists broken up by headings. But this is different and after mocking it up as such, it just doesn’t work. This led me to give some thought to a new layout. Writing this blog post is you witnessing me sorting out those thoughts. What a privilege ;)

When teachers want to “book” a classroom, our current method of searching is very outdated. My team and I have been tasked with creating a new app complete with a new interface and experience. But first, I wanted to really wrap my head around what the goal of this app was, and simplify it down to that basic need.

The psychology of search results

The goal of using this application is to find a classroom that meets all of one’s technological requirements, from DVD and Blu-ray to presentation recording and Smart Boards, even to 16mm projectors (yes, we still have those).

I started by thinking about search experiences I’ve had, specifically with hotels or other things that offer certain amenities. What do I want the experience to be like? What do I expect to see on the search results screen? On one hand there’s your basic web search engine, which searches the web for the most relevant sites that match the keywords you’ve entered. The results are familiar, showing the title of the website/webpage, a description, and maybe when it was last updated. We know that the results higher in the list are the ones suggested to be most relevant.

But a web search engine isn’t what I’m going for.

After choosing a building or two, a time slot (or dates and times if it’s a multi-day requirement), and my technological requirements, I’m brought to the results list. This list only shows the building name, room number, and the address (which is clearly visually secondary to the name and room). Hovering over each result item causes a button to appear (it’s hidden to reduce repetitive clutter) which takes you to the view details screen.

On that view details screen is where my struggles are. Do we show all of the options and use icons (checks or exes, probably) to show which things are available and which are not? Or do we only show those options that are available?

Option one: showing only available options

Showing only the available options was my first gut instinct. It reduces the number of “things” on the screen and reduces confusion by not having items that aren’t available. It only shows you what the classroom does have. You’ve searched for your building and the tech you need, now you can see everything available, get-in, get-out, happy day.

However, if you happened to forget some piece of tech that you need, only showing what this room has, is much less likely to give you any sort of reminder.

Showing only available options A mockup showing only available options

Option two: showing both available and unavailable options

On the other hand, showing a well-designed table with everything, and then using green checkmark icons and red ‘x’ icons (or only the green checkmark icons?) to those pieces of tech the classroom does and does not have, could be helpful. It adds more information to the screen, but if it’s designed well could help you remember that one thing you forgot? Maybe you also need an HDMI connection, or maybe you need a computer in the classroom?

Available and unavailable options Mockup showing both available and unavailable options. This could help remind of something you might’ve forgotten that you need.

Which is the better method?

Have you worked with this type of layout before? If so, which path did you choose and why?