Written By Moore Creative
2022-07-21
In this Southern Fried DNN User Group Meeting:
Speaker: Laura Pierson
Topic: Designing for Accessibility
Web accessibility shouldn’t be an afterthought. It should be considered throughout the entire design and development process. Laura Pierson, of 10 Pound Gorilla, will cover best practices and helpful tools for designing ADA-compliant websites that are usable by everyone.
About the speaker...
Laura is a talented web designer and front-end developer for 10 Pound Gorilla, a web development and marketing firm specializing in everything DNN. She excels at professionally polished designs and writing clean, compliant code with meticulous attention to detail.
--
Community Topics and Updates
- Aaron has recently published blog posts on Tailwind CSS and demonstrated a method to inject a 2sxc module into the theme.
- There is a flurry of activity on the DNN platform GitHub repository for version 9.11.0, including contributions from DNN Corp.
- Daniel Valadis has been working on a new resource manager to replace the Telerik one, which will offer improved functionality, accessibility, and responsiveness. It will be integrated into the Persona Bar.
- The new resource manager will function as a module in 9.11.0 and may become a Persona Bar module in the future.
- Sebastian Leopold is testing social group usage.
- DNN 9.11.0 progress can be tracked through issue #4887 on GitHub.
- DNN Connect event recently took place in France, marking the return of in-person events in the DNN community after the pandemic.
--
DNN & Design for Accessibility
Laura Pearson from 10 Pound Gorilla discusses designing for accessibility.
Today, we'll delve into the importance of considering accessibility needs during the design phase. One common pitfall I've noticed is that many teams tend to treat accessibility as a checkbox item to address at the end, akin to cross-browser testing or quality assurance. To put it in the words of the renowned architect Frank Lloyd Wright, "You can use an eraser on the drafting table or a sledgehammer on the construction site." This adage rings true in the realm of web design. Failing to prioritize accessibility from the outset can lead to extensive, resource-intensive corrections down the road.
The topics we'll explore today should ideally be at the forefront of your design process. However, even if your website is already built, these serve as valuable starting points for rectifying potential accessibility oversights. So, don't disregard this discussion if you've progressed beyond the design phase.
One of the most prevalent global accessibility issues relates to insufficient color contrast. According to the 2021 WebAIM Million study, which assessed the accessibility of the top one million websites worldwide, approximately 86% of these websites displayed instances of low color contrast on their home pages. Each of these sites averaged about 31 distinct instances of low contrast. By dedicating just a few minutes to evaluating your color contrast and identifying issues, you can likely rectify a substantial portion of your accessibility concerns.
Sufficient contrast between text and background is paramount for readability. As illustrated in the example above, the text with lower contrast on the left is considerably harder to read, and some individuals may find it entirely unreadable. Conversely, the text with higher contrast on the far right is much more legible.
Recommendations and Presentation Notes:
- 💡 It's important to focus on accessibility needs during the design phase.
- 🎨 Insufficient color contrast is a common accessibility issue, affecting readability.
- 👁️🗨️ Color blindness is a concern; consider using icons and patterns in addition to color.
- 🔗 Make sure links are obvious and distinguishable, using underlines or clear visual cues.
- 📝 Write descriptive link text that is concise, unique, and informative for better accessibility.
- 🤖 Hidden text within links or ARIA labels can provide additional context for screen reader users.
- 👥 Interaction with Laura on Design Challenge:
- Discussed a design challenge with Laura.
- Focused on improving user experience.
- 🌐 Web Browser Usability:
- Addressed the importance of clarity in web design.
- Suggested adding descriptive text for better user comprehension.
- Mentioned the role of compliance in making websites more usable.
- 🖱️ Keyboard Navigation:
- Emphasized the significance of supporting keyboard navigation.
- Highlighted the need for clear focus states for interactive elements.
- Mentioned challenges faced by users who rely on keyboard navigation.
- 📝 Form Design and Accessibility:
- Discussed the use of labels in forms and their visibility.
- Critiqued the floating label pattern and its potential issues.
- Stressed the importance of providing clear boundaries for form fields.
- Addressed the issue of error messages, suggesting clear identification of problems and solutions.
- Advised against blaming users for errors and discussed error message placement.
- Mentioned the benefit of linking error messages to specific fields for improved accessibility.
- Noted the complexity of dealing with error messages in complex forms.
- 💡 Overall Design Principles:
- Advocated for user-friendly design practices.
- Encouraged designers to prioritize usability and accessibility.
- Discussed design trends and their impact on user experience.
- 📌 Sticky position on farms and long forms
- Sticky position on farms can be useful until a long form is filled, potentially causing usability issues.
- Ensure scrollable and accessible summaries.
- 📌 Select readable typefaces
- Typography is vital for web accessibility.
- Avoid decorative fonts for improved readability.
- Ambiguous characters (e.g., d vs. l) should be clear.
- 📌 Font weight and contrast matter
- Font weight impacts readability; thin weights can cause eye fatigue.
- Ensure sufficient contrast between text and background.
- Test characters like capital I, lowercase l, and number 1.
- 📌 Font size considerations
- Body copy should generally be around 14 to 16 pixels.
- Smaller font sizes can be acceptable for less important text.
- Vary font size based on the type of content and user focus.
- 📌 Accessibility is good design
- Implementing accessibility benefits everyone, not just those with disabilities.
- Even one accessibility improvement can enhance user experience.
Watch the Southern Fried DNN User Group MONTH YEAR Meeting:
About the SouthernFried DNN User Group
Even though our DNN user group is nestled in the Carolinas, we are really YOUR DNN User Group regardless of your Southern heritage or lack thereof. Everyone is invited to attend in person or to join us online! We always try to broadcast the meeting so everyone can participate. Register now for the online meeting details for those of you wanting to join online