Archive for the ‘Accessibility’ Category

Microsoft Surface Pro: Tablet Mode

Wednesday, April 24th, 2013

I’ve reviewed Microsoft’s Surface Pro and how I feel about Windows 8, the Surface Pro hardware, and the type cover. I bought it for laptop use, and so I never much used it as a tablet. It’s been a couple months, and so I’ve gotten enough experience to discuss how I use it without the keyboard.

Windows 8 and the RT environment is designed around touch, so everything in that part of Windows 8 works without a hitch when it comes to tablet use. This is a full Windows device, though, and so I wanted to touch (ha!) on the things I do when I’m on the desktop.

I rarely have a problem with media. VLC uses a double-tap on the picture to go full-screen, and they’ve got a touchable volume dial and seeker.

I’m the type of person who’ll open a bunch of tabs in my browser and switch between them. Sometimes I need to close them, and sometimes I want to go back to a previous one, and sometimes I want to skip the current one to go to the next. On a keyboard, you can press Ctrl+Tab (or Shift+Ctrl+Tab for reverse) to cycle through open tabs, and Alt+Tab (or Shift+Alt+Tab for reverse) to cycle through open programs. Obviously, this is a bit difficult when there’s no keyboard, and so I rely on having my taskbar visible and having tabs easily clickable in my programs.

I often view my browser in full-screen mode, to get the most out of my screen area. As dense as this screen is, it’s still only 10.5 inches diagonally, so I usually increase the size of the text to fit the full size of the window. In a good browser, I’d be able to pinch and zoom, but in Chrome that doesn’t seem to be an option. I’m honestly thinking of changing, but until then I need to use the Ctrl key with either – or + to decrease or increase the size of my pages.
I also need the F11 key to pop out of full-screen mode, unless I want to fiddle with the edge of the screen to end it or swipe-tap-tap-tap-wait-tap-tap to call the keyboard and press F11. I’d like to be in full-screen mode to browse, but there’s no way to switch between tabs easily.

So now, the fixes!
I wrote earlier about using a program called SharpKeys to change some scan codes and remap my keyboard, but there were things I couldn’t do. I just installed AutoHotkey, which allows me to work with keyboard shortcuts of up to two keys or one key and any modifiers.
Also, as it turns out, I don’t really use SharpKeys anymore. Microsoft rolled out an update to fix all the function keys, and so now they work on their own.

I found out that the charms keys—search, share, devices, and settings—were Alt+Win+F21, Ctrl+Win+F21, Shift+Win+F21, and Win+F21, respectively. (Yeah, I know, F21?) I had remapped those keyboard combos to F5-F8, but I don’t need to anymore. Still, the more you know.

As I was trying to get F1-F4 back, which are media keys, I found something really interesting: the volume rocker on the tablet itself uses the same scancodes as the volume-up and volume-down buttons on my keyboard, and I could remap them. Then I had a flash of brilliance and realized I could map the Volume-up + Volume-down and Volume-down + Volume-up combos, as well as combinations of either volume button and the windows button, either direction. I essentially have eight possible combinations.

For the ease of use, I mapped Volume-up to Ctrl+Tab and Volume-down to Shift+Ctrl+Tab, so I can use that to quickly browse through tabs or open documents.
Pressing Volume-down and then Volume-up refreshes my current page, and Volume-up then Volume-down closes the tab I’m on.
The tablet’s Start button takes me in or out of full-screen mode.
Using the Start button with the volume rocker can be annoying, so I’ve mapped them to less-used functions; namely, zooming the page in or out.
I did some stuff with the volume buttons + Left-click, so I could hover over links or right-click easily (it’s really annoying to do on Chrome).

I can make several scripts to load for different purposes, so I could have one specifically for photo editing, or one for text-editing. I could probably even add some functions for certain games, so I can play them without the keyboard.

My code for Chrome is as follows:
SetTitleMatchMode 2
#InstallKeybdHook
#IfWinActive ahk_classChrome_WidgetWin_1
!SC12E:: SendEvent {VKAESC12E}
!SC130:: SendEvent {VKAFSC130}
SC130:: SendEvent ^{Tab}
SC12E:: SendEvent ^+{Tab}
SC130 & LButton:: MouseMove, 4, 4, 1, R
SC12E & LButton:: SendEvent {RButton}
SC130 & RButton:: SendEvent {MButton}
SC12E & RButton:: SendEvent ^{0}
SC130 & SC12E:: SendEvent ^{F4}
SC12E & SC130::SendEvent {F5}
LWin:: SendEvent {F11}
LWin & Space::SendEvent {LWin}
*F14:: SendEvent ^{=}
*F15:: SendEvent ^{-}
RButton & SC12E:: SendEvent !{Left}
RButton & SC130:: SendEvent !{Right}
RButton & LWin:: SendEvent {RButton}

