Web Accessibility Essentials

Size: px

Start display at page:

Download "Web Accessibility Essentials"

Gabriel Butler
5 years ago
Views:

1 Web Accessibility Essentials 2017 Presentation More accessible. More usable. More people.

2 Purpose and Audience This training is intended to be an accessibility guide for those creating and managing digital web content, with the ultimate goal of creating the most accessible and usable content for all users, regardless of their individual abilities. The information provided in this document is based on international guidelines provided by the World Wide Web Consortium (W3C). More accessible. More usable. More people. 2

3 About WCAG 2.0 The Web Content Accessibility Guidelines cover a wide range of recommendations and best practices that designers, developers, and accessibility stakeholders should follow in order to make web content more accessible. The guidelines include a technology-agnostic list of testable statements that, when followed, ensure a high degree of access to the largest possible audience of consumers of the content. For those interested in gaining a more comprehensive understanding of the Web Content Accessibility Guidelines published by the World Wide Web Consortium (W3C), the full text of the WCAG 2.0 is published here: More accessible. More usable. More people. 3

4 Skip to Main Content Link A standard practice for all accessible websites is to provide users with a simple link to quickly bypass header and navigation information and jump directly into the main content of a page. Recommendation(s): This link should be the first focusable element on the page and adhere to color contrast specifications. Code example <body><a href="#main">skip to Main Content</a> Why its important Keyboard Navigation: not all users rely on the mouse for navigation. When navigating using key commands, having quick access to bypass navigation links makes for a much more efficient user experience. Who does this impact? More accessible. More usable. More people. 4

5 Color Contrast Not all users are able to distinguishing one color from another. Recommendation(s): Don t use color as the only visual means of conveying information. Instead, color should be used to highlight or complement what is already visible. Ensure sufficient contrast between the text/images and the background Helpful Tip Tool for checking the contrast between two colors: contrastchecker/ You will need the hex codes for the each of the colors. After you enter the colors, it calculates the contrast ratio. It then uses that value to determine if the ratio passes or fails the standards for WCAG AA Normal Text and Large Text. Believe it or Not Who does this impact? 1 in 12 men, 1 in 200 women are red-green color blind in some way or another, whether it is one color, a color combination, or another mutation. More accessible. More usable. More people. 5

another, whether it is one color, a color combination, or

6 Color Contrast (Continued) Believe it or Not 1 in 12 men, 1 in 200 women are red-green color blind in some way or another, whether it is one color, a color combination, or another mutation. More accessible. More usable. More people. 6

7 Keyboard/Tab Visible Focus All focusable elements (interactive elements) must use additional visual cues/ indictors on focus for links or controls where color alone is used to identify them. Providing visual focus indication for keyboard focus is imperative. Recommendation(s): Use focus and blur events on checkboxes and radio buttons to change the styling of not only the form control, but also the label text to make it easier to see. Recommend creating a border around the interactive element and its label, typically using the CSS border or outline properties Use the a:focus style for a:hover and depending on the situation even a:active; Helpful hints Use a combination of highly contrasting color, a thick line, and other visual indicators such as glow. Must adhere to color contrast rules. A visual cue/ indicator can be an underline (highly recommended for links), bold, italic or increase in font size or it can be the addition of a glyph or images. Who does this impact? If you remove default focus (i.e. :focus {outline: 0;}), you MUST replace it with a custom accessible focus and hover state More accessible. More usable. More people. 7

8 Form Elements Highly interactive elements like forms need special attention to ensure that they Did you know? are accessible to all users. If not coded properly, web forms can create keyboard traps for screen readers, creating an endless loop that leads to an unfair and frustrating user experience. Such errors are completely avoidable. Recommendation(s): All form elements need a label. The label-for attribute should be applied to all labels linking them to the id of the form input they label. The placeholder attribute for an input is NOT an accessible alternative to a label. All form elements and their associative labels should have a unique ID. While web standards dictate that all ID s be unique, it is extremely important that this is the case to ensure accessible forms. More accessible. More usable. More people. Who does this impact? 8

