zomigi.com » links http://zomigi.com The professional blog of Zoe Mickley Gillenwater Wed, 23 Nov 2011 13:48:18 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Media queries presentation at indieconf http://zomigi.com/blog/media-queries-presentation/ http://zomigi.com/blog/media-queries-presentation/#comments Sat, 19 Nov 2011 16:30:40 +0000 Zoe Gillenwater http://zomigi.com/?p=621 Today I had the pleasure of speaking at indieconf, a conference for independent web developers and designers, right here in my backyard of Raleigh, NC. I talked about the basics of CSS3 media query syntax but focused on the challenges and considerations that go into building a site from scratch with media queries to power the layout. I used the fictional Little Pea Bakery site from my book Stunning CSS3 as a demo for how to adapt the CSS to make better use of the space at different viewport widths. I covered some tips for making your design work on mobile devices and even old versions of IE.

You can view the slides on SlideShare, or download the slides here:

CSS3: Using media queries to improve the web site experience (PDF, 2.4 mb)

Here are several links to related resources, some of which are in the slides plus many that were not but which I recommend and think you’ll find useful.

Media query articles, tutorials, and tools

Dealing with IE 6-8 support

Fluid/liquid layout

Media query inspiration

Related Posts:

]]> http://zomigi.com/blog/media-queries-presentation/feed/ 2 Web accessibility presentation and resources http://zomigi.com/blog/web-accessibility-presentation-resources/ http://zomigi.com/blog/web-accessibility-presentation-resources/#comments Tue, 15 Nov 2011 17:15:03 +0000 Zoe Gillenwater http://zomigi.com/?p=607 Yesterday I had the pleasure of speaking at a meeting of the Charlotte User Experience group. I talked about the basics of web accessibility: what it is, who it affects, why it matters, and some of the fundamental things you ought to be doing in your pages to make them more accessible.

You can view the slides on SlideShare, or download the slides here:

Web Accessibility (PDF, 2 mb)

Here are several links to related resources, some of which are in the slides plus many that were not but which I recommend and think you’ll find useful.

Top sites on accessibility

These are my favorite sites to read to learn accessibility techniques and news on developments in technology like HTML5 and screen readers. I highly recommend subscribing to the RSS feeds of these.

WCAG 2.0

WAI-ARIA

HTML5 and accessibility

CSS and accessibility

Creating accessible content

Screen readers

Related Posts:

]]> http://zomigi.com/blog/web-accessibility-presentation-resources/feed/ 0 Videos of screen readers using ARIA, updated http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/ http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/#comments Mon, 17 Oct 2011 19:36:29 +0000 Zoe Gillenwater http://zomigi.com/?p=576 My previous post “Videos of screen readers using ARIA” needed a good updating: I’d found several more applicable videos and some of the original videos had disappeared from the web, leaving the links to them broken. This article includes all the content from that original post that’s still online plus all the new stuff I’ve found, organized by topic this time.

I’ve been doing a lot of investigation into WAI-ARIA for work recently, mainly revolving around educating other developers. I’ve found a lot of great demos of pages and widgets that use ARIA, but not too many videos of screen readers using said widgets. This is a shame, because it’s often hard to understand the impact of ARIA without hearing how a screen reader announces the content both without and with ARIA in place, and not many people have or know how to use screen readers. I can certainly show developers who are accessibility-newbies the ARIA demos, but their accessibility benefits aren’t that clear without a recording of a screen reader using them and their non-ARIA counterparts.

Nevertheless, I was able to find a few videos of screen readers using ARIA-enhanced widgets, as well as other uses of ARIA, and I wanted to share the links here. I’m willing to bet there are more out there—it’s just hard to find them, since simply searching for “aria” on YouTube will get you a bunch of videos of people singing opera, not screen readers! So if you know of others, please let us know in the comments.

Live regions

This video, though longer than it needs to be, is great because it shows a page without and then with ARIA live regions enabled, as well as the difference between “polite” and “rude” notifications.

Here’s a less clear but much shorter demo of live regions. Every time text is added to the log text box, the entire contents of the box are read out by the screen reader automatically:

And here’s the shortest of them all: a demo of how a screen reader would announce how many characters are remaining for your Tweet when typing one on Twitter—if Twitter were to actually implement live regions:

[Update 10/21/11] Another practical example of how to put live regions to use, this time on Yahoo!’s site for real. The video doesn’t mention ARIA live regions explicitly, but that’s how they’re getting the search results suggestions to be read out automatically.

