Tips, web design book reviews, resources and observations for teaching and learning web development.
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.
How do we achieve accessibility? Follow these simple guidelines.
For those of you who teach accessibility in web design, it’s always a problem to demo the process that screen reader users use to access web pages.
Jared Smith, writing at Web Standards Sherpa, has some great tips for how to simulate the screen reader experience for someone using free technology. Check it out.
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.
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.
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.
Other controls for elements include the set zero margin.
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.
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.
Several times I had a mysteriously misplaced closing </ul> tag on the nav list.
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.
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.
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.
You must assign either an ID or a class to every item you put in the grid layout.
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.
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.
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.
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.
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.