Created on READZ
sigmund-HE1zW44Zm_Y-unsplash.jpg

Web Accessibility at Readz

What’s accessibility, you ask?
It’s the practice of creating designs and content that anyone can access, regardless of their abilities. That means — but is far from limited to — text that blind people can “read.” Audio that deaf people can “listen to.” Not using interactions and animations for those who might experience seizures.
Accessibility is not just about overcoming obstacles; it's about celebrating and supporting the diverse ways people interact with digital content. In the realm of digital publishing, where the web's visual nature is a dominant force, we must remember that accessibility extends beyond vision. It's about acknowledging and catering to the full spectrum of human differences—be it in hearing, mobility, literacy, or cognitive abilities. This holistic approach not only aids those with specific disabilities but also enhances the user experience for a broader audience, including young learners, older adults, and non-native language speakers.
When we think of our audience, it's easy to default to imagining users like ourselves. However, the digital world is vast and varied. The Web Accessibility Initiative (WAI) provides valuable resources that help us consider and design for a wide range of web users, reminding us of the diversity we should expect and embrace.
With the World Health Organization noting that 15% of the global population lives with some form of disability, the impact is clear in the context of digital publishing and a significant portion of our audience could benefit from enhanced accessibility features. By partnering with our users and leveraging insights from WAI, we're committed to making every Readz publication more accessible and enjoyable for everyone, reinforcing our dedication to inclusivity in the digital space.

In short, WCAG is based on 4 main principles that require web content to be Perceivable, Operable, Understandable, and Robust.
Accessibility isn’t just a legal requirement. It’s a way to expand your audience and improve the end user experience for everyone.
Our commitment to accessibility
At Readz, we take great pride in providing a platform that empowers organizations to easily create content experiences that look great on any device. What’s just as important, however, is making that content accessible to anyone by following the Web Content Accessibility Guidelines (WCAG) and by taking these guidelines into consideration with every new feature we launch.
With WCAG’s latest version (2.1) being published in June 2018, these guidelines have evolved since their inception and are now adopted and recognized internationally. As a result, other government policies related to accessibility have come into effect as well, such as the Americans with Disabilities Act (ADA) and Section 508 of the Rehabilitation Act (508) in the United States, and the Web and Mobile Accessibility Directive in the European Union. These are based on (or refer to) the WCAG.
Accessibility guidelines like WCAG live at the very core of our platform
Readz projects or web publications are built with standard programming languages that were developed with accessibility in mind (e.g., HTML5 and CSS).
Our visual design studio enables designers to make content that anyone can experience. We make it simple to publish screen-reader-friendly text, add alt text to images, provide sufficient color contrast, and create keyboard-friendly web pages.
Additionally, we provide the capabilities for our users to implement best practices such as tagging headings and paragraphs and tag authors to indicate the hierarchy of texts.
We use responsive image technology to ensure sites load fast and make SEO-friendliness a central part of the offering. And have a lot more coming involving auto tagging based on AI.
How we made Readz projects more accessible
  • By building our internal expertise around accessibility. We’ve brought certified experts onto the team, to help us build accessibility best practices into all our development processes. And we started enrolling our design and production team in accessibility training.
  • We are incorporating accessibility into our design, development, and QA practices. Like most web development disciplines — be it SEO, content, or UX — accessibility works best when it’s baked into every step of the process. It’s far easier to build a project with accessibility in mind than it is to hack in accessibility late in development. Find more info about How to Design for Accessibility.
How designers can build accessible content in Readz
Create Clear Structure
For those without vision impairment, it’s easy to understand the hierarchy of storytelling and visual content, thanks to a range of visual cues. However, these cues don’t translate for those using screen readers. To solve this problem, designers can communicate hierarchy through non-visual means, using tools like Header Tags (H1, H2,... ) Paragraph tags and Landmarks. Screen readers and keyboard navigators traverse these page elements, so it’s important to establish order. These descriptions can be added by dragging and dropping pre tagged elements directly from our UI, so it’s fast and easier to tell which tag best describes your element or section.
More info on Semantic markup is used to designate headings (<h1>), emphasized or special text. (<strong>, <code>, <abbr>, <blockquote>, for example), etc.
Tables are used for tabular data and data cells are associated with their headers. Data table captions, if present, are associated with data tables.
Frames and iframes are appropriately titled.
Keyboard accessibility
Keyboard accessibility is one of the most important aspects of web accessibility. People with visual or physical disabilities often rely on their keyboard to navigate through websites. In most cases, this involves using the Tab key to jump from one interactive element to the next (e.g. text links, buttons, form fields, etc.).

