Comments on: The importance of placement of HTML elements in a document http://www.marcozehe.de/2009/10/07/the-importance-of-placement-of-html-tags-in-a-document/ Musings, tips and tricks about the accessible software world Thu, 09 Feb 2012 00:25:59 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: Goulven http://www.marcozehe.de/2009/10/07/the-importance-of-placement-of-html-tags-in-a-document/comment-page-1/#comment-26001 Goulven Wed, 18 Nov 2009 12:53:17 +0000 http://www.marcozehe.de/?p=187#comment-26001 The practical reason for appending dynamic content at the end of the body is to avoid CSS styles cascading down to them. I've run into that issue while testing a lightbox clone, but I hadn't realised it would have this troublesome side-effect... The practical reason for appending dynamic content at the end of the body is to avoid CSS styles cascading down to them. I’ve run into that issue while testing a lightbox clone, but I hadn’t realised it would have this troublesome side-effect…

]]> By: Aaron http://www.marcozehe.de/2009/10/07/the-importance-of-placement-of-html-tags-in-a-document/comment-page-1/#comment-24004 Aaron Sat, 24 Oct 2009 07:00:20 +0000 http://www.marcozehe.de/?p=187#comment-24004 I believe using "aria-live" from the WAI-ARIA standard would help here. http://www.w3.org/TR/wai-aria/#liveregions "The purpose of these attributes is to indicate that content changes may occur without the element having focus, and to provide the assistive technology information on how to process those content updates." I believe using “aria-live” from the WAI-ARIA standard would help here.

http://www.w3.org/TR/wai-aria/#liveregions

“The purpose of these attributes is to indicate that content changes may occur without the element having focus, and to provide the assistive technology information on how to process those content updates.”

]]> By: Luca http://www.marcozehe.de/2009/10/07/the-importance-of-placement-of-html-tags-in-a-document/comment-page-1/#comment-23938 Luca Fri, 23 Oct 2009 07:58:10 +0000 http://www.marcozehe.de/?p=187#comment-23938 Good post. However I think that to avoid frustration to users, screen readers should have a mean to indicate when and where a user action caused a change in html content, and a command to quickly move to that location. Good post. However I think that to avoid frustration to users, screen readers should have a mean to indicate when and where a user action caused a change in html content, and a command to quickly move to that location.

]]> By: viljamisalminen (Viljami Salminen) http://www.marcozehe.de/2009/10/07/the-importance-of-placement-of-html-tags-in-a-document/comment-page-1/#comment-23307 viljamisalminen (Viljami Salminen) Mon, 12 Oct 2009 06:56:51 +0000 http://www.marcozehe.de/?p=187#comment-23307 <strong>Twitter Comment</strong> <a href="http://twitter.com/viljamisalminen" title="Twitter Comment" rel="nofollow"> <div title="viljamisalminen (Viljami Salminen)" style="float:left;margin-right:10px;padding:0;width:60px;height:60px;background:url(http://www.marcozehe.de/wp-content/plugins/chatcatcher/picbg.jpg) no-repeat top;cursor:hand;"> </div> <div title="viljamisalminen (Viljami Salminen)" style="float:left;margin-left:-70px;margin-right:10px;padding:0;width:60px;height:60px;background:url(http://purl.org/net/spiurl/viljamisalminen) no-repeat top;cursor:hand;"> </div> </a> The importance of placement of HTML elements in a document [link to post]<br /><br /> - <a href="http://chatcatcher.com" target="_blank" rel="nofollow">Posted using Chat Catcher</a> Twitter Comment


The importance of placement of HTML elements in a document [link to post]