Landmark roles

Lucica Ibanescu tested a page with and without ARIA landmark roles and recorded NVDA, JAWS, and Window-Eyes using both versions. Here’s the version with the ARIA landmarks:

Here’s how the landmarks on Flickr’s site are read:

Nomensa has a nice, simple demo of how landmarks are read on their own site:

Widgets

Aaron Gustafson has a video of his great TabInterface tabs widget being read by NVDA.

The Yahoo! User Interface (YUI) Library used to have video demos of all their ARIA-enhanced widgets online, but for some reason they’ve disappeared. However, I found someone else’s recording of YUI’s drop-down menu widget, seen here being read by NVDA:

You can also see how JAWS reads this menu. This same person posted a video of a different Yahoo drop-down menu widget that doesn’t use ARIA, so you can compare the two experiences with and without ARIA.

Similarly, here’s the ARIA version of YUI’s tabs:

Compare this to the experience with the older YUI tabs that don’t use ARIA.

Miscellaneous

Here’s a video of an extremely simple but very helpful use of ARIA: adding aria-describedby to “more” links so that the text that’s read out for each makes more sense out of context, such as when tabbing through the page or reading a list of links by themselves.

Here’s how the same page sounded before using aria-describedby:

You can see the code that produced this change in the article Easy Fixes to Common Accessibility Problems by Todd Kloots on the Yahoo! Accessibility blog.

Another quick and useful ARIA trick involves using aria-labelledby to label a form text field with the content of a select field rather than the label element, as seen here:

The code for this is fully described in the article “Create Dynamic Form Labels with ARIA” by Ted Drake on the Yahoo! Accessibility blog.

Here’s another video from Yahoo! showing how to use role="img" and aria-label to make a CSS background image be treated like a foreground image by a screen reader:

Any more?

If you know of any other videos of screen readers using ARIA-enhanced pages, please let me know in the comments. I’ll update this page with any videos you share plus new ones that come out over time that I happen to stumble across.

Related Posts:

]]> http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/feed/ 8 A few links: CSS and accessibility http://zomigi.com/blog/a-few-links-css-and-accessibility/ http://zomigi.com/blog/a-few-links-css-and-accessibility/#comments Fri, 14 Oct 2011 16:11:07 +0000 Zoe Gillenwater http://zomigi.com/?p=571 The blog 456 Berea Street by Roger Johansson is one of my favorite sites for useful information on web standards topics presented in a really clearly written and succinct way. He’s had some great articles recently related to the intersection of CSS and accessibility that I thought were worth sharing.

“Screen readers, list items and list-style:none“

Roger found that some screen readers won’t announce list items if list-style:none is set on the list. (They will announce the list as a whole, just not the individual list items.) This very common bit of CSS visually represses the list markers, of course, but (probably?) shouldn’t change the spoken output. Unfortunately, this falls squarely into the “good to know, but what do you want me to do about it?” camp. Just keep it in mind, and hopefully the offending screen readers will fix this behavior soon.

“Using display:table has semantic effects in some screen readers“

Same sort of thing, only with display:table. NVDA in Firefox as well as the ORCA screen reader incorrectly announce elements that you’ve set to display:table as actual, semantic tables. This might be an area where you do have other options than using display:table (as opposed to list-style:none, where there are no alternatives if you don’t want markers), so this screen reader quirk is a little more helpful to know. I wouldn’t consider this a deal-breaker, but if you can easily avoid it, I say why not? If you can’t really avoid it, I wouldn’t sweat it, but again, keep it in mind.

“Styling button elements to look like links“

This is a useful CSS snippet for when you want something to look like a link (plain text) but act like a button (initiate an action other than taking someone to a new page). Roger points out, of course, that it would be better if the design were changed so that things that act like buttons look like buttons, but this is a good option when you can’t convince those darn designers to change things! (I’m allowed to jokingly complain about designers since I am one.)

Related Posts:

]]> http://zomigi.com/blog/a-few-links-css-and-accessibility/feed/ 1 Videos of screen readers using ARIA http://zomigi.com/blog/videos-of-screen-readers-using-aria/ http://zomigi.com/blog/videos-of-screen-readers-using-aria/#comments Mon, 07 Feb 2011 19:50:43 +0000 Zoe Gillenwater http://zomigi.com/?p=502 Note: This article is out of date. The new post “Videos of screen readers using ARIA, updated” contains all the original content that is still relevant plus new content that’s arisen since this piece was written.

