Web Accessibility

racheldoesdesignn
  • No tags were found...


2


web accessibility

TABLE OF CONTENTS

COLOR & CONTRAST2

FONTS & SIZES3

HYPERLINKS3

CHARTS & GRAPHS 4-5

SYMBOLS & ABBREVIATIONS 5-6

ACCESSIBLE & INACCESSIBLE

IMAGES 6-7

DECORATIVE IMAGES 8

INFORMATIVE IMAGES 9

PAGE LAYOUT & SEMANTIC

STRUCTURE 10-11

ERROR MESSAGES 12

FORM FIELDS 13

CAROUSELS 14

CHECK YOUR SITE'S ACCESSIBILITY 15

3


COLOR

& CONTRAST

In reference to web

accessibility, contrast is a

measure of the difference in

luminance / brightness between two colors. Contrast is expressed as ratios

which can range from no contrast at 1:1, to highest contrast at 21:1.

To keep your webpage's contrast accessible, keep text contrast at a minimum of

4:5:1 for normal text (18 pt, or below 14 pt bold) and 3:1 for large text (18pt and

above or 14 pt bold).

The quick fox jumped over the lazy dog

The quick fox jumped over the lazy dog

Good

contrast

The quick fox jumped over the lazy dog

The quick fox jumped over the lazy dog

Bad

contrast

4

2


FONTS & SIZES

A "normal" font size should be roughly between 18.5px and 24px, but these

are just generalizations as pixel density varies from screen to screen and font

to font. It is suggested that 1.2 em (normal text) and 1.5 em regular text) are

roughly equivalent to the desired font sizes. Em is relative to the font size of

the element, however.

While there are no specific guidelines set for font choices, it's best to stick to

simple, standard fonts that are very readable. Arial, Helvetica, Lucida Sans,

Tahoma, and Verdana are recommended fonts for readability.

HYPERLINKS

Because hyperlinks can cause problems for those using screen readers, you

should ensure that links are accessible.

In-context links should be clear, and users should be able to understand its purpose

from its context.

Links without context should be understandable based on its text.

Additionally, the purpose of a link can be described using the aria-label attribute.

This attribute provides a way to put a descriptive text label on a link if there aren't

any elements on the page to describe the object.

Many websites distinguish hyperlinks by making them a different color than the

rest of the text, but this is inaccessible for those with colorblindness.

3

5


CHARTS & GRAPHS

Accessible charts and graphs shouldn't rely on color to communicate information.

You can use as much color as you want, as long as there is another

way of separating data. A great example of this is using patterns to differentiate

parts of a bar graph.

Charts and graphs are considered complex images, which means that they

need descriptions to be accessible.

Inaccessible

Accessible

Jan

Feb

March

6

4


For a graph or chart

to be entirely accessible,

you should not rely on

color to show a difference

between components of

the data.

You should also include

a long description that

explains the data in a

way that’s accessible for

those who use a screen

reader.

Image Description

Period

Jan

Feb

March

Day 1 Day 2 Day 3

120 111 292

210 198 213

180 194 221

Data Presentation

The bar chart represents the number

of views for each day per month.

The numer of vews are included in

horizontal columns, with one row for

each month.

SYMBOLS

& ABBREVIATIONS

Using graphical symbols to convey information usually makes content difficult

to understand for those with disabilities. Assistive technology, like screen

readers, may not be able to determine the meaning of a graphical symbol. It's

best to provide an alternative - such as a text alternative - to make the symbol

accessible. You can use an html alt attribute for when an img element is

utilized.

5

7


Using font/glyph symbols can be a major accessibility issue, depending on which

are used. There are 2 major problems with font-based icons:

1. Not everyone with a disability uses assistive technology. Some may rely only on

visible text alternatives.

2. Assistive technology may incorrectly read an icon, or may completely fail to

recognize it. Even some simple punctuation marks will not be read by screen

readers.

To solve these 2 problems, you can use the html attribute aria-hidden="true" and

assistive technology will ignore the icon. You should add an on-screen text alternative

as well.

Safe to Use Symbols

@ & / © ® • $ € £ ¥ % ½ ¼ ¾ °

Unsafe Symbols

Minus symbol: read as "dash", Less than symbol: read as "equals",

Greater than symbol: read as "equals", Tilde symbol: read as "approximately equals"

Characters that one or more screen reader will not read:

~ ? ! ¡ # ^ * ( ) – — — – _ , . … … \ | ? ¿ ; : ” ” ” “ « » ‹ › ‘ ’ ‘

{ } [ ] § · † ‡ + – ± ÷ × = ‰ < >

Abbreviations may seem simple to understand, but they can confuse or frustrate

those who use screen readers. This is because abbreviations usually aren't recognized

as words, and may be read as individual letters.

For example, the word "room" can be abbreviated to "rm", but a screen reader

would not understand how to correctly read the word.

The same abbreviation can also have multiple meanings based on contexts. An

example of this is the abbreviation "Dr". It can mean either a doctor or a driveway,

but screen reading software would not understand this.

There are also other ways that abbreviations may confuse screen readers. To

avoid any of these potential issues, you don't have to simply stop using

abbreviations. Instead, use the "abbr" element to expand abbreviations.

8

6


INACCESSIBLE

& ACCESSIBLE IMAGES

Inaccessible

Accessible

alt=" "

alt="The New York Times

building at night, with its office

lights on, illuminating the street

below”

Photos and images are important components of nearly any webpage, and they

are often used to communicate details or ideas. However, this can be an issue for

some people if the images aren't accessible.

Every tag must be acccompanied by the alt=" " attribute. This is because

of an accessibility rule stating that every non-text element - which includes

images - must have a text alternative to describe its purpose.

7

9


DECORATIVE

IMAGES