We’ve launched several improvements in this area. When using the Tab key to navigate through a publication, a visual indicator will highlight any link or “keyboard focus” elements.
Contrast Ratios and style sheets
The definition of contrast ratio between the link and the surrounding text can be set to at least 3:1 and an additional distinction can be provided when the link is tabbed or hovered over and receives focus.
  • 1.4.3 Contrast (Minimum) (Level AA)
  • Text and images of text have a contrast ratio of at least 4.5:1.
  • Large text - at least 18 point (typically 24px) or 14 point (typically 18.66px) and bold - has a contrast ratio of at least 3:1.
Guidelines for Alt Text in Media Sections of Readz Publications
When adding media to your Readz publications, it's crucial to determine whether each piece requires alt text. Alt text ensures that all users, including those using screen readers, can access the content. Here's how to approach alt text based on the section type: Title Section Decorative Media: If images or videos in the Title section are purely decorative and do not contribute to the content's message, omit the alt text. This prevents redundancy and ensures screen readers don't read unnecessary information. Narrative Media: If the media is integral to the storytelling or content, provide concise and descriptive alt text.
Text Over Media Sections Decorative Purpose: Often used as dividers or section headers, media in these sections is usually decorative. In such cases, omit alt text to avoid screen reader distractions. Content-Enhancing Media: If the media adds value to the text or is part of the narrative, include descriptive alt text that conveys the essence of the image or video.
Key Principles: Relevance: Only include alt text for media that contributes to the content's understanding. Conciseness: When alt text is necessary, keep it brief yet descriptive. Avoid Redundancy: Do not duplicate text from titles or captions in the alt text.
Accessible prebuilt layouts
And one of our latest features -prebuilt layouts and design blocks- was built to be accessible out of the box, and adhere to accessibility best practices like heading hierarchy, page structure, and keyboard navigatibility.
Forms
Form buttons can have a descriptive value. Form inputs can have associated text labels.
Readz Accessibility Checklist
Introduction
Acknowledge the importance of accessibility for Readz users and the commitment of the Readz team to adhere to W3C Web Accessibility Initiative (WAI) principles.
Detailed Accessibility Checklist
1. Structure and Navigation
  • Ensure important content is placed higher on the page for better accessibility.
  • Use the correct heading hierarchy (H1 for the main title, followed by H2 for main headings, and so forth).
  • Utilize the top navigation bar with a logo for consistency.
  • Give links unique and descriptive names and clarify link destinations.
  • Optimize the mobile web experience for accessibility.
2. Content Creation
  • Maintain sufficient color contrast between text and background (at least 4.5:1 for normal text and 3:1 for large text). Contrast checker tool.
  • Provide alt text for images that convey information, ensuring they are accessible for screen reader users.
  • Make forms accessible by labeling each field and indicating required fields.
  • Include closed captions for videos to support users with hearing impairments.
  • Create descriptive and meaningful button names to indicate their function or destination.
3. Technical Considerations
  • Use a H1 Heading Tag in the Title Section of your story for screen reader technology.
  • Ensure headings are nested correctly, following a logical structure (H1, H2, H3, etc.).
  • Ensure sufficient contrast between text and background colors, considering different elements like Text Sections and Background Scrollmation Sections. More on color contrast.
  • Add a 'title' attribute to embedded iframes for clarity in screen reader descriptions. More on iframes.
  • Provide comprehensive alt text for images to convey necessary information to screen reader users.
  • For embedded content and interactive elements, ensure they are fully accessible and clearly labeled.
4. Testing and Validation
  • Encourage the use of accessibility testing tools like Google Chrome Lighthouse and the Wave Evaluation Tool to identify and rectify accessibility issues. Lighthouse, Wave Tool.
  • Recommend regular testing with screen readers to ensure content is comprehensible and navigable for visually impaired users.
Accessibility tools and resources:
  • Wave from WebAIM is a tool that evaluates the accessibility of web pages. You can submit a URL and receive a report on your page's HTML5 and web accessibility compliance. Further reading
  • The New York Times' story, Notes on Blindness, by Peter Middleton and James Spinney, provides a beautiful example of accessible media.
  • If you're relying heaving on animations or parallax effects, be sure to check out the article Designing Safer Web Animation For Motion Sensitivity, by Val Head. It addresses accessibility considerations for people with visually-triggered vestibular disorders.
  • Alt-texts: The Ultimate Guide, by Daniel Göransson, provides first-hand insight on how people with vision impairment experience alt text.
  • Heydon Pickering’s Inclusive Components
  • The World Wide Web Consortium’s Introduction to Web Accessibility course
  • Web Content Accessibility Guidelines (WCAG) Quick Reference
  • The A to Z of UX — A is for Accessibility: 12 tips for designing an inclusive user experience