Update on Before-After Demo (BAD) work (WAI-AGE)

Shawn: Additional material for January 23 teleconference, does anyone not have that? Shadi?

Shadi: Thank you Shawn: Hi everyone! I'd like to give you an update on the Before and After Demo task force task. I'll put links into IRC

<shadi> http://www.w3.org/WAI/EO/2005/Demo/Overview

<shadi> http://www.w3.org/WAI/WAI-AGE/deliverables.html#bad

Shadi: The Before and After demo was developed a while ago from WCAG 1. It shows some bad pages and an evaluation report. With the requirements of the WAI Age project we found that WCAG 2 covers most of what older people need. These updates are often advisory techniques and we want to get the coverage. I want to report our progress to EO.
... the present designers are a little unhappy with the past designers of the Before and After demo. A lot of the issues were about the navigation through the demo. We had various discussions during the face-to-face about the demo. People had a lot of problems in understanding what happened when switching pages.
... do people have any other overall questions about the scope of the work?
... Alan I hope I answered your question even partially?

<Zakim> Shawn, you wanted to allow addressing Alan's question at http://lists.w3.org/Archives/Public/w3c-wai-eo/2009JanMar/0014.html

Alan: I wondered what else could be added to the Before and After demo from WCAG 2, like dealing with the technology baseline and new technology.

Shadi: Like Flash and WAI ARIA? Right now adding new features is on the wish list. But WCAG 2 goes into great depth about these issues. And we are focusing on the WAI Age literatuve review.
... So if I could ask people you should have received a link from Shawn to some of the pages.
... In Shawn's email, the first point to consider is the new navigation. Select that link.

<shadi> http://ericeggert.net/badtf/index/

Shadi: This shows you a preview of the concept for the navigation through the demo. We know that there is too much white space right now, and we are working on that. The primary idea is a pad of the different pages. Next link and also a back link so you can always go through the demo through this top navigation. Below the pad is where the demo content starts.
... What we were thinking for each of the pages. For each page there will be four versions. An inaccessible version, the annotated inaccessible version, the accessible version, the annotated accessible version. You can see the report in line with the demo.
... Focus on the stop navigation. Questions?

<shadi> http://www.wienfluss.net/BAD/inbetween/inbetween_after.html

Shadi: The second link in the email leads to an annotated page.
... and shows the old navigation. An early draft. What you should be able to see some items in the page with a box around it. An information icon. A check that indicates something is fixed. That is what we mean by an annotated page. If you clink the icon it jumps to the bottom of the page there is a report that is about the problems on the page or what the fixes were. You can see this directly in the content by the small icons. So you don't have
... that is what we mean by annotated. The annotated accessible page will have icons for fixes.

Anna: I don't see ...I see three icons. The first annotation and shows H48 and H 42. What is the G115?

<Shawn> [[ in "annotated page", Shawn missed the icons until they were pointed out. suggest making them larger, which will also make them easier to hover over. Also, suggest that the full text be in the hover. ]]

Shadi: Please don't pay too much to these details. We are working on how to make them more accessible. These details have to do with the construction. The work and details are at the bottom don't take too seriously right now. We haven't added information yet.

William: You have four tabs, the accessibly version with the check icon. The other thing we got out of her email you will click the icon, you have a dummy for that one?
... the hover seems to be in place for all of them except the accessbile version. When I hover over the annotation like inaccessible version?

Shadi: there are not icons in the accessible version. We are working on the icons for access purposes. There are no icons there now. Shawn? Are there other questions?

<Zakim> Shawn, you wanted to ask about annotation inline and to ask if want discussion on the icons on the tabs.

Shawn: Do you want the level of discussions of the icons in the tab?

Shadi: I want to stick on that for a bit. The first link in Shawn's email.

Shawn: when I first saw the icons in the tab, I thought the ones on the left indicated actions. And a green check mark was about being live. Now I understand what you were doing with the icons. I wonder if other folks in EO had feelings about how this worked for it?

Wayne: I felt similar things. The red cross often means to close things.

Shadi: Good point.

William: Things in this vein, rather click on the annotated version and go there. The sorts of things that you click on the little icon, you don't jump down, you open up a balloon right there?

