User Interface (UI)
How to Program with Accessibility in Mind

Summarized using AI

How to Program with Accessibility in Mind

Chandra Carney • May 13, 2015 • Atlanta, GA

In this presentation titled "How to Program with Accessibility in Mind" by Chandra Carney at RailsConf 2015, the importance of web accessibility is thoroughly explored, emphasizing the need for inclusivity in web development. Accessibility means more than just enabling screen readers for visually impaired users; it is about creating experiences that can be understood and navigated by all, including those with cognitive or neurological impairments.

Key points covered in the discussion include:
- Understanding Accessibility: Accessibility is distinct from usability; it focuses on enabling users with various disabilities to navigate the web effectively.
- Empathy in Development: Developers should empathize with users' experiences, acknowledging that many people encounter barriers online due to physical or cognitive impairments.
- Diverse Impairments: While screen readers are crucial for visually impaired individuals, other disabilities such as cognitive, hearing, and mobility impairments also need consideration.
- Assistive Technologies: An overview of various assistive technologies such as braille displays and voice control software that enable users with disabilities to access web content.
- HTML and ARIA: The importance of clean HTML structure and ARIA attributes for improving accessibility for screen reader users. Incorrect use of elements can lead to frustrating user experiences.
- Case Studies: Examples from websites like the New York Times and Home Depot illustrate both effective and ineffective accessibility measures. Carney highlights successes and areas for improvement in their design.
- Importance of Design Elements: Color contrast, clear labeling, and typography are crucial in creating accessible environments for users with different challenges.
- Accessibility for All: Cognitive impairments necessitate that content is created with clarity in mind to avoid overwhelming users. Multimedia content must include features like closed captioning to assist those with hearing impairments.
- Call for Advocacy: Developers are urged to prioritize accessibility in the development process, advocating for the inclusion of accessibility checks even when under pressure to deliver features rapidly.
- User Trials: Engaging users with disabilities in trials can provide insights to guide improvements in design and usability.

In conclusion, Chandra Carney asserts that developers have a responsibility to build inclusive web experiences. By considering accessibility in every stage of web development, we can ensure every user has a positive interaction with digital content. Accessibility is not merely a feature; it is fundamental to creating a web that works for everyone, making it empowering and accessible for all.

How to Program with Accessibility in Mind
Chandra Carney • May 13, 2015 • Atlanta, GA

by Chandra Carney

What does accessibility entail as it is related to the web? Most developers don't consider that someone with visual impairments may use the web and don't think about what this experience may be like for someone who has a visual impairment. The current trend is to push access-driven design to the end of feature building, but we will explore why this needs to be a top priority.

RailsConf 2015

