Tutorials/Feedback/PageStructure

From Education & Outreach
The work on this deliverable has primarily moved to Github. If you can, leave your comments as issues there. This wiki page is still monitored.

Quick fixes

Typos, wording suggestions and things that generally not need EOWG input/concensus.

  • Comment {Name, 2014-Month-Day}

Comments

Comments on the current incarnation of the tutorial, can be longer and may require EO.

'Intro paragraph'

Link to "Landmarks" broken.

'Why is this Important:'

"The content of the page is the reason why people are visiting websites in the first place" This statement is passive aggressive. Consider deleting.

" and not being able to find content or navigate inside individual pages can create major accessibility barriers." Sentence is awkward. Suggested edit: "The purpose of accessible page structure is to provide users with a usable means of finding content. Individuals with Disabilities can experience major accessibility barriers while attempting to navigate within individual pages of sites with poor structure."

'Page Sections'

Cleaned up for redundancies, awkward phrasing and clarification purposes...

Definitive sections identified on a page help people navigate around the page. Important parts of a page (navigation, for example) should be marked up on every website. Both HTML5 and WAI-ARIA provide mechanisms to mark up such sections in a meaningful way.

HTML5 provides distinctive elements for certain types of page sections, while WAI-ARIA utilizes the role attribute to add metadata that is mainly aimed at assistive technologies. Sometimes WAI-ARIA landmark roles will map directly to HTML5 elements, but this is not always the case.

While some HTML elements are meant to carry implicit landmark roles, this is not broadly supported at time of this writing. Therefore, the role should also be stated explicitly. In the case that HTML4 is used, page sections are commonly identified from

elements and/or headings.

Main page header

The main page header generally includes a logo and possibly additional information about the page such as a search or navigation. This area should be identified using an HTML5 <header> element and an explicit banner role. Typically there will be only one banner role, though it's important to note that since there could be several such elements, the banner role is not implicitly for <header> elements.

Generic sections

Non-essential sections of the page can generally be marked up as <section> elements. These carry an implicit role of region which basically is a generic landmark. Be careful not to overuse this type of section as it adds a lot of additional “noise” when assistive technology encountered them. Furthermore, they should always be labeled. A good usage for them might be to group items together.

Labeling sections

When there are multiple sections with the same role such as multiple navigation sections or sidebars, it is especially important to label them by using one of the following techniques.

(Trying to avoid directional phrases such as "on the left" or "see below")

Headings

Headings are used to add structure to content by fulfill two different roles:

  1. structuring the text in the main content section, and
  2. labeling the various components of the page.

Screen readers provide mechanisms which present a list of headings to the user that allows jumping to those individual headings. Headings can also provide visual clues that help to skim the page or find a specific section, especially when the user was distracted.

Content Structure

Aside from headings, additional methods of improving structure should be considered.

{Jonathan, 2014-October-23}

Proposals

Proposals for new sections and examples can go here.

  • Comment {Name, 2014-Month-Day}

Done

Quick Fixes

Comments

Proposals