Web Accessibility Essentialsuxdprototype.com/.../AudioEyeAccessibilityEssentials2017.pdf ·...

More accessible. More usable. More people.

Web Accessibility Essentials

2017 Presentation

audioeye.com


Purpose and Audience

audioeye.com 2

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).


About WCAG 2.0

audioeye.com 3

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: https://www.w3.org/TR/WCAG20/.

https://www.w3.org/TR/WCAG20/

https://www.w3.org/TR/WCAG20/

More accessible. More usable. More people. 4

✚ 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.

audioeye.com

Skip to Main Content LinkA 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.

Why its important

Who does this impact?

Code example

<body><a href="#main">Skip to Main Content</a>

More accessible. More usable. More people. 5audioeye.com

Color ContrastNot all users are able to distinguishing one color from another.


✚ Tool for checking the contrast between two colors:

http://webaim.org/resources/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.

Helpful Tip

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

✚ 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.

Believe it or Not





Color Contrast (Continued)✚ 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.

Believe it or Not


✚ 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.

audioeye.com

Keyboard/Tab Visible FocusAll 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;

• If you remove default focus (i.e. :focus {outline: 0;}), you MUST replace it with a custom accessible focus and hover state

Helpful hints



✚ 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.

audioeye.com

Form ElementsHighly interactive elements like forms need special attention to ensure that they

are accessible to all users.

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.

Did you know?



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.


✚ 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.

audioeye.com

Timed Content Did you know?


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


✚ 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.

audioeye.com

Images and GraphicsOne 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



Decorative ImagesDecorative 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 trueCode example<img src="desert-sunset.png" alt="” role=“presentation” aria-hidden=“true”>


Non-Decorative ImagesNon-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.


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.

Code example<img src="dog-bone.png" alt=”Dog burying a bone">

✚ SEO Benefits too. Good alt text also provides the added benefit of increasing your site’s traffic through image-based SEO results.

Did you know?


Complex Images & Long DescriptionGenerally, 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…


Images and Graphics (Decision Tree)


HeadersUsers 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. • Headers should not be used to style elements, but rather to convey the

information present on the page.


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.


Anchors and LinksLike 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.

• Don’t rely on the anchor title attribute. Assistive technologies will only read

anchor titles when there is no text present.


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

<a href="/bulldogs">History of Bulldogs</a>

✚ 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.

Think about it

<a href="/natural-treats"><img src=/happy-dog-natural-treats.png” alt="">All Natural Dog Treats</a>

Standard link

Combined adjacent image and

link (avoid duplicate description)


TablesIn 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

the table. This will associate the intent of the information with the table.


FramesFramed-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" />

✚ 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: https://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html

Did you know?


https://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html






AbbreviationsWhenever 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>Who does this impact?


Language AttributeIn 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 639-1 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.

Code example<html lang=“en">



Q&A

25audioeye.com


Thank You

26

AudioEye, Inc. 5210 E Williams Circle, Suite 750 Tucson, Arizona 85711

© 2005-2017 AudioEye, Inc. AudioEye® is a Registered Trademark of AudioEye, Inc. All Rights Reserved.

audioeye.com

Date post:	24-Jun-2020
Category:	Documents
Upload:	others
View:	0 times
Download:	0 times

Web Accessibility Essentialsuxdprototype.com/.../AudioEyeAccessibilityEssentials2017.pdf ·...

Documents