Semantic Markup, Accessibility, HTML5 & CSS3

Matrissa_The_Enchant
Matrissa_The_Enchant
edited May 2013 in General Archive
Right now, the underlying HTML that the site generates is not "semantic" - for example, while the first "heading" on the page (the site name) uses the h1 tag, the second one (the site tagline) uses h3. And then the page name also uses h3, but it's possible to insert an h1, h2 or h3 in the page content itself. Essentially, the headings are being used to FORMAT the page (based on relative font size) and not to define the semantic nature, or MEANING of the content they are associated with on the page (i.e, this is a section, this is a subsection of the parent section, etc.). Aside from making it difficult (without custom CSS) to use (in this case) all the heading tags meaningfully, it also goes against basic accessibility recommendations, making the site harder to use by anyone who must use assistive or adaptive technology to access the site. So I do hope that your redesign includes time and effort to normalize how the HTML tags are used, and will at least consider the semantics of the markup if not it's actual level of accessibility. For more information about semantic HTML, this is a good basic article: "Using Semantic HTML":http://www.adobe.com/devnet/html5/articles/semantic-markup.html. For more information about accessibility, start with the Web Accessibility Initiative's "Web Content Accessibility Guidelines (WCAG) Overview":http://www.w3.org/WAI/intro/wcag.php.

To help with that, I also hope the plan is that the new site will be HTML5 and CSS3 compliant. :-) (By the way - I strongly recommend reviewing and following the "Web Hypertext Application Technology Working Group (WHATWG)":http://www.whatwg.org/ development of HTML rather than the W3C one. Just my opinion as a user experience and web designer myself - "check out their FAQ":http://wiki.whatwg.org/wiki/FAQ to get a better understanding of their purpose, history and position about HTML)

Comments

  • ZacZero
    ZacZero
    Posts: 8
    Strongly, strongly agree. Also a great approach for further future-proofing the site.

    +many.
  • Calion
    Calion
    Posts: 144
    +1. This goes along with a much-requested feature: Automatic tables of content. I've long wanted to use the h#. tags properly, but I end up having to just choose the level that gives me the text size I want.
  • Micah
    Micah
    Posts: 894
    We'll definitely do our best here, and I plan to use as many of the new HTML5 tags as make sense (nav, header, footer, section, etc, etc). I like living on the cutting edge, and that means using HTML5 and CSS3 to the fullest.

    On the flip side, we're looking to use "The Foundation grid":http://foundation.zurb.com/docs/components/grid.html, and one of the complaints laid against it is that it has classes like "four-columns" or "nine-columns" which are inherently non-semantic. I've wrestled with the various issues and I've decided the tradeoffs are worth it.

    Overall, I've done my best over the years to be semantic and embrace new web standards. We've got "hcards for user profiles":http://microformats.org/wiki/hcard, RSS and Atom feeds for campaigns, and we've "experimented with Pubsubhubbub":http://blog.obsidianportal.com/welcome-to-the-real-time-web/. I like the standards and I'll do my best to stick to them.
  • Matrissa_The_Enchant
    Matrissa_The_Enchant
    Posts: 18
    Standards are good so I'm glad you're planning to align with them, as much as is feasible within the constraints of the underlying framework you're using. :-)
Sign In or Register to comment.

June 2022
Baldur's Gate

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions