Inspired from the print world, people from Adobe and Microsoft are coming with new features that might (or might not) be embedded into future CSS specs. These new features – CSS Regions and CSS Exclusions – will allow text to flow into webpages pretty much like they do in newspapers and magazines.

You remember that the idea of text flowing into columns is another CSS3 proposal, CSS Multi-column Layout Module and web layouts imitating magazine layouts is CSS3 Paged Media Module

Let’s see some examples that Adobe implemented:

Content threads and shapes using CSS regions

Text could easily flow from one region to the other and we can also choose to imbricate regions or give them different widths, heights and positions in the layout (see picture below)

If you can set rectangular regions, why not come up with weird custom shapes?

Text will also flow from one region (shape in this case) to another.

The idea is super-cool and we waited for it for a while now, but I do wonder about its usability if we think about the way people are reading web content versus printed text (that might change the bottom-top L shaped reading order observed with eye tracking methods).

Content exclusion

The opposite idea is to exclude text from a certain region or regions. (rectangular or custom shape)

Possible real world implementations

Adobe came up with more complex examples (they work in their own version of WebKit based browser only since these features are still a draft and highly experimental).

Text can flow into custom shape areas and that will allow us create CSS accessible pie charts and complex layouts involving images and text that will behave well on devices with different screen sizes and resolutions.

No related posts.

Dan Tamas was invited to talk about Titanium Appcelerator at TheEvnt 2011 in Cáceres, Spain, May 14th and the purpose of this talk was to present the advantages of using this framework to develop applications for iPhone, iPad and Android devices.

It was an introductory talk in order to present to the Spanish developers an alternative to ObjectiveC and the very popular Java.

For now I can only embed the slides (in Spanish) but I promise I will soon try to give you a link to the HTML version and also embed the video of the presentation.

Related posts:

1. Making a combo-box in Titanium Appcelerator – code and video
2. Custom row for TableView in Appcelerator Titanium
3. Seven days with Titanium – day 0 – introduction

After seeing how AT reads a content generated with CSS pseudo-elements I was thinking to move on to HTML5. And since there are a lot of people saying we should mix HTML5 with ARIA in order to increase the accessibility of a website, then why not test and see what happens?

A piece of code…

...
 
<header id="header" role="banner">  
    <div id="logo">Logo here</div>
    <nav role="navigation">
        <ul id="mainnav">........</ul>
    </nav>
</header>
 
<section id="content" role="main">  
 
    <h1>A level one heading here please</h1>
 
    <div role="application"><p>Here is where an application will be coded. </p></div> 
 
    <article role="article">             
            <h2 class="index-headings">Blog entry no 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </article>
 
    <article role="article">
            <h2 class="index-headings">Blog entry no 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </article>
 
</section> 
 
<aside role="complementary">  
    <h2>Sidebar</h2>
    <ul>......................</ul>
</aside>
 
<footer id="footer"  role="contentinfo">This is where the footer will stay.</footer>     
...

This is the page containing both HTML5 elements:

• header
• nav
• section
• article
• aside
• footer

and ARIA roles (learn about ARIA):

• role=”banner” – for the header element
• role=”navigation” – for the nav element
• role=”main” – attached to the section
• role=”application” – in case I need to add a widget
• role=”article” – for the article element
• role=”complementary” – for the aside
• role=”contentinfo” – for the footer

How NVDA, JAWS and Window Eyes read the HTML5-only version

Long story short, no screen reader noticed the HTML5 elements – as expected. They all behaved like those elements were simple DIVs and read the webpage accordingly.

How NVDA, JAWS and Window Eyes read the HTML5 + ARIA version

Much better this time, ARIA is doing wonders although I don’t understand why Window Eyes doesn’t even pronounce the existence of the headers…I am a newbie in this field so maybe I did something wrong? I do not want to do WE any injustice so let’s say the results are inconclusive regarding this software.

The difference

So what was the difference between the two versions? What ARIA brought from this point of view?

The banner area: role=”banner”

NVDA – “banner landmark logo here navigation landmark list with 4 items visited link home……. ”
JAWS – “banner landmark logo here navigation landmark list with 4 items visited link home……. ” At the beginning it also says that there are 8 landmarks, hurray!!!

The main area: role=”main”

NVDA – “main landmark heading level one …”
JAWS – “main landmark heading level one …”

The application area: role=”application”

NVDA – the application role was not read at all.
JAWS – “application landmark here is where….”