00:00:12.480 Hello, I'm Chandra Carney. Today, we're going to discuss accessibility and explore everything surrounding it, or at least most aspects related to accessibility as we optimize it for the web.
00:00:21.760 You may have also heard accessibility referred to as 'ally,' which stands for the missing eleven characters in accessibility. But what exactly is accessibility? Some of you may not be fully sure.
00:00:36.480 Accessibility is about inclusivity; it means creating websites that can be understood by all audiences, regardless of their adaptive technologies or browsers. It's important to note that usability, while related, is not the same as accessibility. Usability refers to the ability of average users with standard technologies to navigate a site effectively, whereas accessibility adds an additional layer to ensure that users with various impairments can also navigate successfully.
00:01:16.159 You may wonder why we should care about accessibility. As software developers, we build software for people, and we need to empathize with their experiences. We get frustrated when we can't use websites effectively, so we must consider those who might face additional barriers.
00:01:50.640 When thinking about accessibility, many people focus primarily on screen readers and visually impaired individuals, but we need to consider a broader range of impairments. Cognitive and neurological disabilities are also important to keep in mind, as there are many impairments out there that affect how people use the web. Raise your hand if you know someone with an impairment; it's essential to think about their experiences when using websites.
00:02:22.080 So, how do people with disabilities or impairments use the web? They often employ assistive technologies, which can include a variety of tools. While most people think of screen readers, there are many other types to consider, including various input methods and adaptative devices.
00:02:59.280 This is a great quote by Tim Berners-Lee, the creator of the World Wide Web, who emphasized the importance of accessibility. As we navigate through this topic, I want you to think about whether we are genuinely upholding the values he encouraged us to embrace.
00:03:37.360 Now, let me pause for a moment to explain why I care about accessibility. This is a picture of my mom and me; we're both developers. She started her career in the era of Fortran and COBOL, but one significant difference between us is that she has a visual impairment—she has been blind her entire life. Her experiences have made me aware of the various disabilities beyond just visual impairment.
00:04:20.880 Let's kick off our discussion with visual impairment. There are generally four categories we think of, and many of the assistive technologies used by visually impaired individuals include braille displays. A braille display acts as an extension of the keyboard, providing tactile feedback to help navigate content.
00:04:47.680 Another common technology is a screen reader, which comes in various shapes and sizes. For instance, Apple devices are accessible out of the box, but Windows users often need to install screen readers like Window-Eyes for free if they have Microsoft Office 2010 or higher. Chrome and Chromebooks also come with accessible features. Screen readers traverse the Document Object Model (DOM), looking for focusable events, so it is critical to maintain standard HTML structures.
00:05:32.479 The accuracy of our HTML markup is essential. Screen readers cannot read divs and spans by default, so we should avoid using them for vital HTML elements. This is where ARIA—Accessible Rich Internet Applications—comes into play, as it provides attributes that can enhance accessibility descriptions for screen readers.
00:06:28.479 You might wonder how well the New York Times accommodates accessibility. As we explore the site, consider user stories: I want to log in, search, browse categories, and read content. While there are buttons for these functions, we must also evaluate how screen readers interact with site elements.
00:07:06.800 As a screen reader navigates the New York Times homepage, it will dictate what is selected and read aloud the displayed content. Let’s visualize this experience together. If you're comfortable, I invite you to close your eyes and listen to the screen reader's demonstration.
00:08:34.320 When a visually impaired user visits the site, they need to process each piece of information carefully.
00:08:39.680 Now, let's recap what we saw. The New York Times does have features that allow users to skip navigation and access main content, which is beneficial for visually impaired users. However, when we tested with a screen reader, the experience revealed some frustrating elements.
00:09:06.080 Next, let's explore how Home Depot approaches accessibility. Similar to our previous example, we want to evaluate basic functionalities like searching, logging in, and browsing categories. Their site is generally easy to navigate; however, when tested with a screen reader, certain complexities can be challenging.
00:10:03.760 It's essential to understand how many elements a visually impaired user hears as they traverse the site. If navigation is cluttered or overwhelming, it detracts from the overall experience.
00:10:46.720 Sometimes, screen reader users can find themselves stuck within search boxes, hearing repeated items and experiencing frustration trying to navigate through previously read sections. Clear labeling is crucial across the entire site, as it guides users to relevant information without confusion.
00:11:33.600 As we revisit issues in screen reader navigation, let's consider the importance of contrast for low vision users. Links and buttons must be visually distinct to help reduce eyestrain for individuals who may experience challenges with standard interface designs.
00:12:20.000 Another important aspect to consider is color blindness, as many users do not realize the extent to which color differentiation affects accessibility. For example, the red and green colors used to indicate losses and wins on sports websites can be indistinguishable for individuals with certain types of color blindness.
00:13:16.960 People with mobility impairments navigate the web using a variety of tools, such as foot pedals or single-handed keyboards, which change their experiences quite dramatically. We need to consider how a site functions for users who may be unable to use a standard mouse.
00:14:17.360 Moreover, voice control technology is often utilized by individuals with mobility impairments. For example, someone might want to navigate a website purely through verbal commands. It is essential to ensure that our website's functionality responds accordingly to such commands.
00:15:35.680 Cognitive impairments present additional challenges, as those affected may find cluttered websites overwhelming. Content should be optimized for clarity, ideally aiming for a sixth-grade reading level, making site navigation easier for everyone, not just those with cognitive disabilities.
00:16:01.679 Additionally, we need to consider the impact of multimedia elements on those with neurological impairments. Websites often incorporate video, but these can trigger issues for people struggling with vertigo or sensory overload.
00:16:58.480 Turning now to hearing impairments, it is crucial to provide closed captioning on videos, as many users expect this to be standard. If the website lacks proper audio descriptions or captioning, it can leave users feeling like they are missing an essential component of the content.
00:17:29.760 For developers, this means incorporating accessible features where possible. Properly labeled images with text descriptions in alt tags can significantly enhance the experience for those utilizing screen readers.
00:18:35.200 A good example of a platform that has improved accessibility features is Kickstarter, which allows creators to add their own captions and descriptions to videos. Another platform, Netflix, has introduced audio descriptions, providing valuable context for their visually impaired users.
00:19:44.480 We must also routinely assess our choice of typography and layout to improve legibility. For instance, using clear, well-sized fonts (about 16 pixels) can alleviate issues for users who may struggle with smaller print.
00:20:45.760 It's equally important to focus on how information is structured and laid out. Forms, for example, should be easy to navigate. If a user has an issue with memory, a poorly designed layout may lead them to mistakenly fill out the wrong field, resulting in frustration.
00:21:50.160 Large click targets aid in usability for all users, especially those on mobile devices or with disabilities. As developers, we need to consider how we structure our pages practically and with User Experience (UX) in mind.
00:22:37.440 In our busy environments, it’s crucial to advocate for accessibility and usability when business teams request expedited feature releases. By integrating a few accessibility checks into our processes, we can ensure a more inclusive experience.
00:23:28.880 Engaging in user trials can provide valuable insights into how people with disabilities perform on our sites, and this can guide our design and development processes effectively.
00:24:19.200 This has been a brief overview of accessibility and the various aspects to consider. As developers, we have a responsibility to create inclusive web experiences for all users, ensuring that every interaction is easy, intuitive, and empowering.
Explore all talks recorded at RailsConf 2015
+122