1 of 16

Enhancing Accessibility in UX/UI Design with Figma axe for designers

November 7, 2024

© 2021, University of Phoenix. | For internal use only.

2 of 16

Speaker – Sunni Curtis

2

© 2021, University of Phoenix. | For internal use only.

3 of 16

Speaker – Janet Fukuda

3

© 2021, University of Phoenix. | For internal use only.

4 of 16

Sharing our ADA Process

The University of Phoenix is supporting and assisting fellow higher education institutions by sharing our approach for integrating accessibility early into the product lifecycle.

4

© 2021, University of Phoenix. | For internal use only.

5 of 16

Why Annotate?

3 Key reasons:

    • Ensures smoother hand-off from designer to developer
    • Legal compliance
    • Quantified ADA need:
      • 80,000 enrollments
      • 35,000 disclosed disability

5

© 2021, University of Phoenix. | For internal use only.

6 of 16

What to Annotate – where to start?

Headings

    • Provides page structure

Buttons

    • Do things

Links

    • Take users places

Images

    • Conveys information / emotion

6

© 2021, University of Phoenix. | For internal use only.

7 of 16

Heading �Annotations�

Career Planning Tool Homepage

    • Levels are sequentially nested

Impact of Missing Semantic Heading Levels

    • Structure would be lost
    • Challenges for users listening to content

7

© 2021, University of Phoenix. | For internal use only.

8 of 16

Button & Link Annotations

Changes content dynamically = button

    • Singular URL stepper page flow

Navigational wayfinding = link

    • Back to Academic plan

8

© 2021, University of Phoenix. | For internal use only.

9 of 16

Image Annotation�Options

Informative Annotations

    • Provide essential information about the image

Actionable Annotations

    • Guide users on actions to take based on the alt text

Decorative Annotations

    • Non-informative

Annotation Options

    • Use default label alone
    • Edit default label with explicit alt text

9

© 2021, University of Phoenix. | For internal use only.

10 of 16

Annotation Basics Demo

10

© 2021, University of Phoenix. | For internal use only.

11 of 16

What Our Managers Are Saying

As a Product Manager, I've seen firsthand how the axe for designer's plugin brings much-needed clarity and visualization to accessibility requirements. Axe helps by making accessibility less obscure for product teams. This tool helps drive a deeper empathy for end customers, ensuring that accessibility is a core part of the design process, and not an afterthought.

11

© 2021, University of Phoenix. | For internal use only.

12 of 16

What Our Designers Are Saying

Using the Axe Figma plugin has allowed my team to incorporate accessibility sooner into the design process. As a result, we can identify and address potential accessibility concerns before we begin development, improving the experience for all of our students.

12

© 2021, University of Phoenix. | For internal use only.

13 of 16

What Our Engineers Are Saying

We are currently integrating it directly into the automated test suit which is helping us to detect accessibility issues early. Also, because multiple engineers are working on the development process, integrating axe helps to maintain consistent accessibility standards across different parts of the application.

13

© 2021, University of Phoenix. | For internal use only.

14 of 16

What Our Students Are Saying

I'm incredibly grateful for the support I receive at Phoenix as a student with learning disabilities. I often face challenges, but the staff here goes above and beyond to promise that I have access to a high-quality education. They give equitable resources and diversity, making a significant difference while on this learning journey. Thank you, Phoenix.

14

© 2021, University of Phoenix. | For internal use only.

15 of 16

Thank You & Connect With Us!

15

© 2021, University of Phoenix. | For internal use only.

16 of 16

Resources

16

© 2021, University of Phoenix. | For internal use only.