Skip to content
Snippets Groups Projects
Forked from an inaccessible project.
Code owners
Assign users and groups as approvers for specific file changes. Learn more.

Accessibility Change Log

Version 1.0.19

Fixed

  • Review "Skip to main content" button functionality

    • Add missing id to h1, to fix "Skip to main content" link
    • Create additional link to "Skip to utility menu"
    • Change Delete Note from h2 to h3 for semantic markup
    • Change labels for Edit note and Add note to include term's name
    • Update the text on note dialog to - This action cannot be undone (!303)
  • Remove redundant tooltips and adjust position of remaining ones to match mobile view

    • Remove tooltips from course keys icons on sidenav
    • Remove tooltips from menu buttons on sidenav
    • Adjust positions of remaining tooltips to match how they are displayed on mobile (!277)
  • Fix color text for hint and label for invalid subject on search form

    • Change color (from #0479a8 blue to #ff4e4e red) of the hint and label of invalid Subject field on Search form, as well as change position of Subject hint to be left aligned (!273)
  • Drag and drop accessibility improvement

    • Use the cdkDragStarted property to check for the click and drag event
    • Set an assistive text to be read by the screen reader (text is invisible on UI)
    • Not applied to Saved for Later or courses in search yet (!247)
  • Implement "Skip to main content" functionality

    • Add "Skip to main content" button - keyboard and screen reader users will see a button on the top-left corner which offers skipping the header and main navigation entirely and takes users to the main Degree Planner content
    • Change icon for 'Course is not offered' to strikethrough
    • Increase the width of Degree Plans dropdown to 300px (!245)
  • Give all course-items a role of button, and appropriate label (!242)

  • Include unique h1 on DP view visible for screen readers only

    • Add Degree Planner h1 right after main navigation - consistent location with Course Search app
    • Add sr-only class and assign to it styles recommended by WebAIM (https://webaim.org/techniques/css/invisiblecontent/) to visually hide content but still be read by a screen reader
    • Screen readers will still highlight the h1 and it will be slightly visible when tabbing through the content (!241)
  • Aria implementation

    • Change academic year panel title to h2 for headings hierarchy
    • Change term description title within term container from h2 to h3
    • Add missing aria-labels
    • Change the size of hint messages to 14px
    • Add aria-describedby to saved for later, planned, and enrolled courses containers
    • Replace #ff8000 orange warning color on inputs with #0479a8 blue (!234)
  • Cross browser accessibility fix for outline style. Continue implementing aria and roles

    • Apply outline style to elements that were missing focus across the browsers
    • Add missing roles to applicable elements (main, navigation)
    • Improve/add missing aria-labels (!232)
  • Add focus state and style to tabbable elements (!216)

  • Alt-text revisions and aria-labels revision on icons, buttons, links

    • Add role="img" to svgs
    • Refactor icon’s alt texts to not include the word 'icon'
    • Add aria-label to buttons and links containing only icons (!212)
  • Adjust icons font size and yellow color used on the app to a darker shade to fix low color contrast (!209)

    • Changed all icon font size to 24px
    • Changed yellow color used on the map to a darker shade
  • Font size adjustments:

    • Increase academic year title font to 18px (!184)
  • Initial accessibility fixes

    • Change "Add degree plan" input field placeholder from "i.e. Psychology" to "Plan Name"
    • Add tooltips and alt text to all icons used within the app
    • Add A11y module to the project
    • Add cdkFocusInitial where needed to specify which element to focus on first in the region ex: after opening a dialog, the focus lands on the first input field
    • Include word 'year' in academic years titles ex: Past year: 2017-2018; Current year: 2019 - 2020 etc. Instead of just 2019 - 2020 (!166)