Wednesday, July 2, 2014

Why is color contrast important in software design?

Designers and product managers often ask me why color contrast and the ability to zoom in is important in software design. There are two groups of people who benefit from color contrast.

1. Color blindness. 1 in 12 men are color blind. 1 in 200 women are color blind. Any design that adjoins two different colors with the same or similar value can be tricky for color blind users to navigate. Additionally, the use of color only as an indicator of system status becomes meaningless. For example, red for alert and green for ok. If those two colors appear the same to a user, the meaning is lost. Therefore, any time a design uses color for meaning, it should be accompanied by a symbol or text that also provides meaning. A red exclamation for alert and a green checkmark for ok will provide a way to convey meaning without color alone.

2. Low vision. Around 3-3.5% of the world population has low vision.  Low vision users can be aided by increased color contrast in addition to the ability to zoom in or magnify their view of software on a screen. Zooming and contrast can be enhanced by peripheral hardware and software, but at a minimum, software should have a certain amount of contrast built in as well as the ability to adjust the zoom.

Further reading:

Why is the the ability to navigate by keyboard important?

I often have designers and developers asking me why it is important to be able to navigate a web page with a keyboard only and why it is bad to require users to hover over something with a mouse.

Let me be clear that I'm not against adding motion or delightful visual effects when the mouse moves around the page. However, there needs to be a clear and easy path for users to interact with all features using a keyboard. Here is why:

1. Power users. People who use a web app heavily for productivity don't want to move their hand back and forth from a keyboard to a mouse. Doing everything with a keyboard is preferred. If that functionality is available and intuitive, it will be used. In addition to the ability to navigate by keyboard, these users require the ability to see where their cursor focus is on screen at all times.
web page on a tablet

2. Navigating via tablet. Today, a lot of users will access a web page on a tablet device. Tablets have touch screens that are not able to simulate a hovering action as the mouse can. As such, all controls need to be visible and able to be activated by a touch, which is interpreted the same way as the click of the mouse or hitting the enter key.

3. Minor ailments. A lot of users suffer from minor ailments including arthritis, carpel tunnel syndrome, diminished dexterity or temporary injuries like sprained wrists. For these users, long periods of mousing can be excruciating. Making things available via keyboard allows these users to continue being productive while healing from and avoiding aggravating their injuries. In addition to the ability to navigate by keyboard, these users require the ability to see where their cursor focus is on screen at all times.

using a switch
4. Profound motor disabilities. People with conditions like MS, Parkinsons, ALS, muscular dystrophy or who are missing a limb or digits still have a need to participate in our digital society. Creating web applications that are navigable via keyboard allows them to access information and services using a keyboard or a switch, which is a large button that can be plugged in as an alternative to a mouse pointer and used to toggle between web page controls. In addition to the ability to navigate by keyboard, these users require the ability to see where their cursor focus is on screen at all times.
navigating with a screen reader

5. Profound visual impairment. Users with profound visual impairment will typically use screen reading software to navigate a web page. Because they cannot see a pointer on screen, they need to be able to toggle through controls on a page using the keyboard. Additionally, all "active" elements like buttons, links and form fields need proper text labeling or alternatives, so they know what to expect when they activate the element. This is especially important with icons which need to be described to the screen reading software.

Saturday, June 21, 2014

Ireland's Wicklow Way - May 2014

Full Photoset:

Day 1 May 18 Sunday
Arrived in Dublin around 12:30 pm. Got to hotel around 2 pm. Saw LinkedIn folks on plane and survived the screamer - a 2 year old boy.

Went to Guinness storehouse and survived the crowds in the Gravity Bar on the 7th floor to enjoy the views of Dublin while drinking a pint. 

Dinner was at Bison Bar on the way back. We had ribs, fries, and coleslaw. I enjoyed a warm whiskey drink with honey and orange.

Struggled to stay awake until 8 when we took our "reset sleep".

Day 2 - May 19 Monday

Kilmainham Jail
After a big breakfast at Brooks Hotel we headed to Kilmainham Jail via bus. The tour got a lot into Irish history, the revolts against British rule, and the civil war. After the tour we walked the 4 km back stopping at a coffee shop for a big salad and vegetable soup on the way. 

