The contrast ratio should be 3.0 or more for 14 point bold text, or larger The contrast ratio should be 3.0 or more for 18 point text, or larger SOLUTION: Use the WebAIM Color Contrast Checker to ensure the colors you are using are accessible. Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background. Ensure that foreground and background colors have enough contrast. Learn about the different types of color blindness affecting some users.ħ. SOLUTION: Change the instruction so it does not make use of color. Here’s how individuals with protanopia see the red & green buttons: It is a more common form of color blindness, occurring in between 1% and 5% of males (varying by race) and in approximately 0.1% of females. People with protanopia lack the long-wavelength sensitive retinal cones that are required to distinguish between colors in the green-yellow-red section of the spectrum. One color blindness condition is called protanopia. Don’t Use Color As Part of Your Instructional ContentįAIL: If you instruct folks to click on the red button, you may be confusing the over 108 million Web users who are color blind.
When you hit the tab key the first time, the link will receive focus and be visible at the top left corner of the page.Ħ.
This will position the Skip to main content link 1000px off the screen for sighted users, without hiding it from screen readers. To prevent sighted users from seeing the Skip to main content link at the top of the page, add this declaration to your CSS file: SOLUTION: Add a simple hyperlink at the very beginning of your HTML page: Provide a Skip Navigation link that allows keyboard and screen reader users to skip over groups of links.įAIL: The inability to skip repetitive links can be a problem for those with mobility disabilities who use the keyboard to navigate instead of a mouse. SOLUTION: Use an “action” phrase that alerts the user what to expect if he/she follows the link.ĥ. When a screen reader comes across a link that reads as “click here” or “learn more,” the visually-impaired person listening to the content may not have sufficient information to determine if the link is worth following or not. Links that use general text like can cause problems for folks using screen readers. SOLUTION: Remove the text-decoration:none property from your link styles, or introduce the link underline style on both mouse hover and keyboard focus actions.ĬSS: Here is the basic declaration to add to your CSS stylesheet to activate all link underlines throughout your website:ĬSS: Here is the basic declaration to add to your CSS stylesheet to underline the link when a user hovers over a link with a mouse or activates keyboard focus when “tabbing” to the link:Ī:hover, a:focus Ĥ. Website links that are not underlined can cause problems for some users.įAIL: Removing the underline from links makes it difficult for color-blind users to see them. (read by a screen reader as “ITS at MIT”).ģ. SOLUTION: Include spaces in between acronym letters in the IMG ALT attribute (read by a screen reader as “It’s at Mit”). IMG ALT text with acronyms can cause problems when read by screenreaders. SOLUTION: Change the ALT text to a description of the image.Ģ. The source filename of the image should not be included because generally it is just not useful to the visually-impaired user. The ALT text should summarize the purpose of an image. IMG ALT text must not be the same as the image file name. Here are 17 adjustments you can make to your website now to make it more accessible:ġ.
0 kommentar(er)
