Tag Archives: figma

accessibility, tutorial

When Accessibility Issues in Google Apps Require External Solutions

Leave a comment

  1. Complex Navigation or Interaction Challenges:
    • Google apps generally follow WCAG standards, but certain complex workflows (e.g., navigating large spreadsheets or documents with multiple interactive elements) may not fully support screen readers or keyboard-only navigation.
    • Example: Managing extensive pivot tables in Google Sheets may not be fully screen-reader-friendly, requiring a switch to Microsoft Excel or a tool like JAWS for better accessibility.
  2. Non-Editable Content Embedded in Google Docs or Slides:
    • If you embed non-accessible elements such as images without alt text, charts, or external media with no captions, these cannot always be fully fixed inside Google apps.
    • Solution: Use external software like Adobe Acrobat Pro to enhance accessibility in exported PDFs or a dedicated media editor to caption videos.
  3. Lack of Advanced Semantic Structuring:
    • Google Docs supports headings, but for advanced semantic markup (e.g., ARIA roles or custom landmarks), its capabilities are limited. If you need to ensure accessibility for complex documents, moving to Microsoft Word or HTML editors with ARIA support is necessary.
  4. Inadequate Support for Custom Accessibility Features:
    • Custom interactive features (e.g., custom menus or JavaScript-like interactions in Google Slides) may lack robust ARIA tagging or keyboard navigation.
    • Solution: Transition to software like PowerPoint or InDesign, which allows detailed accessibility tagging.
  5. Color Contrast and Design Issues:
    • Google Sheets and Slides allow some color customization, but there are no built-in tools to check and enforce WCAG-compliant contrast ratios.
    • Solution: Use external contrast-checking tools or design software with integrated accessibility checks (e.g., Figma or Adobe XD).
  6. Non-Compliant Form Design in Google Forms:
    • Google Forms often falls short in supporting accessible error identification, labels, or custom ARIA roles. Advanced forms with full WCAG compliance may require a platform like Microsoft Forms or a web development environment.
  7. No Detailed Accessibility Auditing:
    • Google Workspace apps do not provide native tools for auditing accessibility across documents or designs.
    • Solution: Use external auditing tools such as WAVE or Axe to identify and resolve WCAG violations.
  8. Language and Multilingual Accessibility:
    • Google Docs supports some basic language tagging but cannot fully address accessibility for multilingual documents with specific pronunciation or semantic needs.
    • Solution: Use advanced editing tools that allow precise language tagging, like Microsoft Word or InDesign.

How to Decide When to Move to a Different Program

You should consider moving away from Google apps when:

  • The task involves a critical WCAG violation that Google Workspace cannot address (e.g., no alt-text for key visuals or inaccessible interactive content).
  • External auditing tools consistently flag issues that cannot be resolved using Google’s built-in accessibility options.
  • You need advanced customization or integration of assistive technologies (e.g., full ARIA implementation, detailed tagging, or robust form accessibility).

 

Example workflows:

1. Document Accessibility in Microsoft Word

  • Why Word? Microsoft Word has advanced accessibility tools, including a built-in Accessibility Checker and robust support for semantic structure (e.g., heading levels, alt text for images, table summaries).
  • Example Workflow:
    1. Use Word’s Styles feature to apply semantic headings (Heading 1, Heading 2, etc.).
    2. Add alt text to images by right-clicking the image > Edit Alt Text.
    3. Use the Accessibility Checker (Review tab) to identify and fix issues such as missing headings or poor color contrast.
    4. Export to a tagged, accessible PDF using Save As PDF with the “Create Accessible PDF” option.

2. Presentation Accessibility in Microsoft PowerPoint

  • Why PowerPoint? PowerPoint includes tools to ensure slide layouts are screen-reader-friendly, proper reading order, and video captioning.
  • Example Workflow:
    1. Use built-in slide layouts (e.g., Title Slide, Content Slide) to ensure proper semantic structure for screen readers.
    2. Add alt text to all images, charts, and graphs.
    3. Use the Accessibility Checker (Review tab) to catch issues like insufficient text contrast.
    4. Add closed captions or subtitles to embedded videos via the Insert Captions feature.

3. Data Accessibility in Microsoft Excel

  • Why Excel? Excel is more screen-reader-friendly than Google Sheets and offers features like named ranges and accessible pivot tables.
  • Example Workflow:
    1. Use Named Ranges instead of referencing raw cell coordinates (e.g., =SUM(SalesData)).
    2. Add descriptive headers to all columns and rows for better navigation.
    3. Use the Accessibility Checker to identify common issues like merged cells, which can confuse assistive technologies.
    4. Export to a PDF with accessibility tags to retain structure.

4. Accessible PDFs with Adobe Acrobat Pro

  • Why Acrobat Pro? It’s the industry standard for ensuring that PDFs are fully accessible, with tools for tagging, alt text, and reading order adjustments.
  • Example Workflow:
    1. Import your document from Word or PowerPoint and open it in Acrobat.
    2. Use the Accessibility Tool to run a full check of your document.
    3. Fix issues such as missing tags, reading order problems, and alt text directly in Acrobat.
    4. Verify compliance with the built-in Accessibility Checker.

5. Form Accessibility in Microsoft Forms or JotForm

  • Why These Tools? These platforms provide greater control over form labels, field instructions, and error messages than Google Forms.
  • Example Workflow:
    1. Add clear and descriptive labels to every form field.
    2. Include placeholders or instructions for input requirements (e.g., “Enter your 10-digit phone number”).
    3. Enable validation for required fields with error messages.
    4. Test the form with screen readers to confirm navigation and readability.

6. Design Accessibility in Figma or Adobe XD

  • Why Figma/Adobe XD? These tools allow detailed accessibility checks during the design process, including color contrast and interactive elements.
  • Example Workflow:
    1. Use plugins like Contrast or Stark to ensure your color palette meets WCAG contrast requirements.
    2. Annotate designs with accessibility notes (e.g., “This button must have ARIA role=’button'”).
    3. Export designs with accessible descriptions for developers to implement.

7. Website Accessibility with WordPress

  • Why WordPress? WordPress supports accessibility-ready themes and plugins to ensure WCAG compliance for websites.
  • Example Workflow:
    1. Choose an accessibility-ready theme (marked in the theme directory).
    2. Use plugins like WP Accessibility to add ARIA roles, skip links, and other enhancements.
    3. Test the site with tools like WAVE or Axe to identify accessibility barriers.

8. Interactive Accessibility in ARIA-Supported Development Environments

  • Why Use ARIA? For custom interactive content, ARIA (Accessible Rich Internet Applications) helps ensure assistive technologies can interact with dynamic elements.
  • Example Workflow:
    1. Develop interactive content in HTML using ARIA roles (e.g., role=”dialog”).
    2. Use tools like Deque Axe or Google Lighthouse to test ARIA implementation.
    3. Include keyboard navigation testing to ensure all users can interact with your content.