2
web accessibility TABLE OF CONTENTS COLOR & CONTRAST 2 FONTS & SIZES 3 HYPERLINKS 3 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
The quick fox jumped over the lazy dog The quick fox jumped over the lazy dog
4
2
Good contrast
Bad contrast
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
Image Description
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.
Period
Day 1 Day 2 Day 3
Jan
120
111
292
Feb
210
198
213
March
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â&#x20AC;?
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 <img> 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.
Not Decorative
Decorative
alt=" â&#x20AC;?
alt="a Golden Retriever looks up at the camera, with its mouth open slightlyâ&#x20AC;? Conveys a message or
Image has no significant meaning or information to provide...only for decorative purposes. 10
information, and can be given a description in the alt tag
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.
<p> <img src=”envelope.jpg” alt=”Email”> jsmith@aol.com </p>
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.
Image is used to convey succinct information. A tag can describe instructions or directions that are showed visually in the image.
9
<p> <img src=”cat.jpg” alt=”A gray cat lays on a bed.”> Cats tend to sleep often... </p>
<p> <img src=”wrench.jpg” alt=”Twist wrench in a clockwise direction, from right to left.”> </p>
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
4
Description of denim jeans, lorem ipsum dolor sit amet, consecteteur
5
7
6
MORE INFORMATION
Choose a size 00
8
$32
3
02
04
06
08
10
12
14
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: <label for=”email”>Email:</label> <input id=”email” type=”text” />
Name
This field is required. Credit Card Number
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: <label for=”email”>Email:</label> <input id=”email” type=”text” />
Inaccessible
Accessible
Carousel caption here 1 Navigation arrows
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.
16
2
3
Accessibility captions
Pause/play button Numbered icons
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