– Posted using Chat Catcher

]]> By: The importance of placement of HTML elements in a document « Marco’s accessibility blog » Auto Post Script http://www.marcozehe.de/2009/10/07/the-importance-of-placement-of-html-tags-in-a-document/comment-page-1/#comment-23138 The importance of placement of HTML elements in a document « Marco’s accessibility blog » Auto Post Script Thu, 08 Oct 2009 19:11:05 +0000 http://www.marcozehe.de/?p=187#comment-23138 [...] This was an issue I ran into today, so thought I’d blog about it. Visually, these two methods may vary a bit in styling, but have the same effect: You click something, and some text or images become visible or are being replaced by something else, without a page being reloaded. For a screen reader user, the two methods make a profound difference. In order for a screen reader to present a web page to the blind user, a form of accessible tree traversal or even DOM or HTML parsing has to take place so the screen reader knows which elements there are, and in what order they appear. CSS styling is then used to determine whether something is hidden or visible, formatted as a block or the like. Also, some attributes for text etc. are being derived from this information. But positioning information is always secondary to the actual order in the source HTML, be it hard-coded or generated via JavaScript. To put it in other words: Even a three-column page layout will appear to the screen reader user in a single-column, top-to-bottom fashion for easier readability. The consequence is that, in the second example, the new content will always be found at the end of the screen-reader-rendered content. On Windows, this is at the end of the virtual buffer, even below the copyright notice or the like. On Linux and the Mac, one also has to use navigational methods to get to the end of the rendered content (for example by navigating all the way to the end with Orca or by getting to the last element while interacting with the HTML content on Mac). This is true across browsers (Firefox, IE, Safari). So to read the content that newly appeared in the thickbox, the user has to scroll all the way to the end, do whatever is necessary there, and then return to the top and navigate down using heading navigation or the like to find the place they left off. This is not very efficient or intuitive. The same can be observed on Facebook where if you add a friend, the question whether you really want to send the friend request, will be appended and is found far down at the very bottom of the page for a screen reader user. Visually, it appears in the vicinity where a sighted user clicked the “Add as friend” button. The Mozilla example, on the other hand, replaces the text right below the list, making it easily accessible within the context the user is currently working in anyway. The user never has to leave the general vicinity to get from introduction to the “Meet the team” etc. parts. Navigation back and forth is quick and efficient. [...] The importance of placement of HTML elements in a document Marco Wed, 07 Oct 2009 15:50:59 GMT [...] [...] The importance of placement of HTML elements in a document Marco Wed, 07 Oct 2009 15:50:59 GMT [...] It would be great if we could detect use of a screen reader. Many enhancements aren’t appropriate for the visually impaired and the simplest solution is to not apply them. Good write-up. One more reason to arrange page elements in a logical order, as opposed to however is strikes the designer’s fancy (no offense intended to designers, but you just can’t treat a Web page like a painting). BTW, has anyone centralized all the reasons why logical arrangement of webpage elements is a good idea? If not, I think it may be worth it. Gee. These new-fangled Twitter gadgets have made these comments… (almost) unreadable. And where’s the ultimate DOM tutorial when you need it? Download Free Article Spinner Thanks. [...] [...] This was an issue I ran into today, so thought I’d blog about it. Visually, these two methods may vary a bit in styling, but have the same effect: You click something, and some text or images become visible or are being replaced by something else, without a page being reloaded. For a screen reader user, the two methods make a profound difference. In order for a screen reader to present a web page to the blind user, a form of accessible tree traversal or even DOM or HTML parsing has to take place so the screen reader knows which elements there are, and in what order they appear. CSS styling is then used to determine whether something is hidden or visible, formatted as a block or the like. Also, some attributes for text etc. are being derived from this information. But positioning information is always secondary to the actual order in the source HTML, be it hard-coded or generated via JavaScript. To put it in other words: Even a three-column page layout will appear to the screen reader user in a single-column, top-to-bottom fashion for easier readability. The consequence is that, in the second example, the new content will always be found at the end of the screen-reader-rendered content. On Windows, this is at the end of the virtual buffer, even below the copyright notice or the like. On Linux and the Mac, one also has to use navigational methods to get to the end of the rendered content (for example by navigating all the way to the end with Orca or by getting to the last element while interacting with the HTML content on Mac). This is true across browsers (Firefox, IE, Safari). So to read the content that newly appeared in the thickbox, the user has to scroll all the way to the end, do whatever is necessary there, and then return to the top and navigate down using heading navigation or the like to find the place they left off. This is not very efficient or intuitive. The same can be observed on Facebook where if you add a friend, the question whether you really want to send the friend request, will be appended and is found far down at the very bottom of the page for a screen reader user. Visually, it appears in the vicinity where a sighted user clicked the “Add as friend” button. The Mozilla example, on the other hand, replaces the text right below the list, making it easily accessible within the context the user is currently working in anyway. The user never has to leave the general vicinity to get from introduction to the “Meet the team” etc. parts. Navigation back and forth is quick and efficient. [...] The importance of placement of HTML elements in a document Marco Wed, 07 Oct 2009 15:50:59 GMT [...] [...] The importance of placement of HTML elements in a document Marco Wed, 07 Oct 2009 15:50:59 GMT [...] It would be great if we could detect use of a screen reader. Many enhancements aren’t appropriate for the visually impaired and the simplest solution is to not apply them. Good write-up. One more reason to arrange page elements in a logical order, as opposed to however is strikes the designer’s fancy (no offense intended to designers, but you just can’t treat a Web page like a painting). BTW, has anyone centralized all the reasons why logical arrangement of webpage elements is a good idea? If not, I think it may be worth it. Gee. These new-fangled Twitter gadgets have made these comments… (almost) unreadable. And where’s the ultimate DOM tutorial when you need it? Download Free Article Spinner Thanks. [...]

]]> By: grok http://www.marcozehe.de/2009/10/07/the-importance-of-placement-of-html-tags-in-a-document/comment-page-1/#comment-23114 grok Thu, 08 Oct 2009 09:05:09 +0000 http://www.marcozehe.de/?p=187#comment-23114 Gee. These new-fangled Twitter gadgets have made these comments... (almost) unreadable. And where's the ultimate DOM tutorial when you need it? Gee. These new-fangled Twitter gadgets have made these comments… (almost) unreadable.