Shadi: A box opens up. I'll take that for consideration.

William: I guess this is a usability issue. Get in the habit of using bread crumbs. I find that to be popular now.

<shawn> [[ in nav: the X icons are often used to close tabs, and thus probably should not use just to indicate "inaccessible version". also, please do not hide link underline with focus. ]]

Shadi: Other comments?

Shawn: Do you want comments on the title?

Shadi: Yes. We didn't think about the title too much because it is dummy text.

Shawn: On the demo H1. Are you going away from the before and after demo? A sub title or something?

Shadi: Yes. We hadn't quite got there to the content of H1 itself yet.
... what would preferences be? Before and after demo...or?.

<shawn> [[ "Demo for making a web site accessible: Learn how to implement according to Web Content Accessibility Guidelines 2.0" is much more than this demo provides ]]

Anna: I don't really like this. In the face-to-face we discussed this. You can compare different things. You can compare inaccessible with accessible. Perhaps it is a little bit less cool but otherwise looks good. The point is to show that accessible and inaccessible can look the same. Before and After doesn't really say anytihing.

Shawn: What do you suggest?

Anna: At the moment I don't have any good ideas.

Shawn: Consider using a title and a subtitle. A very good acronym helps people remember, before and after demo: showing an inaccesible page and making it accessible.

Wayne: And show that through WCAG 2.0.

Shawn: Other ideas?

<Shawn> Before and After Demo (BAD): An example of an inaccessible website made accessible through WCAG 2.0

Shadi: A title might be "Improving a site with WCAG 2."

Anna: How about making inaccessible accessible with multi visual presentations. Or along that line?

Shawn: Any other brain storms?

Shadi: Things you want in there.

<Shawn> [[ title ideas around here ]]

William: Not too much emphasis on visual to meet the needs of blind people.

Anna: How about: Make an inaccessible site accessible without changing it's appearance?

Shawn: One thing I would say, whether or not that is paramount for the title, it needs to be in the text.

Shadi: I think it needs to be in the description.

Shawn: What else?

Wayne: On the tabs, why are they separated on the left and right?

Shadi: For grouping them. Two are dealing with the accessible version, and two for inaccessible.

Wayne: I find that distracting. Between the before and after page. It is usual to have them left justified.