Accessibility of Dingbat Webfonts

Tuesday, August 17th, 2010

Inspired by Jason Santa Maria’s Tweet:

I love the idea of dingbat webfonts, though I want someone to write an article on the accessibility of using them. http://j.mp/ccD34r

The idea is fairly simple: Draw up some beautiful flat-colour vector icons, wrap the whole set into a font, and then load it as a webfont to display the icons on your page. Simple and clean, right?

There are problems.

In effect, you will be littering your page with a list of ‘j’ and a ‘h m n p’ near the title, with some ‘s u f’ in some other places. What does it mean? It’s completely indecipherable unless you successfully load the font and have the required experience/cognizance to recognize the meaning of the shape. A lot of people just aren’t good with icons.

There are some standard solutions. Wrap everything up with plain-text mark-up, then add the symbol and negative-indent the semantic text away.
In browsers that don’t support web-fonts, and in screen-readers that read out text on the screen (which would be all of them), the code would still contain a bunch of odd letters or numbers everywhere.

Someone mentioned a page from Opentype in his post, where they make a characterset which has most of the letters blank, with the ‘W’ mapping to their logo.

So how’s this:
Make an icon set with most everything blank, and then put twenty-six icons in the capital spaces. Put the shopping cart in ‘C’, because ‘cart’ starts with ‘C’. In your shopping cart example, it could say “Purchase, go to shopping Cart” but the “, go to shopping art” would be blank, the “C” would be the shopping cart symbol, and you’d see “Purchase []” where [] is the symbol.

You’d be limited to twenty-six symbols, and each must be applied to the letter you’ll use to start its name (unless you don’t mind the text “caRt” or such).

Email Design

Friday, August 13th, 2010

Everyone knows how important email is. You probably check yours several times a day for new updates.

Let’s take a look at something I just got:

*Please do not reply to this message*
————————————————————
You asked that we send you a summary of Meetup message board
activity. The following is a list of discussions with new
messages posted since July 14, 2010 12:17 PM.
————————————————————

============================================================
SECRET HANDSHAKE – THE WINNIPEG CREATIVE SOCIETY
Forum: The Winnipeg Creative Freelance Society Discussion Forum
============================================================

90 second quickie at portage and main
http://www.meetup.com/secrethandshake/boards/view/viewthread?thread=9571812
Latest message by Paul Clerkin on August 13, 2010 at 11:01 AM


Add info@meetup.com to your address book to receive all Meetup
emails

To manage your email settings, go to:
http://www.meetup.com/account/comm/
Meetup, PO Box 4668 #37895 New York, New York 10163-4668

Meetup HQ in NYC is hiring!
http://www.meetup.com/jobs/

If you’re in Winnipeg, I encourage you to come to our monthly meetup. It’s a great little gathering of local creative/tech people.

Now, I signed up for email notifications because I’m just not going to check the site (which I never visit) every time I want to know if something new has been posted. In fact, the less I have to visit the site, the better.

When I sign up for email alerts on a forum or message board, I want to see something like this:

New discussion messages since July 14:

=================================
SECRET HANDSHAKE – THE WINNIPEG CREATIVE SOCIETY
Forum: The Winnipeg Creative Freelance Society Discussion Forum

90 second quickie at portage and main
Paul Clerkin on August 13, 2010 at 11:01 AM:
The Winnipeg Film Group is proud to announce an open call to our second annual 90 SECOND QUICKIE film contest. The 90 Second Quickie was created in 2009 by the Winnipeg Film Group to encourage the creation of new, micro films. Blown away by the shorts in our first year we are doing it again – this time bigger, brighter and bolder!

To visit the thread, visit http://www.meetup.com/secrethandshake/boards/view/viewthread?thread=9571812

To manage your email settings, go to:
http://www.meetup.com/account/comm/
Meetup, PO Box 4668 #37895 New York, New York 10163-4668

Even that could be shuffled around a bit, but there are some good practices:

  • Keep cruft to a minimum
  • Display the main information as soon as possible
  • Give links to things
  • Also provide fall-backs for plain-text email clients
  • Give them (at least some of) the content from the site, so they don’t have to click and load additional pages

Life Below 640px