I’ve been doing a lot of investigation into WAI-ARIA for work recently, mainly revolving around educating other developers. I’ve found a lot of great demos of pages and widgets that use ARIA, but not too many videos of screen readers using said widgets. This is a shame, because it’s often hard to understand the impact of ARIA without hearing how a screen reader announces the content both without and with ARIA in place, and not many people have or know how to use screen readers. I can certainly show developers who are accessibility-newbies the ARIA demos, but their accessibility benefits aren’t that clear without a recording of a screen reader using them and their non-ARIA counterparts.

Nevertheless, I was able to find a few videos of screen readers using ARIA, and I wanted to share the links here. I’m willing to bet there are more out there—it’s just hard to find them, since simply searching for “aria” on YouTube will get you a bunch of videos of people singing opera, not screen readers! So if you know of others, please let us know in the comments.

This first video is the best, as it shows a page without and then with ARIA live regions enabled, as well as the difference between polite and rude notifications.

ARIA Live Regions Screen Reader Demo

YUI has ARIA versions of several of their widgets, and each has a video of a screen reader using it:

Unfortunately none of the YUI videos demonstrate what the user would hear were it not for the addition of ARIA, but they’re interesting nonetheless.

Update 2/17/11:

A couple comments pointed me to some additional videos of screen readers using ARIA.

Lucica Ibanescu tested a page with and without ARIA landmark roles and recorded NVDA, JAWS, and Window-Eyes using both versions. Here’s the version with the ARIA landmarks:

Aaron Gustafson also has a video of his great TabInterface widget being read by NVDA.

Related Posts:

]]> http://zomigi.com/blog/videos-of-screen-readers-using-aria/feed/ 15 CSS3 book launch event http://zomigi.com/blog/css3-book-launch-event/ http://zomigi.com/blog/css3-book-launch-event/#comments Tue, 25 Jan 2011 14:39:18 +0000 Zoe Gillenwater http://zomigi.com/?p=492

In a few hours I’ll be speaking at the online CSS3 Book Launch on “Real-world CSS3.” I’ll be talking about ways CSS3 can reduce your development times, decrease page loading times, improve usability, and increase the adaptability of your pages to different devices (including iPads, iPhones, and Android smart phones). I include a case study of a real site’s loading time and appearance before and after CSS3. I also talk in-depth about the example site from Stunning CSS3 that uses media queries to improve its appearance and usability at different screen sizes.

You can view the slides on SlideShare, or download the slides here:

Real-world CSS3 (PDF, 2.3 mb)

Slides always make more sense with the person talking over them, so I hope you’ll register for the free event and come see me live! Jason Cranford Teague will also be speaking about a variety of cool CSS3 stuff related to his book CSS3 Visual Quickstart Guide. Finally, Peachpit is giving away a bunch of copies of our books. It’s a great chance to get your questions about CSS3 answered and possibly score a new book as well. It’s today from 3 pm to 5 pm Eastern time, but if you can’t make it then you can still register and watch the recording later.

Here are several links to related resources that I couldn’t put in the slides but which you might find useful.

Beginner CSS3 Articles

Benefits of CSS3

Media Queries

Flexible Layouts

Performance

Finally, if you’re interested in learning more about my book, Stunning CSS3: A Project-based Guide to the Latest in CSS, head on over to www.stunningcss3.com. That’s where the example files for the media query bakery site I show during my presentation are hosted, as well as a sample excerpt from chapter 6 that explains how to build the media queries for that site.

Related Posts:

]]> http://zomigi.com/blog/css3-book-launch-event/feed/ 2 Adobe MAX slides and resources http://zomigi.com/blog/adobe-max/ http://zomigi.com/blog/adobe-max/#comments Tue, 26 Oct 2010 22:40:26 +0000 Zoe Gillenwater http://zomigi.com/?p=427 I just finished speaking at Adobe MAX on “Designing with CSS3 Effectively & Efficiently,” the latest iteration of the talk I gave at Web Directions USA, the CSS Summit, and ConvergeSE. I talked about how CSS3 is about more than making things look pretty (though it’s really good at that too). Many CSS3 techniques can reduce your development times, decrease page loading times, improve usability, and increase the adaptability of your pages to different devices (including iPads, iPhones, and Android smart phones). I showed examples of the pieces of CSS3 you can add to your web sites right now and how they might benefit your projects in tangible ways. I included a case study of a real site’s loading time and appearance before and after CSS3, plus an example page built using media queries to improve its appearance and usability at different screen sizes.

You can view the slides on SlideShare, or download the slides here:

