WebStandards Archives - Page 4 of 38

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)

Perceivable

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.

Operable

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.

Understandable

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

Robust

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

Online seminar: Introduction to ARIA

On March 27 I’ll be leading an online seminar for ADA Online Learning. The topic is Introduction to ARIA.

If you’d like to join the seminar, information about the schedule, registration and more is located at the ADA Online site. It’s free and registration is easy.

The seminar will focus mainly on ARIA landmark roles and will help the people attending see how to use landmark roles in their work. It will include an explanation of how to add landmark roles to WordPress themes that don’t have them built in.

The event is sponsored by the Great Lakes ADA Center.

Characters, Symbols and the Unicode Miracle – Computerphile (Video)

What exactly is UTF-8? I’m always telling students to choose it as the character encoding for their HTML documents. It turns out that representing symbols, characters and letters that are used worldwide is not easy, but UTF-8 managed it. Tom Scott explains how the web has settled on a standard. @tomscott

Syntax Blindness

An interesting post from Khan Academy about Newbie Syntax Blindness got me thinking about teaching syntax.

First let me point out that Khan Academy is dealing with a different situation than face-to-face teaching. Their problem is about finding ways to alert students who are working online with useful messages about what their syntax errors might be.

In a classroom, face to face with students, I do it very differently. I introduce either HTML or CSS syntax in minute detail. I discuss every bracket, space, comma, semi colon, forward slash, and quotation mark they will be using. I show lots of examples. Then when they begin the actual typing, I walk around and help them spot their errors.

I also teach them that when a page falls apart, look in the HTML for a syntax error right before where the problem appears. It will most likely be a missing quotation mark or bracket someone just ahead of where the problem shows us. I find that students invariably pull their hair out over the part of the page they think is broken, but never think about simple syntax errors or typos that may have occurred just prior to that. That usually where the problem is.

Another problem students have with syntax when they first begin hand coding is taking what they see on a whiteboard or a projection screen or a demonstration monitor and translating into finger strokes on their own computer. The details are minute and exacting. The more time they can spend developing some muscle memory around these strange new keys they are using on their keyboards, the better they will do. People who have been keyboarding for years can be thrown into beginner’s mode hunting for curly braces and brackets and slashes and equals signs.

If you are teaching, either face to face or in online classes, how do you teach syntax?

Useful links: Color functions, table element, weak ties

A visual guide to SASS and Compass color functions. Very interesting and useful page for people using SASS and Compass.

A Complete Guide to the Table Element is an excellent resource. It’s from Chris Coyier at CSS Tricks.

I found this article in Wired about weak ties in networks like Twitter very interesting. Your Casual Acquaintances on Twitter Are Better Than Your Close Friends on Facebook.

Main element added to HTML 5.1

The <main> element was added to the HTML 5 specification recently. The element name is pretty obvious in meaning, but just in case you want the W3C’s definition, it is the “main content of the body of a document or application.”

The <main> element can include only content that is unique to a page. Repeating content such as navigation, copyright information or banners do not belong in the <main> element. There can only be one <main> element in a document, and the element should not be a descendant of an <article>, <aside>, or <nav>.

The W3C does suggest that a <main> element could “a grouping content or sectioning content element as appropriate.” I interpret this to mean you can nest a <main> element in a <div> or a <section>. If I’m misunderstanding what this means, I hope someone will speak up with a correction.

Coding with <main> until the new wears off

Until assistive devices include a keyboard command that will move the focus directly to the <main> element, a best practice suggested for accessibility is to include the ARIA role “main” as an attribute of the element. For example:

<main role="main">

Some browsers (and validators) won’t recognize <main> immediately, although browser support is coming quickly. If you start using it now, be sure to include this in your CSS, along with the other HTML5 resets:

main {display:block;}

For older versions of Internet Explorer, add this to your script.

<script>document.createElement('main');</script>

The html5shiv now includes <main>, so make sure you have a current version of that if you are hosting it on your own server.

Code Examples

You can see a couple of code examples demonstrating appropriate use of the <main> element on this W3C page.

Useful Links: the future of content, Adobe web fonts, HTML Imports

Drupalcon Keynote by Karen McGrane with Video, Slides, and transcript. One of many worthwhile ideas she discusses:

I’ve gotten the reputation of being the president of the WYSIWYG Haters Club, which is true, and if you don’t buy into my rationale here today…

I’m going have to continue my graffiti crime spree. People assume I must be some kind of markdown evangelist. The problem isn’t the toolbar. Truth is, I don’t care if users make headings and bulleted lists with a toolbar or markdown codes. The problem with WYSIWYG is that we are allowing content creators to treat the web like it’s print.

Where do you think WYSIWYG came from?

It came from XEROX. Xerox PARC. Because they invented the laser printer.

How to Use Adobe Edge Web Fonts on Your Site from Design Shack is a good look at how to make the new Adobe Edge Web Fonts work for you. Both the problems and the benefits are outlined along with step by step instructions.

The W3C released the first working draft of HTML Imports. HTML Imports are a way to include and reuse HTML documents in other HTML documents.