Make your site accessible for all users
Accessibility in web design means your site communicates to people with disabilities, people in rural areas, and people in developing countries.
Ignoring accessibility can create barriers for people who cannot see or hear content on your site, or people who have mobility limitations that prevent them from typing or using a mouse. When you label the components on your site appropriately, you are making your site accessible for screen readers and other devices.
Alt text describes images for people with vision impairment or people who have turned off the images in their browser. Enter alt text for every image, except profile images and decorative images that add nothing to the text. Instead of adding complementary information as a caption might, alt text should describe the photo itself.
Caption: A campus you have to see to believe
Alt text: People walking through Indiana University’s Sample Gates
Use descriptive link labels with a clear call to action and wording that is unique to that page.
Strong: Become a member Weak: Learn more
Heading levels help rank your content by importance. The h1 level has the highest rank, and the h6 level has the lowest rank. Two headings with the same level have equal rank.
Nest headings properly, without skipping a level. For example, an h1 is always followed by an h1 or h2, an h2 is followed by an h2 or h3, and so on.
Captions on videos allow deaf viewers to understand spoken content by displaying words in sync with audio. Here are some generally accepted captioning standards:
- Each caption frame should hold one to three lines of text on screen at a time, viewable for a duration of three to seven seconds. Each line should not exceed 32 characters.
- All caption frames should be precisely time-synched to the audio.
- A caption frame should be repositioned if it obscures onscreen text or other essential visual elements.
- When multiple speakers are present, it's helpful to identify who is speaking.
- The caption font should be sans serif.
- Non-speech sounds like [MUSIC] or [LAUGHTER] should be added in square brackets.