Sunday, February 21st, 2010

You’ve probably seen a similarly-named post proclaiming some ill-thought-out idea about folds. This post isn’t about the fold.

It’s about the window width.

You see, there are a good number of people using windows that are below what we consider average (say, 1920×1200 or so). This isn’t even about the total screen size, but rather is about the size of the content area for any specific window.

It’s possible to full-screen browsers, these days, which will fill up the screen, but the basic idea behind Windows was that we have… well, windows. Multiple windows, so that we can work on a couple things at a time. Windows with scroll-bars and status-bars and title-bars and possibly chocolate bars (but I wouldn’t bet on that last one).

With wide screens, one can have a couple things open at once. I’ve found it handy to have twitter open to the side while I browse in the remaining screen space. On a 1024×600 netbook, that means I have something like 629×454 of webpage.

Life below 640px.

At this moment, I’ll take a moment to mention The Fold. Yes, people can scroll, with that helpful little wheel on their mouse. That one-directional wheel. The one that can’t scroll horizontally.

The fold does exist, but it isn’t where you expect: it’s to the right, where only a small scroll-bar hints at additional content.

Google mentioned something about this, a couple months ago. They were wondering why few people were downloading Google Earth, and discovered that the Download button lay to the right of The Fold.

There’s an easy fix for the fold. All you have to do is create a fluid grid, or else design your site with collapseable structures that reshape the page on smaller screens.
Perhaps also media queries that style the page differently when the page width is too small.
All in all: Just don’t do fixed-width, least of all for 960 pixels. Those designs take up almost my entire screen.

I guess this post was about the fold. But as I’ve pointed out, the whole fold thing is just a sub-problem of bad design for small screens.

I’ve done some experimentation with pixels and ems, and there’s a post I need to make about the best ways to position and size things. You shouldn’t use pixels all the time, but you also shouldn’t use ems all the time. More on that later.

One final thought: The W3Schools compile lists of screen sizes of visitors, which is actually nearly worthless. I’d prefer they gathered the height and width of browser windows’ active areas, so we can have definitive evidence of screen sizes used in the wild. I’m certain that very few 1920×1200 monitors are used full-screen.

Browser Size&The Fold

Thursday, December 17th, 2009

http://browsersize.googlelabs.com/

I don’t have to say much more. Look at that and make sure your elements are arranged by importance. It’s useless to have everything above the smallest fold, but weigh the pieces of your site against the percentage of users who’ll see it.

Also, they’ll scroll for something like content. It’s those first-impression things you have to put near the top.
What they won’t scroll for, really, is stuff to the right of their viewport. Be careful when things are beside the fold.

Laptop Portability

Wednesday, December 16th, 2009

While using a laptop, this past month, I’ve come to realize some basic things which ruin my mobile experience and degrade it to merely a portable experience.

I’m really tired of ordered lists, so I’ll just put this in paragraph form:

The battery life on laptops is atrocious. Batteries have been improving steadily for the past ten or twenty years, but computers have been growing in power to match. Actually, the newer CPUs (especially Core 2) should only be using half to a quarter of what the old Pentium IV chips used. We’re talking savings of 150 Watt-hours.

A battery that lasts three hours (and, to be frank, that’s only if I’m conserving battery by keeping the screen dim; otherwise it’s two hours) is meant to be used only for emergencies. Essentially, the laptop is made to be plugged in. You unplug it, take it elsewhere, and plug it back in. You can use it while you’re travelling from one plug to the other, but that’s almost just an aside.

