{"id":176,"date":"2019-06-04T12:27:41","date_gmt":"2019-06-04T16:27:41","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/iwacc\/?post_type=chapter&#038;p=176"},"modified":"2023-04-25T08:58:17","modified_gmt":"2023-04-25T12:58:17","slug":"1-4-distinguishable-level-aa-and-aaa","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/","title":{"raw":"1.4 Distinguishable (Level AA  and AAA)","rendered":"1.4 Distinguishable (Level AA  and AAA)"},"content":{"raw":"<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"1.4.3\"><\/a>Success Criterion 1.4.3<\/strong> Contrast (Minimum)<\/h3>\r\nLevel AA\r\n\r\nThe visual presentation of <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-text\">text<\/a> and <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-images-of-text\">images of text<\/a> has a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-contrast-ratio\">contrast ratio<\/a> of at least <strong>4.5:1<\/strong>, except for the following:\r\n<ul>\r\n \t<li><strong>Large Text<\/strong>: <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-large-scale\">Large-scale<\/a> text and images of large-scale text have a contrast ratio of at least <strong>3:1<\/strong>.<\/li>\r\n \t<li><strong>Incidental: <\/strong>Text or images of text that are part of an inactive <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-user-interface-components\">user interface component<\/a>, that are <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-pure-decoration\">pure decoration<\/a>, that are not visible to anyone, or that are part of a picture that contains significant other visual content have no contrast requirement.<\/li>\r\n \t<li><strong>Logotypes: <\/strong>Text that is part of a logo or brand name has no contrast requirement.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<h4>Contrast Explained<\/h4>\r\nFor those with low vision or significant colour vision deficiency, low contrast between text colour and background colour can make reading difficult or impossible. These may be people with congenital (genetic) or acquired vision loss, including those with typical reduced visual acuity associated with aging.\r\n\r\nLarger font (e.g., 18+ pt or 14 pt bold) is easier to read at lower contrast than typical text, like the text you are reading now, so the required contrast level (a.k.a., relative luminance) can be lower, at a contrast ratio of 3:1. Typical fonts (e.g., approximately 12 pt or less) require a higher contrast to be readable for some people, at a minimum contrast ratio of 4.5:1. These ratios are calculated based on the contrast required by someone with 20\/40 visual acuity to effectively read text without the assistance of system or software contrast enhancements (see also: <strong>SC 1.4.6<\/strong> Contrast Enhanced).\r\n\r\nA common contrast issue occurs when the colour of link text has its typical underline removed using CSS styles. The resulting link text may not provide sufficient contrast with the surrounding text. In such cases, links that are embedded in a paragraph, for instance, become invisible to many users. The link text may only be discovered by inadvertently passing a mouse pointer over the link, causing the finger pointer to appear. Web content developers will often remove the standard link underline for aesthetic reasons, perhaps not realizing that this creates a barrier for some people. In contrast, for links in navigation menus, removing the underline is less of an issue, since the function of these links is usually obvious. Developers should distinguish between navigation links and links embedded in content, styling the latter with an underline. The underline for links is the default, so they have to be removed intentionally. Developers should avoid removing the underline in such cases.\r\n\r\nColour contrast is relatively easy to check. There are many tools available that take codes for foreground (text) and background colours, then calculate the contrast ratio. These colour codes can be found by using a tool like ColorZilla or by using a browser\u2019s Inspect Element window. In order to use Inspect Element, try selecting an element in the HTML window to the left, then observing the associated colour code in the CSS window on the right, as seen in the figure below.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #3c3\">\r\n\r\n<strong>Toolkit: <\/strong>\r\n<ul>\r\n \t<li><a href=\"http:\/\/www.colorzilla.com\/\">ColorZilla<\/a><\/li>\r\n \t<li><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">WebAim Color Contrast Checker<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<img src=\"http:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/inspect-1024x431.png\" alt=\"Screenshot of Inspect Element, pointing out a selected element and its associated colours.\" class=\"wp-image-57 size-large\" style=\"color: #373d3f;font-weight: bold;font-size: 14pt\" width=\"1024\" height=\"431\" \/>\r\n\r\n<strong>Figure: <\/strong>In a browser\u2019s Inspect Element window, arrows pointing to an HTML element on the left and its associated colour in the CSS on the right.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\r\n<h4><strong><a id=\"TT colour contrast\"><\/a>Try This: Checking Colour Contrast<\/strong><\/h4>\r\n<a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">WebAim Color Contrast Checker<\/a>\r\n\r\nUsing your browser\u2019s Inspect Element feature, select text and background colours from an element on a familiar website and determine its contrast ratio using the contrast checker above.\r\n\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\r\n\r\n<strong>Suggested Reading:<\/strong>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/contrast-minimum.html\">Understanding Success Criterion 1.4.3 Contrast (Minimum)<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#contrast-minimum\">How to Meet Contrast (Minimum)<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"1.4.4\"><\/a>Success Criterion 1.4.4<\/strong> Resize text<\/h3>\r\nLevel AA\r\n\r\nExcept for\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-captions\">captions<\/a> and <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-images-of-text\">images of text<\/a>, <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-text\">text<\/a> can be resized without <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-assistive-technologies\">assistive technology<\/a> up to 200 percent without loss of content or functionality.\r\n\r\n<\/div>\r\n<h4>Resize Text Explained<\/h4>\r\nThe goal of this success criteria is to ensure that people with mild visual disabilities can read content without the need for assistive technology to magnify text. This group of people includes the large population of individuals over 50 years of age, who tend to lose visual acuity with age and often need to increase text size just a little to make it readable.\r\n\r\nCurrent browsers have a built-in zoom feature that will magnify the content on a web page, including images, regardless of how they have been sized. Typically, web content should be sized using relative measures (em or %) rather than absolute measures (pt or px) to ensure that elements throughout a page of web content magnify at the same rate. This includes container elements sized with absolute measures that have relatively sized text in them. If the container is sized with absolute measures, they run the risk of text magnifying but the container remaining the same size. This scenario may result in the magnified text presented one word per line, making it difficult to read. Or magnified text may float over or under adjacent text or other elements on the page, again making it difficult to read.\r\n\r\nRelative sizing is also a requirement for responsive designs, which have become the norm for websites in recent years. Most websites are now developed in a way that adapt to the size of the screen they are being viewed on (i.e., they are responsive to screen size). Sizing text with relative measures thus accommodates people who need larger text to make it readable and ensures websites adapt effectively for a range of screen sizes.\r\n\r\nAlso see <strong>SC 1.4.10 <\/strong>Reflow for more about web content adapting to screen size.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\r\n<h4><strong><a id=\"Try This: Using Zoom to Resize Text\"><\/a>Try This: Using Zoom to Resize Text<\/strong><\/h4>\r\nOpen a YouTube video and magnify the content of the page using your browser\u2019s zoom function (CMD and + on Mac; CTRL and + on Windows). Notice what zooms and what does not. Depending on the browser you\u2019re using, you may notice differences in the way browsers magnify content.\r\n\r\nTry this activity with Firefox, Chrome, Internet Explorer, or Edge browsers. If testing on Firefox, you can also try zooming on the text only by selecting \u201cZoom Text Only\u201d from the View &gt; Zoom menu.\r\n\r\nAlso, try making the width of your browser narrow. Grab the right edge of the browser window with your mouse pointer and drag the edge of the window to the left. Notice whether the content adjusts its layout and resizes (or does not resize) to fit into the smaller available space.\r\n\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\r\n\r\n<strong>Suggested Reading:<\/strong>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#resize-text\">Understanding Success Criterion 1.4.4 Resize text<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#resize-text\">How to Meet Resize text<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"1.4.5\"><\/a>Success Criterion 1.4.5<\/strong> Images of Text<\/h3>\r\nLevel AA\r\n\r\nIf the technologies being used can achieve the visual presentation, <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-text\">text<\/a> is used to convey information rather than <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-images-of-text\">images of text<\/a> except for the following:\r\n<ul>\r\n \t<li><strong>Customizable<\/strong>: The image of text can be <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-visually-customized\">visually customized<\/a> to the user\u2019s requirements.<\/li>\r\n \t<li><strong>Essential<\/strong>: A particular presentation of text is <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-essential\">essential<\/a> to the information being conveyed.<\/li>\r\n<\/ul>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #3c3\">\r\n\r\n<strong>Note:<\/strong> Logotypes (text that is part of a logo or brand name) are considered essential.\r\n\r\n<\/div>\r\n<\/div>\r\n<h4>Images of Text Explained<\/h4>\r\nMost bitmap (or raster) images are made up of pixels or dots, which makes these images lose their crisp appearance when magnified. In contrast, vector-based images consist of points, lines, and curves and can adapt well to being resized. The vast majority of images on the Web are bitmap images (png, gif, or jpeg).\r\n\r\nWhen bitmap images contain meaningful text and are magnified, the letters will typically pixelate, resulting in ragged edges around letters thereby making text more difficult to read for a person with low vision using browser-based zooming.\r\n\r\nImages of text will also be inaccessible to people who are blind and using a screen reader to read web content. Screen readers are not able to extract text from images. While it is possible in some cases to reproduce the text in the alt text for an image or in a long description, this won\u2019t accommodate people with low vision.\r\n\r\nWhile there are some cases where images of text are necessary, generally web content developers should avoid using them. Wherever possible, actual text should be used. Actual text will magnify while keeping its crisp appearance, unlike the pixelated text in a magnified image.\r\n\r\nAnother reason why web developers may want text instead of images of text is for search engine indexing. Search engines can index text to make it searchable, while images of text cannot be indexed, apart from indexing the associated alt text. Text also uses much less bandwidth than an image of the same text, an important point for developers who are conscious of page loading times and bandwidth usage. By opting for smaller, faster-loading pages, websites can be considerate of data usage for visitors who may have limited data plans or who may turn off images to reduce their data consumption.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\r\n<h4><strong><a id=\"TT: Magnify\"><\/a>Try This: Magnify Text<\/strong><\/h4>\r\nUsing your browser\u2019s zoom function, magnify the following letters and notice any changes in their appearance as they get larger. The image of text will degrade while the text and the SVG versions stay crisp and easy to read.\r\n\r\n[h5p id=\"16\"]\r\n\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\r\n\r\n<strong>Suggested Reading: <\/strong>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/images-of-text.html\">Understanding Success Criterion 1.4.5 Images of Text<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#images-of-text\">How to Meet Images of Text<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"1.4.6\"><\/a>Success Criterion 1.4.6<\/strong> Contrast (Enhanced)<\/h3>\r\nLevel AAA\r\n\r\nThe visual presentation of <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-text\">text<\/a> and <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-images-of-text\">images of text<\/a> has a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-contrast-ratio\">contrast ratio<\/a> of at least 7:1, except for the following:\r\n<ul>\r\n \t<li><strong>Large Text: <\/strong><a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-large-scale\">Large-scale<\/a> text and images of large-scale text have a contrast ratio of at least 4.5:1.<\/li>\r\n \t<li><strong>Incidental: <\/strong>Text or images of text that are part of an inactive <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-user-interface-components\">user interface component<\/a>, that are <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-pure-decoration\">pure decoration<\/a>, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.<\/li>\r\n \t<li><strong>Logotypes: <\/strong>Text that is part of a logo or brand name has no contrast requirement.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<h4>Contrast (Enhanced) Explained<\/h4>\r\nThis success criteria is a more stringent version of <strong>SC 1.4.3<\/strong>. While <strong>SC 1.4.3<\/strong> is intended to accommodate readers with 20\/40 vision without the need for assistive technology, <strong>SC 1.4.6<\/strong> is intended to accommodate those with 20\/80 vision without the need for assistive technology. These are typical low-vision users who do not use assistive technology. Those with vision loss greater than 20\/80 tend to use assistive technology such as magnifiers or contrast-enhancing software. Also, see <strong>SC 1.4.3 Contrast Minimum<\/strong>.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\r\n<h4><strong><a id=\"Try This: Choosing Accessible Colours\"><\/a>Try This: Choosing Accessible Colours<\/strong><\/h4>\r\nUsing the <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">WebAim Color Contrast Checker<\/a>, introduced above, enter the colour values for black (#000000) as the background colour and white (#FFFFFF) as the foreground colour, and notice the contrast ratio the checker reports. Then reverse the colours. Is there any change in the contrast ratio?\r\n\r\nDo you find it easier to read white text on a black background or black text on a white background? Why do you think that is, despite the contrast in each case being equal?\r\n\r\nAlso, try other opposing colours like blue and yellow, and red and green, and switching between foreground and background colours. Notice which colour combinations you find easier to read.\r\n\r\nThough a controversial topic, the science is fairly clear: <a href=\"https:\/\/tatham.blog\/2008\/10\/13\/why-light-text-on-dark-background-is-a-bad-idea\/\">Why light text on dark background is a bad idea<\/a>.\r\n\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\r\n\r\n<strong>Suggested Reading:<\/strong>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/contrast-enhanced.html\">Understanding Success Criterion 1.4.6 Contrast (Enhanced)<\/a><\/li>\r\n<\/ul>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#contrast-enhanced\">How to Meet Contrast (Enhanced)<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"1.4.7\"><\/a>Success Criterion 1.4.7<\/strong> Low or No Background Audio<\/h3>\r\nLevel AAA\r\n\r\nFor <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-prerecorded\">prerecorded<\/a><a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-audio-only\"> audio-only<\/a> content that (a) contains primarily speech in the foreground, (b) is not an audio <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-captcha\">CAPTCHA<\/a> or audio logo, and (c) is not vocalization intended to be primarily musical expression such as singing or rapping, at least one of the following is true:\r\n<ul>\r\n \t<li><strong>No Background:<\/strong> The audio does not contain background sounds.<\/li>\r\n \t<li><strong>Turn Off:<\/strong> The background sounds can be turned off.<\/li>\r\n \t<li><strong>20 dB:<\/strong> The background sounds are at least 20 decibels lower than the foreground speech content, with the exception of occasional sounds that last for only one or two seconds.<\/li>\r\n<\/ul>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #3c3\">\r\n\r\n<strong>Note: <\/strong>Per the definition of \u201cdecibel,\u201d background sound that meets this requirement will be approximately four times quieter than the foreground speech content.\r\n\r\n<\/div>\r\n<\/div>\r\n<h4>Low or No Background Audio Explained<\/h4>\r\nThis success criteria is intended to ensure that people with mild to moderate hearing loss are able to distinguish between foreground speech and background sounds and still understand what is being said. The optimal approach is not to have background audio. In cases where background audio is necessary, users should be able to disable the background audio. Alternatively, you should ensure that there is at least 20 decibels between speech volume and the volume of the background audio.\r\n\r\nMeasuring the separation between foreground speech and background sounds requires audio editing software. Samples are taken from an audio track at two instances: when just the background sound is audible and when both speech and background sounds are audible. Then, the decibel output of each is compared.\r\n\r\nAlternatively, someone with good hearing listens to the speech over the background sounds, and if there are any parts that require added attention to comprehend, there is likely less than 20 dB of separation. For someone with a hearing impairment, those parts will be even more difficult to comprehend.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\r\n\r\n<strong>Suggested Reading:<\/strong>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/low-or-no-background-audio.html\">Understanding Success Criterion 1.4.7 Low or No Background Audio<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#low-or-no-background-audio\">How to Meet Low or No Background Audio<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"1.4.8\"><\/a>Success Criterion 1.4.8<\/strong> Visual Presentation<\/h3>\r\nLevel AAA\r\n\r\nFor the visual presentation of <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-blocks-of-text\">blocks of text<\/a>, a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-mechanism\">mechanism<\/a> is available to achieve the following:\r\n<ul>\r\n \t<li>Foreground and background colours can be selected by the user.<\/li>\r\n \t<li>Width is no more than 80 characters or glyphs (40, if CJK).<\/li>\r\n \t<li>Text is not justified (aligned to both the left and the right margins).<\/li>\r\n \t<li>Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.<\/li>\r\n \t<li>Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-on-a-full-screen-window\">on a full-screen window<\/a>.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<h4>Visual Presentation Explained<\/h4>\r\nThis success criteria essentially requires that the presentation of blocks of text be adaptable to the text\/font preferences of the reader. This adaptability can benefit people with low vision and people with some cognitive or learning disabilities.\r\n\r\nSome people find it easier to read with non-standard text and background colours (e.g., yellow on black). Some people with cognitive or certain learning disabilities will find it easier to read text with a little extra white space between lines. Others find text easier to read when spacing between words is consistent, as opposed to variable spacing in the case of justified text. While the text does not necessarily have to meet all these requirements by default, it must be possible to override the default presentation so readers are able to apply their own styles that meet their particular needs.\r\n\r\nPlain text will generally comply with this success criteria. Failures occur when authors or web developers prevent text from adapting. Here are more examples of failures:\r\n<ul>\r\n \t<li>Fonts are sized with absolute measures (e.g., px and pt).<\/li>\r\n \t<li>Text colours are defined with inline styles or older deprecated HTML attributes.<\/li>\r\n \t<li>Paragraph text is justified with inline styles.<\/li>\r\n \t<li>Text container widths are defined in absolute measures.<\/li>\r\n \t<li>Font colour is defined but background colour is not, or vice versa.<\/li>\r\n<\/ul>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #3c3\">\r\n\r\n<strong>Toolkit<\/strong>: Install the <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/user-css\/okpjlejfhacmgjkmknjhadmkdbcldfcb?hl=en\">User CSS Chrome extension<\/a>, used to create a user-specific custom style sheet.\r\n\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\r\n<h4><strong><a id=\"Try This: Creating Custom Styles\"><\/a>Try This: Creating Custom Styles<\/strong><\/h4>\r\nAfter installing\u00a0<a href=\"https:\/\/chrome.google.com\/webstore\/detail\/user-css\/okpjlejfhacmgjkmknjhadmkdbcldfcb?hl=en\">User CSS for Chrome<\/a>, create a custom style yourself.\r\n\r\n<img src=\"http:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/user-css.png\" alt=\"Using UserCSS to change a website\u2019s styles, see steps below.\" class=\"alignnone size-full wp-image-64\" width=\"886\" height=\"696\" \/>\r\n\r\nSteps:\r\n<ol>\r\n \t<li>Install the Chrome User CSS extension, via the Toolkit link above.<\/li>\r\n \t<li>After installing, open the extension by clicking the User CSS icon added to the Chrome toolbar.<\/li>\r\n \t<li>Right-click on an element in the web page that you want to adjust, and choose \u201cInspect Element\u201d from the menu that opens. (Or press the F12 function key.)<\/li>\r\n \t<li>If it is not already selected, click on the HTML markup associated with the element in the left pane of the inspect window. This opens the styles for the element in the right pane.<\/li>\r\n \t<li>Copy a style from the right pane into the User CSS window.<\/li>\r\n \t<li>Change the properties of the style and observe the changes that occur on the web page.<\/li>\r\n<\/ol>\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\r\n\r\n<strong>Suggested Reading:<\/strong>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/visual-presentation.html\">Understanding Success Criterion 1.4.8 Visual Presentation<\/a><\/li>\r\n<\/ul>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#visual-presentation\">How to Meet Visual Presentation<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"1.4.9\"><\/a>Success Criterion 1.4.9<\/strong> Images of Text (No Exception)<\/h3>\r\nLevel AAA\r\n\r\n<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-images-of-text\">Images of text<\/a> are only used for\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-pure-decoration\">pure decoration<\/a> or where a particular presentation of <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-text\">text<\/a> is<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-essential\"> essential<\/a> to the information being conveyed.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #3c3\">\r\n\r\n<strong>Note:<\/strong> Logotypes (text that is part of a logo or brand name) are considered essential.\r\n\r\n<\/div>\r\n<\/div>\r\n<h4>Images of Text (No Exceptions) Explained<\/h4>\r\nWhile <strong>SC 1.4.5<\/strong> allows the use of text in images in some cases (provided there is an actual text alternative available), <strong>SC 1.4.9<\/strong> requires that no images of text are used, apart from logos, essential images of text, or images used only for decoration.\r\n\r\nThis requirement ensures that those who benefit from adaptable text presentation, as described for <strong>SC 1.4.8<\/strong>, are able to apply their text adaptations for all text. Images of text would not otherwise be adaptable to these individuals.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\r\n\r\n<strong>Suggested Reading:<\/strong>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/images-of-text-no-exception.html\">Understanding Success Criterion 1.4.9 Images of Text (No Exception)<\/a><\/li>\r\n<\/ul>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#images-of-text-no-exception\">How to Meet Images of Text (No Exception)<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"1.4.10\"><\/a>Success Criterion 1.4.10<\/strong> Reflow<\/h3>\r\n<span style=\"background-color: #00ff00;border: thin solid green;padding: 0.2em\"><strong>WCAG 2.1<\/strong><\/span>\r\n\r\nLevel AA\r\n\r\nContent can be presented without loss of information or functionality and without requiring scrolling in two dimensions for the following:\r\n<ul>\r\n \t<li>Vertical scrolling content at a width equivalent to 320 <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-css-pixels\">CSS pixels<\/a><\/li>\r\n \t<li>Horizontal scrolling content at a height equivalent to 256 <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-css-pixels\">CSS pixels<\/a><\/li>\r\n<\/ul>\r\nThe above applies except for parts of the content that require two-dimensional layout for usage or meaning.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #3c3\">\r\n\r\n<strong>Note: <\/strong>320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content that is designed to scroll horizontally (e.g., with vertical text), the 256 CSS pixels is equivalent to a starting viewport height of 1024 px at 400% zoom.\r\n\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #3c3\">\r\n\r\n<strong>Note: <\/strong>Examples of content that require two-dimensional layout are images, maps, diagrams, video, games, presentations, data tables, and interfaces where it is necessary to keep toolbars in view while manipulating content.\r\n\r\n<\/div>\r\n<\/div>\r\n<h4>Reflow Explained<\/h4>\r\nThe aim of this success criteria has two parts: (1) Allow people with significant vision loss, who do not use screen readers or magnifiers, to magnify web content to 400% using only a browser\u2019s zoom; and (2) allow content to adapt such that there is no need to scroll left or right (or to scroll up and down for vertical languages). When scrolling is required, it can be difficult to move from the end of one line of text to the start of the next. Also, when scrolling is required, there is also the risk that content that is not in the visible area of the screen may go unnoticed.\r\n\r\nWhile reflowing content is very helpful for this group, it is also a prerequisite for responsive designs that adapt to various screen sizes and orientations.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd\" title=\"definition\">\r\n\r\n<strong>Definition <\/strong>\r\n\r\n<strong>Responsive design<\/strong> is an approach to web page creation that makes use of flexible layouts, flexible images, and Cascading Style Sheet media queries. The goal of responsive design is to build web pages that detect the visitor\u2019s screen size and orientation and change the layout accordingly. (<a href=\"http:\/\/WhatIs.com\">Source: WhatIs.com<\/a>)\r\n\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd\" title=\"definition\">\r\n\r\n<strong>Definition<\/strong>\r\n\r\n<strong>Viewport<\/strong> is another name for a browser window, or for a mobile phone or tablet screen. It is the visible space available to display a web page. Responsive designs were introduced to accommodate the wide range of viewport sizes across desktop and mobile device displays.\r\n\r\n<\/div>\r\nIn the figure below, you will see a standard desktop display of the TMU website on the left and a reflow version (responsive) on the right. Dragging the right side of the browser window to the left to narrow its width causes the elements on the page to reflow to fit the available space. Likewise, when using your browser\u2019s zoom to increase the view to 400%, the content reflows into a single column, so it can be viewed with ease by someone who needs magnification but does not use an assistive technology.\r\n<!--start side-by-side-->\r\n<div>\r\n\r\n<img src=\"http:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/rye_screen_wide.png\" alt=\"A desktop display of a website in a wide landscape shot.\" style=\"width: 65%;float: left;clear: left;vertical-align: top\" class=\"alignnone size-full wp-image-63\" \/><img src=\"http:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/rye_screen_narrow.png\" alt=\"A screeenshot of a website with content adapted through responsive design to fit a narrow, portrait screen.\" style=\"width: 30%;float: left;vertical-align: top\" class=\"alignnone size-full wp-image-62\" \/>\r\n\r\n<\/div>\r\n<!--end side-by-side-->\r\n\r\n<hr style=\"width: 100%;clear: both\" \/>\r\n\r\n<strong>Figure:\u00a0<\/strong>A desktop display of a website on the left, adapted through responsive design to fit a narrow screen on the right.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\r\n<h4><strong><a id=\"Try This: Resize Browser Windows\"><\/a>Try This: Resize Browser Windows<\/strong><\/h4>\r\n<a href=\"https:\/\/www.torontomu.ca\" target=\"_blank\" rel=\"noopener\">Toronto Metropolitan University<\/a>\r\n\r\nVisit the torontomu.ca website yourself. Try dragging the right side of your browser window left to reproduce the above effect. Next, use your browser\u2019s zoom feature (in the View menu) to zoom in to 400%. In both cases, notice how the content of the page rearranges itself to fit the available space.\r\n\r\nTry the activity on a couple of other websites you are familiar with, and notice whether they adapt, or reflow, to fit your browser window at different sizes.\r\n\r\n<\/div>\r\n<h4>Reflow Exceptions<\/h4>\r\nThere are a few exceptions to the reflow rule. Larger images, for example, that when viewed full width in a desktop browser window at 100% will flow off the side of the screen when magnified to 400%. Depending on the content of the image, developers may be able to set the maximum width of images to 100% of the browser window, so it increases in size until it reaches the width of the window. You may notice this happening on the TMU website in the activity above.\r\n\r\nData tables are another exception. Header cells and data cells have a particular relationship that cannot be changed without changing the meaning in the table. Both images and data tables are out of scope for this success criteria.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\r\n\r\n<strong>Suggested Reading:<\/strong>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/reflow.html\">Understanding Success Criterion 1.4.10 Reflow<\/a><\/li>\r\n<\/ul>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#reflow\">How to Meet Reflow<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"1.4.11\"><\/a>Success Criterion 1.4.11<\/strong> Non-Text Contrast<\/h3>\r\n<span style=\"background-color: #00ff00;border: thin solid green;padding: 0.2em\"><strong>WCAG 2.1<\/strong><\/span>\r\n\r\nLevel AA\r\n\r\nThe visual <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-presentation\">presentation<\/a> of the following have a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-contrast-ratio\">contrast ratio<\/a> of at least 3:1 against adjacent colour(s):\r\n<ul>\r\n \t<li><strong>User Interface Components<\/strong>: Visual information required to identify <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-user-interface-components\">user interface components<\/a> and <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-states\">states<\/a>, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author.<\/li>\r\n \t<li><strong>Graphical Objects<\/strong>: Parts of graphics required to understand the content, except when a particular presentation of graphics is <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-essential\">essential<\/a> to the information being conveyed.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<h4>Non-Text Contrast Explained<\/h4>\r\nThis success criteria builds on <strong>SC 1.4.3 <\/strong>Contrast Minimum, which ensures text is readable over its background colour, extending the need for good contrast to <strong>functional elements<\/strong> in web content such as links and forms, as well as other visual elements such as icons, graphs or charts, and infographics, among <strong>other graphical objects<\/strong>.\r\n\r\nTake links, for example. It is common for web content developers to remove the underline from links for aesthetic reasons. In some cases, removing the underline is okay, when the function of links, such as links in a menu, is obvious to the users. Often link text is blue by default, which over a typical white background will provide sufficient contrast to be readable. However, readers may not be able to distinguish between the blue link text (with the underline removed) and the surrounding black paragraph text. Such links may go unnoticed. The default contrast between the link colour and the surrounding text colour will fail this success criteria.\r\n\r\nAnother common non-text contrast issue occurs when disabled buttons are greyed out to indicate they are not functional. This may very well be desirable to de-emphasize the button until a particular task is complete or data entered, for example. But it may also create a barrier for low-vision users who may not be able to effectively see the disabled button to know that some task needs to be completed before continuing. In such a case, there are competing needs between those who can see and those who may have difficulty seeing. If higher contrast is required to make the disabled button more visible, it may make the disabled state less distinguishable for those who can see the buttons.\r\n\r\nReaders should refer to <strong>SC 1.3.5<\/strong>\u00a0and <strong>SC 1.3.6<\/strong> for more about potential solutions to competing needs. Icons, for example, might be used in the future with disabled elements, so those who may not be able to see the element have an alternative available through a preference setting that inserts an icon where a disabled element is present.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\r\n\r\n<strong>Suggested Reading: <\/strong>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/non-text-contrast.html\">Understanding Success Criterion 1.4.11 Non-text Contrast<\/a><\/li>\r\n<\/ul>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#non-text-contrast\">How to Meet Non-text Contrast<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"1.4.12\"><\/a>Success Criterion 1.4.12<\/strong> Text Spacing<\/h3>\r\n<span style=\"background-color: #00ff00;border: thin solid green;padding: 0.2em\"><strong>WCAG 2.1<\/strong><\/span>\r\n\r\nLevel AA\r\n\r\nIn content implemented using markup languages that support the following <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-text\">text<\/a><a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-style-properties\"> style properties<\/a>, no loss of content or functionality occurs by setting all of the following and by changing no other style property:\r\n<ul>\r\n \t<li>Line height (line spacing) to at least 1.5 times the font size<\/li>\r\n \t<li>Spacing following paragraphs to at least 2 times the font size<\/li>\r\n \t<li>Letter spacing (tracking) to at least 0.12 times the font size<\/li>\r\n \t<li>Word spacing to at least 0.16 times the font size<\/li>\r\n<\/ul>\r\n<strong>Exception:<\/strong> Human languages and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script.\r\n\r\n<\/div>\r\n<h4>Text Spacing Explained<\/h4>\r\nYou were introduced to text sizing in <strong>SC 1.4.4 <\/strong>Resize Text\u00a0and in <strong>SC 1.4.8 <\/strong>Visual Presentation, both of which ensure that readers are able to modify the presentation of text to make it more readable. <strong>SC 1.4.12<\/strong> builds on customizing text properties, adding line height, paragraph spacing, letter spacing, and word spacing to that mix.\r\n\r\nThis success criteria does not require authors to set these text properties. It requires that they do not prevent users from setting them. It is users who are responsible for applying these properties though tools such as <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/user-css\/okpjlejfhacmgjkmknjhadmkdbcldfcb?hl=en\">User CSS<\/a>, introduced earlier. Much like sizing with relative measures (%, em), as discussed with <strong>SC 1.4.4<\/strong>, relative sizing should be used for line height and for paragraph, letter, and word spacing. In this way, all elements related to text presentation, including text containers, increase in size at the same rate, rather than floating over adjacent text or floating under an adjacent image or text container, for example.\r\n\r\nSimilarly, older HTML attributes, such as height and width, should be avoided, as well as inline styles controlling these properties when defining text sizes. The same is true for the four properties associated with this success criteria. HTML attributes and inline styles can make it difficult or impossible for users to adjust text presentation to their liking.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\r\n\r\n<strong>Suggested Reading:<\/strong>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/text-spacing.html\">Understanding Success Criterion 1.4.12 Text Spacing<\/a><\/li>\r\n<\/ul>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#text-spacing\">How to Meet Text Spacing<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"1.4.13\"><\/a>Success Criterion 1.4.13<\/strong> Content on Hover or Focus<\/h3>\r\n<span style=\"background-color: #00ff00;border: thin solid green;padding: 0.2em\"><strong>WCAG 2.1<\/strong><\/span>\r\n\r\nLevel AA\r\n\r\nWhere receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:\r\n<ul>\r\n \t<li><strong>Dismissable<\/strong>: A <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-mechanism\">mechanism<\/a> is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-input-error\">input error<\/a> or does not obscure or replace other content;<\/li>\r\n \t<li><strong>Hoverable<\/strong>: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;<\/li>\r\n \t<li><strong>Persistent<\/strong>: The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.<\/li>\r\n<\/ul>\r\n<strong>Exception: <\/strong>The visual presentation of the additional content is controlled by the user agent and is not modified by the author.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #3c3\">\r\n\r\n<strong>Note:<\/strong> Examples of additional content controlled by the user agent include browser tooltips created through use of the HTML <a href=\"https:\/\/www.w3.org\/TR\/html\/dom.html#the-title-attribute\">title attribute<\/a>.\r\n\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #3c3\">\r\n\r\n<strong>Note: <\/strong>Custom tooltips, submenus, and other non-modal popups that display on hover and focus are examples of additional content covered by this criterion.\r\n\r\n<\/div>\r\n<\/div>\r\n<h4>Content on Hover or Focus Explained<\/h4>\r\n<strong>SC 1.4.13<\/strong> Content on Hover or Focus applies to elements like tooltips, popup menus, and other non-modal dialogs (i.e., popups). Modal dialogs are covered under <strong>SC 1.3.2 <\/strong>Meaningful Sequence and should not open on hover or focus.\r\n\r\nAs described in the success criteria above, when a tooltip or small dialog window opens with a definition, for example, users must be <strong>able to dismiss the new content<\/strong> without having to move the mouse or having to move focus away from the element that triggered the popup content. This is typically accomplished by scripting the<strong> Escape key to dismiss<\/strong> the content. This allows a user who may have screen magnification set high (e.g., 400% or more) to dismiss a popup that is accidentally opened when a mouse pointer or keyboard focus inadvertently hits a trigger, without being forced to navigate away and potentially lose their place in the original content.\r\n\r\nUsers must also be able to move the mouse pointer away from the trigger to <strong>hover in the popup content<\/strong>, without losing the popup when focus on the trigger is removed. Users who have their screen magnified may need to drag their mouse pointer away from the trigger and off the side of the visible screen, in order to bring the whole popup into view.\r\n\r\nFinally, popup <strong>content must persist until the user explicitly dismisses it<\/strong>. It can take longer for some people with disabilities to read content, so this tactic ensures there is enough time to read through the content of the popup before it disappears.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\r\n<h4><strong><a id=\"Try This: Dismissing Tooltips\"><\/a>Try This: Dismissing Tooltips<\/strong><\/h4>\r\nIn the example below, users can dismiss the tooltips by moving focus away from the triggers, accessing another trigger, or pressing the Escape key. Tooltips persist by clicking the trigger, until clicking out, pressing the Escape key, or clicking another trigger.\r\n\r\n<!--h5p source: \"https:\/\/rawcdn.githack.com\/gregrgay\/learn-aria\/03f25c3591708b70b451305037d9418ce7170b9c\/tooltip.html\" -->[h5p id=\"1\"]\r\n\r\n<a href=\"https:\/\/rawcdn.githack.com\/gregrgay\/learn-aria\/03f25c3591708b70b451305037d9418ce7170b9c\/tooltip.html\" target=\"des\" rel=\"noopener noreferrer\">Open Tooltips in a New Window<\/a>\r\n\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\r\n\r\n<strong>Suggested Reading: <\/strong>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/content-on-hover-or-focus.html\">Understanding Success Criterion 1.4.13 Content on Hover or Focus<\/a><\/li>\r\n<\/ul>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#content-on-hover-or-focus\">How to Meet Content on Hover or Focus<\/a><\/li>\r\n<\/ul>\r\n<\/div>","rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69e80adb391e6\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69e80adb391e6\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Success_Criterion_143_Contrast_Minimum\" >Success Criterion 1.4.3 Contrast (Minimum)<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Contrast_Explained\" >Contrast Explained<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Try_This_Checking_Colour_Contrast\" >Try This: Checking Colour Contrast<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Success_Criterion_144_Resize_text\" >Success Criterion 1.4.4 Resize text<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Resize_Text_Explained\" >Resize Text Explained<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Try_This_Using_Zoom_to_Resize_Text\" >Try This: Using Zoom to Resize Text<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Success_Criterion_145_Images_of_Text\" >Success Criterion 1.4.5 Images of Text<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Images_of_Text_Explained\" >Images of Text Explained<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Try_This_Magnify_Text\" >Try This: Magnify Text<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Success_Criterion_146_Contrast_Enhanced\" >Success Criterion 1.4.6 Contrast (Enhanced)<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Contrast_Enhanced_Explained\" >Contrast (Enhanced) Explained<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Try_This_Choosing_Accessible_Colours\" >Try This: Choosing Accessible Colours<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Success_Criterion_147_Low_or_No_Background_Audio\" >Success Criterion 1.4.7 Low or No Background Audio<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Low_or_No_Background_Audio_Explained\" >Low or No Background Audio Explained<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Success_Criterion_148_Visual_Presentation\" >Success Criterion 1.4.8 Visual Presentation<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Visual_Presentation_Explained\" >Visual Presentation Explained<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Try_This_Creating_Custom_Styles\" >Try This: Creating Custom Styles<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Success_Criterion_149_Images_of_Text_No_Exception\" >Success Criterion 1.4.9 Images of Text (No Exception)<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Images_of_Text_No_Exceptions_Explained\" >Images of Text (No Exceptions) Explained<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Success_Criterion_1410_Reflow\" >Success Criterion 1.4.10 Reflow<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Reflow_Explained\" >Reflow Explained<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Try_This_Resize_Browser_Windows\" >Try This: Resize Browser Windows<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Reflow_Exceptions\" >Reflow Exceptions<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Success_Criterion_1411_Non-Text_Contrast\" >Success Criterion 1.4.11 Non-Text Contrast<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Non-Text_Contrast_Explained\" >Non-Text Contrast Explained<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Success_Criterion_1412_Text_Spacing\" >Success Criterion 1.4.12 Text Spacing<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Text_Spacing_Explained\" >Text Spacing Explained<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Success_Criterion_1413_Content_on_Hover_or_Focus\" >Success Criterion 1.4.13 Content on Hover or Focus<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Content_on_Hover_or_Focus_Explained\" >Content on Hover or Focus Explained<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-4-distinguishable-level-aa-and-aaa\/#Try_This_Dismissing_Tooltips\" >Try This: Dismissing Tooltips<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_143_Contrast_Minimum\"><\/span><strong><a id=\"1.4.3\"><\/a>Success Criterion 1.4.3<\/strong> Contrast (Minimum)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level AA<\/p>\n<p>The visual presentation of <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-text\">text<\/a> and <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-images-of-text\">images of text<\/a> has a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-contrast-ratio\">contrast ratio<\/a> of at least <strong>4.5:1<\/strong>, except for the following:<\/p>\n<ul>\n<li><strong>Large Text<\/strong>: <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-large-scale\">Large-scale<\/a> text and images of large-scale text have a contrast ratio of at least <strong>3:1<\/strong>.<\/li>\n<li><strong>Incidental: <\/strong>Text or images of text that are part of an inactive <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-user-interface-components\">user interface component<\/a>, that are <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-pure-decoration\">pure decoration<\/a>, that are not visible to anyone, or that are part of a picture that contains significant other visual content have no contrast requirement.<\/li>\n<li><strong>Logotypes: <\/strong>Text that is part of a logo or brand name has no contrast requirement.<\/li>\n<\/ul>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Contrast_Explained\"><\/span>Contrast Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>For those with low vision or significant colour vision deficiency, low contrast between text colour and background colour can make reading difficult or impossible. These may be people with congenital (genetic) or acquired vision loss, including those with typical reduced visual acuity associated with aging.<\/p>\n<p>Larger font (e.g., 18+ pt or 14 pt bold) is easier to read at lower contrast than typical text, like the text you are reading now, so the required contrast level (a.k.a., relative luminance) can be lower, at a contrast ratio of 3:1. Typical fonts (e.g., approximately 12 pt or less) require a higher contrast to be readable for some people, at a minimum contrast ratio of 4.5:1. These ratios are calculated based on the contrast required by someone with 20\/40 visual acuity to effectively read text without the assistance of system or software contrast enhancements (see also: <strong>SC 1.4.6<\/strong> Contrast Enhanced).<\/p>\n<p>A common contrast issue occurs when the colour of link text has its typical underline removed using CSS styles. The resulting link text may not provide sufficient contrast with the surrounding text. In such cases, links that are embedded in a paragraph, for instance, become invisible to many users. The link text may only be discovered by inadvertently passing a mouse pointer over the link, causing the finger pointer to appear. Web content developers will often remove the standard link underline for aesthetic reasons, perhaps not realizing that this creates a barrier for some people. In contrast, for links in navigation menus, removing the underline is less of an issue, since the function of these links is usually obvious. Developers should distinguish between navigation links and links embedded in content, styling the latter with an underline. The underline for links is the default, so they have to be removed intentionally. Developers should avoid removing the underline in such cases.<\/p>\n<p>Colour contrast is relatively easy to check. There are many tools available that take codes for foreground (text) and background colours, then calculate the contrast ratio. These colour codes can be found by using a tool like ColorZilla or by using a browser\u2019s Inspect Element window. In order to use Inspect Element, try selecting an element in the HTML window to the left, then observing the associated colour code in the CSS window on the right, as seen in the figure below.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #3c3\">\n<p><strong>Toolkit: <\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/www.colorzilla.com\/\">ColorZilla<\/a><\/li>\n<li><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">WebAim Color Contrast Checker<\/a><\/li>\n<\/ul>\n<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/inspect-1024x431.png\" alt=\"Screenshot of Inspect Element, pointing out a selected element and its associated colours.\" class=\"wp-image-57 size-large\" style=\"color: #373d3f;font-weight: bold;font-size: 14pt\" width=\"1024\" height=\"431\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/inspect-1024x431.png 1024w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/inspect-300x126.png 300w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/inspect-768x323.png 768w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/inspect-65x27.png 65w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/inspect-225x95.png 225w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/inspect-350x147.png 350w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/inspect.png 1058w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><strong>Figure: <\/strong>In a browser\u2019s Inspect Element window, arrows pointing to an HTML element on the left and its associated colour in the CSS on the right.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\n<h4><strong><a><\/a>Try This: Checking Colour Contrast<\/strong><\/h4>\n<p><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">WebAim Color Contrast Checker<\/a><\/p>\n<p>Using your browser\u2019s Inspect Element feature, select text and background colours from an element on a familiar website and determine its contrast ratio using the contrast checker above.<\/p>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\n<p><strong>Suggested Reading:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/contrast-minimum.html\">Understanding Success Criterion 1.4.3 Contrast (Minimum)<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#contrast-minimum\">How to Meet Contrast (Minimum)<\/a><\/li>\n<\/ul>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_144_Resize_text\"><\/span><strong><a id=\"1.4.4\"><\/a>Success Criterion 1.4.4<\/strong> Resize text<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level AA<\/p>\n<p>Except for\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-captions\">captions<\/a> and <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-images-of-text\">images of text<\/a>, <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-text\">text<\/a> can be resized without <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-assistive-technologies\">assistive technology<\/a> up to 200 percent without loss of content or functionality.<\/p>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Resize_Text_Explained\"><\/span>Resize Text Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>The goal of this success criteria is to ensure that people with mild visual disabilities can read content without the need for assistive technology to magnify text. This group of people includes the large population of individuals over 50 years of age, who tend to lose visual acuity with age and often need to increase text size just a little to make it readable.<\/p>\n<p>Current browsers have a built-in zoom feature that will magnify the content on a web page, including images, regardless of how they have been sized. Typically, web content should be sized using relative measures (em or %) rather than absolute measures (pt or px) to ensure that elements throughout a page of web content magnify at the same rate. This includes container elements sized with absolute measures that have relatively sized text in them. If the container is sized with absolute measures, they run the risk of text magnifying but the container remaining the same size. This scenario may result in the magnified text presented one word per line, making it difficult to read. Or magnified text may float over or under adjacent text or other elements on the page, again making it difficult to read.<\/p>\n<p>Relative sizing is also a requirement for responsive designs, which have become the norm for websites in recent years. Most websites are now developed in a way that adapt to the size of the screen they are being viewed on (i.e., they are responsive to screen size). Sizing text with relative measures thus accommodates people who need larger text to make it readable and ensures websites adapt effectively for a range of screen sizes.<\/p>\n<p>Also see <strong>SC 1.4.10 <\/strong>Reflow for more about web content adapting to screen size.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\n<h4><strong><a><\/a>Try This: Using Zoom to Resize Text<\/strong><\/h4>\n<p>Open a YouTube video and magnify the content of the page using your browser\u2019s zoom function (CMD and + on Mac; CTRL and + on Windows). Notice what zooms and what does not. Depending on the browser you\u2019re using, you may notice differences in the way browsers magnify content.<\/p>\n<p>Try this activity with Firefox, Chrome, Internet Explorer, or Edge browsers. If testing on Firefox, you can also try zooming on the text only by selecting \u201cZoom Text Only\u201d from the View &gt; Zoom menu.<\/p>\n<p>Also, try making the width of your browser narrow. Grab the right edge of the browser window with your mouse pointer and drag the edge of the window to the left. Notice whether the content adjusts its layout and resizes (or does not resize) to fit into the smaller available space.<\/p>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\n<p><strong>Suggested Reading:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#resize-text\">Understanding Success Criterion 1.4.4 Resize text<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#resize-text\">How to Meet Resize text<\/a><\/li>\n<\/ul>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_145_Images_of_Text\"><\/span><strong><a id=\"1.4.5\"><\/a>Success Criterion 1.4.5<\/strong> Images of Text<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level AA<\/p>\n<p>If the technologies being used can achieve the visual presentation, <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-text\">text<\/a> is used to convey information rather than <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-images-of-text\">images of text<\/a> except for the following:<\/p>\n<ul>\n<li><strong>Customizable<\/strong>: The image of text can be <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-visually-customized\">visually customized<\/a> to the user\u2019s requirements.<\/li>\n<li><strong>Essential<\/strong>: A particular presentation of text is <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-essential\">essential<\/a> to the information being conveyed.<\/li>\n<\/ul>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #3c3\">\n<p><strong>Note:<\/strong> Logotypes (text that is part of a logo or brand name) are considered essential.<\/p>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Images_of_Text_Explained\"><\/span>Images of Text Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Most bitmap (or raster) images are made up of pixels or dots, which makes these images lose their crisp appearance when magnified. In contrast, vector-based images consist of points, lines, and curves and can adapt well to being resized. The vast majority of images on the Web are bitmap images (png, gif, or jpeg).<\/p>\n<p>When bitmap images contain meaningful text and are magnified, the letters will typically pixelate, resulting in ragged edges around letters thereby making text more difficult to read for a person with low vision using browser-based zooming.<\/p>\n<p>Images of text will also be inaccessible to people who are blind and using a screen reader to read web content. Screen readers are not able to extract text from images. While it is possible in some cases to reproduce the text in the alt text for an image or in a long description, this won\u2019t accommodate people with low vision.<\/p>\n<p>While there are some cases where images of text are necessary, generally web content developers should avoid using them. Wherever possible, actual text should be used. Actual text will magnify while keeping its crisp appearance, unlike the pixelated text in a magnified image.<\/p>\n<p>Another reason why web developers may want text instead of images of text is for search engine indexing. Search engines can index text to make it searchable, while images of text cannot be indexed, apart from indexing the associated alt text. Text also uses much less bandwidth than an image of the same text, an important point for developers who are conscious of page loading times and bandwidth usage. By opting for smaller, faster-loading pages, websites can be considerate of data usage for visitors who may have limited data plans or who may turn off images to reduce their data consumption.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\n<h4><strong><a><\/a>Try This: Magnify Text<\/strong><\/h4>\n<p>Using your browser\u2019s zoom function, magnify the following letters and notice any changes in their appearance as they get larger. The image of text will degrade while the text and the SVG versions stay crisp and easy to read.<\/p>\n<div id=\"h5p-16\">\n<div class=\"h5p-content\" data-content-id=\"16\"><\/div>\n<\/div>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\n<p><strong>Suggested Reading: <\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/images-of-text.html\">Understanding Success Criterion 1.4.5 Images of Text<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#images-of-text\">How to Meet Images of Text<\/a><\/li>\n<\/ul>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_146_Contrast_Enhanced\"><\/span><strong><a id=\"1.4.6\"><\/a>Success Criterion 1.4.6<\/strong> Contrast (Enhanced)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level AAA<\/p>\n<p>The visual presentation of <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-text\">text<\/a> and <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-images-of-text\">images of text<\/a> has a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-contrast-ratio\">contrast ratio<\/a> of at least 7:1, except for the following:<\/p>\n<ul>\n<li><strong>Large Text: <\/strong><a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-large-scale\">Large-scale<\/a> text and images of large-scale text have a contrast ratio of at least 4.5:1.<\/li>\n<li><strong>Incidental: <\/strong>Text or images of text that are part of an inactive <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-user-interface-components\">user interface component<\/a>, that are <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-pure-decoration\">pure decoration<\/a>, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.<\/li>\n<li><strong>Logotypes: <\/strong>Text that is part of a logo or brand name has no contrast requirement.<\/li>\n<\/ul>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Contrast_Enhanced_Explained\"><\/span>Contrast (Enhanced) Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>This success criteria is a more stringent version of <strong>SC 1.4.3<\/strong>. While <strong>SC 1.4.3<\/strong> is intended to accommodate readers with 20\/40 vision without the need for assistive technology, <strong>SC 1.4.6<\/strong> is intended to accommodate those with 20\/80 vision without the need for assistive technology. These are typical low-vision users who do not use assistive technology. Those with vision loss greater than 20\/80 tend to use assistive technology such as magnifiers or contrast-enhancing software. Also, see <strong>SC 1.4.3 Contrast Minimum<\/strong>.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\n<h4><strong><a><\/a>Try This: Choosing Accessible Colours<\/strong><\/h4>\n<p>Using the <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">WebAim Color Contrast Checker<\/a>, introduced above, enter the colour values for black (#000000) as the background colour and white (#FFFFFF) as the foreground colour, and notice the contrast ratio the checker reports. Then reverse the colours. Is there any change in the contrast ratio?<\/p>\n<p>Do you find it easier to read white text on a black background or black text on a white background? Why do you think that is, despite the contrast in each case being equal?<\/p>\n<p>Also, try other opposing colours like blue and yellow, and red and green, and switching between foreground and background colours. Notice which colour combinations you find easier to read.<\/p>\n<p>Though a controversial topic, the science is fairly clear: <a href=\"https:\/\/tatham.blog\/2008\/10\/13\/why-light-text-on-dark-background-is-a-bad-idea\/\">Why light text on dark background is a bad idea<\/a>.<\/p>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\n<p><strong>Suggested Reading:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/contrast-enhanced.html\">Understanding Success Criterion 1.4.6 Contrast (Enhanced)<\/a><\/li>\n<\/ul>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#contrast-enhanced\">How to Meet Contrast (Enhanced)<\/a><\/li>\n<\/ul>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_147_Low_or_No_Background_Audio\"><\/span><strong><a id=\"1.4.7\"><\/a>Success Criterion 1.4.7<\/strong> Low or No Background Audio<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level AAA<\/p>\n<p>For <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-prerecorded\">prerecorded<\/a><a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-audio-only\"> audio-only<\/a> content that (a) contains primarily speech in the foreground, (b) is not an audio <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-captcha\">CAPTCHA<\/a> or audio logo, and (c) is not vocalization intended to be primarily musical expression such as singing or rapping, at least one of the following is true:<\/p>\n<ul>\n<li><strong>No Background:<\/strong> The audio does not contain background sounds.<\/li>\n<li><strong>Turn Off:<\/strong> The background sounds can be turned off.<\/li>\n<li><strong>20 dB:<\/strong> The background sounds are at least 20 decibels lower than the foreground speech content, with the exception of occasional sounds that last for only one or two seconds.<\/li>\n<\/ul>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #3c3\">\n<p><strong>Note: <\/strong>Per the definition of \u201cdecibel,\u201d background sound that meets this requirement will be approximately four times quieter than the foreground speech content.<\/p>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Low_or_No_Background_Audio_Explained\"><\/span>Low or No Background Audio Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>This success criteria is intended to ensure that people with mild to moderate hearing loss are able to distinguish between foreground speech and background sounds and still understand what is being said. The optimal approach is not to have background audio. In cases where background audio is necessary, users should be able to disable the background audio. Alternatively, you should ensure that there is at least 20 decibels between speech volume and the volume of the background audio.<\/p>\n<p>Measuring the separation between foreground speech and background sounds requires audio editing software. Samples are taken from an audio track at two instances: when just the background sound is audible and when both speech and background sounds are audible. Then, the decibel output of each is compared.<\/p>\n<p>Alternatively, someone with good hearing listens to the speech over the background sounds, and if there are any parts that require added attention to comprehend, there is likely less than 20 dB of separation. For someone with a hearing impairment, those parts will be even more difficult to comprehend.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\n<p><strong>Suggested Reading:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/low-or-no-background-audio.html\">Understanding Success Criterion 1.4.7 Low or No Background Audio<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#low-or-no-background-audio\">How to Meet Low or No Background Audio<\/a><\/li>\n<\/ul>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_148_Visual_Presentation\"><\/span><strong><a id=\"1.4.8\"><\/a>Success Criterion 1.4.8<\/strong> Visual Presentation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level AAA<\/p>\n<p>For the visual presentation of <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-blocks-of-text\">blocks of text<\/a>, a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-mechanism\">mechanism<\/a> is available to achieve the following:<\/p>\n<ul>\n<li>Foreground and background colours can be selected by the user.<\/li>\n<li>Width is no more than 80 characters or glyphs (40, if CJK).<\/li>\n<li>Text is not justified (aligned to both the left and the right margins).<\/li>\n<li>Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.<\/li>\n<li>Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-on-a-full-screen-window\">on a full-screen window<\/a>.<\/li>\n<\/ul>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Visual_Presentation_Explained\"><\/span>Visual Presentation Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>This success criteria essentially requires that the presentation of blocks of text be adaptable to the text\/font preferences of the reader. This adaptability can benefit people with low vision and people with some cognitive or learning disabilities.<\/p>\n<p>Some people find it easier to read with non-standard text and background colours (e.g., yellow on black). Some people with cognitive or certain learning disabilities will find it easier to read text with a little extra white space between lines. Others find text easier to read when spacing between words is consistent, as opposed to variable spacing in the case of justified text. While the text does not necessarily have to meet all these requirements by default, it must be possible to override the default presentation so readers are able to apply their own styles that meet their particular needs.<\/p>\n<p>Plain text will generally comply with this success criteria. Failures occur when authors or web developers prevent text from adapting. Here are more examples of failures:<\/p>\n<ul>\n<li>Fonts are sized with absolute measures (e.g., px and pt).<\/li>\n<li>Text colours are defined with inline styles or older deprecated HTML attributes.<\/li>\n<li>Paragraph text is justified with inline styles.<\/li>\n<li>Text container widths are defined in absolute measures.<\/li>\n<li>Font colour is defined but background colour is not, or vice versa.<\/li>\n<\/ul>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #3c3\">\n<p><strong>Toolkit<\/strong>: Install the <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/user-css\/okpjlejfhacmgjkmknjhadmkdbcldfcb?hl=en\">User CSS Chrome extension<\/a>, used to create a user-specific custom style sheet.<\/p>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\n<h4><strong><a><\/a>Try This: Creating Custom Styles<\/strong><\/h4>\n<p>After installing\u00a0<a href=\"https:\/\/chrome.google.com\/webstore\/detail\/user-css\/okpjlejfhacmgjkmknjhadmkdbcldfcb?hl=en\">User CSS for Chrome<\/a>, create a custom style yourself.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/user-css.png\" alt=\"Using UserCSS to change a website\u2019s styles, see steps below.\" class=\"alignnone size-full wp-image-64\" width=\"886\" height=\"696\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/user-css.png 886w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/user-css-300x236.png 300w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/user-css-768x603.png 768w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/user-css-65x51.png 65w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/user-css-225x177.png 225w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/user-css-350x275.png 350w\" sizes=\"auto, (max-width: 886px) 100vw, 886px\" \/><\/p>\n<p>Steps:<\/p>\n<ol>\n<li>Install the Chrome User CSS extension, via the Toolkit link above.<\/li>\n<li>After installing, open the extension by clicking the User CSS icon added to the Chrome toolbar.<\/li>\n<li>Right-click on an element in the web page that you want to adjust, and choose \u201cInspect Element\u201d from the menu that opens. (Or press the F12 function key.)<\/li>\n<li>If it is not already selected, click on the HTML markup associated with the element in the left pane of the inspect window. This opens the styles for the element in the right pane.<\/li>\n<li>Copy a style from the right pane into the User CSS window.<\/li>\n<li>Change the properties of the style and observe the changes that occur on the web page.<\/li>\n<\/ol>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\n<p><strong>Suggested Reading:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/visual-presentation.html\">Understanding Success Criterion 1.4.8 Visual Presentation<\/a><\/li>\n<\/ul>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#visual-presentation\">How to Meet Visual Presentation<\/a><\/li>\n<\/ul>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_149_Images_of_Text_No_Exception\"><\/span><strong><a id=\"1.4.9\"><\/a>Success Criterion 1.4.9<\/strong> Images of Text (No Exception)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level AAA<\/p>\n<p><a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-images-of-text\">Images of text<\/a> are only used for\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-pure-decoration\">pure decoration<\/a> or where a particular presentation of <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-text\">text<\/a> is<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-essential\"> essential<\/a> to the information being conveyed.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #3c3\">\n<p><strong>Note:<\/strong> Logotypes (text that is part of a logo or brand name) are considered essential.<\/p>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Images_of_Text_No_Exceptions_Explained\"><\/span>Images of Text (No Exceptions) Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>While <strong>SC 1.4.5<\/strong> allows the use of text in images in some cases (provided there is an actual text alternative available), <strong>SC 1.4.9<\/strong> requires that no images of text are used, apart from logos, essential images of text, or images used only for decoration.<\/p>\n<p>This requirement ensures that those who benefit from adaptable text presentation, as described for <strong>SC 1.4.8<\/strong>, are able to apply their text adaptations for all text. Images of text would not otherwise be adaptable to these individuals.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\n<p><strong>Suggested Reading:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/images-of-text-no-exception.html\">Understanding Success Criterion 1.4.9 Images of Text (No Exception)<\/a><\/li>\n<\/ul>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#images-of-text-no-exception\">How to Meet Images of Text (No Exception)<\/a><\/li>\n<\/ul>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_1410_Reflow\"><\/span><strong><a id=\"1.4.10\"><\/a>Success Criterion 1.4.10<\/strong> Reflow<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"background-color: #00ff00;border: thin solid green;padding: 0.2em\"><strong>WCAG 2.1<\/strong><\/span><\/p>\n<p>Level AA<\/p>\n<p>Content can be presented without loss of information or functionality and without requiring scrolling in two dimensions for the following:<\/p>\n<ul>\n<li>Vertical scrolling content at a width equivalent to 320 <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-css-pixels\">CSS pixels<\/a><\/li>\n<li>Horizontal scrolling content at a height equivalent to 256 <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-css-pixels\">CSS pixels<\/a><\/li>\n<\/ul>\n<p>The above applies except for parts of the content that require two-dimensional layout for usage or meaning.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #3c3\">\n<p><strong>Note: <\/strong>320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content that is designed to scroll horizontally (e.g., with vertical text), the 256 CSS pixels is equivalent to a starting viewport height of 1024 px at 400% zoom.<\/p>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #3c3\">\n<p><strong>Note: <\/strong>Examples of content that require two-dimensional layout are images, maps, diagrams, video, games, presentations, data tables, and interfaces where it is necessary to keep toolbars in view while manipulating content.<\/p>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Reflow_Explained\"><\/span>Reflow Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>The aim of this success criteria has two parts: (1) Allow people with significant vision loss, who do not use screen readers or magnifiers, to magnify web content to 400% using only a browser\u2019s zoom; and (2) allow content to adapt such that there is no need to scroll left or right (or to scroll up and down for vertical languages). When scrolling is required, it can be difficult to move from the end of one line of text to the start of the next. Also, when scrolling is required, there is also the risk that content that is not in the visible area of the screen may go unnoticed.<\/p>\n<p>While reflowing content is very helpful for this group, it is also a prerequisite for responsive designs that adapt to various screen sizes and orientations.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd\" title=\"definition\">\n<p><strong>Definition <\/strong><\/p>\n<p><strong>Responsive design<\/strong> is an approach to web page creation that makes use of flexible layouts, flexible images, and Cascading Style Sheet media queries. The goal of responsive design is to build web pages that detect the visitor\u2019s screen size and orientation and change the layout accordingly. (<a href=\"http:\/\/WhatIs.com\">Source: WhatIs.com<\/a>)<\/p>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd\" title=\"definition\">\n<p><strong>Definition<\/strong><\/p>\n<p><strong>Viewport<\/strong> is another name for a browser window, or for a mobile phone or tablet screen. It is the visible space available to display a web page. Responsive designs were introduced to accommodate the wide range of viewport sizes across desktop and mobile device displays.<\/p>\n<\/div>\n<p>In the figure below, you will see a standard desktop display of the TMU website on the left and a reflow version (responsive) on the right. Dragging the right side of the browser window to the left to narrow its width causes the elements on the page to reflow to fit the available space. Likewise, when using your browser\u2019s zoom to increase the view to 400%, the content reflows into a single column, so it can be viewed with ease by someone who needs magnification but does not use an assistive technology.<br \/>\n<!--start side-by-side --><\/p>\n<div>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"559\" height=\"379\" src=\"http:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/rye_screen_wide.png\" alt=\"A desktop display of a website in a wide landscape shot.\" style=\"width: 65%;float: left;clear: left;vertical-align: top\" class=\"alignnone size-full wp-image-63\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/rye_screen_wide.png 559w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/rye_screen_wide-300x203.png 300w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/rye_screen_wide-65x44.png 65w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/rye_screen_wide-225x153.png 225w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/rye_screen_wide-350x237.png 350w\" sizes=\"auto, (max-width: 559px) 100vw, 559px\" \/><img loading=\"lazy\" decoding=\"async\" width=\"334\" height=\"953\" src=\"http:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/rye_screen_narrow.png\" alt=\"A screeenshot of a website with content adapted through responsive design to fit a narrow, portrait screen.\" style=\"width: 30%;float: left;vertical-align: top\" class=\"alignnone size-full wp-image-62\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/rye_screen_narrow.png 334w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/rye_screen_narrow-105x300.png 105w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/rye_screen_narrow-65x185.png 65w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/rye_screen_narrow-225x642.png 225w\" sizes=\"auto, (max-width: 334px) 100vw, 334px\" \/><\/p>\n<\/div>\n<p><!--end side-by-side --><\/p>\n<hr style=\"width: 100%;clear: both\" \/>\n<p><strong>Figure:\u00a0<\/strong>A desktop display of a website on the left, adapted through responsive design to fit a narrow screen on the right.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\n<h4><strong><a><\/a>Try This: Resize Browser Windows<\/strong><\/h4>\n<p><a href=\"https:\/\/www.torontomu.ca\" target=\"_blank\" rel=\"noopener\">Toronto Metropolitan University<\/a><\/p>\n<p>Visit the torontomu.ca website yourself. Try dragging the right side of your browser window left to reproduce the above effect. Next, use your browser\u2019s zoom feature (in the View menu) to zoom in to 400%. In both cases, notice how the content of the page rearranges itself to fit the available space.<\/p>\n<p>Try the activity on a couple of other websites you are familiar with, and notice whether they adapt, or reflow, to fit your browser window at different sizes.<\/p>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Reflow_Exceptions\"><\/span>Reflow Exceptions<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>There are a few exceptions to the reflow rule. Larger images, for example, that when viewed full width in a desktop browser window at 100% will flow off the side of the screen when magnified to 400%. Depending on the content of the image, developers may be able to set the maximum width of images to 100% of the browser window, so it increases in size until it reaches the width of the window. You may notice this happening on the TMU website in the activity above.<\/p>\n<p>Data tables are another exception. Header cells and data cells have a particular relationship that cannot be changed without changing the meaning in the table. Both images and data tables are out of scope for this success criteria.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\n<p><strong>Suggested Reading:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/reflow.html\">Understanding Success Criterion 1.4.10 Reflow<\/a><\/li>\n<\/ul>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#reflow\">How to Meet Reflow<\/a><\/li>\n<\/ul>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_1411_Non-Text_Contrast\"><\/span><strong><a id=\"1.4.11\"><\/a>Success Criterion 1.4.11<\/strong> Non-Text Contrast<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"background-color: #00ff00;border: thin solid green;padding: 0.2em\"><strong>WCAG 2.1<\/strong><\/span><\/p>\n<p>Level AA<\/p>\n<p>The visual <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-presentation\">presentation<\/a> of the following have a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-contrast-ratio\">contrast ratio<\/a> of at least 3:1 against adjacent colour(s):<\/p>\n<ul>\n<li><strong>User Interface Components<\/strong>: Visual information required to identify <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-user-interface-components\">user interface components<\/a> and <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-states\">states<\/a>, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author.<\/li>\n<li><strong>Graphical Objects<\/strong>: Parts of graphics required to understand the content, except when a particular presentation of graphics is <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-essential\">essential<\/a> to the information being conveyed.<\/li>\n<\/ul>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Non-Text_Contrast_Explained\"><\/span>Non-Text Contrast Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>This success criteria builds on <strong>SC 1.4.3 <\/strong>Contrast Minimum, which ensures text is readable over its background colour, extending the need for good contrast to <strong>functional elements<\/strong> in web content such as links and forms, as well as other visual elements such as icons, graphs or charts, and infographics, among <strong>other graphical objects<\/strong>.<\/p>\n<p>Take links, for example. It is common for web content developers to remove the underline from links for aesthetic reasons. In some cases, removing the underline is okay, when the function of links, such as links in a menu, is obvious to the users. Often link text is blue by default, which over a typical white background will provide sufficient contrast to be readable. However, readers may not be able to distinguish between the blue link text (with the underline removed) and the surrounding black paragraph text. Such links may go unnoticed. The default contrast between the link colour and the surrounding text colour will fail this success criteria.<\/p>\n<p>Another common non-text contrast issue occurs when disabled buttons are greyed out to indicate they are not functional. This may very well be desirable to de-emphasize the button until a particular task is complete or data entered, for example. But it may also create a barrier for low-vision users who may not be able to effectively see the disabled button to know that some task needs to be completed before continuing. In such a case, there are competing needs between those who can see and those who may have difficulty seeing. If higher contrast is required to make the disabled button more visible, it may make the disabled state less distinguishable for those who can see the buttons.<\/p>\n<p>Readers should refer to <strong>SC 1.3.5<\/strong>\u00a0and <strong>SC 1.3.6<\/strong> for more about potential solutions to competing needs. Icons, for example, might be used in the future with disabled elements, so those who may not be able to see the element have an alternative available through a preference setting that inserts an icon where a disabled element is present.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\n<p><strong>Suggested Reading: <\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/non-text-contrast.html\">Understanding Success Criterion 1.4.11 Non-text Contrast<\/a><\/li>\n<\/ul>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#non-text-contrast\">How to Meet Non-text Contrast<\/a><\/li>\n<\/ul>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_1412_Text_Spacing\"><\/span><strong><a id=\"1.4.12\"><\/a>Success Criterion 1.4.12<\/strong> Text Spacing<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"background-color: #00ff00;border: thin solid green;padding: 0.2em\"><strong>WCAG 2.1<\/strong><\/span><\/p>\n<p>Level AA<\/p>\n<p>In content implemented using markup languages that support the following <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-text\">text<\/a><a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-style-properties\"> style properties<\/a>, no loss of content or functionality occurs by setting all of the following and by changing no other style property:<\/p>\n<ul>\n<li>Line height (line spacing) to at least 1.5 times the font size<\/li>\n<li>Spacing following paragraphs to at least 2 times the font size<\/li>\n<li>Letter spacing (tracking) to at least 0.12 times the font size<\/li>\n<li>Word spacing to at least 0.16 times the font size<\/li>\n<\/ul>\n<p><strong>Exception:<\/strong> Human languages and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script.<\/p>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Text_Spacing_Explained\"><\/span>Text Spacing Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>You were introduced to text sizing in <strong>SC 1.4.4 <\/strong>Resize Text\u00a0and in <strong>SC 1.4.8 <\/strong>Visual Presentation, both of which ensure that readers are able to modify the presentation of text to make it more readable. <strong>SC 1.4.12<\/strong> builds on customizing text properties, adding line height, paragraph spacing, letter spacing, and word spacing to that mix.<\/p>\n<p>This success criteria does not require authors to set these text properties. It requires that they do not prevent users from setting them. It is users who are responsible for applying these properties though tools such as <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/user-css\/okpjlejfhacmgjkmknjhadmkdbcldfcb?hl=en\">User CSS<\/a>, introduced earlier. Much like sizing with relative measures (%, em), as discussed with <strong>SC 1.4.4<\/strong>, relative sizing should be used for line height and for paragraph, letter, and word spacing. In this way, all elements related to text presentation, including text containers, increase in size at the same rate, rather than floating over adjacent text or floating under an adjacent image or text container, for example.<\/p>\n<p>Similarly, older HTML attributes, such as height and width, should be avoided, as well as inline styles controlling these properties when defining text sizes. The same is true for the four properties associated with this success criteria. HTML attributes and inline styles can make it difficult or impossible for users to adjust text presentation to their liking.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\n<p><strong>Suggested Reading:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/text-spacing.html\">Understanding Success Criterion 1.4.12 Text Spacing<\/a><\/li>\n<\/ul>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#text-spacing\">How to Meet Text Spacing<\/a><\/li>\n<\/ul>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_1413_Content_on_Hover_or_Focus\"><\/span><strong><a id=\"1.4.13\"><\/a>Success Criterion 1.4.13<\/strong> Content on Hover or Focus<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"background-color: #00ff00;border: thin solid green;padding: 0.2em\"><strong>WCAG 2.1<\/strong><\/span><\/p>\n<p>Level AA<\/p>\n<p>Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:<\/p>\n<ul>\n<li><strong>Dismissable<\/strong>: A <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-mechanism\">mechanism<\/a> is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-input-error\">input error<\/a> or does not obscure or replace other content;<\/li>\n<li><strong>Hoverable<\/strong>: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;<\/li>\n<li><strong>Persistent<\/strong>: The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.<\/li>\n<\/ul>\n<p><strong>Exception: <\/strong>The visual presentation of the additional content is controlled by the user agent and is not modified by the author.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #3c3\">\n<p><strong>Note:<\/strong> Examples of additional content controlled by the user agent include browser tooltips created through use of the HTML <a href=\"https:\/\/www.w3.org\/TR\/html\/dom.html#the-title-attribute\">title attribute<\/a>.<\/p>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #3c3\">\n<p><strong>Note: <\/strong>Custom tooltips, submenus, and other non-modal popups that display on hover and focus are examples of additional content covered by this criterion.<\/p>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Content_on_Hover_or_Focus_Explained\"><\/span>Content on Hover or Focus Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><strong>SC 1.4.13<\/strong> Content on Hover or Focus applies to elements like tooltips, popup menus, and other non-modal dialogs (i.e., popups). Modal dialogs are covered under <strong>SC 1.3.2 <\/strong>Meaningful Sequence and should not open on hover or focus.<\/p>\n<p>As described in the success criteria above, when a tooltip or small dialog window opens with a definition, for example, users must be <strong>able to dismiss the new content<\/strong> without having to move the mouse or having to move focus away from the element that triggered the popup content. This is typically accomplished by scripting the<strong> Escape key to dismiss<\/strong> the content. This allows a user who may have screen magnification set high (e.g., 400% or more) to dismiss a popup that is accidentally opened when a mouse pointer or keyboard focus inadvertently hits a trigger, without being forced to navigate away and potentially lose their place in the original content.<\/p>\n<p>Users must also be able to move the mouse pointer away from the trigger to <strong>hover in the popup content<\/strong>, without losing the popup when focus on the trigger is removed. Users who have their screen magnified may need to drag their mouse pointer away from the trigger and off the side of the visible screen, in order to bring the whole popup into view.<\/p>\n<p>Finally, popup <strong>content must persist until the user explicitly dismisses it<\/strong>. It can take longer for some people with disabilities to read content, so this tactic ensures there is enough time to read through the content of the popup before it disappears.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\n<h4><strong><a><\/a>Try This: Dismissing Tooltips<\/strong><\/h4>\n<p>In the example below, users can dismiss the tooltips by moving focus away from the triggers, accessing another trigger, or pressing the Escape key. Tooltips persist by clicking the trigger, until clicking out, pressing the Escape key, or clicking another trigger.<\/p>\n<p><!--h5p source: \"https:\/\/rawcdn.githack.com\/gregrgay\/learn-aria\/03f25c3591708b70b451305037d9418ce7170b9c\/tooltip.html\" --><\/p>\n<div id=\"h5p-1\">\n<div class=\"h5p-content\" data-content-id=\"1\"><\/div>\n<\/div>\n<p><a href=\"https:\/\/rawcdn.githack.com\/gregrgay\/learn-aria\/03f25c3591708b70b451305037d9418ce7170b9c\/tooltip.html\" target=\"des\" rel=\"noopener noreferrer\">Open Tooltips in a New Window<\/a><\/p>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\n<p><strong>Suggested Reading: <\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/content-on-hover-or-focus.html\">Understanding Success Criterion 1.4.13 Content on Hover or Focus<\/a><\/li>\n<\/ul>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#content-on-hover-or-focus\">How to Meet Content on Hover or Focus<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"author":100,"menu_order":9,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-176","chapter","type-chapter","status-publish","hentry"],"part":26,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/176","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/users\/100"}],"version-history":[{"count":43,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/176\/revisions"}],"predecessor-version":[{"id":1376,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/176\/revisions\/1376"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/parts\/26"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/176\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/media?parent=176"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapter-type?post=176"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/contributor?post=176"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/license?post=176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}