Listen to this article
Ensuring numbers are accessible in online content is crucial for making your information understandable and usable for all audiences, including those with disabilities. Here are some key tips and best practices to make numbers accessible.
Use Plain Language
- Explain Numbers Clearly: Describe what the numbers represent. For example, instead of “85%”, say “85% of survey respondents preferred option A.”
- Avoid Jargon: Use simple terms and avoid technical jargon that might be confusing
- Simplify Complex Numbers: Break down complex numbers into simpler terms. For example, instead of “1,000,000,” you could say “one million.”
- Consistent Formatting: Use commas for thousands and periods for decimals to make large numbers easier to read, e.g., “1,234,567.89.”
Provide Context
- Explanations: Explain what the numbers represent. Instead of just “20,” say “20% increase in patron engagement.”
- Units: Always include units of measurement. For example, “50 kg” instead of just “50.”
- Relative Comparisons: Use comparisons to make the numbers more relatable, such as “This is twice as much as…”
Use Tables and Charts Wisely
- Tables: Use tables to present numerical data clearly. Ensure tables are correctly labeled with headings and summaries.
- Charts and Graphs: Provide textual descriptions of charts and graphs for screen readers. Use the “alt” attribute in HTML to describe the content of images.
- Color Contrast: Ensure sufficient contrast between different sections of charts and graphs for those with visual impairments.
Screen Reader Compatibility
- Numeric Abbreviations: Avoid using abbreviations that screen readers might misinterpret. For example, use “million” instead of “M” or “k.”
- Consistent Naming: Be consistent in how you name and present numbers to prevent confusion.
Text Alternatives
- Alt Text: Use descriptive alt text for images containing numbers. Describe both the numbers and their context. For example, “Bar chart showing circulation increase from 2019 to 2020.”
- Data Tables: Use properly formatted HTML tables with headers to organize numerical data, making it easier for screen readers to interpret.
- Captions and Transcripts: Provide captions for videos and transcripts for audio content that includes numerical data.
Color and Contrast
- Color Use: Avoid using color alone to differentiate numbers. Ensure that there is enough contrast between text and background.
- Accessible Fonts: Use fonts that are easy to read, avoiding overly decorative styles, i.e. Veranda, Tahoma, Arial, Georgia.
- Bold or Italics: Use bold or italics to highlight important numbers, but avoid overuse.
Interactive Content
- Accessible Widgets, Links, and Buttons: Ensure interactive content like calculators, sliders, or buttons are accessible with keyboard navigation and screen readers.
- Clear Instructions: Provide clear instructions on how to use any interactive numerical tools.
Specific Types of Numbers
Phone numbers
- Use a hyphen (-) to separate each block of digits in phone numbers. Do not use periods (.) to separate each block.
- 604-660-2421
- 1-800-663-7867
- Hyperlink phone numbers so people can call a number by clicking on it.
Years and periods of time
Months
- Write out the full name of the month. If the year is already clear you do not need to include it:
- Saturday, December 31, 2016
- December 31, 2016
- December 31
- When space is limited, abbreviate month names by using the first three letters of the month, except for March, April, May, June and July, which are never abbreviated.
Dates
- Write out days of the week, when space is limited abbreviate to the first three letters, with no punctuation:
- Monday or Mon
- Thu, Jan 1, 2015
- Use the numeric date, YYYY-MM-DD, separated by hyphens only when space is limited such is in a form or table.
- Use numerical figures when writing about decades:
- The 1990s, the ’90s
Time
- Hours without the minute time are written numerically with no zeros or colon. Include a space after the number. Do not use periods or capitalize am or pm:
- 9 am
- Hours with the minute time have a colon:
- 9:45 pm
- Write noon and midnight, not 12 noon or 12 midnight.
- Separate date from time with a comma:
- September 25, 2015, 1:30 pm
By following these best practices, you can ensure that your numerical content is accessible and easily understood by all users, including those using assistive technologies.
Additional Resources:
- Writing Numbers and Dates in Web Content – Government of British Columbia
- Making Numbers in Web Content Accessible – TPGI
- Use Unambiguous Formatting and Punctuation – Supplemental Guidance to WCAG (WC3)
- Are Roman numerals accessible and should they be used on the web? – University of St Andrews
- Making Design Elements Accessible – UNC Greensborough
- Best Fonts for Accessibility and Visually Impaired Users – Hubspot
Latest posts by Regan Harper (see all)
- Accessibility Quick Tip: Communicating Your Accessibility Efforts - December 3, 2024
- Accessibility Quick Tip: 10 Essential Aspects for an Accessible User Experience - November 19, 2024
- Book Club Author Suggestion: Liane Moriarty - November 18, 2024