Now, the way they’re doing it isn’t all that bad. Not really. There are a few ways, however, that we can make it better. (And here I’ll use an ordered list.)

  1. End-user optimization – Installing a solid-state drive will reduce electricity usage, and you’ll get work done faster—which means you’ll use less battery waiting on things. You could also not use the CD drive (if what you’re using comes with one), and keep USB peripherals to a minimum. These things aren’t large power drains, though, and can only extend your battery life a bit. The more important things are accessible interfaces:
  2. The plugs – When you plug your laptop in, the prongs of the plug slide into narrow spaces inside the outlet. There they’ll be stuck until King Arthur comes along to help. What would help the ordinary person more is if manufacturers made a sort of finger grip that people can use to pull the plug out without yanking on the cord and fatiguing the wires. It might sound like a small thing to you, but think of it this way: If you have a box of cookies beside you, you’ll eat a bunch. If they’re in a jar plastered to a table in the next room, you might swing by a couple times for a couple handfuls, but then you’ll become too lazy. My point is this: It’s kind of hard to just pick up a laptop and go.
  3. The power adapters – I understand a laptop is a delicate piece of machinery, and that there must be all sorts of regulating electronics in that tremendous block of black whatsit, but does it have to be so unwieldy? All those gangly wires that you can only scoop up into a tangled mess? Nothing fancy has to happen with the cord. Having a spring-loaded spool to store any unused cable would be pretty beneficial, because I could just unplug, hold a button to slurp up the cords, and put the adapter back into whatever I use to carry my accessories. Maybe laptops can have a short cord that clips snugly to the back, so I can just plug it in whenever I sit down, without lugging anything else around?
  4. Weight – The industry has made great improvements in this area. Congratulations! I’ll also note that a hard-disk drive is a lot heavier than a solid-state drive, so that’s another reason to get an SSD.
  5. Devices – Things like mice and keyboards add a lot of bulk. The better idea is to have a well-designed keyboard and good trackpad. Both are limited, but there’s room for improvement. (I’ll talk about keyboards next). I think a good idea would be to make a usb port that swings flush along the side of the laptop, so you can plug in a flash drive and have it flat where it won’t stick out. SD cards can also be nice, and you can get those bluetooth mice with the usb button that only barely sticks out of the port. Because trackpads are so much worse than a mouse.
  6. Keyboards – The keyboards on all laptops today have settled into a crappy standard where the delete key is crammed into the top-right corner, and all those other keys are kind of mushed around the right side of the keyboard, wherever manufacturers can fit them. Then you’ll have a good inch of blank space around the entire keyboard, as if to say, “See? We weren’t cramming, because we fit it all with room to spare!” If they actually did have room to spare, they’ll cram the keys in as tight as they’ll go and then add a keypad. Most laptop users are used to not using the keypad, because there is none. If they wanted one, they would add a USB extension. Get a proper keyboard in, and the numpad out.
  7. Hinge – Way too many laptops have a solid hinge that you have to pry apart with both arms. That means it’s impossible to open if you’re carrying something, eating a sandwich, laying on one arm, holding peripherals, holding the laptop, or are otherwise not in a position to apply gravity-defying force. I’m waiting for the day the screen itself snaps in half when I put the laptop’s full weight on it. Rule of thumb: The screen of a laptop should open with less force than is required to overcome the weight of the laptop. In other words, I should be able to open it without wedging a finger under the lid and yanking upward on the screen several times, sending my laptop desperately prancing atop my desk. While running.
  8. External infrastructure – This has nothing to do with a laptop; but it’s still important, because your laptop experience will be ruined without the proper setup. Your wireless should work. Laptops today let you push your wireless switch to automatically connect to your wireless and get an internet connection. Without wireless, you have no internet, and that’s half the experience (it’s probably what you’re doing right this moment). If you have another computer with a larger drive which hosts all your files (and movies and such), then you’ll want some sort of network set up, and you’ll want the proper sharing permissions. This way, you can move seamlessly from computer to computer.

In the end, you’d be left with a laptop that you can easily pick up, use on the go, and plug in to any nearby socket. It doesn’t require you to lug around anything else (besides the power cord, and maybe an internet cable), but you can if you want. You can easily move from one machine to the other without losing your productivity.
Sounds great!

Designing with JavaScript

Tuesday, December 15th, 2009

If you’re building your site with JavaScript, don’t just throw it all in there. If someone with JS disabled visits your site, they’ll be greeted by a bunch of things that don’t work.
“But only a few people have scripting disabled!” you’d shout.
Remember this: JavaScript has the ability to remodel the page completely. You can change anything.

How to go about some Business

Build the page as if you didn’t have JavaScript. Remove the cleverly-scripted slideshows, the dead links that use AJAX calls, and any other little piece of the site that relies on scripting to achieve a satisfactory effect.
For forms and links, try using PHP and putting in links to proper pages. Maybe try an image with a hyperlink to your slides. make the site work as well as possible without any scripting at all.

The Magic

Now here’s where the magic comes in. In your script, use DOM scripting to add those AJAX calls, strip off anything superfluous, cancel default PHP-based events, and create those dynamic controls. You can change styles, add new elements, and alter the data.
Now, when someone visits the site and the script isn’t working, they’ll have the ability to use the site. The rest will still get the same scripted experience they would otherwise have enjoyed.

Accessible Descriptions

Tuesday, August 11th, 2009

Alt text

