-
Paulina Nogal authoredPaulina Nogal authored
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)