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?

A caution to cyclists and drivers

This morning, as I was coming to a stop light at the intersection of Commonwealth Avenue and St Paul in Boston – in the bike lane, I’ll add – a woman, probably in her mid-30s, tapping away on her cell phone, suddenly edged into the bike lane and came about 3 inches from hitting me. I was close enough I touched her car to keep space between myself and her.

We both came to a stop, looking at each other. My look to her was “what the hell are you doing?” and her look to me was “what the hell are you doing?” What I was doing, was properly riding my bike in the bike lane, coming to a stop at the stop light. What she was doing was not paying attention. I find it funny that she had the audacity to give me that “well hurry up” motion with her hand too, being that she nearly hit me.

I eventually made my way to the stop light, turned around and looked at her. I put two fingers up to my eyes towards her and motioned “just pay attention” with my mouth. Hopefully she’ll be more careful next time.

A message to cyclists

This year alone, Boston University has had five – yes five – student cyclists die from being hit by vehicles while cycling. That is much higher than normal years, but honestly, one death is too many.

The law states that cyclists are to be considered vehicles and are to obey traffic lights, signs, and any other rules larger vehicles are to follow. I’ve seen cyclists run red lights, swerve in and out of traffic, and not stop at crosswalks. Then we hear news of a cyclist getting plowed and killed by a car, and all the cyclists get in a rage shaking fists and gnashing teeth at the drivers.

By thinking you’re above everyone else, or that you don’t have to obey the same rules as a vehicle, you’re just making drivers angry. Angry drivers are far less likely to give you the respect and consideration, which only increases your chances of having some sort of accident. Just be respectful and treat people as equals.

A few simple things for cyclists:

  • You are not above the law. You need to obey traffic signs and lights like drivers. Stop at red lights and stop signs. Your life, literally, is on the line.
  • Don’t assume drivers are paying attention. In fact, if you’re in Boston it’s safe to assume they’re not paying attention. Bike appropriately.
  • Yes, you’ve got your own bike lane, but consider yourself a vehicle on the road and act accordingly.
  • Be respectful and courteous to other drivers and cyclists. Respect goes a long way for safety.

And a message to drivers

I’ll repeat what I told the cyclists: five students died this year because they were hit by cars. Maybe it was their fault for running red lights or not paying attention, or maybe it wasn’t. It doesn’t matter. What does matter is that people get to where they’re going safely and efficiently.

I’ve stopped counting the number of drivers I see texting while driving. I see it all the time when I’m riding parallel to a car on a road. When you’re not paying attention to the road bad things can happen. Accidents happen. People die. Insurance premiums go up. You get fined. Or worse.

A few things for drivers:

  • Don’t text and drive. Pay attention to what’s going on in front of you, to the sides of you, and behind you. You know, like you were taught in driving school.
  • The bike lanes are for bikes. They’re there for the safety of the cyclists. They’re not the same width as car lanes because they’re not meant for cars. Stay out of the bike lanes.
  • If you’re parallel parking, check bike lanes before opening doors. It’s your insurance that goes up if you hit a cyclist, on top of a $100 fine.
  • Check bike lanes before making right turns, and don’t use the bike lane as your right turn lane. That will also land you a nice $100 fine.
  • Stop at stop signs and red lights. When your light is red, someone else’s is green, not to mention there are probably pedestrians crossing in front of you. I know it sometimes sucks to wait at lights, but is killing someone or causing an accident worth running that light?
  • Be respectful and courteous to other drivers and cyclists. Respect goes a long way for safety.

People – both cyclists and drivers – seem to be in their own little world. Everybody assumes everyone else are the ones paying attention and looking out. Just pay attention. Be aware. Check your mirrors (that’s why you have three of them, drivers). Check your surroundings. Be respectful.

I don’t even know why I – or any other blogger – should feel the need to write about this since it’s common sense and decency. If you can’t drive (or bike) properly, you shouldn’t be driving or biking at all. Just sayin’.

 

Global Accessibility Awareness Day is 9 May 2013

This time last year I was settling into a new job here at Boston University as a UI designer. I attended the Global Accessibility Awareness Day (GAAD) presentation by a friend at the Carroll Center for the Blind out in Newton and enjoyed it. I found it encouraging, inspiring, and it helped me really solidify my decision to pursue and engage in careers where I could focus on accessible interfaces. If you’re unfamiliar with GAAD and what it’s all about, read Joe Devon’s post that started it all.

