蘑菇传媒

When designers focus on accessibility from the start of a project, they can solve problems early on – and avoid costly remediation later. By considering diverse user needs, designers can create more innovative and inclusive designs that benefit everyone. This approach involves closing an empathy gap, eliminating barriers, and ensuring clear communication with engineers and developers.

We鈥檝e compiled some tips and best practices for inclusive web design.

Skip links

Skip links allow visitors to jump to specific content without going through repetitive blocks. Using a skip link, screen reader users and people who navigate the web using a keyboard can skip over repeated navigation links in the header content to access the main content directly.

• Add a “skip to main content” link at the top of each page for easy navigation.
• Ensure the link is visible when it has keyboard focus (or is always visible).

Focus indicator

Focus indicators visually indicate which element on a web page has focus. User interface components like links, form fields, or buttons receive focus when a user navigates a web page with a keyboard. Focus indicators show users where focus lies and what elements they can interact with.

• Web browsers use a default focus indicator, usually a blue outline or dotted line. If you change the default focus indicator, replace it with an accessible alternative.
• The focus indicator should be clearly visible and have a good contrast.
• The focus should also be complementary in shape and size to the element it is applied to.
• Items receiving focus and the focus indicator should not be obscured (for example, by sticky headers or dialogs).

Color

Many people have difficulty identifying or seeing colors. Screen readers don’t announce colors. Poor text contrast with the background makes reading difficult, especially for people with low vision.

• Use text cues instead of relying exclusively on color to convey meaning.
• Use sufficient color contrast, and test the color contrast ratio using color-contrast tools.
• User interface components should have a good contrast with the adjacent background.
• Avoid using Rochester’s Dandelion Yellow and white combination.

Headings

Headings are important for all users to scan and find content quickly. Creating a well-structured heading system is one of the most important tasks you can do to improve the accessibility of a web page.

• Plan for heading structure early in your design. All content should fit into a logical heading structure.
• Follow the hierarchy (H1, H2, H3, H4) without skipping heading levels. For instance, don’t skip from H1 to H3.
• Most pages should have only one H1 heading.
• Text that does not act as a heading should not be marked as a heading.

Navigation

Consistency in navigation helps users build mental models of how the website works. This will empower users to navigate more efficiently and confidently.

• Keep navigation elements in familiar locations across different pages of the website.
• Maintain a consistent visual design for navigation components, such as menu styles, fonts, colors, and icons.
• Maintain consistency in interaction design by ensuring that hover effects, clicks, keyboard behavior, and transitions within the navigation are consistent.
• Use consistent and clear language for navigation labels.
• Organize menus logically for easy understanding.
• Provide orientation cues, such as breadcrumbs and clear titles and headings, to help users know their location on the website or page.
• Offer multiple navigation methods, like site search or site map.
• Ensure navigation remains consistent on different devices and screen sizes.

Operability

If you can interact with a component with a mouse, you should also be able to use a keyboard to perform the same actions. This includes functionality in dialogs, menus, carousels, accordions, tabs, calendar pickers, etc.

• All functionality should be accessible via keyboard.
• Content triggered on hover or keyboard focus should be dismissible, hoverable, and persistent.
• Make sure that targets are big enough so they are easy to click or touch.

Reading order

Reading order on web pages matters because it directly impacts how content is perceived and understood by users, especially those relying on screen readers.

• The reading order for screen reader users should be logical and align with the visual order for sighted users. Absolute positioning may change reading order.
• Visually hidden or inactive content for sighted users should also be hidden from screen reader users (until it is made visible and active).

Non-text content

Text alternatives are important for making non-text information, such as images, video, or audio, accessible. Text can be presented in different ways to match user needs, and be accessed by a variety of users using different devices or tools.

• Include a place in the design for text alternatives for images and media. This may include a space for links to long image descriptions, transcripts, audio descriptions, table captions, or text next to icons.
• Use actual text in your design and avoid images of text.

Text

Ensuring text accessibility involves prioritizing legibility – making sure that text content is easily readable and understandable for all users, regardless of their visual or cognitive abilities or the devices they use.

• Don’t use fancy fonts. Use easily readable fonts.
• Don’t use underline on a text that is not a hyperlink.
• Avoid using all caps.
• Text should not be fully justified.
• Lines should be spaced at least 1.5 times the font size, and paragraphs should be spaced at least two times the font size.
• Use adequate font size.
• Use a maximum of 80 characters per line in any section or column.

Links

Link accessibility is more than just functionality – it’s also about giving users clear understanding about where a link goes. For sighted users, it’s helpful to make links stand out from the surrounding text with enough spacing and prominence.

• Provide descriptive, unique, and easy-to-find links with adequate space around them.
• Links should stand out from the body text, but not just with color. Consider underlines or other ways to have links stand out.
• When designing for prominence, plan well for all link states (normal, hover, active, focus, visited). This also applies to buttons and other interactive elements.
• Link text like “click here” or “learn more” isn鈥檛 good because the statements don’t make sense out of context. Ensure link text is specific and actionable.

Forms

Forms should be easy to understand and use. All users should be able to fill out and submit web forms.

• Provide descriptive labels, instructions, and error messages.
• Labels should be visually adjacent to their controls and always visible. Disappearing placeholders are insufficient.
• Maintain sufficient color contrast between form elements and backgrounds.
• Ensure the form design does not rely solely on color to convey information (for example, required fields).
• Ensure forms are keyboard accessible.

Motion

Many individuals are adversely affected by motion. This includes those with chronic motion sickness, dyslexia, epilepsy, migraines, ADHD, anxiety, and autism spectrum. When considering adding motion to your website, prioritize giving users control over what happens on their screen.

• Avoid auto-play for carousels, image sliders, audio, or video.
• Give users controls to disable or stop animations, auto-playing, and auto-updating.
• Do not add content to the design that flashes more than three times per second.

Layout

• Use simple, uncluttered, consistent layouts with one main visual focus.
• All page content should be placed in semantically meaningful landmarks.
• Name navigation areas (for example, main, section, utility, or actions) to distinguish each navigation section.
• Provide consistent help (exact location for help content and links, like phone number, contact info, FAQ, chat, “get help” page, etc.).