And where’s the ultimate DOM tutorial when you need it?

]]> By: Felix PleÅŸoianu (claudeb) 's status on Thursday, 08-Oct-09 08:49:23 UTC - Identi.ca http://www.marcozehe.de/2009/10/07/the-importance-of-placement-of-html-tags-in-a-document/comment-page-1/#comment-23113 Felix PleÅŸoianu (claudeb) 's status on Thursday, 08-Oct-09 08:49:23 UTC - Identi.ca Thu, 08 Oct 2009 08:49:30 +0000 http://www.marcozehe.de/?p=187#comment-23113 [...] More reasons to design webpages logically. http://www.marcozehe.de/2009/10/07/the-importance-of-placement-of-html-tags-in-a-document/ [...] [...] More reasons to design webpages logically. http://www.marcozehe.de/2009/10/07/the-importance-of-placement-of-html-tags-in-a-document/ [...]

]]> By: Felix PleÅŸoianu http://www.marcozehe.de/2009/10/07/the-importance-of-placement-of-html-tags-in-a-document/comment-page-1/#comment-23111 Felix PleÅŸoianu Thu, 08 Oct 2009 08:45:31 +0000 http://www.marcozehe.de/?p=187#comment-23111 Good write-up. One more reason to arrange page elements in a logical order, as opposed to however is strikes the designer's fancy (no offense intended to designers, but you just can't treat a Web page like a painting). BTW, has anyone centralized all the reasons why logical arrangement of webpage elements is a good idea? If not, I think it may be worth it. Good write-up. One more reason to arrange page elements in a logical order, as opposed to however is strikes the designer’s fancy (no offense intended to designers, but you just can’t treat a Web page like a painting).

