Module 2: Accessibility and inclusive design

Introduction to inclusive design

Practice Assignment

1. Which principle is central to inclusive design? Choose the best answer.

  • Adaptive response technology
  • High-contrast color options

  • Scalable interface elements
  • Limited user customization

2. Fill in the blank: You are designing a public transportation app to be accessible for all users, including those with disabilities. To achieve this goal, you focus on incorporating ________ features throughout the design process.

  • adaptive
  • minimalist
  • accessibility
  • exclusive

3. You are presenting the benefits of inclusive design to your company's board. Which advantages do you highlight? Select all that apply.

  • Streamlined production processes
  • Wider market appeal
  • Lower ongoing maintenance costs
  • Higher overall user satisfaction

4. Which feature should be prioritized in an inclusive design interface? Choose the best answer.

  • Simplified interactions
  • Modular information architecture
  • Information density control
  • Responsive design adaptations

5. You are evaluating a new app's design to ensure it effectively serves users with varying abilities. Based on inclusive design principles, which features would you prioritize to empower a diverse user base? Select all that apply.

  • Adjustable text sizes and color settings
  • Multi-step authentication processes
  • Voice-activated controls

  • High-density information layout

Activity: A case study of inclusive design

Practice Assignment

Sarah, a seasoned web developer at the online bookstore The Reading Book Nook, was troubled. While their website was popular, negative comments were trickling in. Customers with disabilities mentioned difficulty finding specific books, issues with the checkout process, and trouble reading the site due to small font sizes and low-contrast color schemes. Sarah knew this went against The Reading Book Nook's mission of making the joy of reading accessible to everyone.


Forming the accessibility team

Determined to make a change, Sarah proposed forming a dedicated accessibility team. Their first step was to understand the challenges faced by users. They read feedback comments, researched accessibility best practices, and sought advice from an accessibility consultant. This research highlighted the need for clear navigation, meaningful visuals, and greater readability.


Navigation and structure

The team began by overhauling the website's navigation. They added clear headings, descriptive labels, and ensured the entire site was usable with just a keyboard. This allowed users with visual impairments or limited mobility to easily explore The Reading Book Nook's vast collection of books.


The power of visuals

Next, they focused on images and videos. All images received descriptive alternative text (alt text), providing context for users who rely on screen readers. Additionally, they added captions and transcripts to video content, making it accessible to those with hearing impairments.

Color, contrast, and readability

Colors and font sizes were revised throughout the website to ensure sufficient contrast for better readability. They also made sure font sizes could be easily increased without breaking the layout. These changes benefited not only users with visual disabilities but also those who might experience situational challenges, such as browsing the site in bright sunlight.


Testing and iteration

The team didn't simply implement changes and stop there. They partnered with an accessibility consultant to conduct thorough user testing with individuals with various disabilities. This invaluable feedback revealed a few overlooked issues, which were promptly fixed before the site's relaunch.

The benefits of accessibility

The results of The Reading Book Nook's accessibility overhaul were remarkable. Customers with disabilities praised the improved user experience. Overall customer satisfaction soared, and sales increased as more people found the website accessible and enjoyable to use. Sarah and her team were proud; they had demonstrated that accessibility and business success can go hand in hand.



6. Which of the following accessibility considerations did The Reading Book Nook team address? Select all that apply.

  • Keyboard-only navigation

  • Audio content without transcripts
  • Complex animations and flashing content
  • Descriptive alternative text (alt text) for images

7. What was one likely benefit of The Reading Book Nook's focus on accessibility? Select the best answer.

  • Decreased website traffic
  • Increased reliance on customer support
  • Increased customer satisfaction and loyalty
  • Reduced development cost

8. Which of the following website elements would likely benefit from improved color contrast? Select the best answer.

  • Alt text for images
  • Decorative background images
  • Navigation menus and buttons
  • Product photographs

9. As you begin your accessibility journey, what aspects of inclusive design are you most curious to learn about?

I’m curious about how to balance aesthetic design with functionality, ensuring that a website is both visually appealing and fully accessible.

Understanding accessibility needs

Practice Assignment

