Differences

This shows you the differences between two versions of the page.

--- eg-146:lecture13 [2012/03/08 23:06] – [Improving Accessibility with ARIA] eechris
+++ eg-146:lecture13 [2012/03/08 23:38] – [Basic HTML Structure] eechris
@@ Line 21: / Line 21: @@
   * [[#naming_elements|Naming Elements with class, id and title attributes]]
   * [[#Commenting your code]]
+===== Session Example =====
+This is the example that we will use throughout this session: [[/eg-146/basic-html/gaudi.html]]
 ===== The document template =====
@@ Line 277: / Line 281: @@
 [[http://www.w3.org/WAI/intro/aria|WAI-ARIA]] (Web Accessibility Initiative's Accessible Rich Internet Applications), or ARIA for short, adds additional attributes to elements that can help further improve the accessibility of web pages.
-For example:
+Examples:
- * ''role="application"'', ''role="banner"'', ''role="complementary"'', ''role="contentinfo"'', ''role="form"'', ''role="main"'', ''role="navigation"'', ''role="search"''
+  * ''role="application"'', ''role="banner"'', ''role="complementary"''
+  * ''role="contentinfo"'', ''role="form"'', ''role="main"'',
+  * ''role="navigation"'', ''role="search"''
 [[http://www.bruceontheloose.com/htmlcss/examples/chapter-03/improving-accessibility-aria.html|Example]]
 ===== Naming elements =====
+Use ''class'' or ''id''.
+  * id is unique in the document: ''id="document-unique-name"''
+  * class can apply to a number of document elements: ''class="name"''
+  * There can be multiple class names in a single class attribute: ''classs="name anothername"''
+[[http://www.bruceontheloose.com/htmlcss/examples/chapter-03/naming-with-class-id.html|Example]]
+----
+<note>
+  * Use id to identify a single element that you later want to be able to refer to later, for example as the target of a link, for styling, or for JavaScript.
+  * Use class for elements that have a common purpose that you want to be able to style all in one go.
+</note>
+===== Adding the Title Element to Your Code =====
+<code html>
+<element ... title="A sentence or two describing the element's content. Usually shown in a tooltip">
+ ...
+</element>
+</code>
+[[http://www.bruceontheloose.com/htmlcss/examples/chapter-03/adding-title-attribute.html|Example]]
 ===== Commenting your code =====
+<code html>
+<!-- anything between these symbols is ignored by the browser -->
+</code>
+[[http://www.bruceontheloose.com/htmlcss/examples/chapter-03/adding-comments.html|Example]]