Web accessibility standards allow people with disabilities to use your web site or web application through the use of text cues, keyboard navigation, and mouse alternatives. Assistive technology, such as screen readers, interpret the information and instructions on the site. Web developers are looking now to the latest guidelines, Web Content Accessibility Guidelines (WCAG) 2.0 (http://www.w3.org/TR/WCAG20/#guidelines), to make sure their web sites are friendly and useful to all visitors. A web application that is compliant with WCAG 2.0 meets these standards of accessibility:
- It is perceivable. To be perceivable, a web application must provide content and a user interface that allows assistive technology to find the necessary components and present them to the user. Providing text alternatives for images is one example of a perceivable component.
- It is operable. An operable application can be run entirely from a keyboard, allows time-based and moving components to be paused or stopped, minimizes flashing elements, and provides easy ways for users to navigate through content and find their place.
- It is understandable. An application is understandable if it provides ways for assistive technology to interpret the content in the native language, including any specialized terms. It also provides help for using the application and in recovering from errors. An understandable application also behaves consistently on similar pages, doesn't change the context without warning, and labels items in the same way throughout.
- It is robust. A robust application is coded in a way that the tagging, naming, and properties for all components can be determined programmatically.
Newer versions of WebSphere Portal, Web Content Manager, and Web Experience Factory all meet the latest WCAG 2.0 accessibility standards:
- The WebSphere Portal theme templates incorporate the use of WAI-ARIA, the Accessible Rich Internet Applications specification. WAI-ARIA navigation regions allow assistive technology to communicate the section of navigation links to a user who cannot see what is on the screen.
- Web Content Manager has many reusable elements that allow you to define consistent accessibility techniques throughout a site. You can modify standard elements such as image, link, and file resource elements to add instructions for keyboard navigation and WAI-ARIA attributes.
- Web Experience Factory Designer uses a variety of builders, templates, and design techniques to enable developers to create accessible applications.
If you're interested in learning more, the following articles illustrate ways in which IBM developers built accessibility standards into our web development products. The articles also provide tips for you to keep in mind as you create your own web applications:
Web Content Manager
Web Experience Factory
Over the past year, I've worked with an incredible team to develop a new online training site for WebSphere Portal and IBM Web
Content Manager called Getting Started with Your Web Experience
I'm excited to announce that this month the site is live and we have published our first three
Just for newbies
Designed for new administrators and site developers, the tutorials
introduce key concepts using prescriptive instructions. You can browse all the tutorials or you can filter the tutorials by role to see only the tutorials that are appropriate for you.
Progress from simple to more complex
Start with Learn the Basics tutorials to get hands on experience and then progress to Beyond the Basics. To keep focus on learning the foundational elements, the Learn the Basics tutorials have narrowly defined scenarios. They guide you through simple
tasks. Beyond the Basics tutorials step you through more complex decisions to get you ready for production deployments.
advantage of HTML5 features, the application remembers your location in
the tutorial. If you have to reboot or step away before you finish, when you return, it will resume where you left. So you can
close your browser and come back later. Clearing your browser cache does
clear the session information. Only clearing your browsers local storage will
reset the site.
As you go through the tutorials, take advantage of some
- Use the table of content on the left to see how much you have completed and what's left.
- Use the check boxes to help you keep your place on the
page. You don't have to use the check boxes to move forward.
- Hover over terms with dotted underlines to get descriptions and definitions.
- Click Show Screen Capture to verify you are in the right place.
- You can print the tutorial if you Download as PDF.
- Use the Tell us What You Think link to let us know about your experience. I'm eager to hear your thoughts so we can enhance the site and content that is useful for you.
Try it out
Visit Getting Started with Your Web Experience
to start learning more about WebSphere Portal and IBM Web Content Manager Version 8.0. Today you can use the tutorials to learn how
to install WebSphere Portal, configure it to work with a DB2 database, and how to use the site toolbar. The team is working on more tutorials and that will be
We're already thinking about expanding the
site to include tutorials for other Web Experience Suite products. So don't hesitate to tell use what you think about the site, the content in the site, what's missing, etc.
The Lotus Learning Widget that you know and love has a new sleek look! The updated Learning Widget is available for Lotus Notes, Lotus iNotes, Lotus Symphony, and IBM Sametime. If you already have the Learning Widget installed, there's no need for you to do anything to get the new look. Simply open the Learning Widget in the side panel, and it will automatically refresh.
In addition to a new look, we've also made it easier for you to find the learning resources that we think you will find most useful in getting started with the product by putting those resources at the top of the list; resources like the new Experience Lotus Notes
site. Get one of the Lotus Learning Widgets today!
As we shift towards a world where 'everything desktop' is expected on the tablet, we're looking at different ways of approaching design for the mobile context. Anyone who has designed in this realm before knows that mobile comes with a completely different set of expectations, motivations, and affordances. Personally, I don't have a lot of experience designing for anything other than print or web, so when I got my first iPad project I was suddenly faced with a very high learning curve.
Having come a long way from where I started, I thought I might share the top 3 things I've learned so far.
1. You don't realize how much you defer to tooltips until you find out they don't exist.
Whenever someone would ask me how a user would know what icon 'x' meant, I always had tooltips as my go-to answer. However, not being able to hover on an iPad is a blessing! I find that tooltips are usually a symptom of deeper usability issues; The second a user has to think "Hmmm, maybe if I hover over this I will get a clue!" something has gone off the rails. So–unless this is a game where users are supposed
to be confused–not relying on tooltips has been a great push for usability and I will definitely second guess their presence on the web for now on.
2. Cursors are my enemy (for now).
Cursors are exact. They let you click on really tiny things next to other really tiny things and for the most part come in the same shape and size. In contrast, our fingers do not and it's these limited and unpredictable modes of input that have replaced the cursor. What I came to discover was that the further I got away from computers during the early stages of the project the easier it was for me to design. When we were tasked with wireframing the interface I felt most productive hand-drawing on printed iPad templates and overlaying paper cutouts of iOS elements. Being able to, not only work at 100% scale, but also emulate the orientation and finger input methods played a big factor into the decisions we made.
3. Designing for the tablet on the tablet? Yes, please!
While we felt like we had a good understanding of the interface's framework from our paper prototyping, we still had difficulty judging how natural and intuitive our app would feel. Still not trusting the cursor, we moved over to an iPad app (called Blueprint) that allowed us to storyboard our ideas and turn it into a working prototype. Now we were able to tap buttons and swipe popovers on the iPad at scale! This was a really cool experience and further informed our design choices.
We are still at this stage in the process, which is probably why I only have 3 big takeaways from this project so far, but I foresee a rekindling of my friendship with the cursor in the near future. After all, I would go insane trying to get a pixel perfect design spec out of an iPad with my
Author: Priyoko T. Sudarmadi
Summary: Learn how to use IBM Web Experience Factory 8; specifically, how to create a simple
Create, Retrieve, Update, Delete (CRUD) portlet and how to add a filter to the portlet, using one
or two input text or combo boxes. This white paper also explains the steps to add validation
rules to the portlet and to add notifications to the portlet input form. We focus on the
step-by-step process and provide images for all steps.
About the Everyone Writes program:
Everyone Writes program helps authors like you to create polished and
professional articles in our product wikis. We edit, publish, and
promote your articles. In addition, the Everyone Writes program
participates in the IBM developerWorks Author Achievement Recognition Program,,
which "formally acknowledges the publishing achievements of prolific
developerWorks authors, and celebrates our common commitment to
knowledge sharing." Visit the Web site to learn more about getting
recognition for your writing efforts.
If you would like to publish an article, and would like help, send an email to The Everyone Writes Team
with the title of your article and a brief description.
Two weeks ago, I described hows inserting a fraction-of-a-second delay before display can
go a long way toward alleviating one of the major criticisms of hover-invoked
pop up displays like pop-up cards, hover help, and banner menus. This
week, I’ll blabber about dismissing hover-invoked pop ups via methods that avoid the “squirrely-ness” that users hate…
Say “no way” to auto decay
design and implement an automatic decay (i.e., timeout) behavior. The pop-up should display until the user
initiates dismissal by moving the cursor.
The automatic decay behavior is often problematic as the system is
guessing when the user is done viewing the contents of the pop-up, rather than
allowing the user to indicate this through action.
Define the right cursor boundaries
pop-up will generally display on mouse-over of a relatively small underlying UI
element such as a hover help icon or a text link. The pop-up itself will extend from that
underlying element and consume much more space.
To prevent accidental dismissal, it is important to treat the underlying
element, the pop-up itself, a small area of padding around each, and all the
space in between the two as active areas.
As long as the cursor remains within these active areas, the display
Implement a delay before dismissal on mouse-out
good practice for preventing accidental dismissal is to implement a delay of
800 ms or so after mouse out before dismissing the pop up. This allows users to
persist the display when the cursor momentarily traverses outside of the
boundaries of the active area described above.
When to make your hover-invoked pop-up sticky
the user indicates a desire to interact with the pop-up beyond simply
displaying and viewing, it should become a more stable, and less transient,
part of the UI.
the user interacts with the pop up by setting focus to a field or other control
within the pop up, moving it (possible with certain pop-ups), etc, it should
become sticky – i.e., the pop up should no longer close on mouse out, requiring
a more explicit means of closing (e.g., click-off, selecting the close button,
or selecting ESC). As a side note –
pop-ups that are displayed on click should almost always require this level of explicit
action to close.
Summary: 4 keys to avoiding “squirrely” pop ups on hover
- Don’t implement an auto-decay (timeout)
- Define an appropriately wide active cursor area in which the pop up will
- Implement a delay before dismissal on mouse-out
- Once the user interacts with the pop up, it should require more explicit
behaviors described here are important for all users and many of them are especially
important to ensure a usable design for users with a range of physical and
don’t be lazy. Laziness leads to
squirrelly-ness…and squirrely-ness leads to unhappy users. We like our users to be happy
In the latest SmartCloud Engage release, you can now create three types of communities:
- Open -- anyone in your organization can see the community and join it
- Moderated -- people can see the community, and can ask to join. The community owner approves each membership
- Restricted -- the community owner explicitly adds or invites members. (This is the type of community that existed before)
Currently, if you want someone from outside of your organization to join your community, it must be a restricted community. In other words, if your organization is "Company A", and you want to have a community that also includes people from "Company B", you can only do this if your community is Restricted.
I'd love to get some feedback on this from our SmartCloud Engage users! What types of communities do you create most often, and why? And would you want to invite people from other organizations into Moderated or Open communities?
Looking forward to hearing from you.
- Amy Travis (SmartCloud Design Lead)
At IBM, I work on a common front-end
(html/css) code base for our Lotus Applications. As part of that
work, I keep an eye on future trends. One of those trends is HTML5.
Back when we began implementing it in our code, it was even newer
than it is now. But it looks like it is here to stay, and there is a
way to use it now without much risk, setting your code up to move
into the future when even more HTML5 goodies are made available and
accessible by the browser. Here is how we did it and the pieces we
Put the HTML5 doctype on your page
And this is all that's needed for the html element:
It's really that simple. Is that not cool? That's one doctype I can
remember! It's the smallest doctype that all browsers recognize (or
at least back to Internet Explorer 6). It is a strict doctype. But
you can use either HTML or xHTML syntax, HTML5 views both as valid.
is one funky thing I discovered about strict mode (before that I
coded in xHTML transitional). In
strict mode, an image, considered inline, includes 4 pixels of
spacing at the bottom for the “descender.”
Sometimes this improves alignment. Sometimes it doesn't. Some workarounds:
- Try setting vertical-align:bottom; If that doesn't work, play around with other vertical alignment values. It's all kind-of dependent on what's around the image and the alignment you want.
- Try setting display:block; and float:left;
Use HTML5 elements, where they make sense, to structure your page
Style using classes
<p>We assigned classes to our html5 elements rather than styling them directly</p>
<p>For us, this gives teams picking up our code the option to either convert over to the newer HTML5, or leave things as divs for now until they have more cycles. Maybe you don't need to do that for your project. But I kind-of liked doing things that way and it especially worked nicely as I was learning all the new elements and the best places to use them.</p>
Use IE conditional comments
Conditional comments are how you define the elements to Internet Explorer.
This will get IE to recognize these elements and for you to be able to style them directly, if you choose to mingle that in with using classes.
(These are the ones we used in our projects)
Define HTML5 elements you use in your style sheet
<p>You'll have to define the HTML elements in your style sheet as display:block, so they will render correctly. Since the older browsers don't really understand them, they don't know what kind of display those elements should have. And so, we tell them... </p>
Use ARIA to make things accessible
<p>Accessibility compliance of HTML5 is incomplete in browsers, so you will still need to use ARIA. You'll note that the article element maps directly to the “article” role. And “nav” maps to the “navigation” role. Some day maybe HTML5 and ARIA will become seamless. Or at least HTML5 will alleviate some of the work we have to do to make things accessible. But things are not there yet.</p>
If you are ready to take this further, here are some useful links. Happy coding!
As I was reading a recent article on recreating the water-cooler experience in an online world, I took a few moments to reflect on my water-cooler experience at IBM.
In the early years of my IBM career, conversations with my colleagues took place as we walked to the coffee machines or the cafeteria. We would read and comment on the news posted on bulletin boards or articles in the printed internal magazines. We also used the mainframe chat tool, TELL, to share informal updates and discuss projects and work items throughout the day.
Most of my career has been devoted to working on and leading geographically dispersed teams where our online water-cooler experience has relied on tools such as chat. As we moved from green screens to PCs, the chatting continued and broadened. The CMS TELL command gave way to IBM Sametime on the desktop. Sametime enables us to get closer to the water-cooler experience with two or more of us informally coming together. Sametime chat is way better than chat at the coffee machine (which is pretty hard to do when I'm conversing with someone in Ireland). In Sametime, I can send a file, share a screen capture, paste a URL which becomes a hotlink, or just catch up on what remote teammates are doing.
At IBM, we've become prolific chatters. During web conferences, we are actively sharing great ideas and making connections with others for follow-on conversations in the web conference chat. With all of this chatting, I think our fingers are faster than our mouths and there are definitely no side-conversations that others miss out on.
Another addition to our incidental discussions over the last few years is the internal deployment of IBM Connections. With it's Profiles support, we have microblogging capability. We post information on what we are working on, ask questions, and find experts. The reach is so much greater than what we realized with the coffee gang.
The water-cooler effect of incidental discussions and making informal links between teams and departments is alive and thriving here at IBM enabling us to create ideas and sustain our success as we go into the next 100 years.
It's spring, and time to think about spring cleaning. For some of us, this means tackling our overstuffed inboxes. In this episode
, Julie and I provide some ideas for how to keep your inbox tidy by purging and decluttering.
We IBMers not only hear a lot these days about big data and cloud computing, but we are involved with advancing these important technologies. Today's "Washington Post" ran a special report on the big data issue. One article in the report, "6 people to watch: Helping government agencies use big data
" included interviews with Big Data Commission members on how government agencies can benefit from and use big data to secure information and improve services. The commission is part of The TechAmerica Foundation, a nonprofit affiliate of industry group TechAmerica. Read what IBM's Steve Mills and other commission leaders have to say on this timely and important topic:http://tinyurl.com/cmqtgen