The past year has offered me so many opportunities to learn about, practice, and teach accessibility. I’ve participated in and led accessibility tests and usability tests, conversed with some very knowledgable folks on Twitter and in webinars, and – I feel – overall grown significantly in the area of accessibility and accessible design and development practices. The more I learn, the more I enjoy it and the more I respect it.

In addition to building front-end interfaces for Boston University apps, one of my goals is to establish a formal accessibility procedure, including planning, testing, and production, that we can use in every interface going forward. My hope is that this plan will be used not only in my department, which focuses on more internal apps, but also for our Interactive Design department who focus more on the public/external interfaces.

This Global Accessibility Awareness Day I figured I’d share with you a number of things I’ve learned over the past year. Some, if not most of these you’ll probably find by browsing this blog, but if this if your first time here, this could be a good summary.

Some things I’ve learned about accessibility in 2012

  • Throw assumptions out of the window
    Test your interfaces, preferably with real users. There are plenty of people out there who are willing to help, you just gotta ask!
  • Start with semantic, meaningful markup
    Good code that’s semantic and meaningful will cover the vast majority of your assistive technologies right out of the gate.
  • Be simple, not complex
    Don’t overcomplicate your design. Attractive, exciting, fresh interfaces are great, but not at the expense of usability or accessibility.
  • Don’t use ARIA unless you need to
    ARIA (Accessible Rich Internet Applications) adds tremendous value to application interfaces, but isn’t always necessary for basic websites. In fact, it can complicate things. Only use it when it’s necessary and use it responsibly.
  • Be conscious of “invisible disabilities”
    Fatigue, debilitating pain, dizziness, weakness, cognitive functions, learning differences and mental disorders are only a few. Accessibility goes beyond blindness, deafness, wheelchairs, and canes. Read more about invisible disabilities.

Goals for 2013

Boston University is a leader in many things, including our forward-thinking, innovative sites. My goal is to help – with a solid, educated, smart team of folks and community help – establish Boston University as a leader in sweet looking, usable, and accessible interfaces and technology.

This year, I hope, will be full of webinars, discussions, learning, practicing, and reading.

With that being said, I’d love to hear suggestions for books, websites, tools, or resources you find useful for accessibility in general, and advice from other educators on establishing a formal plan for accessibility. Please leave thoughts and suggestions in the comments below, and thank you.

Notes on role=application and alerts for assistive technology

To get some background information on this topic, please read my previous post.

The problem

In my earlier post I was having an issue with an alert message not being announced by the screen readers during accessibility testing. I was perplexed and was trying a bunch of different methods hoping that it would be announced. Nothing worked and I got frustrated. What I did manage to do however, was overcomplicated the code which probably compounded the issue.

The scenario

I’ve got a web page with an alert that is present upon page load. It’s not positioned directly at the top (i.e., it’s not first in the DOM), but just under the header. The space at the very top is used for University-wide announcements, whereas this alert would only be “tech related”. Either way, the code for the alert is near the top.

The alert is not dynamically loaded either, it’s just there when the page loads. There is an option to close/hide the alert, but otherwise it’s there when you arrive, in the markup.

The lesson

To start, I should take a lesson from my own playbook in a previous post titled Over-engineering your website. What should’ve been simple turned into a mess of confusion for both me and the assistive technology. I spoke to a friend of mine who brought me back down to earth and helped clear up the whole debacle. He reminded me that role="application" should not be used lightly. Furthermore, if the alert markup is present on page load, it will be read by the screen reader. There really isn’t anything special I need to do to the markup aside from make the heading clear.

To summarize, I was adding in a bunch of HTML5 markup to something that didn’t need it and wondering why the screen readers weren’t doing what I was expecting. Had I taken a step back and realized that the alert is just basic markup, I could have avoided hours of stress.

So, role="alert" wasn’t needed. That’s useful if an alert is loaded in dynamically, or it appears briefly before disappearing. My markup is there at the start so it doesn’t need anything special.

Lesson learned!

Usable Interactions is a blog featuring commentary and explorations on user experiences, usability and accessibility.