MM5.10 Accessibility: implementation

Owned by Bernadette Besenhofer
Mar 01, 2024
3 min read

The majority of elements and pages within the Media Manager were updated according to the new Design Guide.

General areas of changes include:

  • Adding semantic tags, wherever it is possible

  • Keyboard focus, a.k.a. the ability to navigate the application with keyboard

  • Text alternatives to visual elements such as buttons and icons

  • Contrast and colors for better visual perception of the application

 

Here are examples of the implemented changes:

Elements of the system

Changes

Image

Elements of the system

Changes

Image

Top bar

  • new buttons design

  • new spacing rules

  • the ability to customize color was preserved

 

 

Menus

  • colors, character styles and interactions in lists were updated

  • the ability to to navigate the lists with keyboard was added

 

Upload

  • colors, spacing and margins were updated

  • the changes were implemented both in desktop and mobile UI

 

Menu navigation

  • it’s now fully navigable with keyboard

 

Mobile menu

  • the styling was updated

  • it’s now fully navigable with keyboard

 

Filter panel

  • the styling for search inputs, headers and buttons was updated

  • the spacing was updated

  • it’s now fully navigable with keyboard

 

Asset card

  • icons were changed and new buttons were implemented instead

  • styling was updated according to the new Design Guide

  • ‘Public’ icon was removed

 

Pagination component

  • infinite scrolling was removed

  • Spacing and button styling were updated

  • it’s now fully navigable with keyboard

 

Asset list component

  • the updated include: chevron icon styling, line height, minimum width for action column, colors for text and hover as well as spacing

  • asset list header icon buttons were updated

  • title column is now required

  • when dragging a column, a highlighted line was added

 

Buttons and checkboxes

  • colors and contrast were adjusted according to the Design Guide

  • sizes of buttons and text were standardized

  • target area was made bigger than the actual button

 

Chip component

  • colors, character styles and interactions in lists were updated