[et_pb_section fb_built=”1″ admin_label=”Header” _builder_version=”4.24.3″ _module_preset=”default” background_color=”#FFFFFF” background_image=”https:\/\/sophwinsand.com\/wcag-manual\/wp-content\/uploads\/2023\/04\/visbility-peak.png” min_height=”772.2px” custom_margin=”22px||-4px||false|false” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”-39px||28px||false|false” custom_padding=”0px||||false|false” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.16″ _module_preset=”default” custom_padding=”6%||||false|false” custom_padding_tablet=”0%||||false|false” custom_padding_phone=”” custom_padding_last_edited=”on|tablet” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.4″ _module_preset=”534cc526-6274-4e31-9e1a-7f18a5947bf1″ header_4_font=”DM Sans|700||on|||||” header_4_text_color=”#EF8451″ header_4_font_size=”14px” header_4_letter_spacing=”1px” header_4_line_height=”1.5em” custom_margin=”||0px||false|false” header_4_font_size_tablet=”14px” header_4_font_size_phone=”” header_4_font_size_last_edited=”on|tablet” locked=”off” global_colors_info=”{}”][\/et_pb_text][et_pb_text _builder_version=”4.20.4″ _module_preset=”e864d11f-3dab-4fa3-ac06-4f0e1a260807″ text_font=”Andada Pro||||||||” header_font=”||||||||” header_text_color=”#002b63″ header_font_size=”64px” header_letter_spacing=”-0.02em” header_line_height=”1.15em” custom_margin=”||16px||false|false” header_font_size_tablet=”40px” header_font_size_phone=”24px” header_font_size_last_edited=”on|desktop” locked=”off” global_colors_info=”{}”]<\/p>\n
[\/et_pb_text][et_pb_text _builder_version=”4.20.4″ _module_preset=”41d5859c-fbaa-458a-88e4-5d886857f235″ text_font=”Roboto||||||||” text_text_color=”#919191″ text_font_size=”20px” text_line_height=”1.73em” text_font_size_tablet=”16px” text_font_size_phone=”14px” text_font_size_last_edited=”on|phone” locked=”off” global_colors_info=”{}”]<\/p>\n
Visual web accessibility refers to designing websites and digital content in a way that makes them accessible to individuals with visual impairments or other disabilities that affect their ability to see and perceive visual content. It involves providing alternative ways for users to access visual content, such as images, videos, and other graphics, as well as ensuring that the website is designed in a way that is easy to navigate and use for individuals with visual impairments.<\/span><\/p>\n [\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/sophwinsand.com\/wcag-manual\/wp-content\/uploads\/2023\/03\/eyeicon.png” alt=”Icon of an eye to represent both visually impaired and seeing individuals.” title_text=”Eye Icon” _builder_version=”4.21.0″ _module_preset=”default” custom_margin=”137px||||false|false” animation=”off” locked=”off” global_colors_info=”{}” header_font_size_phone=”14px” header_font_size_last_edited=”on|phone” header_font_size_tablet=”22px”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.20.4″ _module_preset=”default” background_color=”#002b63″ min_height=”235px” global_colors_info=”{}” custom_margin=”2px|||||”][et_pb_row _builder_version=”4.21.0″ _module_preset=”default” custom_margin=”||-54px||false|false” locked=”off” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.21.0″ _module_preset=”default” header_font=”Roboto Slab|600|||||||” header_font_size=”48px” custom_margin=”-86px||-13px|16px|false|false” custom_padding=”||0px||false|false” global_colors_info=”{}”]<\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.21.0″ _module_preset=”default” background_color=”#002b63″ custom_margin=”-23px||||false|false” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_blurb title=”How Do we Start?” icon_placement=”left” image_icon_width=”40px” content_max_width=”100%” _builder_version=”4.21.0″ _module_preset=”a947262d-0701-4077-825d-1385639c524f” header_font=”Roboto Slab|700||on|||||” header_text_color=”#45bcb2″ header_font_size=”25px” body_font=”Roboto||||||||” body_text_color=”#FFFFFF” body_font_size=”17px” body_line_height=”1.6em” background_layout=”dark” animation=”off” header_font_size_tablet=”” header_font_size_phone=”14px” header_font_size_last_edited=”on|phone” image_max_width=”40px” locked=”off” global_colors_info=”{}”]<\/p>\n To ensure visual accessibility, web developers and designers need to follow certain guidelines, such as providing alternative text for images and other visual elements, ensuring that the website is easy to navigate using a keyboard or assistive technology, and providing sufficient color contrast and text size to make content readable.<\/span><\/p>\n [\/et_pb_blurb][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_blurb title=”Why Do we Do this?” icon_placement=”left” image_icon_width=”40px” content_max_width=”100%” _builder_version=”4.20.4″ _module_preset=”a947262d-0701-4077-825d-1385639c524f” header_font=”Roboto Slab|700||on|||||” header_text_color=”#45bcb2″ header_font_size=”25px” body_font=”Roboto||||||||” body_text_color=”#FFFFFF” body_font_size=”17px” body_line_height=”1.6em” background_layout=”dark” animation=”off” header_font_size_tablet=”” header_font_size_phone=”14px” header_font_size_last_edited=”on|phone” image_max_width=”40px” locked=”off” global_colors_info=”{}”]<\/p>\n Overall, visual web accessibility is an important consideration for promoting inclusivity, meeting legal requirements, improving business reputation, and providing a better user experience for all users, including those with visual impairments or other disabilities that affect their ability to see and perceive visual content.<\/span><\/p>\n [\/et_pb_blurb][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ admin_label=”Features” _builder_version=”4.21.0″ _module_preset=”default” background_color=”#FFFFFF” global_colors_info=”{}”][et_pb_row _builder_version=”4.20.4″ _module_preset=”default” locked=”off” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.21.0″ _module_preset=”default” header_font=”Roboto Slab|600|||||||” header_font_size=”48px” global_colors_info=”{}”]<\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_3,1_3,1_3″ _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”1_3″ _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_blurb title=”Descriptive Captions” image=”https:\/\/sophwinsand.com\/wcag-manual\/wp-content\/uploads\/2024\/04\/Untitled_Artwork-16.jpg” image_icon_width=”39%” icon_alignment=”left” content_max_width=”100%” _builder_version=”4.24.3″ _module_preset=”58e41a12-d2dc-4bc3-82a3-e7e2a77a32bd” header_font=”DM Sans|700|||||||” header_text_color=”#093532″ header_font_size=”25px” header_line_height=”1.2em” body_font=”DM Sans||||||||” body_text_color=”#6b8483″ body_font_size=”17px” custom_margin=”||||false|false” custom_padding=”||||false|false” animation=”off” header_font_size_tablet=”18px” header_font_size_phone=”16px” header_font_size_last_edited=”on|desktop” body_font_size_tablet=”15px” body_font_size_phone=”13px” body_font_size_last_edited=”on|phone” border_width_bottom=”0px” border_color_bottom=”rgba(0,0,0,0.12)” locked=”off” global_colors_info=”{}”]<\/p>\n Descriptive captions go a step further by providing additional information about the visual elements in the video, such as actions, characters, and settings.<\/span><\/p>\n [\/et_pb_blurb][\/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_blurb title=”Keyboard Navigation” image=”https:\/\/sophwinsand.com\/wcag-manual\/wp-content\/uploads\/2024\/04\/Untitled_Artwork-3-2.jpg” image_icon_width=”50%” icon_alignment=”left” content_max_width=”100%” _builder_version=”4.24.3″ _module_preset=”58e41a12-d2dc-4bc3-82a3-e7e2a77a32bd” header_font=”DM Sans|700|||||||” header_text_color=”#093532″ header_font_size=”25px” header_line_height=”1.2em” body_font=”DM Sans||||||||” body_text_color=”#6b8483″ body_font_size=”17px” image_icon_custom_padding=”0px||||false|false” custom_margin=”||||false|false” custom_padding=”||||false|false” animation=”off” header_font_size_tablet=”18px” header_font_size_phone=”16px” header_font_size_last_edited=”on|desktop” body_font_size_tablet=”15px” body_font_size_phone=”13px” body_font_size_last_edited=”on|phone” border_width_bottom=”0px” border_color_bottom=”rgba(0,0,0,0.12)” locked=”off” global_colors_info=”{}”]<\/p>\n Keyboard navigation allows users to navigate a website using the keyboard instead of a mouse, making it easier for individuals with mobility impairments or other disabilities to access content.<\/span><\/p>\n [\/et_pb_blurb][\/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_blurb title=”High Contrast Mode” image=”https:\/\/sophwinsand.com\/wcag-manual\/wp-content\/uploads\/2024\/04\/Untitled_Artwork-12.jpg” image_icon_width=”48%” icon_alignment=”left” content_max_width=”100%” _builder_version=”4.24.3″ _module_preset=”58e41a12-d2dc-4bc3-82a3-e7e2a77a32bd” header_font=”DM Sans|700|||||||” header_text_color=”#093532″ header_font_size=”25px” header_line_height=”1.2em” body_font=”DM Sans||||||||” body_text_color=”#6b8483″ body_font_size=”17px” custom_margin=”||||false|false” custom_padding=”||||false|false” animation=”off” header_font_size_tablet=”18px” header_font_size_phone=”16px” header_font_size_last_edited=”on|desktop” body_font_size_tablet=”15px” body_font_size_phone=”13px” body_font_size_last_edited=”on|phone” border_width_bottom=”0px” border_color_bottom=”rgba(0,0,0,0.12)” locked=”off” global_colors_info=”{}”]<\/p>\n High contrast mode is a setting that increases the color contrast between the text and background of a website, making it easier to read for individuals with low vision or color blindness.<\/span><\/p>\n [\/et_pb_blurb][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.21.0″ _module_preset=”default” custom_margin=”28px||||false|false” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_blurb title=”Descriptive Captions” image=”https:\/\/sophwinsand.com\/wcag-manual\/wp-content\/uploads\/2024\/04\/Untitled_Artwork-16.jpg” image_icon_width=”200px” icon_alignment=”left” content_max_width=”100%” module_id=”descriptive-captions” _builder_version=”4.24.3″ _module_preset=”58e41a12-d2dc-4bc3-82a3-e7e2a77a32bd” header_font=”DM Sans|700|||||||” header_text_color=”#03005e” header_font_size=”30px” header_line_height=”1.2em” body_font=”DM Sans||||||||” body_text_color=”#04114c” body_font_size=”19px” custom_margin=”||||false|false” custom_padding=”||||false|false” animation=”off” header_font_size_tablet=”18px” header_font_size_phone=”16px” header_font_size_last_edited=”on|desktop” body_font_size_tablet=”15px” body_font_size_phone=”13px” body_font_size_last_edited=”on|phone” border_width_bottom=”0px” border_color_bottom=”rgba(0,0,0,0.12)” locked=”off” global_colors_info=”{}”]<\/p>\n Descriptive captions go a step further by providing additional information about the visual elements in the video, such as actions, characters, and settings. <\/span>Descriptive captions provide a verbal description of the visual elements of videos or images, such as scenery, facial expressions, or actions, that cannot be understood through audio alone.<\/p>\n By providing descriptive captions, web designers and content creators can make their content more inclusive and accessible to individuals who are blind or have low vision. This not only improves the user experience for visually impaired individuals but also ensures that they are not excluded from accessing important information and entertainment.<\/p>\n In addition to making videos and images more accessible, descriptive captions can also improve comprehension and retention of information for all viewers. This is because they provide additional context and details that may not be immediately apparent through visual or audio content alone. For example, a visually impaired viewer may be able to better understand a complex diagram or graphic through a descriptive caption.<\/p>\n [\/et_pb_blurb][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.21.0″ _module_preset=”default” custom_margin=”50px||||false|false” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_blurb title=”Keyboard Navigation” image=”https:\/\/sophwinsand.com\/wcag-manual\/wp-content\/uploads\/2024\/04\/Untitled_Artwork-3-2.jpg” image_icon_width=”200px” icon_alignment=”left” content_max_width=”100%” module_id=”descriptive-captions” _builder_version=”4.24.3″ _module_preset=”58e41a12-d2dc-4bc3-82a3-e7e2a77a32bd” header_font=”DM Sans|700|||||||” header_text_color=”#03005e” header_font_size=”30px” header_line_height=”1.2em” body_font=”DM Sans||||||||” body_text_color=”#04114c” body_font_size=”19px” custom_margin=”||||false|false” custom_padding=”||||false|false” animation=”off” header_font_size_tablet=”18px” header_font_size_phone=”16px” header_font_size_last_edited=”on|desktop” body_font_size_tablet=”15px” body_font_size_phone=”13px” body_font_size_last_edited=”on|phone” border_width_bottom=”0px” border_color_bottom=”rgba(0,0,0,0.12)” locked=”off” global_colors_info=”{}”]<\/p>\n Keyboard navigation allows users to navigate a website using the keyboard instead of a mouse, making it easier for individuals with mobility impairments or other disabilities to access content. <\/span>Keyboard navigation allows users to move through a website using only the keyboard, using the Tab key to move between links and other interactive elements on the page.<\/p>\n Keyboard navigation is essential for individuals with mobility impairments or who have difficulty using a mouse or other pointing device, as well as for individuals who are blind or have low vision and rely on screen readers to navigate websites. By ensuring that websites are fully accessible via keyboard navigation, designers and developers can ensure that all users can access and use their websites, regardless of their abilities or disabilities.<\/p>\n Keyboard navigation is also important for users who prefer using the keyboard over a mouse, or who may not have access to a mouse or other pointing device. Additionally, keyboard navigation can improve website usability and user experience for all users, by allowing them to quickly and efficiently navigate through a website without needing to switch between the mouse and keyboard.<\/p>\n [\/et_pb_blurb][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_blurb title=”High Contrast Mode” image=”https:\/\/sophwinsand.com\/wcag-manual\/wp-content\/uploads\/2024\/04\/Untitled_Artwork-12.jpg” image_icon_width=”200px” icon_alignment=”left” content_max_width=”100%” module_id=”descriptive-captions” _builder_version=”4.24.3″ _module_preset=”58e41a12-d2dc-4bc3-82a3-e7e2a77a32bd” header_font=”DM Sans|700|||||||” header_text_color=”#03005e” header_font_size=”30px” header_line_height=”1.2em” body_font=”DM Sans||||||||” body_text_color=”#04114c” body_font_size=”19px” custom_margin=”||||false|false” custom_padding=”||||false|false” animation=”off” header_font_size_tablet=”18px” header_font_size_phone=”16px” header_font_size_last_edited=”on|desktop” body_font_size_tablet=”15px” body_font_size_phone=”13px” body_font_size_last_edited=”on|phone” border_width_bottom=”0px” border_color_bottom=”rgba(0,0,0,0.12)” locked=”off” global_colors_info=”{}”]<\/p>\n High contrast mode is a setting that increases the color contrast between the text and background of a website, making it easier to read for individuals with low vision or color blindness. <\/span>This mode alters the colors of text and background to create a higher contrast, making it easier for users to read and navigate web content.<\/p>\n For individuals with low vision or color blindness, the contrast between text and background can greatly affect their ability to read and understand web content. High contrast mode can help to make text stand out more clearly, reducing eye strain and improving readability.<\/p>\n In addition to helping individuals with visual impairments, high contrast mode can also be useful for individuals who are viewing content in bright sunlight or other conditions where visibility may be limited. By providing high contrast options, web designers and content creators can make their content more accessible and user-friendly for a wider range of viewers.<\/p>\n [\/et_pb_blurb][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":" Visual Web AccessibilityVisual web accessibility refers to designing websites and digital content in a way that makes them accessible to individuals with visual impairments or other disabilities that affect their ability to see and perceive visual content. It involves providing alternative ways for users to access visual content, such as images, videos, and other graphics, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nf_dc_page":"","_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-200","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sophwinsand.com\/wcag-manual\/wp-json\/wp\/v2\/pages\/200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sophwinsand.com\/wcag-manual\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sophwinsand.com\/wcag-manual\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sophwinsand.com\/wcag-manual\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sophwinsand.com\/wcag-manual\/wp-json\/wp\/v2\/comments?post=200"}],"version-history":[{"count":5,"href":"https:\/\/sophwinsand.com\/wcag-manual\/wp-json\/wp\/v2\/pages\/200\/revisions"}],"predecessor-version":[{"id":528,"href":"https:\/\/sophwinsand.com\/wcag-manual\/wp-json\/wp\/v2\/pages\/200\/revisions\/528"}],"wp:attachment":[{"href":"https:\/\/sophwinsand.com\/wcag-manual\/wp-json\/wp\/v2\/media?parent=200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Robo Asks:<\/span><\/h1>\n
What Can Designers<\/span> Do?<\/h1>\n