Good Accessibility Talk to Watch (Video)

This is worth your time. It’s a talk by Monika Piotrowicz of Shopify. I like her instruction to use basic HTML whenever possible instead of putting something else in to overrule the semantics. Her explanation of ARIA is excellent.

The close captions aren’t great. They were generated automatically rather than from a transcript, but they do appear if you need them.

Hat tip to Dennis Lembree who shared this on Google+, which is where I first saw it.

An Accessibility Primer

How do we achieve accessibility? Follow these simple guidelines.

wheelchairicon

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.

Struggles with Dreamweaver CC’s Grid Layout System

After building about 20 layouts, redoing a couple of sites, and starting and rejecting an uncounted number of Dreamweaver CC grid system attempts, I’m here to describe some of my issues with this tool.

Control Issues

Elements inserted into the fluid grid have controls that appear when the element is selected. In the image below, the div “main” is selected. (Dreamweaver CC does not have a “main” element in the Insert panel yet.) A few controls are shown that can affect the element selected.

Control icons for the element selected.

Control icons for the element selected will move it up or down, hide it, move it up a row, duplicate it, or trash it.

Other controls for elements include the set zero margin.

The set zero margin control

The set zero margin control must be used so that all the list items in the nav will fit in the assigned space.

The controls are lovely – when they appear. Sometimes they just disappear. I had to toss out layouts or parts of layouts and go back to step 1 a number of times because the controls just were not there!

The controls are touchy. Just putting the cursor near the duplicate control – without even clicking on the icon – can duplicate something.

Tutorial Issues

One of the biggest problems I had with using the grid layout system was that the tutorials and videos on the Adobe site are often not applicable to the latest versions of CC. For example, the online tutorials from Adobe suggest that a nav element inserted in the smart phone sized grid will automatically adjust itself to a touch screen type drop down menu instead of a horizontal list display. This does not happen.

Nesting Issues

Several times I had a mysteriously misplaced closing </ul> tag on the nav list.

The mysteriously misplaced closing </ul> tag

The mysteriously misplaced closing ul tag

Maybe this was my own fault for inserting the list items incorrectly, but I was very careful about getting my cursor positioned in the right place before inserting anything. You have to be very careful because placing the cursor in the right spot is extremely difficult. It’s hard to move out of an inserted item and stay within the container grid. In spite of all my careful checking to be sure I was inserting things where I wanted them, I still ended up with closing </ul> tags in places where they didn’t belong.

I also had problems with the closing </nav> tag being in the wrong place.

Seeing Double

Now, the way I think the controls are supposed to work is that you apply them and they change to indicate what you’ve done. If you move something up a row, the control changes to move it down a row. If you apply a zero margin, the option to apply it should go away. (A control to remove the zero margin choice does not appear, by the way.)

In the image below, you can see that Dreamweaver suggests that I can apply the zero margin rule to a list item that clearly already has the class applied.

The control to zero the margin is there, even though it's already been applied

The control to zero the margin is there, even though it’s already been applied

Styling Issues

One of the tutorials I watched suggested keeping the styles and media queries created for the layout in a separate stylesheet from the CSS you write to give your layout a particular appearance, color scheme, fonts, etc. I followed that advice, but found a few strange issues.

I found that doing something like inserting a 1 pixel border on an element can throw off the whole grid and destroy the layout.

Just Annoying

You must assign either an ID or a class to every item you put in the grid layout.

You must use an ID or class for everything you insert

You must use an ID or class for everything you insert

Even if you know that you only want one header or footer or nav on your page, you still cannot insert one into the grid layout system without giving it either an ID or a class assignment.

What I Want

I wish Adobe would do something to make the grid layout system easier to use. Expanding the outline of the container grid to make locating the cursor less exacting would be a help. The disappearing control icons seems to be a bug – I hope Adobe is working on it.

The control operation should require more of a click – a definite click – instead of being triggered by a roll over or some other accidental touch that generates an action.

It would be nice if videos and tutorials were more in your face about which version of Dreamweaver’s grid system the tutorial describes. It’s hard to know what to do when a video tells you something is going to happen and it just plain doesn’t happen.

If there is an Adobe person reading this who can tell me where to find answers to these issues, which tutorial is up to date, or anything else useful about using Dreamweaver CC’s layout grids – help a teacher out, please. Otherwise, when I teach this, my students are going to get an earful about how buggy it is instead of how wonderful it is.

Something Good

Here’s one good thing. It’s really easy to type in ARIA roles as you add layout elements to a page. It has nothing to do with the grid layouts, but I wanted to end on a positive note.

It's easy to insert ARIA roles in code view.

Happy Thought: It’s easy to insert ARIA roles in code view.

Useful Links: OpenAIR, Queer History, Lucidpress

If you’ve never been on a team designing a site in one of Knowbilities OpenAIR events, it’s a great experience. You learn a lot about accessibility and have a good time. They still need 3 teams for this year’s event.

A Queer History of Computing at Rhizome is the first of five posts in a series. The first post is about Alan Turing, an English mathematician who is considered by many to be the father of computer science. This is a fantastic project, I hope educators find and use all five posts in the series. The series will be all men. A similar project on queer women would be wonderful, too.

Collaboratively Create Multimedia Documents With Lucidpress. This multimedia tool works with Google docs but is “slicker” and is free for students and teachers.

Useful Links: Usability, Text resize, Twitter IPO, Siri

The ABC’s of Usability, Part 9 is at Usabilla. They are defining terms in a move to teach you the basics.

Support a user’s ability to resize text. This is from Simply Accessible. One thing it talks about is the uselessness of text resize widgets.

Twitter loses money, as many have reported. Yet it’s going to try to raise a billion dollars in an IPO. In a lot of ways that doesn’t make sense, but I recall Amazon losing money for many years before it started turning a profit.

The voice talent behind Siri has spoken out. Her name is Susan Bennett. She’s going public now in an effort to make sure the right person is recognized for the famous voice.