9 Form Elements (Continued) Recommendation(s): Tab indexes should be applied to all form elements so that keyboard only users can navigate a form without having to rely on a mouse. If required inputs are present, follow one of the options, below: Add (required) to the visible label for each required input, i.e. First Name (required). This is the preferred method to communicate required input fields to all users and does not require additional steps. If majority of the input fields are required, add a statement to the top of the form that states, All input fields are required unless marked as optional. Then, add optional to the visible label for each optional input field, i.e. Comments (optional). In addition, add aria-required= true to all required input fields. This is a second option if the first option is not followed. If above options are not used and required input fields currently have an asterisk*, add a statement at the top of the form that states "Fields marked with asterisk * are required. In addition, add aria-required= true to all required input fields. More accessible. More usable. More people. 9

10 Timed Content Content that moves, scrolls or blinks must be stoppable and safe Recommendation(s): Add pause/resume controls to auto-scrolling carousels Provide untimed options where timed responses are generally required (i.e. Quizzes) Avoid flashing content Did you know? For about 3 percent of people with epilepsy, exposure to flashing lights at certain intensities or to certain visual patterns can trigger seizures. This condition is known as photosensitive epilepsy.... They could just have seizures triggered by certain photic conditions. About 2.5 Million to 3 Million people in the U.S. have epilepsy. Who does this impact? More accessible. More usable. More people. 10

11 Images and Graphics One of the most critical issues when publishing web content is to ensure that there is an adequate text representation of all images and graphics present on the page. The rules around handling these images depend on the type, purpose, and complexity of the image. Think about it For all intents and purposes, failing to properly describe images is no different than publishing a fully transparent image for a visual person. To further illustrate the point, we ve included an invisible graphic directly above this paragraph. Now imagine if this image conveyed a profound description only screen reader users could hear. Who does this impact? More accessible. More usable. More people. 11

12 Decorative Images Decorative images are defined as any image that is used for display purposes only, one that does not add value to the content of the page. These may be background patterns, decorative borders, or horizontal separators. Recommendation(s): Apply a null alt attribute to the image. Add the aria role of presentation to the image tag. Add the aria-hidden attribute to the image and set it s state to true Code example <img src="desert-sunset.png" alt=" role= presentation aria-hidden= true > More accessible. More usable. More people. 12

13 Non-Decorative Images Non-Decorative images are defined as any image that is used to enhance the content and add value or information to the page. Most images on webpage fall into this category. Recommendation(s): All images should contain the alternative text (alt) attribute. If the images is linked, the alternative text should inform the user of the link destination. If there is space, a brief image description can follow the link destination text, but is not necessary. An image s alt attribute should contain a clear textual representation of the non-text content. If there is text present in the image, that text should appear in the alt attribute. More accessible. More usable. More people. 13

14 Non-Decorative Images (Continued) An image s alt attribute should be descriptive, but brief. If it requires more than 125 characters (excluding spaces) to describe an image, then the a long description should be used in conjunction with the alt attribute. Did you know? SEO Benefits too. Good alt text also provides the added benefit of increasing your site s traffic through image-based SEO results. Code example <img src="dog-bone.png" alt= Dog burying a bone"> More accessible. More usable. More people. 14

Complex Images & Long Description Generally, images in this category include graphs, diagrams, maps, or charts that relay detailed information/data where the use of alt text alone is

15 Complex Images & Long Description Generally, images in this category include graphs, diagrams, maps, or charts that relay detailed information/data where the use of alt text alone is insufficient or does not adequately convey the information being supplied, visually. Recommendation(s): Display long descriptions, inline, next to or adjacent to the image requiring detailed descriptions. ALT = "Velocity profile of laminar flow in a pipe. Long Description Used This diagram shows fluid flowing through a pipe along the x-axis in parallel layers with minimal disruption. Velocity arrows are shorter on the edges, representing a slower velocity vx and longer in the center, representing a faster More accessible. More usable. More people. 15

16 Images and Graphics (Decision Tree) More accessible. More usable. More people. 16

17 Headers Users of assistive technologies often rely on header elements to gain an understanding of the outline and regions of a web page. For this reason it is important to use headers as they were originally intended, which is to convey the hierarchical flow of the content, and not to use them as a means to style the display of information. Recommendation(s): Paragraph tags should not be used as headers Headers should not be used to establish or fortify vertical spacing. Headers should be used in their standard hierarchal flow. h1 tags should be used first followed by h2 for sub-sections with h3 for further subdivisions, and so on. Headers should not skip levels. Who does this impact? Headers should not be used to style elements, but rather to convey the information present on the page. More accessible. More usable. More people. 17