We did a short refresh before heading out to St. Patricks cathedral. We also stopped at Sheridan's cheese shop for some meat and cheese for tomorrow's lunch. 
St. Patrick's

We took a short nap and then went to Stag's Head Pub for a pint. I had cider. Then, we went to Gallagher's Boxty House for dinner. We had a three course meal. I had seafood chowder (excellent) and dumplings which were gnocchi with mushrooms and blue cheese cream sauce (also excellent). Dessert was a warm chocolate, nut and fruit brownie with ice cream and salted caramel. It sounded better than it was. 

Day 3 - May 20 Tuesday 
Wicklow Trailhead, Marlay Park
We started our walk today. A 50 minute bus ride got us to Marlay Park where we dropped our bag with the transfer service and got our start. It was raining pretty steadily.

It rained for the first hour or two as we climbed the first ridge. Then we got thick fog reminding us of Port de la Bonaigua in Spain. It cleared and we had our 100 gram lunch (chocolate, cheese, crackers and salami) while watching the baby sheep. 

We climbed over another ridge and descended until we got to the Knockree youth hostel. We were soaked in a heavy downpour so when we got directions, they told us they would call for a ride.

We got a ride to Coolakey House where Yvonne greeted us. After coffee and a shower, we got a ride to Eniskerry for dinner at the Old Forge Inn. I had a beef pie, fries and salad. Rick had ham with cabbage and potatoes. We had whiskey for dessert - black bush and padding tons.

Day 4 - May 21 Wednesday 
Plank Walk Over Bogs

I had a full Irish breakfast at Coolakey house. We chatted with the international crowd of Italian, Dutch, Korean, Aussies and the other Americans.

Loch Te
The day was sunny and beautiful. We headed south with the Koreans. The first climb took us above a lovely falls. Then, we passed just below the summit of the highest peak in the area, Djouce Mountain. Then there was 3km on a plank walk downhill and then a rolling ramble to the junction toward Roundwood. We turned off for Lough Dan House and fortunately got a ride the last km from one of the farm hands. The house is lovely and the owners sweet. 

They made us some lamb and vegetables for dinner with red wine. The lamb was raised here. We spent the evening chatting with Sean and Theresa the owners and other guests John and Jane from England.

Day 5 - May 23 Thursday
Loch Dan

Scarr Mtn. Summit
Theresa and Sean convinced us all that the Wicklow way route for today was mostly on road and boring. So, they sent us over Scarr mountain. We headed out around 10 with John and Jane. The climb was tough through deep bogs and mud. We did see a large herd of deer at the ridge line and a waterfall from near the top. We argued over whether we had reached our official turn at an "egg shaped rock". John bet me three leprechauns that we had not yet turned. So that became a running joke.

We made it to Heather House in Laragh around 2:30 after saying goodbye to Jane and John who headed to Glendalough - and had time for ample laundry and napping. We dined in their restaurant and I had pear cider, haddock fish and chips with a salad. We finished with Irish coffee for dessert.

Day 6 - May 24 - Friday
The Monastic City
We had a hearty breakfast, got packed lunches and headed out toward Glendalough. As soon as we got to the monastic city and started taking pictures, the rain started falling.

From there it was a national forest path along a waterfall and up a mountain for about 10km. It was extremely windy and cold. I thought we'd be done with the hard part upon summitimg, but we then had a bog path, a steep boggy descent and a stone stairway all in epic winds. Finally we were back to forest road and it stopped raining. From there it was an easy 6km to the Glenmalure Lodge where I enjoyed hot chocolate and Baileys.

For dinner we shared tips of venison and a burger at the pub attached to the lodge, which was hopping with Friday evening frivolity.

Day 7 - May 25 Saturday
Descent to Iron Bridge

We had a smallish full Irish and got suited up. We chatted at breakfast with a couple from Idaho as the rain cleared.

After settling our bill, we headed out. The rain flirted with us most of the day as we traipsed through the conifer forest.

We were mixing up with some sort of trail race relay. Runners passed us intermittently and we saw a handoff point at Ironbridge. We had one tricky ascent through deep mud and one tricky descent on bog path, which was slippery. The descent to Ironbridge was the most scenic part of the day. We finally emerged from the forest into a pretty valley and slogged the remaining 8 km to Kyle Farmhouse. The day ended with 26 km and over 3000 feet climbing and descending. We had dinner at Kyle Farmhouse - butternut squash soup, baked salmon, and chocolate cake. 