10. What is a critical design consideration for digital products for users with visual impairments? Choose the best answer.

  • Consistent navigation placement
  • Use of small fonts
  • High-contrast color schemes

  • Minimal use of images

11. Which features should be included in digital products to improve accessibility for users with visual impairments? Select all that apply.

  • Text-to-speech functionality
  • Adjustable image scaling
  • Keyboard navigability
  • Audio descriptions for all video content

12. Which tool is commonly used to check for sufficient contrast between text and background colors in digital design? Choose the best answer.

  • Sketch
  • Adobe Color
  • Figma
  • Adobe Photoshop

13. Fill in the blank: To comply with accessibility standards, digital products must maintain a minimum _____ ratio for text and background color contrast.

  • 4.5:1
  • 2:1
  • 3:1
  • 7:1

14. You are reviewing a website redesign focused on enhancing accessibility. Which feature should be prioritized to ensure the site is accessible to users with visual impairments? Choose the best answer.

  • Responsive design
  • Adjustable text sizes
  • Screen reader compatibility
  • Color customization options

Activity: WCAG challenge

Practice Assignment

Finish Line Glide: An anti-chafing stick

Welcome to Finish Line Glide, the company dedicated to helping athletes go the distance without chafing. Finish Line Glide believes that everyone deserves a comfortable run, bike ride, or swim. In this exercise, we'll examine their commitment to inclusivity by analyzing their website through the lens of WCAG standards. You'll go beyond the live site and evaluate mockups of key UI elements commonly found on websites. Analyze them carefully, considering color contrast, navigation structure, the use of alt text for images, and other key elements through the lens of WCAG guidelines. Does Finish Line Glide’s approach to these foundational UI elements ensure accessibility for all users? Your evaluation will help Finish Line Glide’ refine their designs and continue to improve their commitment to inclusivity.

Analyze Finish Line Glide’s color choices

Let's take a closer look at Finish Line Glide's website color scheme. Pay special attention to the "Find Finish Line Glide near you" and "Join the Finish Line Glide family" buttons. 1.

Here's your task:

Visit the WebAIM Color Contrast Checker: Go to
https://webaim.org/resources/contrastchecker/

Check the contrast: Use the color picker tool (eyedropper icon) or manually enter the color codes for:

The button text color: 2634c2

The button background color: feec9a

Evaluate the results: Check the color contrast ratio to see if it passes WCAG standards.

Try using the color picker tool to select different color combinations to test and see if they pass WCAG standards.

Analyze Finish Line Glide’s font size

Typography plays a crucial role in making websites accessible. Examine Finish Line Glide's choice of font sizes across its site, paying attention to headlines, body text, and any smaller text on buttons or labels. Consider the following as you evaluate images of Finish Line Glide’s font sizes:

Readability: Is the main body text large enough to read comfortably on various screen sizes?

Scalability: Does the site allow users to increase font size using browser zoom or assistive technologies?

WCAG Guidelines: While WCAG doesn't have strict pixel-size requirements, it emphasizes readability and the ability to resize text.

Analyze Finish Line Glide’s alt text

Alt text provides a textual description of images, crucial for users who rely on screen readers or have images disabled. Examine the alt text Finish Line Glide uses for the provided image. Think about:

Accuracy: Does the alt text accurately describe the key visual elements of the image?

Context: Does the alt text convey the purpose and meaning of the image within its placement on the website?

Conciseness: Is the alt text clear and to the point, avoiding unnecessary details?

WCAG Guidelines: Remember, the goal is to provide an equivalent experience for those who cannot see the image.

To view alt text, right click on the image and select “Inspect”.

15. Which of the following text and background color combinations is most likely to meet WCAG AA standards for color contrast? Use the

  • Yellow text on a white background
  • Light gray text on a medium gray background
  • Black text on a white background.
  • Red text on a green background

16. Which of the following is a key consideration when choosing font sizes for website accessibility? Select the best answer.

  • Making sure all text can be easily resized by the user
  • Using the smallest possible font size to fit more information on the screen
  • Using the same font size for all text elements on the website
  • Ensuring decorative fonts are larger than functional fonts

