Brief:
Projects
Projects >> Family Based Justice Center Redesign
Family Based Justice Center Redesign
My Role:
Accessibility Designer (UI/UX) & Front End Developer
Context:
NYU Marron launched Family Based Justice Center (FBJC) website as a hub of “family-based alternative justice programs”. FBJC is funded by Office of Juvenile Justice and Delinquency Prevention.
Tools:
Figma, Adobe Acrobat Pro, WAVE, WebAim, VoiceOver, NVDA, Usertesting
Goals:
-Improve accessibility
-Increase the amount of potential users by including people with visual impairment by addressing screen readers and contrast issues
-Increase the amount of ARIA elements
Problem:
The problem addressed in this website update is the lack of accessibility. Online content that meets accessibility requirements is likely to be more user-friendly for everyone. Currently, people with vision impairments are unable to access the website.
Design Process:
Research:
Page Title
• Does the page title (the browser title for the page; not the main content heading or <h1>) describe the topic or purpose of the page?
Navigation
• Is a method provided to skip repetitive navigation and go to the main content? Two of the main techniques including providing HTML/ARIA landmarks (e.g. header, navigation, main, footer), and "skip navigation" links.
Links
• Does link text clearly describe the purpose or destination of the link?
Color/Contrast
• Does all text have a minimum color contrast against its background of at least 4.5 to 1 (3 to 1 for large text)?
• Is link text distinguishable from non-link text by more than just color?
• Do actionable elements have clear, visible focus when non-mouse users Tab or Arrow to them?
Focused Concepts for Redesigning:
Contrast:
-Is information being conveyed other than color alone?
-Do elements have visible focus when non-mouse users Tab or Arrow to them?
Headings:
-Is all text that looks and acts like a heading marked as a heading?
-Are the heading levels chosen so they convey their correct hierarchical order in the content, not for their visual styling?
Navigation:
-Is reading and focus order, as determined by the code order, logical and intuitive?
Accessibility Improvements:
Before:
After:
Before:
After:
