Where's the HTML and where's the structure?

[remi]

For really blind, let's assume they are using computer readers, then I think the same point still applies, they read the text in the HTML and will ignore pretty much all the HTML structure.

Sorry, but that's wrong. You should do your homework, because "a growing number of countries around the world have introduced legislation which either directly addresses the need for websites and other forms of communication to be accessible to people with disabilities, or which addresses the more general requirement for people with disabilities not to be discriminated against.

In the UK, the Disability Discrimination Act 1995 (DDA) does not refer explicitly to website accessibility, but makes it illegal to discriminate against people with disabilities. The DDA applies to anyone providing a service; public, private and voluntary sectors. The Code of Practice: Rights of Access - Goods, Facilities, Services and Premises document[8] published by the government's Disability Rights Commission to accompany the Act does refer explicitly to websites as one of the "services to the public" which should be considered covered by the Act." [source: Wikipedia article about Web accessibility]

Remi

[haakoo]

Would that apply to all websites?
This would mean that any portfolio of an artist would be shut down as the info is graphical and mostly not textual.
Simply make a redirect-option as one would for flash/mobile sites and have a plain textual page with the acknowledgment and explanation what the site is about.

Hans

[covoxer]

Sorry, but that's wrong. You should do your homework, because "a growing number of countries around the world have introduced legislation which either directly addresses the need for websites and other forms of communication to be accessible to people with disabilities, or which addresses the more general requirement for people with disabilities not to be discriminated against.

In the UK, the Disability Discrimination Act 1995 (DDA) does not refer explicitly to website accessibility, but makes it illegal to discriminate against people with disabilities. The DDA applies to anyone providing a service; public, private and voluntary sectors. The Code of Practice: Rights of Access - Goods, Facilities, Services and Premises document[8] published by the government's Disability Rights Commission to accompany the Act does refer explicitly to websites as one of the "services to the public" which should be considered covered by the Act." [source: Wikipedia article about Web accessibility]

Remi

And how this applies to the all product information on labels, manuals and documentation? Can blind read them? Is this discrimination too?

Nevertheless, as I say, it all depends on designer. If you want to make a 100% accessible site, you can do it in WD.

[remi]

No, John. Ron's main point in this thread was semantically meaningful HTML. This is an important point if we're talking about Web accessibility. Are you really able to create this in WD?

Remi

[covoxer]

No, John. Ron's main point in this thread was semantically meaningful HTML. This is an important point if we're talking about Web accessibility. Are you really able to create this in WD?
Remi

Sure, why not, put it into a placeholder. Hide it on invisible layer if you don't want it to mess the design. Or create a separate version of the site, which is actually a best solution because pure text predesigned for text reading is much easier to understand than typical design, even if it is technically accessible.
And answer please about the accessibility of all printed materials, information tables in public places e.t.c.

[Charles Moir]

There is nothing in the HTML we create that stops readers working.

The main criteria for Accessibility concerns providing things like alternative text for graphics, links, audio, not using using colour to impart important information etc. All this is possible if you so wish.

And for the 'tag soup' comment you must be looking at some other products or web pages. Our pages are incredibly simple HTML, one line after another and not a lot else. Try looking at the HTML produced by other web authoring tools or indeed look at any typically complex website if you really want to see indecipherable tag soup.

[remi]

A knowledged (X)HTML/CSS expert would use the following simple markup:

<p>The following is an example streaming video. 
It's easy to embed your own YouTube videos, or any of 
the tens of thousands of third party 'web widgets' 
using the Placeholder feature. Most web widgets provide 
a short snippet of HTML that you can attach to a graphic. 
So the following rectangle acts as a placeholder for the 
streaming video. To see the actual HTML snippet used, 
open the Web Properties dialog and look at the Placeholder 
tab.</p>

But, no you're on your WYSIWYG absolute position trip, don't care about semantic HTML and prefer to export a tag soup par excellence:

<div style=" font-size: 12px; font-weight: normal;">
   <div class="tl" style="left: 0px; top: 5px;">The following is an example streaming video. It’s easy to embed your own YouTube videos, or any of the tens of thousands </div>
   <div class="tl" style="left: 0px; top: 22px;">of third party ‘web widgets’ using the Placeholder feature.  Most web widgets provide a short snippet of HTML that you </div>

   <div class="tl" style="left: 0px; top: 39px;">can attach to a graphic. So the following rectangle acts as a placeholder for the streaming video. To see the actual HTML </div>
   <div class="tl" style="left: 0px; top: 56px;">snippet used, open the Web Properties dialog and look at the Placeholder tab.</div>
  </div>

The problem is, you're lost in the idea to export a page the same as it's shown on Xara's canvas (the so often discussed WYSIWYG principle).

Remi

[covoxer]

A knowledged (X)HTML/CSS expert would use the following simple markup:

....

But, no you're on your WYSIWYG absolute position trip, don't care about semantic HTML and prefer to export a tag soup par excellence:

....

The problem is, you're lost in the idea to export a page the same as it's shown on Xara's canvas (the so often discussed WYSIWYG principle).

The first one is a plain unformatted text which you can easily insert into placeholder. You don't need to use wysiwyg tools to enter unformatted text.
First one will look unpredictably in a browser, second one will look exactly how you want it too.
So what's the point of using first one if it has no advantages from the designers point of view?

Now back to the accessibility. Let's take an example.

