Accessible Design
What makes a product well designed? To some, a well-designed product is eye-catching, and to others, it’s minimalistic. Maybe a well-designed product is innovative and never seen before, or maybe it’s an iteration on something tried and true. Being well designed may mean different things to different people, but I believe that a well-designed product is an accessible product.
What is Accessible Design? 🧐
I think it’s really cool to see how design changes over time, and it’s always helpful to know where design principles come from. To understand how accessibility plays an important role in product design today, let’s take a quick look at the history of accessible design.
According to famous architect and product designer Ronald Mace, accessible design, often synonymous with the term universal design, refers to
“the process of creating products and the built environments to be aesthetic and usable to the greatest extent possible by everyone, regardless of their age, ability, or status in life.¹ ”
This principle of designing for a more inclusive user base rose to popularity in the late 21st century. Following the 1964 Civil Rights Act, the disability rights movement started taking place in the mid-1970s. Disability rights activists saw the Civil Rights movement as an opportunity to advocate for change alongside the minority groups that faced similar discrimination and negative treatment. All of the efforts of the lobbyists and advocates culminated with the establishment of the Americans with Disabilities Act (ADA) in 1990.²
The ADA used language from the Civil Rights Act, and prohibited discrimination against those with disabilities in all areas of public life, and private areas open to the public.² This pushed designers and architects to start thinking more about how they could accommodate for accessible use by everyone in their products and environments. For example, the ADA has accessibility regulations and guidelines for businesses to follow, that outline what qualifies as an accessible space. Designers in part follow these guidelines to ensure that the products they design are ADA compliant, and can be used.
Accessible Design in the Digital Space 💻📱
Similar to accessible design in physical spaces and products, digital accessibility is just as important. As computers and the internet became more and more developed near the end of the 21st century, digital design was born, prompting user experience designers with the task of how they could apply principles of accessible design into their digital products. Digital accessibility is the process of designing digital content, like websites or apps, that is usable by a wide range of people, including those with disabilities.⁵
Not only does accessible design bring benefits to those with visual, motor, auditory, speech, or cognitive impairments, but also to all users. Frank Spiller, CXO and UX Lead at Experience Dynamics and member of the Interaction Design Foundation states that
“Accessibility features that help people with disabilities often help other people, too. When you design for all ability levels, you can create products and services anyone can use and enjoy — or at least find helpful or calming.⁶ ”
For example, video captions can benefit a user with hearing impairments, but also a user who is watching the video on mute. Similarly, high-contrast colors and text can benefit a user with visual impairments, but also a user in an outdoor environment or in bright sunlight.⁶ Additionally, organized HTML/CSS layout of a webpage allows a user using a screen reading to seamlessly navigate through the page, as well as someone whose mouse broke and can only use their keyboard for the time being. The latter example may have been a pretty uncommon scenario, but it just goes to show that accessible design can benefit everyone.
Laura Kalbag, author of Accessibility For Everyone, makes the case that building accessibility into products and designs from the start helps the business just as much as it does the user.⁷ The business benefits from incorporating accessibility include
- Increased SEO: web accessibility and SEO go hand in hand. Good website architecture and semantic HTML makes it easier for people using screen readers to understand the context of a page, but also help with search result visibility.
- Broader potential audience base: making a product more accessible makes it easier for everyone to find, access, and use, increasing the audience potential.
- Lower costs: more accessible products can help more users complete a task on their own without needing to contact customer services, cutting internal costs.⁷ Additionally, thinking about building accessibility into a product before it’s developed rather than after the fact is more time and cost-efficient for designers and engineers.
- Legal protection: in some countries, similar to ADA requirements in physical spaces, an accessible site is required, and businesses with inaccessible sites can be sued for discrimination.⁷ Regardless of laws, it is still a good practice for businesses to include an accessibility statement for transparency purposes.
Although businesses and organizations are starting to realize the importance of accessibility, it is still often treated as an afterthought. However, it is important to make accessibility a priority and make the internet a more accomodating place for the entire population.
Accessible Design in Use 👩💻👨💻
For this paper, I wanted to highlight the company and product, Slack. Out of all of the business/casual communication tools I’ve used, like Microsoft Teams, Google Chat, GroupMe, I definitely like Slack the most. Personally, I think it looks the nicest and feels the most intuitive to use.
As someone who doesn’t have any cognitive or physical disabilities that affect how I use digital products, though, I can’t speak for exactly how well Slack is designed from an accessibility standpoint. However, as a curious designer, I can explore and evaluate Slack from a critical standpoint, and I do think they are taking positive steps towards increasing digital accessibility.
From the company standpoint, a great thing Slack does is publicize their accessibility statement. The Multi-year Accessibility Plan can be found under the Privacy & Terms section, and highlights their commitment to meeting accessibility needs in their physical workplace as well as on their enterprise and product platform. These commitments include what they have done, what’s in progress, and what’s to come. I think this is a great statement of transparency and shows that Slack is aiming to harbor a more inclusive and accessible physical and digital environment.
Next, when launching the actual Slack interface, right off the bat I can tell that it is designed responsively. When I change the screen width the elements on the page resize accordingly, accomodating for Slack use on different device sizes. Users also have the option to enlarge or reduce text size, which can help those with visual impairments.
Additionally, it is clear that Slack aims to integrate key navigation features and shortcuts. This is helpful for people who may have motor impairments and limitations when using a mouse. I started tabbing around the page to see how the page was structured, and was prompted with a pop-up from Slack with more information about keyboard navigation.
In doing some more digging in the preferences panel, I found that there are a ton of keyboard shortcuts Slack has integrated, and the user can pull up a panel next to the communication channels to reference all of the keyboard shortcuts. In the Slack help center, there is also a post about keyboard accessibility and navigating the platform fully without a mouse.
Visually, the colors Slack uses in their branding is high contrast, and the visual hierarchy on the platform is clear. Slack also provides a lot of customization for the visual theme, and allows users to choose night vs. day mode, as well as different color schemes. While this is based mostly on personal preference, Slack has two versions of the standard branded themes that accommodates for three types of color blindness.
When moving around the screen and hovering over different areas on Slack, there is a visual distinction with a darker shading of that section, as seen above in the “Themes” tab of the Preferences panel, for example. Slack also uses a lot of iconography that supplements the written tag and vice versa. Using icons and corresponding labels can help users with mental impairments, as well as someone who is newer to technology understand the context of a product.
Something cool about Slack too is that it was built to be used by a screen reader as well. The way the iconography is coded is semantically correct for those using Slack with a screen reader. As you can see in the code, there are ARIA labels for each icon so that they can be read in an informative manner by screen readers.
In the Slack help center, there is a post about how to use Slack with a screen reader from the desktop app or web browser. Even on this page itself, there is a good use of contrast with colors, distinction of headings, and clear visual hierarchy. Although the instructions for how to use Slack with a screen reader are a bit dense and text-heavy, I think it’s a positive step that Slack is keeping in mind how to navigate through their product with a screen reader.
Lastly I wanted to highlight two articles, “Accessibility, a powerful design tool,” written by Slack designer Hubert Florin, and “How to Fail at Accessibility,” written by Slack engineer Trish Ang. Both of these articles are great reads about why they value accessibility and how it comes into play when thinking of ways to update the platform. Slack’s most recent rebrand was about two years ago, and both Hubert and Trish highlight some of the design decisions they made during this rebrand and how accessible design drove those decisions.
Overall, I think Slack is making good progress in prioritizing accessibility, and utilizes many accessible design principles. However, there is still room for improvement, and I would love to see Slack bring in more ways to make their product even more accessible.
Bringing Accessible Design Into my Work 🙋🏻♀️
After graduation, my career goal is to become a UX/UI designer. Because of this, I spend a lot of time looking at, thinking about, and designing digital products. Although I’ve seen a lot of improvement within my own work in regards to accessibility from when I started designing to now, I think there is always ways to grow and learn more. Here is a short list of things I will aim to do moving forward!
- Cleaner HTML/CSS: I enjoy web design a lot and have coded some of my own projects, but I think that I definitely could in this and future projects, rework the organization to ensure that it follows HTML semantics.
- Learn more about different devices: Before doing the research for this paper, I honestly didn’t know how a screen reader worked. If I want to design products to be more accessible, it would be good to understand how the devices I would be designing for worked. Additionally, this would help me understand the user better too!
- Think about UI from an accessible standpoint, not just aesthetic: I feel like a lot of people (including myself) see UI design as design for aesthetics. I always think of the flashy mockups on Dribbble which are usually purely visual and don’t place much importance on the UX, but a lot of a user’s experience using an app or website involves the interface design. I think moving forward I should aim to use UI elements more intentionally to increase accessibility and drive meaning. Small things to do to start could include making sure that the contrast of colors, fonts, weights, etc are WCAG compliant, and making sure my designs are responsive for all device sizes.
- Pushing for accessibility in the workplace: It’s good to see that companies are starting to think more about accessibility in their products and work environments, but I think there is always room for improvement. When I start my full-time job and my design decisions have actual influence and impact, I will make sure to keep accessibility at the forefront of my thoughts.
References
- Ronald L. Mace. Center for Universal Design NCSU. Accessed March 17, 2021. https://projects.ncsu.edu/ncsu/design/cud/about_us/usronmace.htm
- A brief history of the disability rights movement. ADL. Accessed March 17, 2021. https://www.adl.org/education/resources/backgrounders/disability-rights-movement?gclid=CjwKCAjw9MuCBhBUEiwAbDZ-7qSBmMyy0g3SvMB68Kd0y_DIojFDUNRd-OJK6V1R5tef-QIBZzvOUBoCUEAQAvD_BwE
- https://i2.wp.com/wheelchairtravel.org/wp-content/uploads/2018/07/ada-28-activists-march.jpg?w=1000&ssl=1
- https://idighardware.com/wp-content/uploads/2014/04/Operation-from-ADA-Guide.jpg
- W3C Web Accessibility Initiative (WAI). Introduction to web accessibility. W3. Accessed March 16, 2021. https://www.w3.org/WAI/fundamentals/accessibility-intro/
- What is accessibility? Interaction Design Foundation. Accessed March 17, 2021. https://www.interaction-design.org/literature/topics/accessibility
- Kalbag L. Accessibility For Everyone. A Book Apart; 2017.
- https://a.slack-edge.com/72d9c/img/invites/slack-features.jpg
- https://miro.medium.com/max/1200/1*FEQ-vLRNGXmm_M5KaQJ5WA.jpeg