I had a quick chat with Adrienne and finished up Crime and Punishment before going to bed.

Day 9 - May 26 Sunday
Emerald View

Margaret made us a nice breakfast before we hit the road. The day started nice as we wandered through country lanes and sheep pastures. We ate lunch in glorious sunshine before starting our last leg. 

Mamma and Baby Sheep
As we headed up our last climb of the day, the skies opened and it poured for about an hour and the rained lightly for the next hour. We were happy to see the Dying Cow pub (Tallons) which meant we were 1.5 km from the end. We stopped for some refreshment and then continued to Lugnaquillia View B and B. 

We met Matthew and Anne who run the house and were invited in for a hurling match and coffee. After the match we cleaned up and joined them for their family dinner of lamb, veggies and potatoes (two ways).

Day 10 - May 27 Monday
Trail's End, Clonegal

We ate Matthew's breakfast and headed out under gloomy skies. The first 10k were pretty easy going mostly on roads and easy tracks.

Bunclody Church
Our first ascent into the forest was super steep and very circuitous. We had some light showers. Once back on the road, we stopped for lunch and then headed for the second bit of forest. The sky got black and we had a severe crack of lightening in the very worst spot and then we hightailed out of the forest and down the last 5km to Clonegal in a stiff downpour.

It took us some effort to locate a taxi and a 40 minute wait before the final leg to Bunclody. After a very hot bath at the Millrace Hotel, we headed downstairs to celebrate with two for one steak night and a bottle of wine.

Day 11 - May 28 Tuesday
Dublin Docks
We had room service breakfast and then headed out to catch the bus to Dublin. It was a short ride and we arrived early - well before lunch 

Trinity College Library
Our hotel was oversold and so hooked us up with lattes, a fancy room at their sister hotel across the river and a taxi ride over. So, after getting settled at The  Spencer, we headed out for lunch and sightseeing. We stopped at JW Sweetmans for lunch and craft beer. The pale ale was fabulous. Then, we walked to Trinity College where we took in the Book of Kells exhibit and the old library. 

We rested at the hotel befor heading back out for dinner at the Winding Stair, which was recommended. Dinner was good. The most memorable part was the bread pudding Rick had for dessert. I had a ginger cake that was also quite good - preceded by a nice salad and sole.

Sunday, October 27, 2013

Exploring New Places with Girlfriends

I just got back from a week long vacation in the Santa Fe area with two girlfriends - Nancy, whom I've known for 20 years and Rebecca whom I've known for 15 years. What a treasure it is to be able to experience a new place with old friends! Full set of photos here:

Sunday, October 20, 2013

We arrived in Albuquerque mid day. We stopped for lunch at Lucia Restaurant in downtown in the Hotel Andaluz (one of 3 original hotels built by Conrad Hilton in the U.S.). I had a salad with pears and sweet potato fries.

We stopped at Kokopeli on Old Santa Fe Trail in downtown Santa Fe. Then, we proceeded to Casa Archuleta at 839 East Palace - our little abode for the week - a traditional adobe about .6 miles from the plaza.

After putting groceries away, we strolled down to the plaza and took some photos. We shopped at Trader Joe's and Whole Foods to get breakfast and lunch rations for the week as well as food for a couple dinners.

We finished off the evening at The Pantry. I had the chile relleno omelette and we shared a sopapilla. I drank a cheap margarita made with agave wine.

Monday, October 21, 2013

We slept in and then hiked the Aspen Vista trail just below the Mt. Baldy ski basin. We started at 9,000 feet elevation amongst the aspens and hiked to around 11,500 feet before encountering some significant snow and heading down. Most of the aspens were emptied of leaves, but there were some stunning trees on the lower parts of the trail.

We dined that evening at the Blue Corn Cafe. I had a nice seasonal IPA to drink and a cup of chili verde, a cup of creamy corn bisque. Both were spicy. We shared a spinach salad.

Tuesday, October 22, 2013

We got up early and headed north by car. We started in the town of Chimayo, photographing the tiny church with its healing dirt - Sanctuario de Chimayo. We stopped immediately after at Centinela Traditional Arts, where husband and wife team Irvin and Lisa Trujillo are 7th generation weavers. Their tapestries commanding up to 6 months to make and $50,000 to own. 