18 Headers (Continued) Recommendation(s) (Continued): If you wish to use heading elements for style purposes only, you can apply role= presentation to the heading element. Example: <h4 role= presentation >This test is a heading for purely style purposes and is not a proper heading</h4> To change a current headings level or to turn any other style of element into a heading of the specified level, add role= heading and aria-level= #, where the # is the correct heading level. More accessible. More usable. More people. 18

19 Anchors and Links Like Headers, users of Assistive Technologies regularly use hot keys to quickly list all of the anchor tags that exist on the page. This quick navigation through anchors helps a user understand the additional information that is available from the page. For this reason it is extremely important to ensure that anchors contain descriptive and pertinent information. Recommendation(s): Don t rely only on images inside of anchors. Use either text to supplement the image or use a <span> tag inside the anchor that describes the link action, and then use CSS to visually position the span outside of the viewport. Who does this impact? Don t rely on the anchor title attribute. Assistive technologies will only read anchor titles when there is no text present. More accessible. More usable. More people. 19

20 Anchors and Links (Continued) Avoid ambiguous text within the anchor. Click here or Read more are not helpful links when the context of the link is unknown. Join adjacent links that navigate to the same location. For example if an image and a text link both go to the same location don't use two different links, instead combine both the image and text in the same anchor. Code examples Think about it Design and Develop with Empathy. Screen readers often navigate a webpage by tabbing from link to link or by using a keyboard short cut to pull up a list of all the links available on the page. This helps them quickly get to and understand the content they are looking for. <a href="/bulldogs">history of Bulldogs</a> Standard link <a href="/natural-treats"><img src=/happy-dognatural-treats.png alt="">all Natural Dog Treats</ a> Combined adjacent image and link (avoid duplicate description) More accessible. More usable. More people. 20

21 Tables In the modern fluid web, tables should no longer be used for layout purposes. Instead, tables should only be used to present tabular data. Recommendation(s): Use table headers to categorize information. Be sure to use <th> tags to define headers so the information in each of the table cell is associated with the appropriate header description. Use the scope attribute to associate table headers with a row or column:<th scope= col > or <th scope= col > Rather than use a header to title a table, add a styled <caption> element to Who does this impact? the table. This will associate the intent of the information with the table. More accessible. More usable. More people. 21

22 Did you know? Frames Framed-in content is traditionally very difficult for users of assistive technology to interact with, and it should be avoided whenever possible. However in cases where cannot be avoided, such as social, advertising, or tracking content, best practices would dictate that the frame have a title attribute so that a user of assistive technology can be made aware of the content within the frame. Code example <frameset cols="10%, 90%"> <frame src="nav.html" title="main menu" /> More accessible. More usable. More people. Conforming to the WCAG 2.0 AA Standard includes 3rd Party Content. If vendor supplied information/services are not accessible, Statements of Partial Conformance should detail the specifics to inform end-users until the inaccessible content is either remediated or replaced with an accessible alternative. See the W3C resource for Understanding WCAG 2.0 Conformance: UNDERSTANDING-WCAG20/ conformance.html Who does this impact? 22

23 Abbreviations Whenever an abbreviation appears in text it should be wrapped in an <abbr> tag, this will allow assistive technologies to read/display the abbreviated words rather than attempt to convert the abbreviation into an unintelligible word. Code example <abbr title="world Health Organization">WHO</abbr> More accessible. More usable. More people. Who does this impact? 23

24 Language Attribute In order to provide users of assistive technologies, specifically screen reader users, with the best possible reader experience, it is important to apply a language attribute to content on a page. The attribute should contain the ISO language code of the language of the content on the page. This attribute can be applied to any block-level html element, and can be applied to multiple elements on a single pages if multiple languages are present on the page. If all page content is in a single language, standard practice recommends placing the language attribute in the html tag. Who does this impact? Code example <html lang= en"> More accessible. More usable. More people. 24

25 Q&A More accessible. More usable. More people. 25

26 Thank You AudioEye, Inc E Williams Circle, Suite 750 Tucson, Arizona AudioEye, Inc. AudioEye is a Registered Trademark of AudioEye, Inc. All Rights Reserved. More accessible. More usable. More people. 26

Web Accessibility Checklist

Web Accessibility Checklist = Web Content Accessibility Guidelines published by the World Wide Web Consortium (W3C) 508 = Section 508 of the Rehabilitation Act = Both CATE and Moodle take care of the rule