Accessibility in Self Service

  • Published on Jul 31, 2025
Prev Next

Changes we made to ensure accessibility in our Frisbii Media Self Service.

General Changes

  1. Contrast Issues: Changed the main color (used in main navigation and many other places across the app) from #18a0fb to #00558b to improve contrast.

  2. Empty Links/Buttons: If a link or button contains no text, its function or purpose is not presented to the user. This can cause confusion for keyboard and screen reader users. This issue is addressed by:

    1. Adding hidden text inside such links/buttons (visible only to screen readers), or

    2. Adding the aria-label attribute.

  3. Missing First-Level Heading: Pages without an <h1> heading now include a screen-reader-only <h1>. Displaying a visible single-page heading doesn’t make contextual sense for our layout.

  4. Skipped Heading Levels: Adjusted heading structure to avoid skipping levels (e.g., using <h5> directly after <h2>).

  5. Missing Form Labels: Ensured all form controls have corresponding labels.

  6. Missing Fieldsets: Grouped related checkboxes and radio buttons within appropriate <fieldset> elements.

  7. Orphaned Form Labels: Ensured all form labels are correctly associated with their respective form controls.

  8. Suspicious link text: This basically means that it isn’t clear where the link goes based on the linked text.

  9. Redundant link: When two adjacent links go to the same place.

    App-Wide Fixes

  • Fixed contrast issues in main navigation links.

  • Added aria-label attributes to "Previous" and "Next" pagination links (which previously had empty text). Next link is also changed to span if you are one link away from the last one (when last number link and next button are linking to the same page)

  • Fixed contrast issue on the back button.

  • For the mobile menu collapse/expand button (which had no visible text), added a hidden <span> for screen reader accessibility.

    Page-Specific Fixes

1. Overview Page

  • Added aria-label to invoice download links.

  • Updated tile headings from <h2> to <h1>.

  • Removed "more" link from "User administration" section when "Manage users" link is displayed

  • Added <span> element visible only for screen-readers to the links with more text explaining the link destination for all "More" links on the page

2. Personal Data

  • Added a screen-reader-only global <h1> heading.

  • Fixed contrast issue on the “Two-Factor Authentication” button.

  • Added aria-label to “change” link to provide more information

3. Addresses

  • Fixed empty link for address creation.

  • Added screen-reader-only global <h1> heading.

  • Fixed heading level: changed <h5> to <h1> in the delete future address changes modal.

4. Address Creation/Update Forms

  • Wrapped address type radio buttons and subscriptions checkboxes in <fieldset> elements.

5. Payments Page

  • Added missing <h1> heading.

  • Updated individual payment method section headings from <h4> to <h1>.

6. Add Credit Card Page

  • Added missing <h1> heading.

  • Added missing form label for the payoneCheck hidden input field.

  • orphaned form label - card number label made into a span, since it's not an actual label as target element is inside iframe

7. Add Payment Method to Subscription

  • Changed existing <h2> to <h1> for the main page title.

8. Subscriptions

  • Added a screen-reader-only global <h1> heading.

  • Changed section titles from <h2> to <h1> for Subscriptions and Purchases.

  • Removed incorrectly used aria-labelledby from the mobile view of the purchases list.

  • Added aria-label to the purchase code modal title.

  • Suspicious link text: added screen-reader-only text to the link in the addon details link

  • Layout table: switched from table layout to css style table-like look for a purchases list

9. Subscription pause/cancel/delivery pause (and undo pages for each)

  • Changed existing <h2> to <h1> for the main page title.

10. Add/Change Bank Account

  • Changed existing <h2> title to <h1>.

11. Add/Change PayPal Account

  • Changed existing <h2> title to <h1>.

12. User Administration Page

  • Added screen-reader-only global <h1> heading.

  • Added aria-label to CSV download links in pagination.

13. User Administration – Manage Users Page

  • Changed existing <h2> to <h1>.

  • Changed modal headers from <h5> to <h1> to avoid heading level skips.

  • Added aria-label attributes to user action buttons (invite, delete, invite all).

  • Added aria-label attributes to the search form input and invite user modal fields.

14. Wallets Page

  • Added screen-reader-only <h1> heading.

  • suspicious link text - added span with screen-reader-only link with more text explaining the link destination

15. Change Email / Change Email Confirmation Code / Change Personal Info / Change Password Pages

  • Changed existing <h2> headings to <h1>.

16. Churn prevention steps

  • Changed existing <h2> headings to <h1> and <h3> to <h2> on all process steps

17. Subscription cancellation

  • Removed opacity from placeholder select value for cancellation date select for issue based subscriptions

18. Change password page

  • Added role=”button” and aria-label to password visibility toggle icon (eye icon)

Related articles