Designing Accessible & Usable Web Pages
A well-designed webpage should make it easy for everyone to find, understand, and interact with information. Accessible web design considers the needs of people with disabilities from the beginning while also creating a clearer, more consistent, and more usable experience for all visitors. When creating or updating a webpage, consider both accessibility and usability. Content should be easy to perceive, navigate, understand, and interact with – whether someone uses a mouse, keyboard, touchscreen, screen reader, voice control, magnification, or another assistive technology.
The following web design practices build on the CSD Core Elements of Accessible Digital Content and can help you create webpages that are accessible, understandable, and easy to use.
Create Clear Page Structure
The organization of a webpage should be clear visually and programmatically.
- Give every page a clear, descriptive title.
- Use built-in heading styles to organize content.
- Organize headings in a logical hierarchy.
- Use headings to identify sections—not simply to make text larger or bold.
- Break long pages into manageable sections.
- Use built-in bulleted and numbered lists.
- Keep related information together.
- Make sure content follows a logical reading order.
- Avoid using blank spaces, repeated returns, or other visual tricks to position content.
- Utilize F or Z patterns.
Use Meaningful Links
Users should understand where a link will take them before activating it.
- Use descriptive link text that identifies the destination or purpose.
- Avoid vague phrases such as “click here,” “here,” or “learn more” without context.
- Avoid using long URLs as visible link text.
- Make links visually distinguishable from surrounding text.
- Check links periodically to make sure they still work.
- Indicate when a link opens a document or unusual file type when that information would be helpful.
Make Interactive Content Accessible
Visitors should be able to interact with a webpage regardless of how they navigate it.
- Make sure links, buttons, menus, forms, and other controls can be used with a keyboard.
- Maintain a logical tab and focus order.
- Make keyboard focus visible.
- Use descriptive labels for buttons and controls.
- Provide clear labels and instructions for forms.
- Provide understandable error messages.
- Avoid interactions that require a mouse, hover, dragging, or other single method of input.
- Test interactive components such as menus, accordions, tabs, and dialogs for accessibility.
Minimize Movement & Distractions
Movement should support the purpose of the page, not compete with it.
- Avoid unnecessary animations, sliders, carousels, and automatically changing content.
- Never use rapidly flashing content.
- Give users control over moving or automatically updating content when needed.
- Avoid unnecessary pop-ups.
- Respect reduced-motion preferences when possible.
- Do not make important information dependent on animation.
- Ask whether movement actually improves the user’s experience before adding it.
Keep Pages Simple & Consistent
Consistency helps users know where they are, what information is important, and what to do next.
- Use consistent page layouts, navigation, headings, and formatting.
- Keep important information easy to find.
- Avoid overcrowding pages with unnecessary content or visual elements.
- Use white space to separate sections and improve readability.
- Keep navigation predictable across pages.
- Place similar information in similar locations.
- Avoid unnecessary sidebars, widgets, pop-ups, or competing calls to action.
- Prioritize the information visitors are most likely to need.
Use Images Purposefully
Images should support the message rather than create additional barriers.
- Use images when they add meaning or support understanding.
- Provide appropriate alternative text for meaningful images.
- Mark decorative images as decorative when possible.
- Avoid placing important text inside images.
- Provide accessible alternatives for charts, diagrams, maps, infographics, and other complex visuals.
- Avoid overly busy backgrounds and decorative imagery that makes content harder to read.
- Make sure images remain understandable when the page is enlarged or viewed on a smaller screen.
Use Tables Only for Data
Tables should communicate relationships between data—not control how a webpage looks.
- Do not use tables to position content on a webpage.
- Use tables only when information has meaningful relationships between rows and columns.
- Identify appropriate row and column headers.
- Keep tables simple.
- Avoid unnecessary merged or split cells.
- Consider whether information could be communicated more clearly without a table.
- Make sure tables remain usable when content is enlarged or viewed on smaller screens.
Design for Different Screens & Ways of Accessing Content
A webpage should remain usable when people view or interact with it in different ways.
- Design pages to work on desktop computers, tablets, and mobile devices.
- Make sure content reflows rather than requiring unnecessary horizontal scrolling.
- Make sure users can zoom and enlarge text without losing information or functionality.
- Avoid fixed layouts that prevent content from adapting to different screen sizes.
- Make buttons, links, and other controls large enough to select easily.
- Test pages at different screen sizes and zoom levels.
- Do not assume everyone will experience the webpage exactly as it appears on your screen.
Write for the Web
Most people scan webpages before they read them.
- Use clear, concise, and direct language.
- Put the most important information first.
- Use descriptive headings to help visitors scan the page.
- Keep paragraphs reasonably short.
- Use lists when they make information easier to understand.
- Explain unfamiliar acronyms or terminology.
- Avoid unnecessary instructions or introductory text.
- Use meaningful button and link labels.
Use Color & Visual Design Carefully
Visual design should make information easier, not harder, to perceive.
- Maintain sufficient contrast between text and its background.
- Do not use color alone to communicate meaning.
- Use a limited and consistent visual palette.
- Avoid text over busy images or backgrounds.
- Keep fonts, sizes, and formatting consistent.
- Avoid excessive capitalization, italics, underlining, or decorative fonts.
- Make buttons, links, and interactive controls easy to identify.
- Use visual emphasis intentionally rather than emphasizing everything.
Make Multimedia Accessible
Everyone should be able to access the information presented through audio and video.
- Provide accurate captions for videos containing speech.
- Review and correct automatically generated captions.
- Provide transcripts for audio-only content.
- Provide access to important visual information that isn’t communicated through the audio.
- Use accessible media players.
- Avoid automatically playing audio or video.
- Give users control over playback.
