A Working Scratch Site

Building a web page..


old graphic print of a grumpy lion 

Sites for Gary

Sites for Berrie and Casey

  • Training
    This Site is Now Archived

  • 352B
    This Site is Now Archived

Points for Consideration

Outlines Creating an outline

There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure.

Source: 4.3. HTML5 Outlines

Why we care about outlines.

Document outlines rely on heading structure, and this was and is used to generate outlines for assitive technology.See the results of an earlier webaim survey here. Screen Reader Survey #5 (2014) 65% of Respondents use headings to navigate through the page.

Does the HTML5 header element help?

The HTML5 header element does not take part in the outline algorithm. The header element is not sectioning content; it doesn't introduce a new section.

Link to the W3C reference

What about HTML5 and the h1 tags?

Why we are told that using multiple h1 tags is GOOD
Why we are told using multiple h1 tags is BAD


  • Conformance and Validation are not the same thing.
  • There are differences between the w3c validator and the nu markup checker.
  • There are differences between W3C HTML and WHATWG HTML conformance.
  • DTD and Schema are not equivalent.

Source: Check It Before You Wreck It


Video One: Basic Default Form

Initial evaluation of Bootstrap NavBar

I personally thought that Bootstrap's Nav Bars were beautiful, and wanted to incorporate their style into the web page. This is particularly true for login pages and search boxes, where those who use assistive technology will sometimes use these features as "page landmarks" in order to get their bearings on a complicated page.
To supplement information provided to a screen reader, I added labels to the form elements. Adding labels helps most assistive technology, but not equally. Each technology tends to pair with a particular browser; therefore the improvement in performance is uneven between both the technologies and browsers.

Video Two: Add Labels to Basic Form on Chrome

I found that on on Chrome, adding labels assists the screenreader, but does not announce error messages.

Because of HTML5's new form field features, I was uncertain whether the issue was HTML5, or the browser. I did a couple of supplemental tests (videos included) and uncovered that this seems to be a browser issue.

Video Three: Add Labels to Basic Form on Firefox

On Firefox, adding labels assists the screenreader, and allows the native HTML5 validation response to be read out loud by the screenreader

If you play the video, you can hear the response to an invalid entry in the form field.
Time: 40sec Screen Reader Voice: "Alert. Please enter email address."


Video Four: Collapsed No Focus

Here I discover that the screen reader announces that there is a navigation button that is collapsed, but I cannot reach it--it has no focus.

Video Five: Basic HTML5 Form on Chrome

Testing basic HTML5 form functionality on Chrome. The alerts aren't read in a logical manner.

Video Six: Basic HTML5 Form on Firefox

Testing basic HTML5 form functionality on Firefox. It has a better performance than Chrome in terms of alerts.

Looking for Problems

Image One: Console Tool

Screenshot showing use of a browser console tool, in this case showing error messages of failed script delivery.
Using Chrome Console Tool in Browser

Captions are displayed on the web page, but not in outline view. Alt text is necessary for screen-readers.

Image Two: W3C Nu Validator

Screenshot showing the interface for the NuValidator.
Interface for W3C NuValidator for HTML5

This is the validator recommended for validating HTML5

Image Three: W3C Validator

Screenshot showing interface for standard W3C validator.
Standard W3C Validator

Older validator for HTML

Finding the Right Styles

Image Four: Chrome Browser Tool

Screenshot showing css style information generated by using the F12 key on Chrome.
Using F12 on Chrome to inspect for styles

Using F12 key to bring up Chrome developer tool

Image Five: Firefox Console Inspector

Screenshot showing the use of Firebug to extract css colors from USFSP webpage.
Using Firebug to find css colors from USFSP web page

Firebug developer tool

Image Six: Another View Console Inspector

Screenshot showing the use of Firebug to extract css styles from USFSP webpage.
Using Firebug to find css styles from USFSP web page

Example of how USFSP CSS styles were obtained.

Deciding on a Layout

Image Seven: Bootstrap mixed mobile and desktop

Screenshot showing an example provided by Bootstrap for mixed mobile and desktop framework.
Example provided by Bootstrap for mixed mobile and desktop framework

Baseline wireframe

Image Eight: Code Project on Bootstrap mixed layout

Screenshot showing the project using a mixed Bootstrap framework.
Screenshot showing the project using the mixed Bootstrap framework

Project using mixed grid

Image Nine: Final Decision Responsive Desktop

Screenshot showing the preferred framework where content is not too crowded.
Preferred layout allows better visual cognition -- content is not too crowded.

Responsive Desktop