<Shawn> [[ consider in the intro or description somewhere noting that one of the key things this shows is that the fixes for accessibility don't chagne the visual presentation ]]

Shadi: That is a good point. We tried several things but we settled on to keep the separation between the before pages and after pages. The white space in the middle is distracting or a preference which leads to a miss understanding of how this works?

Wayne: If you enlarge twice it shifts off the page. It can't be use after 200 % enlargement.
... that is level criterion two.

Shawn: For some people it helps to have a separation between the two sides. If the whole page were to zoom. And you can tell other things are on the right. I think the issue of tabs is that it not have that space in the middle. Instead of designing with rounded corners. Might you do the visual design differently. So the problem might be the visual metaphor of tabs..

Wayne: I think that is it.

William: The one with the tabs turns the page proper a certain gray. It looks as though the accessible version here is merely a screen shot with a pallette which is basically all gray space. Put the notation on the side?

Shadi: We did think about that. When enlarging, that does not work well.

William: Wayne makes the point that it disappears.

Shadi: I am not sure a few pixels matters. We could use a color.

William: Over 200 % there is not such thing as a right hand tab. I don't get to at all, it turns gray.

Shawn: It is a mark up problem. You are right but it is bug, not concept problem.

Wayne: Maybe consider that some more.

Shadi: We did wrestle with a bit. Please keep them coming.
... we are working on cleaning up the code. That people can reuse.

Shawn: We will go ahead even though you need to leave.

Shadi: I will follow IRC and be debriefed at some point.

Shawn: Any other thoughts, like the next example, a link to info. They are planning to put a previous example. If only four why not just list them? Does it help or add confusion?

William: You won't know if you don't try.

Shawn: Are there no objections to add that to an action?

Wayne: I wonder if that is necessary. You want to have as little direction on this as possible.

Andrew: Shadi said he wanted to clean up and get rid of the white space.

Shawn: An inaccessible version might be made inaccessible. Is it clear what is clear? Can you click on the accessible?

<Shawn> [[ instead of "Example 1: Home , [Next example: Info]" etc, maybe list the 4 so you can always see all of them ]]

Wayne: I haven't had too much trouble with that on other sites. The light border around the main section. A lot of sites that are like that.

Shawn: What do other people think? Do you expect it to be coded.

<Shawn> [[ note that with this design, some people will assume that the demo page is a static image... ]]

William: I don't expect it to be coded. A lot of what is surrounding is not active. And apparently can't be. I'm not sure if you want to read it?

Shawn: It is mildly humorous if you want to read it. Ok.
... other thoughts on the navigation and ornamentation?

Wayne: It is a good page that restyles very well.

Shawn: Any thoughts on the annotation. I put those in IRC to make bigger because I missed them.

Shawn: Let's send them some notes on the annotated page. In some browsers there are no boxes around the icons, and then some problems making them larger. To help make the icons more noticeable. Clear and not part of the design, consider doing a short key at the top.

Andrew: Definitely missing.

Shawn: At the bottom repeat them with description.

<Shawn> [[ annotated: 1. note in some browsers there are no boxes around the icons (e.g., opera). 2. to help make the icons more noticeable & clear that they're not part of the design, consider doing a short key/legend at the top and also at the bottom repeat them with the descrription ]]

William: I am not sure what that involves in the example.

Shawn: At the annotated page, at the very bottom they have the annotation.

Shawn: the icons might help.

William: I wonder if it has been considered to make the copyright area basically disappear unless you wanted to read it.

Shawn: Go back to the prototype where they have the tabs across the top. That is what they are going for.

William: This is not annotated.

Shawn: Scroll down to the bottom.

William: All of that stuff should be disappearble.

Shawn: I wonder if I think the navigation is great to get around. But if you use in a presentation you don't want all that. Thoughts on that?
... I think this is to consider, if I was using for presentation, if I would want to use screenshots.

Lisa: You would want to use a screen reader.

Shawn: We would use something to say this is a stripped down demo, and go here for the main page.
... consider an option to get plain demo pages or presentations etc. Without the navigation.

<Shawn> [[ consider option to get plain demo pages (without nav and notes at the top) for presentations, etc. ]]

Shawn: What else?

Wayne: Without the home news and survey on the left?

Shawn: that is part of the page to be before and after. You would want to be able to do a demo of this and listen in a screen reader to listen the bad, and then the accessbile version.

Wayne: let me linearize that and listen to that. The bad page will be a problem. On the repaired page can jump down to the prepared version.

Shawn: If you jump to the H1 you miss the image and the traffic today etc.
... there are four things before the navigation menu.

Andrew: fixing it would have another target.

Shawn: they have a jump to an accessible page.
... I don't know about the accessible version.

<Shawn> [[ ... maybe the "Jump to beginning of accessible demo page" is good enough for a presentation ? ]]

Shawn: Good feelings Lisa?

Lisa: I think so. I have a presentation in May this would be perfect to show then. Something in between that would be cool.

Shawn: Anything else?
... the next thing is -

WCAG 2.0 presentation slides. Proposal for disucssion:

* Retire the old About WCAG 2.0 (outline), and instead have separate small presentations that can be put together as needed.

Shawn: I did a video presentaiton for the Aussie way conference. In terms of time zones, it was early this morning for that part of the world. Anyway I purposely used our slides to see how they worked. I spent some time this week and updated them on the new information we have. Partly as I made changes in the powerpoint. Wayne or Sharron have helped finish out the HTML version and are aware of how tedious it is to do multiple versions.
... a proposal we had suggested that instead of having one long one, to have a couple of short presentations that an experienced presenter would customize. The least would start with one and do the other. Not optimum. Significantly reduce time of the editors. Thoughts on that. Instead one long presentation, break it down into benefits, components of ATAG and others.

<andrew> Regrets for second half of call - I have to leave now for another appointment

Shawn: I am talking overall what we had over all we had one long interpretation.
... one possibility is to update with a long presentation about WCAG 2 and a shorter about the benefits. Four things within a power point version, ...or do a short presentation.
... the question is previously we had a long presentation and a sub set of benefits for WCAG 2. Do we update both of those which means we have to four times. Instead of having a big long one, and a short sub set. And have three we can have together.

Wayne: Apart from the question of maintaining them, would you prefer it to be this way? I can make it maintainable. We can change the powerpoint. To make them automatically repeatable.

Shawn: You and I talked about that before. What does the group think? In terms of the videos we are providing, we definitely want to do short ones. I don't know what people with experience that change them, everyone I see on line changes them anyway.

Lisa: That is where I am with it.

Wayne: You don't have to let the technology make the decision for you.

Shawn: That is a good point. Ok. Any other thoughts overall we want to do with these slides? I assume you don't want to talk about specific edits. Any other things speak up.

Wayne: Would you like one long set and to edit and break up into short terms, and have both versions?

Shawn: Yes with unlimited resources.

Wayne: It may be hard at the beginning but maintenance is easy.

Shawn: We are not likely to do a lot of maintenance. We shouldn't be updating this much. But to be sure to figure out the simplest an update to the benefits presentation. If and when you have a generator set up. I am trying to make each change record every edit.

Wayne: Let me try this week? Actually it may not be as hard as I think. Getting the data in shape is one tedious part, but once that is done, should be less difficult.

Shawn: OK anything else about slides.

<Shawn> zakim, who is here?

William: The evaluation report. A lot of people I talk to about making the web accessible are focused on finding a site not accessible. See if we get into the politics or law, and see if we can affect. Have an evaluation report that is professional. The one you have looks good but is not a cook book recipe.

Open discussion on Education and Outreach

Shawn: To address William's point let's look at the evaluation suite.

<Shawn> http://www.w3.org/WAI/eval/

Shawn: This is what we had quite some time ago. For people doing evaluations, this is very out of date. I think that is what we have to address the point you make William?

William: All someone has to do is complain with a major web site.

Shawn: The answer is a draft tentatively titled "Responding to organizations that don't have accessible web sites." We have wanted to do this for quite some time. We are glad this fits in the WAI Age project.

<Shawn> Draft - working title: "Responding to organizations with inaccessible websites"

William: This will become an industry.
... the law will drive the accessibility project.

Wayne: I have another issue. There is a lot of media that is not W3C...Flash and that sort. There does not seem to be sufficient guidance in the sufficient techniques. Can we identify these as classes with certain visual formats. Add some cases to sufficient techniques.

Shawn: We encourage that development but we haven't made that a priority. We are talking to some organizations about what is the best way to publish the information, both the most useful and meets any requirements from a W3C perspective.

Shawn: Anybody is encouraged to submit techniques which we can incorporate into documents. If people have techniques they should publish themselves. Then we incorporate them into W3C./

Wayne: I think that encourages fragmentation. To encourage people on their own to make these changes.

Shawn: We are not going to allow it to be called sufficient until vetted. I think harmonization is a good idea. Individual developers can put out techniques they beleive in and the Working Group decides if that is sufficient.

Wayne: That is a good idea. Coming from sources that know about accessibility.

Shawn: We envision in a wiki.

Wayne: That sounds really good. I think the other thing we might consider the sections. Broken into a lot of sections. In the techniques. Make a group like a case 'f' to have these techniques to have these outcomes. A concern brought to me.

Shawn: We are encouraging the development of other techniques then incorporate in to our work. Any other comments? For next week I will be at the ATIA conference. We will be discussing the other comments. I think Shadi and Andrew will be leading that call.

Marco: Going back to the beginning of the meeting. Are you planning another meeting to talk about the demo pages. Before and After. The space between and other techniques. Would it be better for me to email suggestions?

Shawn: That is certainly one thing to do . It is up to you. Better to do by email. Keep in mind this is a prototype. Now is a good time for input. At the same time something doesn't work at that level of issue but could just be at the level of prototype.

Marco: email is better for me.

Shawn: Thank you Marco. Marco will send email comments.

<Shawn> [[ Marco will send email with comments on BAD ]]

Shawn: Next week we will discuss the WAI Age documents and we'll have drafts to review on that. Check the agenda page by Tuesday. Shadi, Andrew will lead the call.