BTW, has anyone centralized all the reasons why logical arrangement of webpage elements is a good idea? If not, I think it may be worth it.

]]> By: Sean Hogan http://www.marcozehe.de/2009/10/07/the-importance-of-placement-of-html-tags-in-a-document/comment-page-1/#comment-23089 Sean Hogan Wed, 07 Oct 2009 20:32:31 +0000 http://www.marcozehe.de/?p=187#comment-23089 It would be great if we could detect use of a screen reader. Many enhancements aren't appropriate for the visually impaired and the simplest solution is to not apply them. It would be great if we could detect use of a screen reader. Many enhancements aren’t appropriate for the visually impaired and the simplest solution is to not apply them.

]]> By: palleman (Palle Zingmark) http://www.marcozehe.de/2009/10/07/the-importance-of-placement-of-html-tags-in-a-document/comment-page-1/#comment-23086 palleman (Palle Zingmark) Wed, 07 Oct 2009 19:24:47 +0000 http://www.marcozehe.de/?p=187#comment-23086 <strong>Twitter Comment</strong> <a href="http://twitter.com/palleman" title="Twitter Comment" rel="nofollow"> <div title="palleman (Palle Zingmark)" style="float:left;margin-right:10px;padding:0;width:60px;height:60px;background:url(http://www.marcozehe.de/wp-content/plugins/chatcatcher/picbg.jpg) no-repeat top;cursor:hand;"> </div> <div title="palleman (Palle Zingmark)" style="float:left;margin-left:-70px;margin-right:10px;padding:0;width:60px;height:60px;background:url(http://purl.org/net/spiurl/palleman) no-repeat top;cursor:hand;"> </div> </a> RT @icaaq: The importance of placement of HTML tags in a document: [link to post] (New blog post by @MarcoZehe) #accessibility<br /><br /> - <a href="http://chatcatcher.com" target="_blank" rel="nofollow">Posted using Chat Catcher</a> Twitter Comment


RT @icaaq: The importance of placement of HTML tags in a document: [link to post] (New blog post by @MarcoZehe) #accessibility

– Posted using Chat Catcher

]]> By: The importance of placement of HTML elements in a document « The BAT Channel http://www.marcozehe.de/2009/10/07/the-importance-of-placement-of-html-tags-in-a-document/comment-page-1/#comment-23083 The importance of placement of HTML elements in a document « The BAT Channel Wed, 07 Oct 2009 18:40:51 +0000 http://www.marcozehe.de/?p=187#comment-23083 [...] The importance of placement of HTML elements in a document Marco Wed, 07 Oct 2009 15:50:59 GMT [...] [...] The importance of placement of HTML elements in a document Marco Wed, 07 Oct 2009 15:50:59 GMT [...]

]]> By: The importance of placement of HTML elements in a document « AccessTech News http://www.marcozehe.de/2009/10/07/the-importance-of-placement-of-html-tags-in-a-document/comment-page-1/#comment-23082 The importance of placement of HTML elements in a document « AccessTech News Wed, 07 Oct 2009 18:39:44 +0000 http://www.marcozehe.de/?p=187#comment-23082 [...] The importance of placement of HTML elements in a document Marco Wed, 07 Oct 2009 15:50:59 GMT [...] [...] The importance of placement of HTML elements in a document Marco Wed, 07 Oct 2009 15:50:59 GMT [...]

]]> By: stevefaulkner (stevefaulkner) http://www.marcozehe.de/2009/10/07/the-importance-of-placement-of-html-tags-in-a-document/comment-page-1/#comment-23078 stevefaulkner (stevefaulkner) Wed, 07 Oct 2009 17:33:38 +0000 http://www.marcozehe.de/?p=187#comment-23078 <strong>Twitter Comment</strong> <a href="http://twitter.com/stevefaulkner" title="Twitter Comment" rel="nofollow"> <div title="stevefaulkner (stevefaulkner)" style="float:left;margin-right:10px;padding:0;width:60px;height:60px;background:url(http://www.marcozehe.de/wp-content/plugins/chatcatcher/picbg.jpg) no-repeat top;cursor:hand;"> </div> <div title="stevefaulkner (stevefaulkner)" style="float:left;margin-left:-70px;margin-right:10px;padding:0;width:60px;height:60px;background:url(http://purl.org/net/spiurl/stevefaulkner) no-repeat top;cursor:hand;"> </div> </a> The importance of placement of HTML tags in a document: [link to post] (New blog post by @MarcoZehe) #accessibility<br /><br /> - <a href="http://chatcatcher.com" target="_blank" rel="nofollow">Posted using Chat Catcher</a> Twitter Comment


