An Accessibility Primer

How do we achieve accessibility? Follow these simple guidelines.


Create web sites that

  • Use web standards
  • Use semantic HTML: POSH
  • Integrate accessibility from the start of a project
  • Are POUR

What is POSH?

  •  Plain old semantic HTML
  •  The Hypertext Markup Language is meant to format text into semantic elements. Most HTML tags are self-describing, that is, the tag itself describes the semantic meaning of the text it is meant to format.
  •  Make sure the HTML elements that content is placed in are really describing the content. Use heading tags (<h1>, <h2>, etc.) for headings. Use list tags for lists. Use table elements properly.
  •  There are only a couple of exceptions to the semantic nature of HTML: the generic container elements <div> and <span> do not have semantic underpinnings.

What is POUR (or the WCAG 2.0 guidelines)


  • Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, Braille, speech, symbols, or simpler language.
  • Provide alternatives for time-based media
  • Create content that can be presented in different ways (for example, simpler layout) without losing information or structure.
  • Make it easier for users to see and hear content, including separating foreground and background.


  • Make all functionality available from a keyboard.
  • Provide users enough time to read and use content.
  • Do not design content in a way that is known to cause seizures.
  • Provide ways to help users navigate, find content, and determine where they are.


  • Make text content readable and understandable
  • Make web pages appear and operate in predictable ways
  • Help users avoid and correct mistakes


  • Maximize compatibility with current and future user agents, including assistive technologies.

Facebook Updates Login and Adds Anonymous Logins

Facebook announced changes to logins. With the Facebook login to apps, the new version gives people the option to pick and choose what information apps get and what information gets shared back to Facebook.  This will help preserve privacy when using Facebook logins on other websites and in apps.

You can also login anonymously. This login lets people log in to apps without having to remember usernames and passwords, but it doesn’t share personal information from Facebook. So far, Anonymous Login is only set up in a few places, but its use should increase over time.

Anonymous Login from Facebook on Vimeo.

Also changing in the coming weeks will be a new app control dashboard inside Facebook’s settings. Using the new controls, people can see a list of apps they use, manage specific permissions, or remove apps entirely.

4 Little Known Google Search Tips

Search Technology Redux

No more leafing through a card catalog card by card. Search travels at the speed of electrons now. There are some characters and tricks that you can use to refine a search on Google that will get you the information you want more efficiently. Here are a four.

Exclude with a Dash

Putting a dash in front of a word excludes it from your search. A Star is Born -Striesand.

Include Synonyms with a Tilde

Putting a tilde before a word means that synonyms will be included for the word. Halloween ~masks.

Use Two Periods to Search a Range

Putting two periods between terms will give you a range of things like dates, measurements or prices. Gas prices 2001 .. 2005.

Use Related to find Related Items

Use related: to search for things that are related to a specific site. related:

HTML5 News

html5 news on

It’s time once again to bring something I curate on a daily basis to your attention: The HTML5 News.

It’s a compilation of HTML5 articles that get brought to my daily attention because of certain sites I monitor and certain keywords I monitor. I try to keep it really focused on actual HTML5, although some of the related technologies creep in because they are so interconnected. There are archives of past issues.

Most recently, there have been stories about a community for developers called HTML5 Hub, news from the W3C about lack of support for certain elements, and vulnerabilities in HTML5.

Take a look. You can subscribe if you want daily notifications of new articles.

Tips on Using the Dreamweaver CC Layout Grid

I’ve learned a few things about how the Dreamweaver CC layout grid system works after making about 30 different layouts with it and struggling to figure out its bugs.

One helpful thing is to take a look at the stylesheet that Dreamweaver generates after you’ve told it how many columns you want in the various sizes. This is before you’ve entered any content of your own or added any CSS rules of your own.

Read through it and notice the order of the rules and media queries.

@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height
  and width attributes from the HTML

img, object, embed, video {
	max-width: 100%;

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {

	Dreamweaver Fluid Grid Properties
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	15;

	Inspiration from "Responsive Web Design" by Ethan Marcotte

	and Golden Grid System by Joni Korpi


.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	float: left;
	display: block;

.fluidList {

/* Mobile Layout: 480px and below. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 96.7391%;
	padding-left: 1.6304%;
	padding-right: 1.6304%;
	clear: none;
	float: none;
#div1 {
.zeroMargin_mobile {
    margin-left: 0;
.hide_mobile {
    display: none;

/* Tablet Layout: 481px to 768px. Inherits styles
 from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.gridContainer {
	width: 91.4836%;
	padding-left: 0.7581%;
	padding-right: 0.7581%;
	clear: none;
	float: none;
	margin-left: auto;
#div1 {
.zeroMargin_tablet {
    margin-left: 0;
.hide_tablet {
    display: none;

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles
 from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

.gridContainer {
	width: 89.0217%;
	max-width: 1232px;
	padding-left: 0.4891%;
	padding-right: 0.4891%;
	margin: auto;
	clear: none;
	float: none;
	margin-left: auto;
#div1 {
.zeroMargin_desktop {
    margin-left: 0;
.hide_desktop {
    display: none;

The styles all flow from the 480 px and below layout rules. Dreamweaver expects you to begin adapting the style rules and adding your content in the mobile layout. Nothing explains that to you, but when the grid you set up in the File > New dialog opens in the Design View, it opens on the mobile view. Notice the size selector at the bottom of the document window, and the 4 column grid in the background.

This subtle clue means start with the mobile layout. Too subtle?

These subtle clues means start with the mobile layout. Too subtle?

Is opening up in the mobile view too subtle a clue? Shouldn’t there be some text somewhere, about starting with the mobile layout?

Once you have the mobile layout done, you are expected to move to the tablet size layout and adjust the fluid grid accordingly.

Finally, you can make any adjustments to the fluid grid for a desktop layout.

Additionally, when the initial grid layout opens in Design View, it contains a div (with the id div1) which you are expect to delete. There’s nothing to alert you to the fact that you should delete this placeholder div and replace it with a header element or whatever you want to add first to your page.

Since Adobe has so few tutorials that illustrate the proper use of the grid layout system, much of what you need to know to figure out the new layout system comes by way of trial and error. I hope my trial and error stumbling and learning experiences can help you get off to a smoother start.