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!