What do you usually put in the alt text of your img elements? Maybe you don’t include the attribute, or maybe you leave it empty. Otherwise, you’ll probably put a half-hearted alt=”image” or alt=”logo” or alt=”me” and leave it at that.

And it’s what we’re all taught to do, frankly; but we’re slightly misled, when we’re told that the alt attribute “describes whatever it is.” Alt is so much more than that.

The Essence of the Media

Alt is the image. Any time you add some form of media to your page, whether aural or visual, you need to store it as text, which is accessibly by basically anyone. Text can be translated, turned into Braille, spoken, or rendered onto the screen. It can be searched, selected, saved, stored, or sent.

Define a Context

When you look at the link to your file, try to imagine what it would be like to be denied it. Forget the title, for a moment, or what it’s there for, or the basic thing inside it: For a moment, imagine you’re on your page, you know there’s an image there, but you have no clue why. What’s the context? You might mention it in the text around the image. What else is needed? Describe anything that would help the context, as well as anything someone might notice.

Filenames

It isn’t all alt. An image viewed on a webpage will have text around it for context, but if you save the image to disk you won’t have that luxury. Give all your images a filename that best describes it out of context. Instead of ‘team.jpg’ try ‘webdev_team_09.jpg’. It’s a bit longer, but much more descriptive. Filenames take some practice, because you need to keep the filenames to a minimum while also including all the information you can.

Title text

As well, there are the page titles. Most users, when they save a link, don’t bother changing the name. I found an external SSD I wanted, and saved the detail page to my flash-drive to carry with me. To this day, the file is called ‘Welcome to Transcend Online Store.htm’. I know what it is, but it would be confusing if someone else saw the file, or if I had multiple items.
If the page deals with a specific product, try to add the product name to the page title. Each and every page should have a different title. You can keep the company name in there, but also add the page context to the beginning.
The company name is ever-present, and isn’t really important; and the browsers tend to cut off the latter parts of a title if they’re too long. In this light, always put the most important parts of the title first. Because tabs shrink when too many are open, it’s wise to keep the first few characters the most descriptive.
‘Welcome to Transcend Online Store.htm’ could have been ‘SSD eSATA/USB – Transcend Online Store.htm’, which would have made much more sense.

Meta Description

Finally, there’s the meta information. The page description, you might think, can be the same everywhere, and that very well be true; but if the page expresses any different functionality, the meta description should also change. Search engines such as Google display this description when showing your site as a result, so craft it to show as best you can the nature of that page. If the user was searching for something that could be found on another page in your site, Google will include that link, with its own description, right under the main link. This point is mainly SEO, but what’s good for search engines is usually good for accessibility, as well.

Once Again

To recap:
-alt text should make a fine substitute of the media it references, because those who use the alt text cannot gain access to the information in the media
-filenames are sometimes viewed outside the context of the page, and so they should have reasonable names
-titles will be used on saved links, so each page should give its context
-meta description is very helpful to users who are searching for something specific, and also help your different pages gain visibility

This doesn’t only affect blind readers. People with images disabled or hard-of-hearing video-viewers will also be able to find their way around better.

Width, Size, and Accessibility

Monday, August 10th, 2009

If you took a close look at this page, you’ll find that it allows you your default text size, and that you can open the page as wide or shrink the page as thin as you might want.

This is accessibility. You can view this page on a tiny cellphone screen, a smallish old CRT monitor, or the newest 50″ 1080p plasma TV.
(Admittedly, I should give the page a maximum width, but that’s another matter.)

Most pages today, especially if they’re well designed, are fit to a permanent 960-pixel grid. The more over-designed of those also set your text-size for you, in case it was only by accident that you’ve made the text appear larger on your monitor.

When you visit those sites on a screen smaller than 960 pixels wide—plus browser window, plus scrollbar, which makes the total width more like 984px—our good friend Horizontal Scrollbar comes out. Except that he’s not a good friend, and we all hate him.

With newer browsers, you can at least zoom out to shrink the 960px width to a more-manageable 600px. If they’ve set the text to 12px, though, you just can’t zoom out without having the entire page’s text turn into an ill-defined mass of faded grey squiggles.

There are lessons to be learned in all of this: While a great number of people use a screen greater than 960px in width, a fair number have screens of much smaller size. This includes cellphones, iPhones, iPod Touches, very old computers, browsers with side-panels, and extremely large monitors divided into sections.
While many can’t fit 960 pixels on their screens, every one of them can fit 100 percents. Therefore, try to make fluid 100% grids instead of fixed-width 960px grids, and always, always let your users set their font size.