Best practices to make your website more accessible.

Approximately one in seven people live with a disability that affects how they experience the world and interact with technology. In the article about WCAG, we explained what it entails and how you can make your website more accessible. Here, we explain how to achieve this technically.

Use of semantic HTML

Semantic HTML, or semantic markup, involves using HTML tags that clearly convey the purpose or meaning of the content they contain. These tags provide additional context about the roles and relative importance of different parts of a webpage.

In contrast to non-semantic HTML (which uses tags like <div> and <span> that don’t provide meaning), semantic tags define the content’s purpose explicitly. For example:

• <header> indicates a header section.
• <article> specifies independent content, such as a blog post or article.
• <footer> identifies the page’s footer section.

Non-semantic tags, such as <div> or <span> serve purely as content containers without indicating the content’s role.

While sighted users can quickly recognize visual elements like headers, footers, or main content, this isn’t true for visually impaired users who rely on screen readers

By using semantic HTML screen readers can interpret and communicate content more accurately. Also users can navigate webpages more effectively, as semantic tags provide context and structure.

For example, a screen reader can announce “Main content starts here” when it encounters a <main> tag, improving the user experience for individuals with disabilities.

Simplify texts using images and videos

Visual representation makes complex information easier to understand and remember. People often grasp concepts more quickly when presented in a visual format such as charts, graphs, and icons. Here are the ways how to simplify texts using images and videos.

Infographics

Use tools like Canva, Adobe Illustrator, Figma or other infographic creators to design visually appealing representations of data or concepts.

How-to-video’s and instructional videos

Create tutorials using video editing tools like Adobe Premiere Pro, Final Cut Pro, or free options like DaVinci Resolve and OBS Studio for screen recording.

Add text alternatives (Alt Text)

For Images use alt attributes in HTML for web images:

<img src="example.jpg" alt="A chart showing sales growth this year" />

For Videos provide a brief description of the video’s content in a <figcaption> or text nearby:

<video src="example.mp4" controls></video>
<figcaption>A demonstration of setting up a smart home device.</figcaption>

Add Ssubtitles and special subtitles

Subtitles:

• Use subtitle tools like Rev, Amara, or even YouTube’s auto-captioning. Ensure accuracy by manually reviewing them.
• Add descriptions of sounds or actions: [door creaks open] or [soft background music plays].

<video src="example.mp4" controls>
<track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English">
</video>

Text transcripts:
Include transcripts on the same page or provide a download link:
Download Transcript
Transcripts should include both spoken dialogue and descriptions of relevant visual elements.

Use audio descriptions:

• Use software like Adobe Audition or Audacity to record and sync audio descriptions.
• Narrate visual elements that are crucial for understanding the video.
• Include audio description as a secondary audio track or incorporate it into the primary video.

<video src="example.mp4" controls>
<track src="audio-description-nl.vtt" kind="descriptions" srclang="en" label="English audio description">
</video>

Making your website’s fonts accessible

When designing an accessible website, choosing the right font is a crucial step. The good news is that you don’t need to invest in specialized, custom fonts to achieve this. Many standard, widely available fonts score highly for web accessibility and are well-suited for various users, including those with visual or cognitive disabilities. Here’s what you need to know about font accessibility, including font types, sizes, and best practices.

Choosing accessible fonts

Several standard fonts are recognized for their accessibility:

• Highly accessible fonts: Tahoma, Calibri, Helvetica, Arial, Verdana, and Times New Roman are considered excellent choices for body text and general readability.
• Slab-serif fonts: Fonts such as Arvo, Museo Slab, and Rockwell are also accessible. These are often better suited for headings than body text due to their bold and distinctive character styles.

You might have heard that sans serif fonts are generally more accessible for screen reading because they lack the decorative strokes of serif fonts. However, research is inconclusive about whether serif or sans serif fonts are universally more readable. The best practice is to choose common fonts with clear, distinct characters, regardless of their classification.

Understanding font size units

When defining font sizes, there are four common units of measurement:

• Ems (em): Font size is relative to the parent element.
• Rems (root em): Font size is relative to the root element.
• Pixels (px): An absolute unit of measurement, not relative to other elements.
• Punten (pt): Another absolute measurement, commonly used in print.

For accessibility, it’s recommended to define font sizes using relative units like percentages, em, or rem. Absolute units, like pixels or points, can restrict the user’s ability to resize text independently, especially on certain browsers. Relative units, by contrast, adapt better across various devices and platforms, ensuring a more flexible and user-friendly experience.

Think about text structure

The structure of your text plays a critical role in ensuring your content is accessible and user-friendly. Proper text organization not only enhances readability but also makes it easier for users with disabilities to navigate and understand your content.

Here are some guidelines and best practices for structuring text effectively:

Hierarchy Matters Use HTML heading tags to establish a clear structure

• <h1> for the main title.
• <h2> for major sections.
• <h3> for subsections, and so on.

Use lists for key points Lists are an excellent way to organize information concisely. They are easier to read than dense paragraphs and are especially beneficial for users who skim content.

• Use unordered lists <ul> for items without a specific sequence.
• Use ordered lists <ol> for step-by-step instructions or ranked items.
• Aim for one idea per bullet or list item to maintain clarity.

Margins and line spacing:

• Use adequate line height (1.5x or more) and margins to create visual separation.
• Bold Highlight keywords or key phrases.
• Italics: Use sparingly for emphasis, as italic text can be harder to read.
• Color: Avoid relying on color alone for emphasis. Ensure sufficient contrast and consider adding other cues, such as bolding or underlining.

Dynamic typography for accessibility

Dynamic typography is crucial for blind and visually impaired users as it allows them to customize text size for better readability. This helps users who rely on screen readers, providing a seamless experience as the text adjusts to their needs.

Tools and resources to measure contrast

Well-chosen color palette with sufficient contrast is essential for
making your web app accessible to users with visual impairments, including
color blindness and low vision. It improves readability, supports inclusivity, enhances the user experience, and ensures compliance with accessibility
standards.

The importance of contrast

The contrast between the foreground color (such as text, icons, or other elements) and the background color determines how accessible a design is. This is evaluated according to guidelines such as the WCAG standards (Web Content Accessibility Guidelines). More information on calculating color contrast can be found in resources such as Calculating Color Contrast.

Useful tools for measuring contrast

• Color Contrast Analyser (CCA):
  • Available for both Windows and Mac.
  • This standalone application includes a color picker that allows you to test contrast directly from any point on your screen.
  • Ideal for designers working with desktop applications.
• WebAIM’s Contrast Checker:
  • A user-friendly online tool that allows you to easily test color combinations.
  • Provides instant feedback on whether your design meets WCAG 2.1 standards.
• Accessible Colors:
  • Another online alternative for testing contrast.
  • Suitable for quickly checking whether your color choices are accessible.

Create inclusive designs

Creating an accessible web application is not only about following guidelines; it’s about ensuring that all users, regardless of their abilities, can easily interact with and benefit from the app. With approximately one in seven people living with a disability that affects their interaction with technology, it’s essential to design inclusive solutions that cater to various needs. Disabilities can be temporary, situational, or permanent, and their impact on how users interact with apps and websites can vary widely.