The articles: role=”article”

NVDA – the article was not mentioned in any way.
JAWS – “article landmark heading level….”

The sidebar: role=”complementary”

NVDA the sidebar was read like this: “complementary landmark heading level 2…..”
JAWS – “complementary landmark heading level 2…..”

The footer: role=”contentinfo”

- and the footer: “content info landmark this is where the….”
JAWS – “content info landmark this is where the….”

So far JAWS was the only one able to speak all the landmarks while NVDA missed the article and the application. Like I mentioned before, Window Eyes din not read ARIA elements but maybe it’s just me being a newbie…Your opinion is much appreciated, maybe together we can make it work

Check the Spanish version of this post:
Cómo leen los lectores de pantalla una página con HTML5 y ARIA

Related posts:

1. Useful 10 minutes of WAI ARIA
2. Testing the accessibility of the CSS generated content

This article is about how screen readers speak the content added with CSS pseudo-elements :before and :after (in CSS3 they are ::before and ::after).

I am trying to learn to use AT when developing websites and recently I saw that no matter how W3C wants us to use a certain CSS element, there will always be developers/designers who will try to push the limits of the specification.

While I do advise you to NOT use pseudo-elements to generate useful content (limit yourself to generating quotes or design elements), just in case somebody thinks that the cool resides in generating content with CSS because everything else is already old, let’s see how people using screen readers will “benefit” from the idea.

A piece of code…OK, maybe two…

The HTML is really simple, an innocent paragraph of text:

<h1>Example of content added with CSS pseudo-elements</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..and so on.</p>

and the CSS is also quite simple:

#content p:before {
content:"This is before the text, you can style it";
}
 
#content p:after{
content:"This is after the text";
}

Let’s hear voices

The video will show how NVDA, Jaws and Window Eyes read the page – I set NVDA to read at a lower rate in order for you to follow, but the other 2 are a bit faster.

The conclusion

There’s no need for me to tell you how bad the idea is, DON’T use these pseudo-elements for generating useful content, limit its use to generating quotes, breadcrumb icons, fluffy snowflakes or whatever. But keep it presentational in order for other people to have access to the useful stuff.

Check the Spanish version of this post:
Probando la accesibilidad del contenido generado por CSS

Related posts:

1. How screen readers speak a page with HTML5 and ARIA
2. Useful 10 minutes of WAI ARIA

For those of you webdevelopers who have 1 hour to spare I am offering this Chris Heilmann talk at Fronteers 2010 in Amsterdam. I promise you it’s funny, engaging, motivating and it will make you feel good to be a part of the web world

You can find information on the Fronteers Conference website and all the 14 sessions (about HTML5, CSS3, Accessibility, Javascript, Design and more) are now on their Vimeo channel.

No related posts.

We just launched a fairy tales book with stories written by Hans Christian Andersen under the name “Bedtime stories”. It is built as an iPad application available for download on Appstore.

You can check the application’s website, Edu-apps.mobi where you will find our other iPad ebook of stories by Brothers Grimm called Fairy Tales.

Bedtime stories presentation

The books contains 8 chapters, some being long stories and some a collection of short stories. A full list of stories can be read on Rborn news release page. I will only name a few already famous: The emperor’s new clothes, The ugly duckling, The little mermaid, The nightingale, etc.

The application has a beautiful, usable and accessible interface allowing the user to choose the font, the size of the text and to switch to night-mode for a better reading experience during the night. It saves your current reading position in real time so you can close the e-book at anytime and return to reading it later.

You can also read the review made by the Kids-apps team: Bedtime Stories by Hans Christian Andersen on Kids-apps.mobi

Related posts:

1. Fairy Tales for iPad – our ebook app

I would like to post here a selection of resources that might help you start using ARIA in your web applications or websites – although ARIA is still a draft. you can start using it and some AT will know how to read it.

Introduction to WAI ARIA

Written by Gez Lemon for Opera Developer, this article is the best post you can start with. You will understand why ARIA was created in the first place and you will understand some basic terms like: roles, states, properties, and my favorite, ARIA regions.

ARIA Roles 101

Now that you know the basics of ARIA, you can start implementing ARIA roles in your applications. A full list of the roles definitions can be seen here, at the W3C WAI ARIA 1.0 specs website.

Supported states and properties

Learning about ARIA properties is the next logical step, and the W3C WAI ARIA specifications are really helpful even if the first impression is that you read the Constitution or something