If an image doesn't add any information to the page, and is simply used to

make a page more attractive, it is considered a "decorative image".

Decorative images aren't useful to many people with disabilities, as those

with visual impairments cannot see them. They can also be an issue for

those who use screen readers.

Fortunately, there is a way to make sure the screen reader will "skip" over the

markup of the image: if the alt tag is left blank.

An empty alt tag, (alt=" ") will be ignored by assistive technology.

To solve these two problems, you can use the html attribute aria-hidden="true"

and assistive technology will ignore the icon. You should add an

on-screen text alternative as well.

Decorative

Not Decorative

alt=" ”

Image has no significant

meaning or information to

provide...only for decorative

purposes.

alt="a Golden Retriever looks up at

the camera, with its mouth open

slightly”

Conveys a message or

information, and can be

given a description in the

alt tag

10

8


INFORMATIVE

IMAGES

Informative images convey information or a concept, and require a description

for the user to understand.

Image is used to label other information.

@

Symbols like an email, telephone, or fax

can be linked to relevant information,

and a descriptive tag should be used to

identify its purpose.

alt=”Email”> jsmith@aol.com

Text alternative: alt=”Email:”

Image is used to supplement other

information.

A tag can correlate to the adjacent

text used to explain the image.

A brief description of information that

is shown but not explained through text

is sufficient.

”A

on a bed.”>

Cats tend to sleep often...

Image is used to convey succinct

information.

A tag can describe instructions or

directions that are showed visually in

the image.

”Twist</p

wrench in a clockwise direction, from

right to left.”>

9

11


OTHER ITEMS THAT REQUIRE

TEXT ALTERNATIVES

While non-decorative images require text alternative descriptions, other

webpage components also require text alternatives. Embedded objects require

descriptions, and audio/video content requires captions.

This may include JavaScript widgets, maps, calendars, and more.

PAGE LAYOUT

& SEMANTIC STRUCTURE

If an image doesn't add any information to the page, and is simply used to make

a page more attractive, it is considered a "decorative image".

Decorative images aren't useful to many people with disabilities, as those with

visual impairments cannot see them. They can also be an issue for those who

use screen readers.

Fortunately, there is a way to make sure the screen reader will "skip" over the

markup of the image: if the alt tag is left blank.

An empty alt tag, (alt=" ") will be ignored by assistive technology.

To solve these 2 problems, you can use the html attribute aria-hidden="true" and

assistive technology will ignore the icon.

You should add an on-screen text alternative as well.

12

10


1

2 Distressed Skinny-Fit Denim Jeans 3 $32

4

Description of denim jeans, lorem ipsum dolor sit amet, consecteteur

5 MORE INFORMATION

6

7

Choose a size

00 02 04 06 08 10 12 14

8

ADD TO CART

11

13


ERROR MESSAGES

When something is wrong with a user's input, they need to be notified - and

relying on color is inaccessible.

It makes sense that someone with no visual impairments would be able to identify

a red error message. However, a colorblind individual may not be able to

recognize it as an error.

This is why clear error messages are important.

There are various ways to make them accessible:

- Use simple text labeling.

This makes error messages accessible for those who use screen readers.

- You can also use symbols to signify errors - in addition to text labels - but

make sure they're accessible (see Symbols & Abbreviations).

- Use of color is fine... as long as it isn't the only way a user can distinguish an

error message.

14

12


FORM FIELDS

Forms need to be designed with accessibility in mind, and this can be done by

associating labels with fields. A blank form without any description attached to

it can cause confusion for someone with a disability, especially those who use

screen readers.

Providing a label for a form and labeling error messages can easily make forms

accessible.

For example:

Name

Credit Card Number

This field is required.

Error: Must be a valid card number.

Error: Email address is invalid.

Please re-enter your information.

13

15


CAROUSELS

Forms need to be designed with accessibility in mind, and this can be done by

associating labels with fields. A blank form without any description attached to it can

cause confusion for someone with a disability, especially those who use screen readers.

Providing a label for a form and labeling error messages can easily make forms

accessible.

For example:

Inaccessible

Accessible

Carousel caption here

1 2 3

For a carousel to be

accessible, it needs to

include several features.

Being able to stop and

start the carousel makes

it accessible for those

who cannot read quickly,

such as people with

cognitive disabilities.

Navigation

arrows

Pause/play button

Accessibility

captions

Numbered

icons

16

14


CHECK YOUR SITE'S ACCESSIBILITY

While you can use these elements to construct a webpage that should be accessible,

it's important to check its accessibility. One of the most popular ways to check for accessibility

is to use a screen reader program. You can test your site's accessibility using

screen reading software. By using a screen reading program, it will allow you to verify

that

The most popular programs are as follows:

i. JAWS: Nearly half of people who use screen readers use this program, although it

can be costly.

ii. NVDA: Free and open-source, about thirty percent use this program.

iii. VoiceOver: Built into Apple's macOS, tvOS, watchOS, and iPod operating systems.

Eleven percent use this program.

iv. Miscellaneous online tools

There also other online tools that can be used to check for accessibility issues, such as

WAVE. The most popular tools used to check accessibility are as follows:

i. WAVE

ii. JAWS

iii. Dynomapper

iv. SortSite

v. AccessibilityChecker

vi. AccessibilityValet

vii. EvalAccess 2.0.

viii. A-Checker

ix. WebAim Contrast Checker (useful for checking ratio between colors)

Accessible design and development considerations can make a difference in the way

people with disabilities operate the Internet. When websites are accessible, they make

the web better for everyone. Even those without disabilities often find that accessible

websites are the easiest to use.

Offering easy-to-digest content enhances the way people view the Internet, and an accessible

website is a good thing for everyone.

15

17


C 2020 Rachel Miller

Similar magazines