ADA Title II WCAG 2.1 AA Requirements for Web and Mobile Content

Conformance Requirements:

To meet WCAG 2.1 Level AA, city websites, digital files, and subscribed services must follow all Level A and Level AA rules, including new ones added in WCAG 2.1.
WCAG 2.1 works with WCAG 2.0, so if you meet 2.1 standards, you also meet 2.0.

WCAG 2.1 Changes:

WCAG 2.1 adds 17 new rules to improve accessibility for mobile devices, low vision users, and experiences for users with cognitive disabilities making content easier to use without changing WCAG 2.0 standards.

Some Key Standards for WCAG 2.0 AA:

Keyboard Navigation: All features must work with a keyboard.
Color Contrast: Text and background colors must be easy to read with a minimum contrast ratio of 4.5:1 for normal text.
Resizable Text: Users must be able to resize text up to 200% without losing content or function.
Navigable Content: Users must be able to navigate and determine the user location on a page.
Labels and Instructions: Forms and controls must have clear labels and instructions.
Error Identification: Users must be alerted about errors with clear instructions to fix them.

Note: These standards are not inclusive. A full list of WCAG 2.0 AA standards may be referenced on W3C’s website.

New Standards in WCAG 2.1 AA:

Orientation: Content must work in portrait and landscape modes.
Input Purpose: Fields collecting user info must be labeled for easier autofill.
Responsiveness: Content should work well on small screens (like phones).
Non-Text Contrast: Buttons and controls must also meet contrast requirements of a 3:1 ratio.
Text Spacing: Users can change text spacing without breaking the design.
Hover or Focus Content: Pop-ups or tooltips must be easy to dismiss or interact with.
Keyboard Shortcuts: Users can turn off or adjust single-key shortcuts.
Pointer Gestures: Complex gestures (like two-finger swipes) must have simple alternatives.
Pointer Cancellation: Actions triggered by touch can be stopped or undone.
Label in Name: Visible labels should match what assistive tech announces.
Motion Controls: Features triggered by shaking or tilting must have another option (like changing the orientation of the content from portrait to landscape on a phone).
Status Messages: Updates (like form submissions) should notify users without disrupting their application flow.

Content Owner Responsibility

Content Audit and Remediation Identification:

Accessibility and Quality Assurance Reports:
- Make use of available reports (e.g. Site Improve) to identify and prioritize efforts.
Clear Headings and Labels:
- Use a logical heading structure (H1, H2, H3) to organize content; all files and websites must use hierarchy in order (cannot create H4 before the creation of H2 or H3).
- Buttons, links, and form fields must be identified by the appropriate type and annotated.
  - Webpages should support this without intervention.
  - PDFs may require manual correction if the file was not correctly structured.
Assessing Navigation Aids:
- Validate search helps users find specific content by identifying key words and forced page results.
- We already display breadcrumb navigation to show users their location on our website; simplify the sitemap to reduce child pages. Ideally, our information architecture should be fewer than 4 levels.
Descriptive Link Text:
- Use meaningful link text (e.g., "Read More About Accessibility" instead of "Click Here").
Accessible Forms:
- Group related fields together and use labels and instructions to guide users.
  - Simplify PDF forms when possible and understand that fillable forms are not supported.
  - Use a webform when possible to support accessibility and record retention.
Logical Tab Order:
- Arrange interactive elements in a logical order so users can navigate efficiently using the Tab key.
  - Tab Order is Header, Main Body, Sidebar, Footer.
  - Follow recommended guidance for how to structure the main content/sidebar paragraph types, which publishers and/or content authors can control.
Make use of the Branding Guidelines:
- Digital content should follow the latest version of branding guidelines which provide details on how to structure content correctly for public outreach.
Document Compliance:
- Record pages that meet conformance and those requiring fixing.
  - Site Improve reports should show a fewer number of flagged page results.
  - PDF files will have to be performed manually.
    - Remove files from the CMS that are not necessary.
    - Ensure proper records retention for source file management beyond the 2 year website retention period.
    - Update files that need to remain hosted on the public website, ensuring WCAG 2.1 AA compliance.
      - Follow the updated file naming convention and mirror the file name in e-records to support future file reconciliation.