Here's the site exported with WD without any particular attention to the accessibility by the author:
http://webdesigner.xara.com/

Here's the NVDA, open source, free voice reader software:
http://www.nvda-project.org/

Open this site in Opera for example, and read with NVDA.
Do you hear any influence of the tag mess?
Is this inaccessible site?
Try, and you'll see. Or hear actually.

[Hexen53]

Tag Soup? Using standard HTML tags (HTML is a markup language, so without tags there's no markup) should make the page easily readable by humans even within the code. Here is a boring exerpt from one of my pages:

<h1>Writing Your Constitution</h1>

<h2 class="header" id="headings">Constitution Headings (also known as Clauses)</h2>
<p>Below are the headings which appear in most constitutions, with an explanation of what information usually comes under each one. This is only a guide though - only you will know whether it would need to be changed a bit for your individual organisation or group.</p>

<h3 class="sub1less">Name of the organisation</h3>

<p>A straightforward one to begin - just the full name of your organisation or group. It is worth mentioning here though that if your group would like to apply for charitable status in the future, then you should check the Office of the Scottish Charity Regulator's (OSCR) website (www.oscr.org.uk) to make sure that the name you plan to use has not already been taken by another charity.</p>

<h3 class="sub1less">Aims and/or Objectives</h3>

<p>This clause might also seem fairly straightforward, but it is worth taking a bit of time to talk it through. You might have a definite idea of what your organisation or group wants to do now, but could the aims change with time? Once your constitution has been formerly accepted by the membership of the group, it will take more work to try to change it. It is better to take time at the beginning to decide on the aim or aims of the group, both for now and in the future.</p>

<p>If your group is interested in applying for Charitable Status, then you'll need to read OCSR's booklet, "Meeting the Charity Test" which includes a full list of Charitable Purposes under the Charities and Trustees Investment (Scotland) Act 2005.</p>

<h3 class="sub1less">Powers</h3>

<p>This section deals with the specific functions related to the group such as providing services or activities to further the aims and objectives. The Powers clause can also outline the group's ability to:</p>

<ul>
<li>Raise funds</li>
<li>Employ staff</li>
<li>Lease/hire or purchase property</li>
<li>Take out insurance</li>
<li>Liaise with other organisations</li>
</ul>

---

To me, the above seems fairly readable and illustrates the main heading <h1> at the top, with sections at a secondary level <h2> and within that, sub headings at level 3 <h3> Paragraphs are all <p> and I even included a dreaded bulleted list. The formatting of the page is all done from the external style sheet, with a body font size of 90% (so it can be scaled by browsers easily). Remember that some web pages have been around before IE8 and the latest FF arrived.

----

Here's 4 paras from Gary's explanation of the Toolbar:

<div style="">
<div class="tl" style="left: 0px; top: 197px;"><span style=" font-weight: bold;">The Website Toolbar</span>*There are 7 website-specific buttons at the top of the screen on the </div>
<div class="tl" style="left: 0px; top: 211px;">Infobar:</div>
</div>
<div style="">
</div>
<div style="">
<div class="tl" style="left: 0px; top: 239px;"><span style=" font-weight: bold;">1. Export & Preview Website</span>*This button publishes the website to your computer and opens </div>
<div class="tl" style="left: 0px; top: 252px;">a browser preview window in which you can preview your site.</div>
</div>
<div style="">
</div>
<div style="">
<div class="tl" style="left: 0px; top: 280px;"><span style=" font-weight: bold;">2. Export Website</span>*This button creates all the files and folders needed to publish your </div>
<div class="tl" style="left: 0px; top: 294px;">website to your website host. You do this step just before you publish your website to your </div>
<div class="tl" style="left: 0px; top: 308px;">web host’s servers.</div>
</div>
<div style="">
</div>
<div style="">
<div class="tl" style="left: 0px; top: 336px;"><span id="Link" style=" font-weight: bold;">3. Link</span>*This button opens the <span style=" font-weight: bold;">Website Properties</span>*menu but to the <span style=" font-weight: bold;">Links</span>*tabbed section. </div>
<div class="tl" style="left: 0px; top: 350px;">From the Links tabbed section you can add a variety of links both internal and external. You </div>
<div class="tl" style="left: 0px; top: 364px;">can link to a page on your website, an external website, a web image, an anchor, or a popup </div>
<div class="tl" style="left: 0px; top: 378px;">object. A picture is worth a thousand words. Click these links to see what they do.</div>
</div>
<div style="">
</div>
<div style="">

---

Yes you can find the text relatively easily but sentences and paras are broken at odd points and there is nothing to denote the structure.

More in next post.

[Hexen53]

As for the need for printed materials having to meet accessibility requirements. All UK Councils would be expected to be able to produce any of their publications in a format suitable for visually impaired if requested (no you can't just photocopy onto A3).

In Adobe Acrobat there is a tool for making your pdfs accessible - http://www.adobe.com/accessibility/ (there's a bit in there about your US federal govt requirements as well).

In Word it is recommended that you do not use bold, italic etc to format paras but use styles (correctly) as these convey meaning to the text. http://www.webaim.org/techniques/word/

After all this... I am not trying to knock XWD - it is a fantastic tool that can easily produce graphically rich web pages and does things that only Flash could have achieved before. For a band's website or for showing off your artwork it would be great but for many text heavy sites that need structure I don't think it works.

Oh, and I'm no evangelist about disability issues - my pages are far from perfect but I try where I can.

Ron