To Ensure an Accessible, Clean and Responsive Website
SUMMARY:
The West Texas A&M University’s mathematics webpage “Virtual Math Lab” offers extensive tutorials on the mathematics courses it offers. However, most example equations presented are graphics that screen readers generally miss. This website also doesn’t display well on mobile devices and uses outdated graphics. Addressing these three major pain-points resulted afull WCAG accessibility compliance, a mobile first redesign and modern, scalable icons.
Challenges:
1. Inaccessible Mathematic Notation- Equations and symbols are rendered as JPG and PNG with generic alt text, preventing screen readers from properly parsing. Many of the symbols were also very small and hard to read and did not align well with the rest of the type.
2. Outdated Graphics: Site used blurry graphics taht did not scale with screen size. They also and lacked alternative text attributes.
3. Not Mobile Friendly- Built with a rigid, desktop-only layout, forcing users to pinch and zoom frequently. This made it difficult to find what the user wanted. Long mathematical equations, graphs and tables overflowed off the screen on narrow devices.
The Redesign:
Solutions:
- The images were replaced with a markup language specifically designed for displaying mathematical notation. This allows screen readers to parse them step-by-step. Long equations have also been styled to either break to the next line or be placed in horizontal swipe containers to prevent them from running off the screen. Graphs and tables that could not practically scale will be placed in horizontal swipe containers on smaller devices.
- Graphics Update- The previous graphics were replaced with clean, minimal, and modern designs. These were also designed to load quicker than conventional JPG or PNG files.
The Redesign:
Conclusion:
The website was redesigned to comply with Web Content Accessibility Guidelines (WCAG) 2.1, Level AA. The absence of images for math equations and streamlined page graphics decrease page load time. To wrap it up, these changes will help ensure a smoother and more enjoyable experience for all users.
The Redesign:
