Lab 2: Accessible Tables

Perform a quality assurance check on a web page

View the page's HTML source markup, Firefox's Web Developer add-on, and Accessibility Evaluation add-on menu to perform a quick audit on the HTML code for the page.

Tips

• Use Firefox's Web Developer toolbar quickly perform quality assurance checks
  • Information menu > View the page's meta tag information
  • Information menu > View the document outline (heading elements (h1, h2, etc), properly nested)
  • Miscellaneous menu > Show comments
  • Outline menu > Outline deprecated elements (check show element names when outlining)
  • Tools menu > Validate HTML
• Use HTML Validator add-on in status bar to quickly validate a page
  • double-click the icon to open the validation page. Set the options to use the SGML Parser algorithm for validation
• Use the Firefox's Accessibility Extension add-on to identify potential accessibility issues on this page
  • Accessibility menu > Reports > Accessibility Issues, use FAE Rule Set

Create a structured XHTML 1.0 Strict web page

1. Create a new XHTML 1.0 Strict document saved as C:\wamp\www\labs\lab2\lab2.html
2. Add HTML comments, title, and meta elements to your web page to provide "page-level" information
3. To save typing time, copy and paste the main text content from text of the lab2 document into your lab2.html body section
4. Mark-up the body content semantically, duplicating the screen capture shown below
   • Use heading tags to mark up the document outline
   • Use paragraphs and inline tags where appropriate
   • The link "Room and Board Rates for 2015-2016" should reference the file rates.html, which you will should create in the current folder C:\wamp\www\labs\lab2\
5. Once marked-up, validate your mark-up to XHTML 1.0 strict standards
6. Fix any accessibility issues reported by the Accessibility Menu > Report > FAE Rule Set
   • Note: Ignore the FAE Rule that asks you to check "Most web pages should contain at least one navigation bar"
   • To learn more about an accessibility issue identified, double-click the message
   • To understand the rationale behind a rule, select the rule and click the Rationale button
   • To learn more about the accessibility rules that your page is passing
     • uncheck the options "Remove 0 Frequency" and "Remove Not Applicable (NA)"
     • click Refresh to see the rule sets your page passes or NA

lab2.html Document Outline

lab2.html screen snapshot

lab2.html Screen Capture

Create an accessible HTML table

1. Create a new page named rates.html inside your C:\wamp\www\labs\lab2 folder
   • This page is referenced from the link in lab2.html
   • Add HTML comments, title, and meta elements to your web page to provide "page-level" information
2. To save typing time, copy and paste the content from room and board ratesinto your rates.html body section
3. Mark-up the body content semantically, duplicating the screen capture shown below
   • The simple data table mark-up is illustrated beneath the screen capture.
     • Table headers (th) with scope attributes are included as heading information
     • A table summary is included; the table border attribute is set to 1
4. Once marked-up, validate your mark-up to XHTML 1.0 strict standards
5. Fix any accessibility issues reported by the Accessibility Menu > Report > FAE Rule Set
   • Note: Ignore the FAE Rule that asks you to check "Most web pages should contain at least one navigation bar"

rates.html screen snapshot

rates.html screen snapshot

rates.html block elements screen snapshot

Table markup

Note: Table information can be displayed using Firefox's Web Developer toolbar > Information > Display Table Information and Firefox's Web Developer toolbar > Outline > Table > Table Captions and Table Cells