Dr. Ronny Andrade Parra

    RMIT’s Design System Updates

    We use Adobe Experience Manager (AEM) as our Content Management System (CMS). In recent years, we transitioned from AEM 6.1 to AEM 6.5. With the transition, a new design system was adopted. I worked together with the UX team to ensure the new components in the design system included accessibility considerations. Moreover, I included code snippets so that when a component was passed on to the development team, they would know how to implement it while meeting WCAG standards. Improvements over specific components are described below. All the changes described were achieved in partnership with the UX and development teams.

    Program Pages banner

    a banner image with text that reads: Bachelor of Architectural design. Undergraduate. Gain the skills you need to be a leading architect. Work on real-world briefs and study in a world-class studio environment to create something that lasts. Apply button. Enquire button
    • Worked with the design team to ensure the filter used meets contrast requirements.
    • Ensured only the relevant text had a heading tag assigned to it.
    • A more accessible solution would be to use a solid colour, but this was a compromise achieved with stakeholders.

    Modal dialogs

    A modal dialog that reads: You're viewing program information for local students. Not a local student? Switch to international content button
    • Supported the creation of the right interaction so that when the modal opens, keyboard focus is redirected to the most relevant element.
    • Added ARIA attributes lock keyboard focus inside the dialog until it’s dismissed.
    • Added ARIA label to the “Close this dialog” button.
    • Added heading at the top of the modal for easier navigation.

    Tables

    A table with a list of subjects bachelor of architecture students must take in Year 3
    • Worked with design team to update visual style to provide clear table heading styles and alternating row styles
    • Worked with the development team to ensure tables include the right ARIA attributes so that screen readers interpret them correctly
    • Tables are built with <div> tags, hence the need to use ARIA. A more accessible solution would use <table>, <th>, <td>, <tr> elements, but using ARIA was a compromise we reached with stakeholders

    Focus indicators

    Several components have received updated keyboard focus styles to indicate they are active.

    Primary button

    A red button with white text that reads Primary button
    A dark red button with white text that reads Primary button and a light blue halo around it

    Reverse button

    A light grey button with blue text that reads Reverse button
    A grey button with blue text that reads Reverse button. There is a light blue halo around the button

    Links

    An underlined link with the text "label"
    An underlined link with the text "label" and a light blue halo around it

    Leave a comment