The importance of placement of HTML tags in a document: [link to post] (New blog post by @MarcoZehe) #accessibility

– Posted using Chat Catcher

]]> By: DavidBolter (David Bolter) http://www.marcozehe.de/2009/10/07/the-importance-of-placement-of-html-tags-in-a-document/comment-page-1/#comment-23077 DavidBolter (David Bolter) Wed, 07 Oct 2009 17:32:36 +0000 http://www.marcozehe.de/?p=187#comment-23077 <strong>Twitter Comment</strong> <a href="http://twitter.com/DavidBolter" title="Twitter Comment" rel="nofollow"> <div title="DavidBolter (David Bolter)" style="float:left;margin-right:10px;padding:0;width:60px;height:60px;background:url(http://www.marcozehe.de/wp-content/plugins/chatcatcher/picbg.jpg) no-repeat top;cursor:hand;"> </div> <div title="DavidBolter (David Bolter)" style="float:left;margin-left:-70px;margin-right:10px;padding:0;width:60px;height:60px;background:url(http://purl.org/net/spiurl/DavidBolter) no-repeat top;cursor:hand;"> </div> </a> great blog from @MarcoZehe on how best to dynamically change web content accessibly (and sensibly really) [link to post]<br /><br /> - <a href="http://chatcatcher.com" target="_blank" rel="nofollow">Posted using Chat Catcher</a> Twitter Comment


great blog from @MarcoZehe on how best to dynamically change web content accessibly (and sensibly really) [link to post]

– Posted using Chat Catcher

]]> By: fernmuendlich (Maik Wagner) http://www.marcozehe.de/2009/10/07/the-importance-of-placement-of-html-tags-in-a-document/comment-page-1/#comment-23074 fernmuendlich (Maik Wagner) Wed, 07 Oct 2009 17:11:00 +0000 http://www.marcozehe.de/?p=187#comment-23074 <strong>Twitter Comment</strong> <a href="http://twitter.com/fernmuendlich" title="Twitter Comment" rel="nofollow"> <div title="fernmuendlich (Maik Wagner)" style="float:left;margin-right:10px;padding:0;width:60px;height:60px;background:url(http://www.marcozehe.de/wp-content/plugins/chatcatcher/picbg.jpg) no-repeat top;cursor:hand;"> </div> <div title="fernmuendlich (Maik Wagner)" style="float:left;margin-left:-70px;margin-right:10px;padding:0;width:60px;height:60px;background:url(http://purl.org/net/spiurl/fernmuendlich) no-repeat top;cursor:hand;"> </div> </a> .@MarcoZeheabout The importance of placement of HTML tags (s/tags/elements) in a document: [link to post] | not "please", "damned"!<br /><br /> - <a href="http://chatcatcher.com" target="_blank" rel="nofollow">Posted using Chat Catcher</a> Twitter Comment


.@MarcoZeheabout The importance of placement of HTML tags (s/tags/elements) in a document: [link to post] | not “please”, “damned”!