17. The current alt text for a Finish Line Glide product image simply says "Finish Line Glide anti-chafing stick." Which of the following options would provide a more descriptive and useful alternative? Select the best answer.

  • A photo of three Finish Line Glide anti-chafing sticks in different scents, displayed on a bathroom shelf
  • Image of Finish Line Glide anti-chafing stick.
  • Anti-chafing stick by the brand Finish Line Glide.
  • Finish Line Glide anti-chafing stick. For freshness that lasts.

18. Think about a website or app that you use regularly. Based on what you've learned about WCAG standards, do you notice any potential accessibility barriers in its design? If so, what are they, and how might they be addressed?

A possible accessibility barrier could be poor color contrast, especially on buttons or links. To address this, the website could incorporate higher-contrast color schemes that meet WCAG standards. Another issue might be the lack of alt text for important images, which could be corrected by adding detailed descriptions to improve screen reader compatibility. Additionally, inconsistent font scaling can make text difficult to read, so ensuring text is scalable and easily adjustable would enhance accessibility.

Web Content Accessibility Guidelines (WCAG)

Practice Assignment

19. What is the primary purpose of the Web Content Accessibility Guidelines (WCAG)? Choose the best answer.

  • To ensure digital content is accessible to all users, including those with disabilities
  • To enhance search engine optimization
  • To provide design principles for modern websites
  • To regulate international internet usage policies

20. Fill in the blank: One core success criterion under WCAG is ensuring that all interactive elements are _______.

  • keyboard accessible
  • responsive
  • animated
  • consistently designed

21. You are consulting for a digital library project intended to be fully accessible to individuals with various disabilities, including visual and auditory impairments. The project aims to meet inclusive design standards and requires compliance with WCAG 2.2. In this scenario, which level of WCAG 2.2 success criteria is most appropriate to ensure broad accessibility while being feasible for most organizations to implement?

  • Level AAA
  • Level AA
  • Level A
  • Level B – Focuses on optimizing performance and enhancing user interface design.

22. You are redesigning an e-commerce website to follow WCAG guidelines. Which of the following actions should you consider? Select all that apply.

  • Design visual content perceptible to users with color vision deficiencies.
  • Ensure that all multimedia content has text alternatives and captioning.
  • Create content that can be accessed in different orientations, such as landscape and portrait.

  • Integrate accessible navigation options that support keyboard and screen reader users.

23. Which elements should be evaluated for WCAG compliance in a UI design? Select all that apply.

  • Keyboard navigability
  • Text contrast
  • Accessibility of video content
  • Alternative text for images

Accessibility and inclusive design

Graded Assignment

24. You are evaluating the design of a new public service website. Which feature demonstrates inclusive design? Select all that apply.

  • The website features detailed instructions for users with different abilities.
  • The website includes multimedia content to engage users.
  • The website uses high-contrast text and background colors for better readability.
  • The website supports keyboard navigation for users with mobility impairments.

25. You are evaluating a real-world example of universal design. Which feature would indicate that the design follows universal design principles? Choose the best answer.

  • The product incorporates audio descriptions for visual content.
  • The product has intuitive navigation that requires minimal instruction.
  • The product is primarily usable by a specific demographic group.
  • The product includes multiple language options and adjustable text sizes.

26. A company wants to ensure its online documents are accessible to users with different abilities. Which practices should they implement? Select all that apply.

  • Ensuring all links are visually distinct and descriptive
  • Using high contrast colors for emphasis
  • Providing transcripts for audio content
  • Using headings and subheadings to organize content

27. Which considerations are important for making online forms more accessible? Select all that apply.

  • Providing error messages that explain how to correct mistakes
  • Including labels and instructions for each form field
  • Using large, bold placeholder text as visual aids
  • Designing forms that can be navigated and submitted using a keyboard

28. When evaluating a website for inclusivity, which aspect is most critical to review? Choose the best answer.

  • The site’s compatibility with various assistive technologies
  • The use of high-quality images throughout the site
  • The complexity of the navigation menu
  • The presence of interactive media elements

