This infographic is from Usability Matters. It’s oriented toward business and financial reasons for accessibility. I might add that accessibility is important to anyone wanting your content, whether you’re selling something or not.
Text version
Types of impairments that may affect how people use your website
• Visual impairments such as low vision, colour blindness and blindness.
• Auditory impairments like people with restricted hearing or who are deaf.
• Mobility impairments such as inability to make fine movements or inability to use a mouse or keyboard.
• Cognitive impairments, which includes people with dyslexia, learning disabilities and even memory loss.
It’s bigger than you think!
Accessibility benefits people with or without disabilities, including:
• Older people and new users
• People who don’t have or are unable to use a keyboard/mouse
• People not fluent in English
• People with temporary disabilities due to accident/illness
3 reasons to make your website accessible
1. Increase your audience customer base
2. It may provide significant financial benefits
3. It’s the right thing to do legally and morally
Did you know?
People with a disability have a global annual spending power of $996 billion*.
The good news about subscribing to Adobe Creative Cloud is that you always have shiny fresh, updated software. You’re up to date all the time.
The bad news about subscribing to Adobe Creative Cloud is that you always have shiny fresh, updated software. Every time you update it’s different and you have to figure things out all over again.
It’s the end of an era. The web site that dedicated itself to publishing articles about best practices and web standards at webstandardssherpa.com is shutting down.
Here’s how Aaron Gustafson, the founder, put it in his announcement on Facebook.
It is with a heavy heart that I announce that we are closing Web Standards Sherpa. As of April 2, we will be archiving the site in order to keep the valuable insights and techniques shared by our authors available in perpetuity.
To make that archive a reality, the Sherpas teamed up with Environments for Humans to create an online conference called Sherpa Summit. The summit features four expert sessions and live Q&A roundtable sessions that will let attendees from all over the world take part.
The online conference is on April 2, and you can save 20% if you register now using the discount code SHERPA.
UPDATE: Because of illness, the Sherpa Summit had to be postponed until April 23. A side effect of the delay is that you get more Sherpas for the Round Table Q+A’s: Steve Fisher and Dan Rubin!
Thinking of starting a new website? Two preliminary steps are choosing a domain name for your new site and then buying that domain name. Let’s take a look at some of the basics involved in that process.
Choosing a Domain Name
A good domain name is easy to remember and easy to spell. A domain name that’s easy to spell shouldn’t have characters like hyphens between words. It you want more than one word in the name, run them together like alistapart.com or webstandardssherpa.com. It’s a bit awkward to read, but for someone typing the domain name for A List Apart or Web Standards Sherpa in the location bar of a browser, it makes perfect sense.
Are you starting a website for an established business? Try to make the name reflect the business name and the branding that is already in place for the business. This may be a bit hard if it’s a commonly used name. For example, a Denver floor tile company might have trouble getting the name mountaintile.com. But perhaps denvermountaintile.com might be available.
If it’s a personal website, try to use your name. Karen McGrane owns karenmcgrane.com. How simple is that?
If it’s a blog where you’ll be exploring a particular point of view, pick a domain name that reflects your point of view. A name like Mountain Poet or Lesbian Dad tells you a story about what you can expect from the website before you’ve even visited.
Before you seek out a place to purchase the domain name, it’s good to have a few ideas ready to go. Your first choice might not be available.
Obtaining a Domain Name
Okay, you’ve got some ideas for a great domain name. It’s time to see what’s available for purchase.
There are literally thousands of places where you can buy a domain name. I use the domain name services connected to the hosting company where I do business. I like having the domain name company and the web hosting company connected. But I know people who think this is a bad idea. I think the reasoning of the people who think it’s a bad idea is that if one company shuts down suddenly, at least the other one still operates. If you choose an established company with a good history, I don’t think it’s something you need to worry about.
If you search for domain names on Google you get 84,000,000 results. There are a lot of choices! I’ll just pick one to use as an example. This does not imply that I endorse this company, it’s just an example. Also, prices vary, so the prices you see in these examples may be different from other domain name sellers.
A typical domain name search form.
At domain.com, you see something similar to what you see on any site where you want to purchase a domain name. You enter the name you are hoping to purchase. The site will tell you if the name is available. If it’s not available exactly as you want it, the site will suggest alternatives that are close to what you want.
I searched for vdebolt.com, my own domain name. Here’s what the tool told me.
The .com is gone, but other top level domains for that name are available.
I can’t buy vdebolt.com (duh, I already own it) but other top level domain name types are available like vdebolt.net or vdebolt.org. (Domain names are cheap. Many people buy several variations and direct them all to one site.)
If the name you want isn’t available, choosing whether or not to go with a .net or .org or some other .whatever is an option.
If you don’t want the .org or .net or .whatever, the tools usually suggest variations of the name based on your original search. Here are a few suggested to me:
A few of the suggested variations on my domain name.
Even better, create your own variations like the denvermountaintile.com example and use the search tool to see if it is available.
If you can’t get a name close to what you originally wanted, go back to step one and brainstorm a new idea. Keep trying until you eventually find a name that will work and is available.
You can buy the name for 1 year or for several. You’ll probably save a few dollars if you buy several years at a time. Don’t forget to renew it on time, or you might lose it!
You’re all set. Go build something awesome.
[Note: This post was originally published on Blogher.com.]
Guideline 1.1 Text Alternatives: 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.
Among those text alternatives is where alt text (or alternative text) for an image is used.
The HTML5 specification states that all images must have an alt attribute. Here’s the fine print. All images must have an alt attribute, but there are times when the alt attribute can be empty or null. That is, the attribute has to be there, but there might be nothing in it. Like this:
<img src="image.png" alt="">
When is null alt text acceptable?
There are times when the text surrounding an image gives the alt text of the image. It’s part of the content. Therefore, to put the same information in an alt attribute becomes redundant and unnecessary.
Here’s an example from the blog Old Ain’t Dead in the section where the most popular posts are displayed. Alt text is shown using the tools in the Web Developer Toolbar.
The alt text and the clickable link are the same
You can see that the alt text for the image is exactly the same as the link text that goes with it. On a screen reader, a user would have to listen to the same text read twice. It would be better if these images had null alt text because the function of the link is explained by the text accompanying it.
Look at how Twitter deals with null alt text.
An example of null alt text
If the alt text for Twitter avatars was not null, but in fact contained the name of the Twitter account, then the name would be spoken twice in a screen reader. In the example above, with null alt text, you would hear “Jeffrey Zeldman” spoken once only because of the null alt text.
Even if you couldn’t see the little profile image, you’d still know it was Jeffrey Zeldman’s twitter account.
What about when images are not loaded or otherwise not displayed by the browser?
If you consider the two examples already mentioned – the list of top posts and the Twitter avatars – in neither situation would null alt text on the image result in the user becoming confused. The information is there in text form and it’s all that is needed.
What if the text surrounding the image does not explain what the image is?
In that case, put a description in the alt attribute that explains the function of the image or provides the content of the image.
I saw Samuel L. Ipsum thanks to this tweet from Chris Carfi. I checked out the Samuel L. Jackson version of lorem ipsum and thought it was clever. I realized that we need a feminist paragraph or two that can be used as filler by web designers.
I didn’t build it into a fancy lorem ipsum generator, but I did put together some random quotes that can be stuffed into a new layout while you’re in the design stages. It isn’t a widget, it’s old fashioned copy and paste, but here you go:
One Paragraph
Whisky, gambling and Ferraris are better than housework. -Françoise Sagan Women don’t get raped because they were drinking or took drugs. Women do not get raped because they weren’t careful enough. Women get raped because someone raped them. -Jessica Valenti I love being single. It’s almost like being rich. -Sue Grafton In fact, there is perhaps only one human being in a thousand who is passionately interested in his job for the job’s sake. The difference is that if that one person in a thousand is a man, we say, simply, that he is passionately keen on his job; if she is a woman, we say she is a freak. -Dorothy L. Sayers While falling in love is fun, it’s not everything, and it’s not the antidote to an unfulfilled life, despite what Reese Witherspoon movies may tell you. -Jessica Valenti There will be no mass-based feminist movement as long as feminist ideas are understood only by a well-educated few. -bell hooks
Two Paragraphs
Whisky, gambling and Ferraris are better than housework. -Françoise Sagan Women don’t get raped because they were drinking or took drugs. Women do not get raped because they weren’t careful enough. Women get raped because someone raped them. -Jessica Valenti I love being single. It’s almost like being rich. -Sue Grafton In fact, there is perhaps only one human being in a thousand who is passionately interested in his job for the job’s sake. The difference is that if that one person in a thousand is a man, we say, simply, that he is passionately keen on his job; if she is a woman, we say she is a freak. -Dorothy L. Sayers While falling in love is fun, it’s not everything, and it’s not the antidote to an unfulfilled life, despite what Reese Witherspoon movies may tell you. -Jessica Valenti There will be no mass-based feminist movement as long as feminist ideas are understood only by a well-educated few. -bell hooks
A woman without a man is like a fish without a bicycle. -Gloria Steinem I only know that people call me a feminist whenever I express sentiments that differentiate me from a doormat. -Rebecca West Feminism is the radical notion that women are human beings. -Cheris Kramarae There is no female mind. The brain is not an organ of sex. As well speak of a female liver. -Charlotte Perkins Gilman Men are from Earth, women are from Earth. Deal with it. -George Carlin No woman can call herself free who does not control her own body. -Margaret Sanger I cannot understand anti-abortion arguments that centre on the sanctity of life. As a species we’ve fairly comprehensively demonstrated that we don’t believe in the sanctity of life. The shrugging acceptance of war, famine, epidemic, pain and life-long poverty shows us that, whatever we tell ourselves, we’ve made only the most feeble of efforts to really treat human life as sacred. -Caitlin Moran
If someone wanted to take this idea and put it into a widget or app, that would be lovely.
First, let’s review some of the older methods of clearing floats in a layout. In a CSS layout with two or more columns, there is generally some use of float to create the column structure. For the layout to include a footer at the bottom of the page, those floats need to be cleared.
A technique used some time back was to add some element – a br or a div – with a class attached that applied clear:both. This br or div was inserted immediately after the elements that needed clearing. This element added no content, it simply cleared the float (or floats). This works, but it does add an unnecessary element into the HTML content.
Another technique put a clear:both rule in the element following the float (or floats) preceding it. So a footer element might be set to clear:both to move it below any floated elements above it. This works. It puts the clear after the elements that need to be cleared.
Example code for this type of clearing in a two column layout.
The .clearfix difference is that the class is applied to the parent element containing the floats. The parent element becomes self-clearing.
An advantage of using .clearfix is that it makes the container div height equal to the tallest of the floated columns enclosed. This gives you options with borders, backgrounds and more, particularly when all of the contained elements are floated.
Using .clearfix generally will require the addition of another wrapper div to the HTML. Here’s a example similar to the one above, but designed for .clearfix. The header and footer elements are outside the wrapper div which contains the floated columns.
The CSS for a .clearfix class rule is applied to the parent element containing the floats. It uses the pseudo class :after with no content. It declares the element as display:table.
