Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WCAG for Designers

Rifat Najmi
March 20, 2021

WCAG for Designers

How WCAG can help designers to create accessible websites.

Presented during a webinar held by Suarise, March 20 2021.

Rifat Najmi

March 20, 2021
Tweet

More Decks by Rifat Najmi

Other Decks in Design

Transcript

  1. I have no legs, But I still have feelings, I

    cannot see, But I think all the time, Although I’m deaf, I still want to communicate, Why do people see me as useless, thoughtless, talkless, When I am as capable as any, For thoughts about our world Coralie Severs, 14, United Kingdom
  2. CRPD General Principle • Respect for everyone’s inherent dignity, freedom

    to make their own choices and independence. • Non-discrimination (treating everyone fairly). • Full participation and inclusion in society (being included in your community). • Respect for differences and accepting people with disabilities as part of human diversity. • Equal opportunity. • Accessibility (having access to transportation, places and information, and not being refused access because you have a disability). • Equality between men and women (having the same opportunities whether you are a girl or a boy). • Respect for the evolving capacity of children with disabilities and their right to preserve their identity (being respected for your abilities and proud of who you are). The Convention on the Rights of Persons with Disabilities
  3. Accessibility Governments agree to make it possible for people with

    disabilities to live independently and participate in their communities. Article 9 of CPRD
  4. What is UX? User experience encompasses all aspects of the

    end-user's interaction with the company, its services, and its products. “ -- Norman Nielsen Group “
  5. Accessibility 1. The qualities that make an experience open to

    all. 2. A professional discipline aimed at achieving No. 1. Microsoft
  6. Inclusive design A design methodology that enables and draws on

    the full range of human diversity. Microsoft
  7. Microsoft’s Inclusivity Principles Recognise exclusion Learn from human diversity Solve

    for one, extend to many Exclusion happens when we solve problems using our own biases. Seek out exclusions as opportunities to create new ideas and inclusive designs. Human beings are the real experts in adapting to diversity. Inclusive design puts people at the center from the very start of the process, and those fresh, diverse perspectives are the key to true insight. Everyone has abilities, and limits to those abilities. Designing for people with disabilities actually results in designs that benefit people, universally. Constraints are a beautiful thing.
  8. Autocomplete Autocomplete widgets can be helpful for accessibility because they

    can make it easier to enter text by providing suggestions based on the characters initially typed. This particularly helps people who find typing more difficult and people who may be susceptible to spelling mistakes. Digital Accessibility at Harvard
  9. Autocomplete Autocomplete widgets can be helpful for accessibility because they

    can make it easier to enter text by providing suggestions based on the characters initially typed. This particularly helps people who find typing more difficult and people who may be susceptible to spelling mistakes. Digital Accessibility at Harvard Permanent 26K Temporary 13M Situational 8M
  10. WCAG The Web Content Accessibility Guidelines are part of a

    series of web accessibility guidelines published by the Web Accessibility Initiative of the World Wide Web Consortium, the main international standards organization for the Internet.
  11. A Lowest WCAG Conformance AA Mid range AAA Highest WCAG

    2.0 guidelines are categorized into three levels of conformance in order to meet the needs of different groups and different situations.
  12. WCAG For Designers The explanations on the next pages are

    summarized from Geri Raid’s checklist. https://rifat.id/wcag4d
  13. Don’t rely on colour alone to communicate meaning or to

    distinguish visual elements. Use of colors (A)
  14. Giving text a strong contrast colour against the background makes

    it easier for people to read and interact with. Contrast minimum (AA)
  15. Giving text a strong contrast colour against the background makes

    it easier for people to read and interact with. Contrast minimum (AA)
  16. Giving text a strong contrast colour against the background makes

    it easier for people to read and interact with. Contrast minimum (AA)
  17. 4.5:1 for text smaller than 24px, or 19px bold. 3:1

    for text larger than 24px, or 19px bold Contrast minimum (AA)
  18. 7:1 for text smaller than 24px, or 19px bold. 4.5:1

    for text larger than 24px, or 19px bold Contrast enhanced (AAA)
  19. All components and graphics must have a contrast ratio of

    at least 3:1 against adjacent colours, unless they are purely decorative. Non-text contrast (AA)
  20. It must be easy to tell which element has keyboard

    focus. This helps sighted keyboard users orient themselves within the page, and confidently interact with it. Focus visible (AA)
  21. Text that is essential to the journey must not be

    presented as part of an image. Text inside an image cannot be resized and deteriorates in quality when magnified. Images of text (AA)
  22. Headings must describe the topic or purpose of the content

    in the section below. Headings must be used appropriately and nested correctly, only using a capital letter for the first word. Headings and labels (AA)
  23. Order content in your designs to ensure reading and navigation

    order are be logical and intuitive. Meaningful sequence (A)
  24. A screen must not be locked to either horizontal or

    vertical orientation, unless this is essential. Essential applications could be a television screen, a messaging or virtual reality app. Orientation (AA)
  25. If navigation is repeated across multiple pages, all pages must

    be presented in a consistent manner. Consistent navigation (AA)
  26. 🏻 Avoid 🏻 (May) Do this Use of colors (A)

    and Sensory characteristics (A)
  27. If a feature is used in multiple places it must

    be identified in a consistent way. Consistent identification (AA)
  28. WCAG for Designers Color • Use of color (A) •

    Contrast minimum (AA) • Contrast enhanced (AAA) • Non-text contrast (AA) • Focus visible (AA) Copy • Images of text (AA) • Headings and labels (AA) Layout • Meaningful sequence (A) • Orientation (AA) • Consistent navigation (AA) • Sensory characteristics (A) • Consistent identification (AA)