Slide6-7 Exercise Two: Creating A Well Structured Web Page

Open and navigate each of the following web pages using a screen reader and only the keyboard. Recommended to disconnect the mouse and cover the video screen display. For this exercise you will need the following tools.

• A screen reader like Narrator for Windows or VoiceOver for iOS devices.
  Learn more about Screen Reader Technology
• An accessibility checking tool like The WebAIM Wave.
• A colour contrast checker like The WebAIM Contrast Checker.
• An Image Descriptions Resource like The Accessible Publishing Knowledge Base.
• Accessibility Guidelines (WCAG)
• Application semantic guidelines (ARIA)

Using the keyboard navigate the web page to find the following elements.

• A unique web page title.
• Visible skip links at the top of the page.
• Unique text labels for Buttons and Links (Avoid generic labels like click here, read more, learn more).
• Check images for alt attribute, or another method of providing text descriptions.
• A Heading hierarchy to clearly define content relationships.
• Colours with good contrast.

Construct your web pages so that page layout can be identified by Region Landmarks, content relationships can be understood by a Heading Hierarchy, and the keyboard responds intuitively.

• Step1: Page Layout
• Step2: Region Landmarks
• Step3: Content Relationship
• Step4: Dialog Content
• Step5: TabPanel Content
• Download exercise web pages