Accessibility
Website accessibility means designing and building a website so that people with disabilities can perceive, understand, navigate, and use it. This includes people who are blind, have low vision, are deaf or hard of hearing, have limited hand movement, have cognitive disabilities, or use assistive technology.
Inclusive design
Inclusive design is an approach that considers the needs of different people from the beginning of the design process. It does not assume that every visitor has the same vision, hearing, movement, reading ability, technology, age, or life experience.
ADA
ADA stands for the Americans with Disabilities Act. It is a civil rights law that prohibits discrimination against people with disabilities in many areas of public life.
The ADA does not provide a list of specific website colors or font sizes. For technical website guidance, designers and organizations commonly refer to the Web Content Accessibility Guidelines.
WCAG
WCAG stands for Web Content Accessibility Guidelines. These guidelines provide technical recommendations for making digital content more accessible.
They cover areas such as color contrast, keyboard access, image descriptions, headings, forms, captions, links, and the way a website communicates with assistive technology.
Low contrast
Low contrast occurs when there is not enough visual difference between the text and its background.
Examples include light gray text on a white background, white text over a bright photograph, or dark gray text placed over a dark background.
Low contrast can make information difficult to read for anyone. It creates even greater barriers for people with low vision, color vision differences, aging eyes, or sensitivity to glare.
Contrast test
A contrast test measures the visual difference between two colors, usually the color of the text and the color behind it.
Free contrast-checking tools can determine whether the combination meets the contrast levels recommended by WCAG.
Alt text
Alt text is a written description attached to an image in the website's code.
A screen reader can read this description aloud to someone who cannot see the image. Good alt text explains the image's purpose or important information rather than listing every visual detail.
Decorative images may not need a spoken description, but they still need to be coded correctly so the screen reader knows to skip them.
Screen reader
A screen reader is software that interprets the content displayed on a computer or mobile device. It can read text aloud and provide information about headings, links, buttons, images, forms, and other page elements.
Examples include JAWS, NVDA, VoiceOver, and TalkBack.
JAWS
JAWS stands for Job Access With Speech. It is a screen-reading program used by many blind and low-vision computer users.
JAWS reads website content and allows users to navigate through headings, links, buttons, forms, and other page elements using keyboard commands.
Keyboard navigation
Keyboard navigation means using a website without a mouse or touchscreen.
A person may use the Tab key, arrow keys, Enter key, space bar, and other keyboard controls to move through the website and activate links, buttons, menus, and form fields.
The order should be logical, and the user should always be able to tell which element currently has focus.
Semantic structure
Semantic structure means using the correct website elements to communicate what each part of the page is and how the content is organized.
A main heading should be coded as a main heading. A button should be coded as a button. Navigation should be identified as navigation. Lists, paragraphs, forms, and sections should also use the appropriate structure.
This helps browsers, search engines, screen readers, and other technologies understand the page.
A page can look organized visually while still being confusing in the code. Semantic structure makes sure the organization is meaningful beneath the visual design as well.
ARIA labels
ARIA stands for Accessible Rich Internet Applications.
ARIA labels and other ARIA information can help assistive technology understand interactive elements that are not clearly explained through regular website code.
For example, an icon button may need a label that tells the screen reader it opens the navigation menu.
ARIA should support good semantic structure, not replace it.
Transparent image or PNG
A transparent image has no visible background around the logo or object. PNG is one file format that can support transparency.
Using the correct transparent logo file prevents the logo from appearing inside an unwanted white or colored rectangle.
User experience
User experience describes what it is like for someone to interact with a website.
It includes whether the website is understandable, readable, organized, trustworthy, easy to navigate, and easy to use. Accessibility is not separate from user experience. It is a necessary part of it.