- Note any exceptions with justification.
Content Updates:
- Test new pages, features, or updates before publishing.

Note: the Web Team will implement Site Improve Pre-publish for more proactive accessibility validation.

Information Technology Responsibility

Web Team and Developer Testing and Remediation Identification

Keyboard Navigation Testing:
- Use of Tab, Shift + Tab, and Enter keys navigate through the site.
- Interactive elements are accessible and follow a logical sequence.
Keyboard Accessibility:
- Visible focus indicators (e.g., outlines) navigate appropriately with a keyboard.
  - For links or buttons in a PDF, highlight effect activates when selected using the keyboard
  - Link text changes color when tabbed into.
  - PDF is tagged for accessibility and read back appropriately with use of a screen reader tool.
Consistent Navigation:
- Consistent menus and layouts across all pages to promote consistent navigation patterns.
  - For subscription services, recommend a consistent menu approach if possible to support.
Responsive Design:
- Optimize navigation for all devices, ensuring menus and content are accessible on small screens.
Screen Reader Testing:
- Use web-based developer tools (e.g. WAVE) to highlight accessibility issues like navigation and color contrast to outline remediation requirements.
- Use web-based user experience tools(e.g. NVDA) for testing different visual impairments to identify improvements.

Note: This would be ideally performed by a contracted and certified tester or service.

Mobile Testing:
- Test navigation on different mobile devices to ensure menus, buttons, and links are accessible and responsive.
Focus Indicators Check:
- Verify that a visible focus indicator appears when navigating via keyboard like link text highlighting.
Real User Research Testing:
- If possible, conduct research to verify keyboard-only or screen reader users are able to navigate the site and provide their feedback.
Logical Tab Order Verification:
- Test the navigation order using the Tab key to ensure users move through elements logically.

Ideal Testing

ITD public website and app development teams will conduct platform and website testing for functional performance of accessibility requirements. If budget allows, additional contracted services can support testing and auditing services to support remediation and conformance requirements.

1. Preparation

Testing Tools:
- Accessibility Evaluation Tools: WAVE, Site Improve
- Screen Readers: NVDA
- Mobile and Tablet Devices (iOS, Android)
Testing Scope:
- Test all pages (e.g., homepage, forms, media files, dynamic content).
- Include variations such as desktop, mobile, and tablet views.
Success Criteria:
- WCAG 2.1 AA success criteria are tested (see standards list below).

2. Testing Steps

Automated Testing:
- Run automated tests using Site Improve and/or WAVE on all pages.
Keyboard Accessibility Testing
- Navigate the entire site using only a keyboard (Tab, Shift + Tab, Enter, Esc) and verify:
  - Logical order
  - Visible focus indicators
  - All interactive elements (links, buttons, menus) are accessible.
Screen Reader Testing
- Contract with a certified tester or service to validate content within webpages, files, and applications have:
  - Proper reading order
  - Accurate, meaningful image alt text (different that using a tool to confirm the presence of alt text)
  - Descriptive labels for forms and controls
  - Clear announcements for status messages and error alerts
Responsive and Mobile Testing
- Test sites, applications, and digital files on different devices and screen sizes.
- Verify content reflows or is responsive without losing functionality (e.g., menus, forms).
Media and Forms Testing
- Test video and audio content for captions, transcripts, and audio descriptions; animated GIFs or other media representations must also be assessed for anti-seizure requirements.
  - Media file owners should be contacted to remove unnecessary media files that cause a potential risk, or replace the media file with a more appropriate alternative.
- Verify form fields:
  - Have clear labels
  - Support autofill for input purposes (e.g., name, address)
  - Provide error notifications that are perceivable to all users

3. Evaluation and Documentation

Report Issues:
- Categorize issues by severity (critical, moderate, low).
- Determine appropriate team or content owner to remediate issue.
Re-Test After Fixes:
- Re-run automated and manual tests on updated content to confirm fixes.

4. Ongoing Monitoring

Regular Audits:
- Schedule periodic accessibility audits (e.g., quarterly).

Resources

WCAG 2.0 AA Guidelines: https://www.w3.org/TR/WCAG20/#wcag-2-layers-of-guidance

WCAG 2.1 AA Guidelines: https://www.w3.org/TR/2023/REC-WCAG21-20230921/