Digital Images
Digital Images
Embedded Files
Week 3 Images and Accessibility
Week 3 Images and Accessibility
This week, along with image file formats, editors, and repositories, I learned more about the accessibility of digital images. With the Universal Design for Learning Guidelines and the color contrast checker, I created digital images that cover the Web Content Accessibility Guidelines (WACG) 2.1 recommendation for Perceivable: information and use interface components are presentable to users in ways they can perceive (W3C, n.d.).
Accessibility The Digital Design Standards
Accessibility The Digital Design Standards
The Universal Design for Learning (UDL) Guideline is a framework to improve and optimize teaching and learning for all people equally based on scientific insights into how humans learn. The guidelines offer concrete suggestions that can be applied to any discipline to ensure all learners can participate in meaningful learning experiences. UDL's Multiple Means of Representation asks to provide medium options that aid multiple perceptions of learners. These include text, video, audio, and images.
When images, graphs, and diagrams are used, a description called Alternative Text (Alt Tag) should be used (CAST, n.d.) to convey the context of the medium.
The color contrast checker ensures the color choice is visually accessible.
Overview
The scenario: The fictional company, Wide Field, schedules to release the course (Signature Project) at the beginning of 2023. To capture the new year's momentum, the company's L&D team plans to announce the winter session starting in January. The logo will be used throughout the course materials. The digital flyer will be sent in newsletters and emails.
Changes I made to the original work: Initially, I collected images to create a brand board for the course. Among them, I picked an image of a compass and chose a license-free digital image to incorporate into the logo.
The thought behind the logo design: It fits into the course because a compass represents a guiding tool for learners to navigate themselves in the course. I created versions from two main brand colors.
The tool used: Canva
Design Elements: Primarily used circle lines to establish unity of images and texts. Left plenty of whitespaces to focus on the essentials.
Accessibility
Alt Tag: " Re-creating your career online course"
The reasoning behind the logo Alt Tag: Considering the content and function, the logo should stand by itself, and if there is a link associated with the logo, it will send learners to the course's home page. It is a common conversion for screen readers; thus the name of the course is sufficient (WebAIM, n.d.).
WCAG 2.1 color contrast levels-Canva.pdfColor Contrast: Text hex code #363D46: Background hex code #FFFFFF returns 10.98:1 ☑️passed WCAG2.1AAA
Edited Images
Edited Images
The tool used: Adobe Photoshop
From the original image, I created a couple of alternatives to see which one will fit in the flyer.
filtered with texture
filtered with color
filtered with color
course flyer-feedback revision.pdf The Course Flyer
The Course Flyer
The tool used: Adobe Photoshop, Canva
Design Elements: Used the font size hierarchy to show the content's importance. Uppercase emphasizes the action to take. (Once the course is released online, the LMS link will be added to the START NOW button).
Accessibility
Alt Tag: " Re-creating your career online course"
Challenge: screen readers cannot recognize the text when software like Photoshop or Canva is used to create infographics and directly embed the text into the image (Universal Design Center, 2018). One of the best practices is creating an accessible PDF by converting it from an accessible document (i.e., Word, Excel, PowerPoint, InDesign, etc.). I tried to use the accessibility tool in Adobe Acrobat Pro, but I'm not proficient yet. Further research on image accessibility is needed.
Universal Design Center at California State University, Northridge, has an extensive guide for flyers and infographics accessibility.
Color Contrast: 2 contents in the flyer with the brand color didn't pass WCAG2.1AA, and I increased the tone of the failed colors in the 2nd version.
1st version
Text hex code #5C829B: Background hex code #FFFFFF returns 4.1:1 ☑️passed WCAG2.1AA (The text size is large, more than 18 pt)
Text hex code #363D46: Background hex code #F0F0EA returns 9.6:1 ☑️passed WCAG2.1AAA
Text hex code #FFFFFF: Background hex code #CEB290 returns 2.01:1 failed
Text hex code #FFFFFF: Background hex code #FF926E returns 2.19:1 failed
2nd version
Text hex code #FFFFFF: Background hex code #A68F74 returns 3.09:1 ☑️passed WCAG2.1AA (The text size is large, more than 18 pt)
Text hex code #FFFFFF: Background hex code #D97C5D returns 3:1 ☑️passed WCAG2.1AA (The text size is large, more than 18 pt)
3rd Version with peer feedback
I incorporated peer feedback on the choice of font, color, and size of elements. Knowing their impression with fresh eyes provides me the room for improvement. This process also lets me stay close to how learners perceive. Thank you, peers :)
Sources & References
CAST (n.d.). UDL: The UDL Guidelines. https://udlguidelines.cast.org/
CSUN. (2019, September 27). Digital Media and Documents. California State University, Northridge. https://www.csun.edu/universal-design-center/digital-media-and-documents
The Interaction Design Foundation. (n.d.). What is Visual Design? Retrieved from https://www.interaction-design.org/literature/topics/visual-design
Universal Design Center. (2018, May 18). Accessible Infographics and Flyers Checklist. California State University, Northridge. https://www.csun.edu/universal-design-center/accessible-infographics-and-flyers-checklist
WebAIM. (n.d.). Alternative Text. https://webaim.org/techniques/alttext/
Image resources
Page updated
Google Sites
Report abuse