We drove the high road through the area where the Milagro Beanfield Wars was filmed and ended up in Taos. We had lunch at Gutiz. I had the Mexican hot chocolate and the Taoseño, a vegeterian chili dish with a scrambled egg on top.

We spent an hour or so at the Millicent Rogers Museum - a collection of jewelry, native American artifacts and religious art created by a New York socialite who spent her last years in Taos.

The last 1.5 hours of daylight were spent at the Taos Pueblo, photographing in the waning sunlight. We spent a tiny while in the Taos plaza on the way out of town, as the Sangre de Cristo mountains were bathed in blood-red setting sun.

We drove home in the gloaming as we practiced using gloaming in every sentence. Dinner was carnitas tacos, salad and green beans prepared at our Casita.

Wednesday, October 23, 2013

We started the day with a hike up Atalaya Mountain. At the junction of "steeper route" and "easier route", Rebecca and I headed steeper, determined to summit before our 1:30 turnaround time. Nancy continued on the easier route. We arrived at the summit at 1:05 and headed back down after a short break.

We ended the day at 10,000 Waves - a Japanese-inspired spa in the hills above Santa Fe. Rebecca and I had Shiatsu massage and Nancy had a foot and head/neck treatment. We spent time in the relaxation room and lounging in the thermal pool. I even managed a second or two in the cold plunge.

We dined that evening at La Choza near the rail yard. I had a tamale and a blue corn vegetarian burrito, smothered in red and green chile sauce with a jalapeño margarita.

Thursday, October 24, 2013

We set out in the morning for Bandalier National Monument - some old cave dwellings near Los Alamos. After a visit to the information center, we plotted the rest of the day. We hiked, climbed into caves, and photographed the stunning former native dwellings. After enjoying a cup of pozole, we headed out.

Our next stop was the White Rock Overlook in Los Alamos, where we met an older gentleman who grew up in the area and educated us about the native people groups and the rift valley where we stood overlooking the canyon.

We took the long road around to the Valles Caldera and photographed the low sun and the grazing elk.

After the caldera, we stopped at a trailhead where we could hike to Jemez Falls. We were fortunate to capture the only part of the day where light would hit the falls perfectly.

We made a final stop at Red Rock on the way out of the mountains where we caught a couple shots in the dying twilight.

After a two hour drive back in the dark, we dined at Cafe Pasqual's - the definitive best meal of the trip. We shared a vegetarian stuffed sugar pumpkin, cochinita pibil, and chile en nogada along with a dessert sampler before rolling home.

Friday, October 25, 2013

It rained overnight and through the morning, so we planned a town day on Friday.

We started above the city at the Musem of International Folk Art where they had an exhibition on Japanese kites. We each made a miniature kite that we then tested in the courtyard outside.

We had lunch at Palacio Cafe, where I consumed a boat of coffee and had huevos rancheros with mixed chile sauces.

We then went to the Georgia O'Keefe Museum and looked at her works from the Lake George area, stopping at the Chile Shop on the way back for gifts of local chiles. A final stop took us to C G Higgins Confections for some piñon brittle on the way home.

In the evening we strolled through the open artist studios of Canyon Road, and then enjoyed roasted brussel sprouts with pomegranetes, green beans and sausages, prepared at the house.

Saturday, October 26, 2013

We left the house at 9:30, dropping our keys off at the rental office and heading to the rail yard to visit the Santa Fe Flea and Farmer's Market. We enjoyed the smell of roasting chiles along with some pumpkin piñon oven bread while walking through the market.

We each purchased a little turquoise from Roberta's Fine Jewelry stand - at much better prices than we'd seen in the Plaza. At noon, we jumped in the car for the drive back to Albuquerque to catch our plane home.

Monday, May 13, 2013

Ask A11y Volume 2

About A11y:  I answer a lot of questions about Web accessibility best practices at my job, so thought I would bring some of those topics online for the larger community. 

Dear A11y,

As a web developer, I make sure to include alternative text on all my images via the alt attribute. Why the heck would I ever want an empty alt attribute?

Alternative in California

Dear Alternative,

