Body text and headlines should be very clear and readable. The distance between lines is crucial for readability. Make surethere are clear visible horizontal gaps between lines of text.
I am a paragraph of text that will be read and people will enjoy the clearity of the line spacing. I am easy to read and make space for each line of text. I am a paragraph of text that will be read and people will enjoy the clearity of the line spacing. I am easy to read and make space for each line of text.
I am a paragraph of text that will be read and people will enjoy the clearity of the line spacing. I am easy to read and make space for each line of text. I am a paragraph of text that will be read and people will enjoy the clearity of the line spacing. I am easy to read and make space for each line of text.
People with disabilities need to be able to clearly distinguish the lines of text and hold their starting place in order to read easily.
Links should be visible within text and the hover state should also be perceivable beyond just a color change.
In this example the underline indicates the link and the dotted underline indicates the active hover state:
Links should also have text that is not vague. Do not simply use “Learn More” or “Click Here” for the text. Give each some context. Some good examples would be “Learn About Our Giving Program” or “Register for Our Golf Event”
People with disabilities may change their screen to display the site without color. The links still need to be perceived, and where the link leads next needs to be clear.
Buttons should be clear and the hover state should also be perceivable beyond just a color change.
In this example the button has good contrast, micro-animation and added black outline indicates the active hover state:
Buttons should also have text that is not vague. Do not simply use “Learn More” or “Click Here” for the text. Give each some context. Some good examples would be “Learn About Our Giving Program” or “Register for Our Golf Event”
People with disabilities may change their screen to display the site without color. The buttons still need to be perceived, and where the button leads needs to be clear.
All photos and images should have ALT text that is descriptive. If the image is purely decorative it will not need an ALT tag but we still suggest adding it.
Bad ALT text example:
“outdoor photo”
Good ALT text example:
“The family smiles while playing on a colorful playground.”
People with disabilities may not be able to see images. The image description would be read to them with an assistive device. The descriptions helps tell the story of what is on the page.
I good amount of color contrast should be maintained within all the elements of the site. Adhere to the color guide provided here.
Lore m ipsum dolor sit amet, conse ctetur adipiscing elit tellus, luctus nec ullam orper mattis, pulv ar. xcv xcvb xcvb cvbn cvbn vbkzxn czkjxcn vz.
Lore m ipsum dolor sit amet, conse ctet lus, luctus nec ullam orper mattis, pulv ar. xcv xcvb xcvb cvbn cvbn vbkzxn czkjxcn vz.
Lore m ipsum dolor sit amet, conse ctet lus, luctus nec ullam orper mattis, pulv ar. xcv xcvb xcvb cvbn cvbn vbkzxn czkjxcn vz.
People with disabilities may not be able to visually detect differences between colors. This makes elements invisible in some cases.
Audiences need to establish a systematic flow to a website. Having landmarks that replicate across an entire site is helpful to Users to explore and not feel lost.
Keep element positions and behaviors consistent across the entire site as much as possible. The more differences you add, the confusion and chaos to the experience.
People with disabilities need to trust your site’s elements across all the pages. They can get disoriented and lost otherwise.