Try some demos: ARIA Live Regions Screen Reader Demo

A very useful video by Aaron Cannon (from cannonaccess.com) about using ARIA live regions in a correct way, the difference between aria-live=”polite” and aria-live=”rude” and how this whole thing works. You need to know that now aria-live=”rude” is not part of the specs anymore (it was really too rude) and we are left with “off”, “polite” and “assertive”.

You might wanna read ARIA and Progressive Enhancement written by Derek Featherstone for A List Apart because the small examples that you will find there will help you understand better the roles and the properties of ARIA.

If you wanna go back to reading the Constitution, WAI-ARIA 1.0 Authoring Practices – An author’s guide to understanding and implementing Accessible Rich Internet Applications is the next step, a page full of examples for you to learn from and best practices when it comes to implementing ARIA – pay special attention to Section 3: Keyboard and Structural Navigation, Section 4: Relationships and Section 5: Managing Dynamic Changes which is really really important.

Learn from examples

• JQuery Widget Samples – a collection of common JQuery widgets made accessible with ARIA: sliders, progress bars, accordions, trees, carousels, tabs, etc….
• jQuery-Accessible-RIA – adds some more ARIA examples: a form, a lightbox, tables, etc.

Update with more minutes of WAI ARIA

Aaron Gustafson also has a video with NVDA reading his now famous TabInterface.

TabInterface in Firefox using NVDA screenreader from Aaron Gustafson on Vimeo.

Check the Spanish version of this post:
10 minutos útiles de WAI ARIA

Related posts:

1. How screen readers speak a page with HTML5 and ARIA

Sir Ken Robinson gave 2 very funny and impressive TED talks about revolutionizing the education (one in 2006 & one in 2010) and we got so excited about these that we decided to post them here and share them with you. In case you don’t know TED you might wanna check more talks and ideas on their website.

2006 – Ken Robinson says schools kill creativity

2010 – Sir Ken Robinson: Bring on the learning revolution!

Changing Education Paradigms

A wider notion of ability

A talk about abilities, recognizing the talents that each of us have and identifying all the senses we can develop and use. You can see more interesting videos at Creative Momentum page or their Vimeo channel.

In case you know about more speakers we should follow, drop us a line. I’ll keep updating this post with more talks.

No related posts.

Have you ever tried to understand how IE8 behaves when searching? As a non-IE user I am used to going to the top right box, type a word and receive instantly the page with the search results. I work mostly with Mozilla and sometimes with Opera and Chrome (when I’m in a hurry and I need a page to load fast, I admit). So for me, as a user, the entire search process is transparent. I don’t even pay much attention to what search engine each of them uses. I know they are going to return some results and I’m always in a hurry.

So after so many years of NOT using Internet Explore I got myself searching something while testing a website. And, as usual, I type the word I need and in return I receive a page that is not a search result page. And I finally pay attention to what is happening to me.

Search box in multiple browsers

In all browsers the search box is pretty much the same. We’ve been trained to search it in the top right corner, to type the word and press enter. Here’s how it looks.

IE8 search box

Opera search box

Mozilla search box

Chrome search box

I expect them all to behave the same. IE8 apparently thinks the other way around, cause if you search for a word thinking that the box will search for it, you’ll receive a screen like this one:

How IE8 searches

Next you realize that IE8 doesn’t search by default, you have to make it search by choosing a search engine. All browsers search using Google’s engine, but if you want another one you can choose, no problem here. But if you’re in a hurry and don’t care much about the search engine, you still receive some results. IE8 added an extra step so now in order to receive the results you have to take 2 steps instead of one:choose the engine, then search.

How other browsers behave – they let you choose too

Mozilla

Opera

Chrome doesn’t even bother, it won’t display alternatives at all.

What is IE8 thinking?

I wonder why did they choose to follow these steps and if they realize that this is a usability issue – in the search engines war the fact that the user has to bother and take one extra step (in this case 2 instead of 1 is double the effort) might mean some of them won’t bother at all. And if they want to promote Bing or Yahoo, why didn’t they just put these ones as default?

Related posts:

1. Google Chrome translate – usability issue?
2. The usability of the language redirect

It’s Friday, I was thinking to have a little fun and offer you this brand new multibrowser addon to create pixel-perfect layouts based on a horizontal grid.

We will also think about a vertical one, or mixing vertical and horizontal grids to bring some happiness into designers’ world

Suggestions and improvements are welcome and much appreciated.

No related posts.