– Posted using Chat Catcher

]]> By: pigsonthewing (Andy Mabbett) http://www.marcozehe.de/2009/10/07/the-importance-of-placement-of-html-tags-in-a-document/comment-page-1/#comment-23071 pigsonthewing (Andy Mabbett) Wed, 07 Oct 2009 16:52:36 +0000 http://www.marcozehe.de/?p=187#comment-23071 <strong>Twitter Comment</strong> <a href="http://twitter.com/pigsonthewing" title="Twitter Comment" rel="nofollow"> <div title="pigsonthewing (Andy Mabbett)" style="float:left;margin-right:10px;padding:0;width:60px;height:60px;background:url(http://www.marcozehe.de/wp-content/plugins/chatcatcher/picbg.jpg) no-repeat top;cursor:hand;"> </div> <div title="pigsonthewing (Andy Mabbett)" style="float:left;margin-left:-70px;margin-right:10px;padding:0;width:60px;height:60px;background:url(http://purl.org/net/spiurl/pigsonthewing) no-repeat top;cursor:hand;"> </div> </a> I read: The importance of placement of HTML tags in a document - Marco’s accessibility blog [link to post]<br /><br /> - <a href="http://chatcatcher.com" target="_blank" rel="nofollow">Posted using Chat Catcher</a> Twitter Comment


I read: The importance of placement of HTML tags in a document – Marco’s accessibility blog [link to post]

– Posted using Chat Catcher

]]> By: sriniworld (Srinivasu) http://www.marcozehe.de/2009/10/07/the-importance-of-placement-of-html-tags-in-a-document/comment-page-1/#comment-23069 sriniworld (Srinivasu) Wed, 07 Oct 2009 16:43:38 +0000 http://www.marcozehe.de/?p=187#comment-23069 <strong>Twitter Comment</strong> <a href="http://twitter.com/sriniworld" title="Twitter Comment" rel="nofollow"> <div title="sriniworld (Srinivasu)" style="float:left;margin-right:10px;padding:0;width:60px;height:60px;background:url(http://www.marcozehe.de/wp-content/plugins/chatcatcher/picbg.jpg) no-repeat top;cursor:hand;"> </div> <div title="sriniworld (Srinivasu)" style="float:left;margin-left:-70px;margin-right:10px;padding:0;width:60px;height:60px;background:url(http://purl.org/net/spiurl/sriniworld) no-repeat top;cursor:hand;"> </div> </a> rt @stevefaulkner: The importance of placement of HTML tags in a document: [link to post] (New blog post by @MarcoZehe) #accessibility<br /><br /> - <a href="http://chatcatcher.com" target="_blank" rel="nofollow">Posted using Chat Catcher</a> Twitter Comment


rt @stevefaulkner: The importance of placement of HTML tags in a document: [link to post] (New blog post by @MarcoZehe) #accessibility

– Posted using Chat Catcher

]]> By: planetmozilla (Planet Mozilla) http://www.marcozehe.de/2009/10/07/the-importance-of-placement-of-html-tags-in-a-document/comment-page-1/#comment-23068 planetmozilla (Planet Mozilla) Wed, 07 Oct 2009 16:30:36 +0000 http://www.marcozehe.de/?p=187#comment-23068 <strong>Twitter Comment</strong> <a href="http://twitter.com/planetmozilla" title="Twitter Comment" rel="nofollow"> <div title="planetmozilla (Planet Mozilla)" style="float:left;margin-right:10px;padding:0;width:60px;height:60px;background:url(http://www.marcozehe.de/wp-content/plugins/chatcatcher/picbg.jpg) no-repeat top;cursor:hand;"> </div> <div title="planetmozilla (Planet Mozilla)" style="float:left;margin-left:-70px;margin-right:10px;padding:0;width:60px;height:60px;background:url(http://purl.org/net/spiurl/planetmozilla) no-repeat top;cursor:hand;"> </div> </a> Marco Zehe: The importance of placement of HTML tags in a document: This was an issue I ran into today, so thou.. [link to post]<br /><br /> - <a href="http://chatcatcher.com" target="_blank" rel="nofollow">Posted using Chat Catcher</a> Twitter Comment


Marco Zehe: The importance of placement of HTML tags in a document: This was an issue I ran into today, so thou.. [link to post]

– Posted using Chat Catcher

]]>