Skip to content

Feb 06: Arrays and Objects

Learning Objectives

After today's class, you should be able to:

  • Use a screen reader and keyboard shortcuts to navigate a website.
  • Explain the difference between an array and an object in JavaScript.
  • Write for, for...in, and for...of loops over objects and arrays.

Lesson Outline

Part A [25 min]

Part B [35 min]

Lab [15 min]

  • Download zip; read instructions; ask questions

Screen Readers

Note

JAWS is the most popular screen reader according to the most recent WebAIM survey (Jan 2024). However, JAWS runs only on Windows and is a commercial product. The "built-in" screen readers work okay but are not nearly as good.

  1. Learn how to turn on the built-in screen reader for your OS:

  2. Note the following keyboard shortcuts on a sticky note:

    • Enable/disable screen reader
    • Cycle through links on a page
    • Step through headings on a page

  3. Visit a11yproject.com

    • Lower your laptop screen or (partially) cover it with something.
    • Are you able to navigate the website (not just a single page)?

  4. Take a look at the source code. Do you see anything interesting?

    • How is the code structured?
    • What semantic tags are used?
    • What aria attributes are set?

  5. Repeat steps 3 and 4 on another website (the worse the better).

    • Which website was easier to navigate? Why was this the case?

  6. Put both websites into WAVE.

    • How do the results compare between the two sites?
    • Do they match with your experience using each site?

A11Y Checklist

ChatGPT-4-turbo

How does the checklist provided by the A11Y project compare with the WCAG quick reference?

The A11Y Project Checklist and the WCAG Quick Reference both serve as resources for improving web accessibility, but they have different approaches, levels of detail, and intended audiences.

A11Y Project Checklist

  • A simplified, developer-friendly checklist focused on practical implementation.
  • Covers key accessibility considerations without strict conformance to WCAG criteria.
  • Organized into broad categories like content, design, development, and testing.
  • Uses plain language with explanations and links to additional resources.
  • Intended for developers, designers, and content creators who need an actionable list.

WCAG Quick Reference

  • A detailed reference directly tied to WCAG 2.x guidelines.
  • Provides success criteria, techniques, and failures for different levels (A, AA, AAA).
  • Includes filtering options for different conformance levels, technologies, and responsibilities.
  • Written in a more technical and structured format, aligning with legal and regulatory requirements.
  • Intended for accessibility specialists, compliance teams, and developers ensuring conformance.

Key Differences

Feature A11Y Project Checklist WCAG Quick Reference
Approach Practical & high-level Detailed & standards-based
Tied to WCAG? Not directly, but aligned Directly mapped to WCAG success criteria
Audience Developers, designers, content creators Accessibility specialists, developers ensuring compliance
Format Simple checklist with explanations Technical reference with filtering options
Legal Compliance No explicit compliance framework Essential for legal and WCAG compliance

Which One to Use?

  • If you want a quick, actionable checklist for accessibility improvements: A11Y Project Checklist.
  • If you need to ensure WCAG compliance for legal or regulatory reasons: WCAG Quick Reference.

Using both can be effective—starting with the A11Y checklist for practical fixes and then verifying compliance using the WCAG reference.