As you already suggest, it is important to include alternative text for image tags in your markup. This provides blind and low-vision users a text explanation of what the images are, which helps provide context. This is especially important when an image takes a predominant position on a Web page and there is little surrounding text content for context. 

You may have also heard that you should not provide an alternative for decorative icons, which is true....unless the icon has a specific meaning that is not covered in the text content. A perfect example is an edit pencil. In that case, you'd want to use alternative text in the img tag or in the tag containing the background image:

<a href="edit.html"><img src="pencil.png" width="20" height="20" alt="Edit"/></a>

<button style="text-indent:-999em;background-image:url(pencil.png);">Edit</button>

If the icon is purely decorative and has no meaning, like a stylistic bullet point, then you want to include the alt attribute, but leave it empty. Why? Because, if you omit the alt attribute entirely, screen readers will read the URL of the image. As you can imagine, this is incredibly frustrating for those who are using screen readers. So, it's best to include an empty alt attribute in this case, so the screen reader will skip the description of the image: 

<img src="dot.png" width="20" height="20" alt=""/>


Thursday, April 25, 2013

Ask A11y Volume 1

About A11y:  I answer a lot of questions about Web accessibility best practices at my job, so thought I would bring some of those topics online for the larger community. 

Dear A11y,

As a web developer, I'm trying to practice progressive enhancement. A lot of the time, I receive specs that have a link that kicks off a JavaScript interaction when clicked. However, often these links don't have any logical landing URL. Is it better to use <a href="#">Link</a> or <a href="javascript:void(0);">Link</a> in this situation?

Progressive in California

Dear Progressive,

Both suggestions have practical and accessibility issues. First, on the practical side, <a href="#"> will cause a hashchange event unless you also prevent the default behaviour of the click event in your JavaScript. This can cause issues with single-page-apps that use hashchange events for routing. Also, if the user is scrolled down the page, it will have the result scrolling to the top. If you use <a href="javascript:void(0);">, the anchor now has a return value of undefined, which can open you up to security issues. That should be reason enough not to do it, though it does not suffer the hashchange or scrolling concerns. HTML requires us to provide an href attribute on an anchor in order to be valid. In order for non-sighted users to not anticipate linking behaviour, we can use a role="button" attribute to set the expectations for the link. However, adding role="button" does not change the HTML Node Object type from an anchor to a button, so the spurious href attributes are still required, which brings us back to the practical issues.

So, the answer to your question is: neither. In my opinion, the semantic and accessible solution is to use a <button> element for these behaviours. The button element does not have the href attribute situation and properly sets expectations for all users. There are some practical concerns when using buttons, especially if you plan for them to appear as links on the page. This can be handled in the CSS layer, which also gives you a proper separation between meaning (markup), presentation (CSS), and interaction (JavaScript).

Here is how the situation can be resolved:

<button class="link">Link</button> {
  -moz-appearance:none; /* Firefox */
  -webkit-appearance:none; /* Safari and Chrome */

Or, if you are using SASS and Compass as we are in our workplace, you can do the following:

@mixin link {
@mixin unstyled-button {
  @include appearance(none);
} {
  @include unstyled-button(); /* removes button styling */
  @include link(); /* applies link styling */

Happy button-making!


Monday, December 31, 2012

Christmas Week Training block

I had from the 22nd of December through the 1st of January off from work. So, in addition to catching up on housework, finances, and reading, we got in a mini training block.

Saturday, December 22 - Short hike at Rancho San Antonio

Sunday, December 23 - Torrential downpours, did wine tasting in Healdsburg

Monday, December 24 - Moderate hike in Annadel State Park

Tuesday, December 25 - More torrential rain, saw a movie

Wednesday, December 26 - Moderate hike at Rancho San Antonio

Thursday, December 27 - Los Altos Hills bike ride

Friday, December 28 - Out n' Back recovery to light rail in downtown SJ (was supposed to be longer, but Rick mucked up his pedal)

Saturday, December 29 - Hike at Hidden Villa

Sunday, December 30 - Mt. Eden bike ride the hard way (but I'm pretty sure not 428 miles!)

Monday, December 31 - Los Altos Hills bike ride, a bit longer and hillier than earlier in the week

Tuesday, January 1 - TBD - probably a hike or trail run