WCAG 2.1
Web Content Accessibility Guidelines version 2.1 (WCAG-2.1) is maintained by the W3C who cooperate with individuals and organizations around the world, with a goal of providing a single standard for Web content accessibility that meets all major accessibility needs of most individuals, organizations, and governments. It is an international set of recommendations for making website content more accessible to people with impaired abilities.
The W3C states that “the guidelines and Success Criteria are organized around the following four principles, which lay the foundation necessary for anyone to access and use Web content”.
Perceivable - Information and user interface components must be presentable to users in ways they can perceive.
This means that users must be able to identify and grasp the information being presented (it can't be invisible to all of their senses)
This means that users must be able to use the interface (the interface cannot require interaction that a user cannot perform)
Operable - User interface components and navigation must be operable.
This means that users must be able to comprehend the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)
Understandable - Information and the operation of user interface must be understandable.
This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)
Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
You may remember these better if you think of the acronym POUR, or maybe try a sentence like, Picky Ogres Use Rockets or something that helps you remember.
a quick summary of high-level tips one should consider when developing an accessible site:
Be consistent and logical in the DOM and in Navigation
Definition: DOM: According to the W3C, The Document Object Model (DOM) is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.
CAPTCHAs are not recommended.
Avoid using flashing images or text.
Don’t use images of text when you can use text. If you do, make sure it’s only for decoration or company logos.
Only use color in conjunction with another element (text or symbol) when identifying errors or important messaging. Color alone is not enough of an identifier.
Avoid scrolling text unless there is a clear way to stop it so the reader can read it.
Avoid background music or sounds that would interfere with audio assistant devices.
Allow the user to turn off any automatically playing video.
Ensure your site, including media player controls, can be used using only a keyboard.
Timed content should allow the user to turn off the time limit altogether, or at the least, have the ability to extend the time to complete an action.
Titles
Web pages have titles that describe topic or purpose.
Every Web page should have a title so it can be easily and quickly identified by all users, sighted or those using assistive technology. Ensure that all title elements are:
Not empty
Describe the page contents appropriately
BOIA BEST PRACTICE: All Web pages should have a properly descriptive TITLE that describes the intent and purpose of the Web page. This allows people to orientate themselves amongst Web pages. Page titles should not all begin with the same text such as 'Joes Plumbing Website - Contact Us', 'Joes Plumbing Website - About our services' etc, so ensure Web pages have unique and meaningful titles.
Headings
Headings not only explain what that section of a Web page is, but it helps organize the page to make the information flow correctly and make sense to all users, not just those using assistive technology.
Headings define sections of content within a web page and they are important for assistive technology to use to organize and prioritize the information for non-visual consumption (screen readers.)
BOIA BEST PRACTICE: You should attempt to make the top heading (<h1>) of a page match the page-title as close as possible as both serve similar purposes; the page Title is for Navigation and Search Engine Comprehension and the actual Page’s H1 title is the content-readable equivalent. HTML Heading tags (H1,H2,H3…H6) were developed to provide information on the structural hierarchy. Use H1 for the title when possible (only ever use one H1 tag), H2 tags for major headings, and H3 tags for major sub-headings. Headings should occur in appropriate sequential order groupings.
Lists
There are several kinds of lists, but the most common are the following:
Ordered List <ol> : Used for outlining steps to accomplishing something, something that is sequential. Ordered Lists are usually prefixed sequentially with progressive numbers or letters or similar. E.g. 1,2…5 or a, b, c…g or i, ii, iii, iv…vii
Unordered list <ul>: a list of things that are related but are not required to prefixed with a sequential indicator such as 1,2….5 or a,b,….f. Usually a bullet or shape of some kind prefixes unordered list items.
Definition list <dl>: a list of terms and definitions involving a DT (definition term) and then a DD (definition description) constituting a term and definition pair as each item in the Definition List.
Nested lists: These are in essence lists within a list. Indexes and navigation menus are good examples of these. It is extremely important that nested lists (any nested html tags for that matter) are properly opened and closed completely within other list items: so they are entirely self-sufficient and encapsulated within a parent tag or list item.
BOIA BEST PRACTICE: When making lists, make sure you’re choosing the right kind of list tag (<OL>ordered, <ul>unordered, <DL> etc.) Ensure complete encapsulation of child tags without overlapping with parent HTML tags.
Alt text
Alternative text (alt text) is used as a description of an element that cannot be comprehended as text. Basically, any significant non-text content must have a text alternative for people using devices like screen readers. Images (media in general) are the most common example of when you need to use alt text.
When there is an image on a page, that image cannot be “deciphered” by assistive technology, so the user has no idea what the image represents (or may not even know the image exists) or, more importantly, have major problems if the image is required to use the site.
When choosing the text that describes an image, make sure to give enough information, but not too much where it becomes cumbersome or redundant. The point here is to apprise users of any pertinent information related to the webpage.
A good example of this is when an image is used to advertise a sale. If there is not appropriate alt text attributed to that image, a blind or low vision user may miss important or pertinent information.
...
It’s important to identify which element on a page has the focus when there are multiple elements on a page. The easiest way to understand what this means, is with a hyperlink. Imagine tabbing through a Web page, and going from link to link. That’s usually because links are one element that are assigned programmatic focus by default. Browsers often identify links by either framing the link with a solid or dotted blue line.
Other elements that receive this default programmatic focus are found in forms. When navigating through a page using the tab function, the focus will automatically go from link and form element through the page.
Each of these tab-able elements needs to have some indicator, indicating to users of screen readers where they are on a page.
Color alone is not the answer.
BOIA BEST PRACTICE: It must be clear where the keyboard focus indicator is on the page. Color can be a good technique as long as it’s in combination with some other indicator. So when using CSS (Cascading Style Sheets), you could use the CSS selector “:focus”.
Forms
When creating forms ensure they are described (summarized) and labelled contextually and always make sure that each label is paired with the proper, distinct form-control and is tabbed in correct and sequential order for filling out the form. Screen Readers offer facility to jump directly to forms, so make sure they have a name and id attribute and also that the form itself has a “tabIndex” so that it can be jumped to with the tab key just as the form, controls within will be tabbed through by a keyboard-only user. If you associate proper labels with form controls, they inherit the “tabIndex” of their corresponding form control so that the label is read prior to the input field of control being used.
Correct Field Tab Order Example
...
First Name: 1
...
Middle Initial: 2
...
Last Name: 3
...
Street Address: 4
...
City: 5
...
State: 6
...
Zip Code: 7
Avoid Keyboard traps! A keyboard trap is when a user tabs into an element, but then cannot get out, which means they can’t move ahead or backward. This tends to occur with Flash. One way to avoid this would be to use JavaScript and using id values to identify the HTML before and after the flash element.
BOIA BEST PRACTICE: Go through the form yourself as you would be filling it out as a user. Does the order make sense, or are you entering an email address in between adding your first and last names? Put your mouse aside and navigate through the page using just your keyboard. It is a good idea to brightly style elements with CSS to visually check that the tabbing order is properly implemented.
...
The tabindex is used to define a sequence that users follow when they use the Tab key to navigate through a page. By default, the natural tabbing order will match the source order in the markup.
The Tabindex attribute has three distinct uses:
Tabinex=”1” (or any number greater than 1) defines an explicit tab order. This is almost always a bad idea.
Tabindex=”0” allows elements besides links and form elements to receive keyboard focus. It allows users to be able to focus the element in the order determined by its location with the DOM.
Tabindex=”-1” allows things besides links and form elements to receive “programmatic” focus, meaning focus can be set to the element through scripting, links, etc. It is handy if you need to be able to move focus onto something that you have updated via scrip or outside of user action.
The tabindex attribute of 1+ explicitly defines the navigation order for focusable elements (typically links and form controls) within a page. It can also be used to define whether elements should be focusable or not.
In theory, tabindex should only be used in cases where:
The default tab order is not ideal, AND
The tab order cannot be changed by rearranging items in the content and/or by altering the style sheet to reflect the best visual arrangement.
A positive tabindex value will confuse users, especially those using assistive technology. Anything that has a positive tabindex value will be promoted to the front of the tab priority and has to navigate through all elements with a positive value before it falls back into source order.
BOIA Best Practice: Avoid using a positive tabindex attribute.
Skip Navigation
It’s recommended to give the user a way to skip through the navigation of your site, so they can choose to skip to the main content. This becomes more relevant when you consider going from page to page, unless there is a skip navigation function, the screen reader will read every heading, every logo, branding, social media widgets, and top-of-page navigation prior to the content on each page. This is redundant and unnecessary. It should be noted that, as well as top-page navigation, common content (text and links), which is the same on many or all pages is also a candidate for a skip link. It is also common for skip-links to be made non-visual in the main page area by offsetting them outside of the pages viewport: they will still be discovered by Screen readers but not be visualized by sighted users.
BOIA BEST PRACTICE: Make sure you have this available on every page. It’s recommended that it be placed at the top of the page, and the link destination (main content) has the corresponding element.
Links
WCAG 2.1 states that color cannot be the sole method of conveying content or distinguishing visual elements. But it doesn’t mean that it should not be used, as long as color is accompanied by an additional visual clue. If you are using color, you will have to make sure to follow a few certain requirements having to do with contrast.
A 4.5:1 contrast between non-link text color and the background.
A 4.5:1 contrast between link text color and the background.
A 3:1 contrast between the text color and the surrounding non-link text color.
BOIA BEST PRACTICE: Be concise and descriptive with your links: ensure that links are distinct and purposeful. Avoid wording like ‘click here’ and make sure you use some real words as the link text and not just use the Linked-to-URL as the link text. Because links should be distinct, you should not create multiple links with the same link text: Screen-Reader users will hear multiple identical link descriptions and the link-URLs may or may not actually go to the same URL place.
Color & Color Contrast
It’s never a good idea to use color alone to identify something on a Web page. There needs to be some other indicator. There are color blind users and low and no vision users who may not be able to distinguish colors sufficiently to understand the data you are trying to convey.
It’s important to consider the color limitations of some users when adding something like an input error message alert for unsuccessful form submission. Often, designers will assume that, for example, the user did not fill in a required field on a form that highlighting that field and alerting them to “fill in the highlighted field” would be enough. But, if someone can’t tell that a field is highlighted, then you will need to add more description. Such as:
“Alert! Please enter your zip code.”
If this is not done, the user may abandon the form altogether before encountering the error indicator, thinking that the page simply is not functional.
When input errors have occurred, it can be a good idea to programmatically, force the current focus to the form’s actual error messaging: and even offer link that jumps directly to the first form control that has bad or missing input data; this is where Form-control styling becomes important in addition to the actual input-error messaging.
BOIA BEST PRACTICE: Use a combination of color and symbols when identifying errors. Make it easy, like by using links, for the user to get to the field that has the error and by making sure any acceptable data that was input, stays in the fields to avoid having to fill out the whole form again.
BOIA BEST PRACTICE: It would be important here to note that if your Web page background is light, use dark text and if your background is dark, use light text. If you question whether the contrast is not prevalent enough, then it’s not.
Fonts
An important consideration, when thinking about your entire audience, is if they can read the font you’ve chosen, and the size of which you’ve used it. There are a few rules to follow when choosing how your text will be displayed throughout your site:
Choose an easily-read font.
Do not make your text a graphic.
Be consistent – use limited styles. This goes for font types as well as using emphasizing elements like bold or italics.
In regards to size, make sure to use relative units (percent or ems).
Text must be resizable up to 200%. Using ems to determine font size is beneficial as it makes scalable style sheets.
Tables
Table structure should be as simple as possible, ensuring that you give each a title and use the <th> element for row and column headers. A summary of the table can be read by screen readers by using the summary attribute. But how do you do all of these things?’
You will want to use the <caption> element within the table to describe the table’s overall message. Then when building the table, be as streamlined as possible, using the THEAD, TFOOT, and TBODY elements, so assistive technology can accurately read the data you are portraying. Think of this as a kind of index, where you outline what it is you are illustrating.
Before you add accessibility to your table, it is important to know what kind of data the table represents. Is the information in the table actual column and row data intended to be digested sequentially or is the table there just for laying-out/positioning content. If the table is merely for laying-out or positioning content, then it is a layout-table and not a data-table.
A layout table (mostly frowned upon) does not necessarily need a ‘summary’ attribute or table Headers ‘TH’ or ‘THEAD” or ‘TBODY’ as the information is not really intended to convey several rows of column data.
A data table may contain a great deal of rows and columns and a user will need to know what row and what related column header they are currently reading. Data-tables need more accessibility attention and thought applied. Each table header and each row must be indicated as header and row elements and a caption should be used so the user can decide whether to traverse into the table or not (there is sometimes need for table-skip-links.)
BOIA BEST PRACTICE: Avoid really complex tables when possible, or rework tables to make them easier to understand. Avoid using tables to layout data as there are better and more accessible CSS ways to do so. Following the steps we lay out in this section will be a good guideline for you to follow, when applicable and possible. Evaluate your true need for tables as they are quite difficult to maintain accessibly.
The Principles
Now that we’ve gone over some of the most prevalent non-compliant themes seen in website accessibility, we should look as the guidelines within the four Principles as outlined by the W3C. This part of the training is to provide the exact guidelines as outlined by the W3C, as well as layman’s terms where possible to help make it more relatable.
Perceivable - Information and user interface components must be presentable to users in ways they can perceive.
This means that users must be able to identify and grasp the information being presented (it can't be invisible to all of their senses)
1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
1.2 Provide alternatives for time-based media.
1.3 Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
1.4 Make it easier for users to see and hear content including separating foreground from background.
Operable - User interface components and navigation must be operable.
This means that users must be able to use the interface (the interface cannot require interaction that a user cannot perform)
2.1 Make all functionality available from a keyboard.
2.2 Provide users enough time to read and use content.
2.3 Do not design content in a way that is known to cause seizures.
2.4 Provide ways to help users navigate, find content, and determine where they are.
2.5 Make it easier for users to operate functionality through various inputs beyond keyboard.
Understandable - Information and the operation of user interface must be understandable.
This means that users must be able to comprehend the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)
3.1 Make text content readable and understandable.
3.2 Make Web pages appear and operate in predictable ways.
3.3 Help users avoid and correct mistakes.
Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)
4.1 Maximize compatibility with current and future user agents, including assistive technologies.
Principle 1: Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
People with disabilities access the information on websites in different ways, often utilizing assistive technology, such as text-only browsers or screen readers. It’s a good idea to be familiar with this technology and understand it form the user’s perspective. Some of the most prevalent assistive technology out there today includes:
JAWS (Job Access With Speech), is a software that provides speech and Braille output
Window-Eyes is a free screen reader for Windows PCs
Voice-recognition software that helps the user control the computer by voice command
Lynx, a text browser that strips down a Website to its raw nature, removing graphical elements that may be bothersome to some users
Guideline 1.1: Text Alternatives
Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A)
Because some users use the Web with graphical elements stripped down or removed, or they use a screen reader that reads the available text, there need to be text alternatives for all non-text elements such as images or other media. Specifically, the guidelines calls out:
Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Guideline 4.1 for additional requirements for controls and content that accepts user input.)
Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
BOIA BEST PRACTICE: The objective of this criteria is to make sure to have text descriptions of everything that may not evident to someone using assistive technology such as screen readers. Are elements necessary to use your website fully, like instructions, found in images that may not be readable by a screen reader?
The biggest issue here has been discussed earlier in this training. You must ensure that there is alternate text assigned to elements such as images and media, or better yet, don’t put required information in non-text content where possible.
Guideline 1.2: Time-Based Media
Provide alternatives for time-based media.
Simply put, make sure that your audio-only and video-only components have an alternative way to give users the information it is presenting. There are specific sub-categories to this guideline:
1.2.1 Audio-only and Video-only (Prerecorded) (Level A)
1.2.2 Captions (Prerecorded) (Level A)
1.2.3 Audio Description or Media Alternative (Prerecorded) (Level A)
1.2.4 Captions (Live) (Level AA)
1.2.5 Audio Description (Prerecorded) (Level AA)
1.2.6 Sign Language (Prerecorded) (Level AAA)
1.2.7 Extended Audio Description (Prerecorded) (Level AAA)
1.2.8 Media Alternative (Prerecorded) (Level AAA)
1.2.9 Audio-only (Live) (Level AAA)
We won’t be getting into depth about each specific example listed above but there are a few themes that one should keep in mind when providing media on a Website:
Pre-recorded: Have an alternative means of expressing the information presented in media.
Video-only: Provide a link to a transcript or an audio track
Audio-only: Provide a link to a transcript
Write and display captions for any videos.
Embed a video of a sign-language interpreter into the video.
To attain Level AAA, you should consider an audio description (alternative version of the video) as well as a transcript.
Use a content management system that allows you to add text live.
Live audio and video can be tricky but use of an audio streamer that can access a transcript can be used, as well as video of people using sign language to translate the information
BOIA BEST PRACTICE: Unless your site requires live streaming audio and video, you may want to consider not making this available at all. This takes a lot of work to maintain and often requires hiring a professional subtitler which can be costly.
Guideline 1.3: Adaptable
Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
The objective of this guideline is to have the information presented in a structured, simple and organized means so the information can be perceived cohesively.
1.3.1 Info and relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
1.3.2 Meaningful sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. (Level A)
1.3.3 Sensory Characteristics: Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual, orientation, or sound. (Level A)
1.3.4 Orientation: Orientation is not fixed. (Level AA)
1.3.5 Identify Input Purpose: Input purpose can be easily determined. (AA)
The main objectives here are to ensure Linear Order, to understand how each topic relates to the other, and to ensure you use more than one way to convey information.
As we discussed in the beginning of this training, Headers are vastly important to a Web page. Not only should they be structured in the proper sequence, but they should be relevant and informative so when someone tabs from section to section, the order and information presented is clear.
<h1> This is the most important, all-encompassing header and there should be only one <h1>
There can be multiple <h2> through <h6> headers, depending on the information being presented.
BOIA BEST PRACTICE: In addition to headers, you should separate navigation menus from content and identify which areas on your site are paragraphs, lists and tables, for example. Forms should always clearly identify, with both color and symbol, which fields are required and if a user misses something, error messages should bring that user right to the section of the missing information. Tables should have clearly identified headers for columns and rows, and the data inside each cell should be labelled as data. Content should not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is considered to be essential.
Being able to identify things in more than one way is key. You will want to make sure that you don’t use only one, like color. As discussed earlier, if you only use color to distinguish information, you may be excluding some users from understanding the information. You’ll want to use perhaps a shape as well.
Guideline 1.4: Distinguishable
Make it easier for users to see and hear content including separating foreground from background.
There is much to discuss under Guideline 1.4, but there are common threads: Color, Audio, contrast, and text.
1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)
BOIA BEST PRACTICE: This has already been covered, but there must be a secondary means to identify something on a page. Meaning, you can’t say something like: “fill in the areas that are shaded yellow”. Some people can’t distinguish colors. The better way to identify required areas, would be, before the form itself, clearly instruct the user to “fill in all fields. Yellow highlighted fields marked with an asterisks (*) are required”, or something to that effect.
1.4.2 Audio Control: If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level. (Level A)
1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1,
Except for the following: (Level AA)
Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)
BOIA BEST PRACTICE: You can check it in your browser or by adding a feature to your website that allows the user to change text size. Or utilize the common browser text-scaling features by using Ctrl and the plus or minus sign, or Ctrl and scroll the mouse wheel: some browsers also have a scaling percentage at the bottom-right of the browser that could be used.
1.4.5 Images of Text: If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following: (Level AA)
Customizable: The image of text can be visually customized to the user's requirements;
Essential: A particular presentation of text is essential to the information being conveyed.
BOIA BEST PRACTICE: Never represent readable content via an image (any media/non-text method): at least not without an alternative text construct.
1.4.6 Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)
Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
1.4.7 Low or No Background Audio: Low or No Background Audio: For prerecorded audio-only content that (1) contains primarily speech in the foreground, (2) is not an audio CAPTCHA or audio logo, and (3) is not vocalization intended to be primarily musical expression such as singing or rapping, at least one of the following is true: (Level AAA)
No Background: The audio does not contain background sounds.
Turn Off: The background sounds can be turned off.
20 dB: 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.
BOIA BEST PRACTICE: Where possible, it’s recommended not to use background audio, but if there is a need, it must be something that can be controlled by the user. This is not only important for users using a screen reader so the audio isn’t competing with the information being read, but it’s also a nice thing for all users, as often times the noise becomes a nuisance on a page when someone isn’t expecting it or is in a space where automatically playing sound can be distributed. It is highly recommended that movies and audio do not auto-play by themselves (without user interaction and choice.)
1.4.8 Visual Presentation: For the visual presentation of blocks of text, a mechanism is available to achieve the following: (Level AAA)
Foreground and background colors can be selected by the user.
Width is no more than 80 characters or glyphs (40 if CJK).
Text is not justified (aligned to both the left and the right margins).
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.
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 on a full-screen window.
1.4.9 Images of Text (No Exception): Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed. (Level AAA)
1.4.10 Reflow: Content can be presented without loss of information or function, and without requiring scrolling in two directions. (Level AA)
People with low vision often need to enlarge text in order to easily read content. Enlargement enables perception of characters and the reflow of content enables tracking. Tracking is following along lines of text, including getting from the end of one line to the beginning of the next line.
Avoiding the need to scroll in the direction of reading in order to reveal lines that are cut off by the viewport is important, because such scrolling significantly increases the effort required to read. It is also important that content is not hidden off-screen. For example, zooming into a vertically scrolling page should not cause content to be hidden to one side.
The value of 320 CSS pixels was chosen as a reasonable minimum viewport width that content authors can achieve. This value lines up with the reported viewport width of small displays of many common mobile devices. The width of 320 CSS pixels exactly corresponds to a desktop browser window set to a width of 1280px and zoomed in to 400%.
1.4.11 Non-Text Contrast: Color of visual UI components and graphics required to read/operate content have sufficient contrast. (Level AA)
Visual details needed to identify graphics and user interface controls (and their various states) need to have a contrast ratio of at least 3:1 contrast with adjacent colors. This includes, but is not limited to: buttons, form fields, menus, tabs and their focus indicators, boundaries and selected states. This requirement is necessary to ensure that identifying features of controls and states (non-text) are distinguishable by people with low vision. Low contrast controls are more difficult to perceive and may be completely missed by people with a visual impairment.
1.4.12 Text Spacing: Text spacing can be customized without loss of content or function. (Level AA)
For user agents that allow customized text style properties, no loss of content or function should occur when setting all of the following (while not changing any other style property):
<strong>Line height (line spacing):</strong> to at least 1.5 times the font size.
<strong>Spacing underneath paragraphs:</strong> to at least 2 times the font size.
<strong>Letter spacing (tracking):</strong> to at least 0.12 times the font size.
<strong>Word spacing: to at least 0.16 times the font size.</strong>.
When the content cannot adapt to these settings, users with low vision, dyslexia, learning and cognitive disabilities may not be able to read or understand content.
Cascading Style Sheet/HTML technologies are quite able to allow for the specified spacing metrics. Plugin technologies would need to have a built in ability to modify styles to the specified metrics.
1.4.13 Content on Hover or Focus: Hover and focus events should not obscure content and should be dismissable. (Level AA)
Content that appears and disappears in coordination with keyboard focus or pointer hover, such as custom tooltips, sub-menus, overlays and other non-modal popups, often lead to accessibility issues. Therefore, content that appears and disappears on hover or focus must be designed in a way that meets the following conditions:
<strong>Dismissible:</strong> A mechanism must be available to dismiss the additional content without moving pointer hover or keyboard focus (such as enabling the Escape key to dismiss the content)
<strong>Hoverable:</strong> If pointer hover triggered the additional content, then the pointer must also be able to move over the additional content (i.e. content must not be obscured)
<strong>Persistent: The additional content must remain visible until the hover or focus trigger is removed, the user dismisses the additional content, or its information is no longer valid (such as a status message that changes status).</strong>
Exceptions include additional content that is controlled by the user agent (such as a tooltip displayed via the HTML title attribute) and is not modified by the author. This guideline also does not apply to custom modal dialogs since they are typically triggered on click events.
Principle 2 - Operable
The interface components and navigation must be operable.Child Sections
| Child pages (Children Display) |
|---|