Web Accessibility Enhancements
Hallmark
Efforts to meet accessibility standards across Hallmark.com to better serve and support all customers.
Role: UX/UI designer
The UI Engineering team helped prioritize and deliver several accessibility updates for Hallmark.com throughout the year. These updates delivered on other technical standards related to site performance and responsiveness, making them more valuable to our customers and internal business partners. This body of work included updating outdated page templates and/or components. By migrating existing content into new structures, we quickly addressed issues without starting from scratch. When content or structure was outside our control, we consulted third-party vendors or external teams to make adjustments that met our standards.
I was fortunate to attend An Event Apart Boston in June, where I heard Derek Featherstone present on inclusive design and how to integrate that practice into user experience discovery and delivery. As the lead designer on many accessibility initiatives, I created a checklist to help fellow designers keep accessibility in mind when designing features and creating content. The checklist serves as a starting point, offering a brief list of reminders and links to tools and references. Reminders include topics like color contrast, focus states, non-color indicators, font sizes, text styles, and text spacing. We rely on the WCAG 2.1 AA reference for requirements and implementation techniques.
Occasions page
The Occasions page was using an old template and soon-to-be-deprecated components. We updated the template and components while keeping the page content and layout largely unchanged.
Stores page
The Stores landing page was using an old template. We updated the template, created custom HTML to support the Store Finder banner, introduced new components, and removed unnecessary content.
Efforts to meet accessibility standards across Hallmark.com to better serve and support all customers.
Role: UX/UI designer
The UI Engineering team helped prioritize and deliver several accessibility updates for Hallmark.com throughout the year. These updates delivered on other technical standards related to site performance and responsiveness, making them more valuable to our customers and internal business partners. This body of work included updating outdated page templates and/or components. By migrating existing content into new structures, we quickly addressed issues without starting from scratch. When content or structure was outside our control, we consulted third-party vendors or external teams to make adjustments that met our standards.
I was fortunate to attend An Event Apart Boston in June, where I heard Derek Featherstone present on inclusive design and how to integrate that practice into user experience discovery and delivery. As the lead designer on many accessibility initiatives, I created a checklist to help fellow designers keep accessibility in mind when designing features and creating content. The checklist serves as a starting point, offering a brief list of reminders and links to tools and references. Reminders include topics like color contrast, focus states, non-color indicators, font sizes, text styles, and text spacing. We rely on the WCAG 2.1 AA reference for requirements and implementation techniques.
Occasions page
The Occasions page was using an old template and soon-to-be-deprecated components. We updated the template and components while keeping the page content and layout largely unchanged.Old page
![]()
New page
![]()
Stores page
The Stores landing page was using an old template. We updated the template, created custom HTML to support the Store Finder banner, introduced new components, and removed unnecessary content.Old page
![]()
New page
![]()
Offers page
The Offers landing page contained incorrect markup, outdated code, and legacy content. We integrated up-to-date components into the page while preserving existing content and logic.Old page
![]()
New page
![]()
Footer
The Footer needed to be refactored to ensure the structure was up to date and accessible. We made some UI modifications as well, but kept most content and layout consistent.Old Footer
![]()
New Footer
![]()
Modal component
We conducted an audit of all modal variations on our site to create a single component that meets all content needs while remaining accessible. After the audit was completed, I refined UI direction for the modal, resolving typography, spacing, and content inconsistencies. Developers then created a scalable and accessible front-end architecture for the modal. We are actively assisting in the integration of this new modal on a case-by-case basis, driven by product squads.Example of outdated variations of the same modal
New modal component requirements and specs
- All modals have a title. Modal titles should utilize the same heading style.
- All modals include a close button. The X icon should be consistent.
- Position: centered in the browser
- Min-width: 448px (1-column layout)
- Max width: 896px viewport percentage (2-column layout)
- Max height: 90vh
- Overlay: maintain existing overlay settings
- Mobile offset: 8px
1-column modal
![]()
2-column modal
![]()