Designing with CSS3 Effectively & Efficiently (PDF, 3.3 mb)

Here are several links to related resources that I couldn’t put in the slides but which you might find useful.

Beginner CSS3 Articles

Benefits of CSS3

Media Queries

Flexible Layouts

Performance

Finally, if you’re interested in learning more about my book, Stunning CSS3: A Project-based Guide to the Latest in CSS, head on over to www.stunningcss3.com. That’s where the example files for the media query site I showed during my presentation will eventually be hosted. For now, check out the CSS used on the site to see a wide variety of CSS3 techniques in use.

Related Posts:

]]> http://zomigi.com/blog/adobe-max/feed/ 5 Web Directions USA slides and resources http://zomigi.com/blog/web-directions-usa/ http://zomigi.com/blog/web-directions-usa/#comments Thu, 23 Sep 2010 00:43:35 +0000 Zoe Gillenwater http://zomigi.com/?p=409 I just finished speaking at Web Directions USA on “Effective & Efficient Design with CSS3,” the latest iteration of an the talk I gave at the CSS Summit and ConvergeSE. I talked about how CSS3 is about more than making things look pretty (though it’s really good at that too). Many CSS3 techniques can reduce your development times, decrease page loading times, improve usability, and increase the adaptability of your pages to different devices (including iPads and iPhones). I showed examples of the pieces of CSS3 you can add to your web sites right now and how they might benefit your projects in tangible ways. I included a case study of a real site before and after CSS3, plus an example page built using media queries to improve its appearance and usability at different screen sizes.

You can view the slides on SlideShare, or download the slides here:

Effective & Efficient Design with CSS3 (PDF, 2.9 mb)

Here are several links to related resources that I couldn’t put in the slides but which you might find useful.

Beginner CSS3 Articles

Benefits of CSS3

Media Queries

Flexible Layouts

Finally, if you’re interested in learning more about my book, Stunning CSS3: A Project-based Guide to the Latest in CSS, head on over to www.stunningcss3.com. That’s where the example files for the media query site I showed during my presentation will eventually be hosted. For now, check out the CSS used on the site to see a wide variety of CSS3 techniques in use.

Related Posts:

]]> http://zomigi.com/blog/web-directions-usa/feed/ 3 Highly Maintainable, Efficient, and Optimized CSS http://zomigi.com/blog/maintainable-efficient-css/ http://zomigi.com/blog/maintainable-efficient-css/#comments Tue, 31 Aug 2010 15:44:32 +0000 Zoe Gillenwater http://zomigi.com/?p=394 Earlier today, I gave a presentation at Think Vitamin’s HTML & CSS Online Conference entitled “Highly Maintainable, Efficient, and Optimized CSS.” I tried to squeeze as many tips as I could in to cover how to create CSS that is well organized and readable for teams to work on together as well as you to maintain later, while still keeping efficiency in mind. The slides are up on Slideshare, but you can also download them in their full glory here:

Highly Maintainable, Efficient, and Optimized CSS (PDF, 1 mb)

Here are links to just a few of the hundreds of related resources I could link to!

Maintainability

Resets

Sprites

Performance

CSS compression

Related Posts:

]]> http://zomigi.com/blog/maintainable-efficient-css/feed/ 27 CSS Summit 2010 slides and resources http://zomigi.com/blog/css-summit-2010/ http://zomigi.com/blog/css-summit-2010/#comments Wed, 28 Jul 2010 17:30:42 +0000 Zoe Gillenwater http://zomigi.com/?p=384 I just finished speaking at the CSS Summit online conference. Well, technically, I’m writing this before I spoke, so that the post can be up as soon as my talk is done. Sneaky, huh? Anyway, my presentation was titled “Effective & Efficient Design with CSS3,” an extension of the talk I gave at ConvergeSE.

If you’d like to check out the slides, here they are:

Effective & Efficient Design with CSS3 (PDF, 1.7 mb)

Here are several links to related resources that I couldn’t put in the slides but which you might find useful.

Beginner CSS3 Articles

Benefits of CSS3

Media Queries

Flexible Layouts

Finally, if you’re interested in learning more about my book, Stunning CSS3: A Project-based Guide to the Latest in CSS, head on over to www.stunningcss3.com. That’s where the example files for the media query site I showed during my presentation will eventually be hosted. For now, check out the CSS used on the site to see a wide variety of CSS3 techniques in use.

Related Posts:

]]> http://zomigi.com/blog/css-summit-2010/feed/ 4