29. You are conducting a design review for a new educational platform. Which WCAG success criterion is most relevant for ensuring content is perceivable by all users? Choose the best answer.

  • The platform provides content translation features for non-native speakers.
  • The design includes high-quality images to complement textual content.
  • Content is structured with proper headings and subheadings.
  • All interactive elements are operable using a mouse.

30. Which WCAG guideline should you follow to make video content accessible to users with hearing impairments? Choose the best answer.

  • Ensure videos have clear and concise scripting.
  • Add visual aids and graphics to support the spoken content.
  • Provide high-quality audio for clear sound.
  • Include captions for all spoken content.

31. You are making a corporate intranet site WCAG compliant. Which of the following practices should you implement? Select all that apply.

  • Include descriptive headings for each section.
  • Use responsive design to ensure compatibility with different devices.
  • Ensure all documents are available in text-searchable formats.
  • Provide keyboard shortcuts for navigation.

32. Based on the principles of inclusive design, which feature would be most important for an accessible banking app? Choose the best answer.

  • Personalized financial advice based on user data
  • High-end encryption for security
  • Voice-activated navigation for users with mobility impairments
  • Adjustable text sizes for readability

33. Which features in a customer service chatbot would best illustrate inclusive design principles? Select all that apply.

  • Ensuring compatibility with screen readers
  • Providing clear and concise responses
  • Providing multi-language support and text-based responses
  • Offering quick response times to all queries

34. An inclusive design approach in a mobile app project would prioritize which of the following? Choose the best answer.

  • Providing customization options for users with different needs
  • Implementing features based on user feedback
  • Prioritizing intuitive navigation for ease of use
  • Optimizing the app for high-resolution displays

35. You are presenting the benefits of universal design to a group of stakeholders. Which of the following points would you emphasize? Select all that apply.

  • Universal design focuses on creating visually appealing products for specific user groups.
  • Universal design increases the usability of products for a diverse range of people.
  • Universal design can improve brand reputation by demonstrating a commitment to inclusivity.
  • Universal design reaches a broader audience by being usable by people with diverse abilities.

36. When designing for accessibility, which practice should you follow to ensure users with visual impairments can access your content? Choose the best answer.

  • Provide alternative text for images.
  • Implement keyboard navigation options.
  • Use animations to highlight important features.
  • Design with high-contrast color schemes.

37. Which feature is essential for ensuring accessibility in a digital product? Choose the best answer.

  • Use of audio instructions
  • High-resolution graphics
  • Fast loading times
  • Compatibility with screen readers

38. In a real-world example of inclusive design, which feature would be highlighted for a public transportation app? Choose the best answer.

  • Accessible route planning with multiple transport options
  • Multi-language support and text-to-speech functionality
  • Customizable notifications for service updates
  • User-friendly interface with large buttons

39. Which feature of a fitness tracking app best illustrates the principles of inclusive design? Choose the best answer.

  • Offering a variety of fitness challenges
  • Customizable workout plans and voice feedback
  • Providing detailed exercise tutorials
  • User-friendly interface with easy navigation

40. Which features would enhance accessibility for users with color blindness? Select all that apply.

  • Offering a colorblind mode that adjusts the color scheme
  • Providing patterns or textures in addition to color
  • Using color combinations that are easily distinguishable
  • Using contrasting color shades to improve legibility

41. To ensure a website is compliant with WCAG, which of the following features should be implemented? Select all that apply.

  • Providing text alternatives for multimedia content
  • Ensuring all content is accessible via screen readers
  • Providing alternative text for all images
  • Using clear and concise language throughout the site

42. You are designing an online booking system for a travel website. Which WCAG principle ensures that users can operate the interface effectively? Choose the best answer.

  • Adaptable
  • Perceivable
  • Operable
  • Understandable

43. You are presenting an example of inclusive design to a client. Which feature of an e-commerce website would best demonstrate inclusive design principles? Choose the best answer.

  • Clear and concise product descriptions
  • Simple and intuitive navigation menus
  • Multiple payment options including digital wallets
  • Adjustable text sizes and color contrast options

Leave a Reply