Universal Design for Learning

As we’ve learned in Accessibility Principles for ICT, we can apply universal design to fields outside of architecture and web products. CAST, a nonprofit education research and development organization, built up the field of Universal Design for Learning (UDL). UDL is a educational framework of principles, guidelines, and checkpoints that works towards one goal: create expert learners who are:

  • purposeful,
  • motivated,
  • resourceful,
  • knowledgeable,
  • strategic, and
  • goal-directed.

What are the principles of universal design for learning?

There are 3 principles of UDL. Each principle has 3 guidelines. Each guideline has a list of checkpoints.

  1. Provide multiple means of representation: Recognition Networks, the “What” of learning.
    1. Perception:
      1. Offer ways of customizing the display of information.
      2. Offer alternatives for auditory information.
      3. Offer alternatives for visual information.
    2. Language & symbols:
      1. Clarify vocabulary and symbols.
      2. Clarify syntax and structure.
      3. Support decoding of text, mathematical notation, and symbols.
      4. Promote understanding across languages.
      5. Illustrate through multiple media.
    3. Comprehension:
      1. Activate or supply background knowledge.
      2. Highlight patterns, critical features, big ideas, and relationships.
      3. Guide information processing and visualization.
      4. Maximize transfer and generalization.
  2. Provide multiple means of action and expression: Strategic Networks, the “How” of learning.
    1. Physical action:
      1. Vary the methods for response and navigation.
      2. Optimize access to tools and assistive technologies.
    2. Expression & communication:
      1. Use multiple media for communication.
      2. Use multiple tools for construction and composition.
      3. Build fluencies with graduated levels of support for practice and performance.
    3. Executive function:
      1. Guide appropriate goal-setting.
      2. Support planning and strategy development.
      3. Facilitate managing information and resources.
      4. Enhance capacity for monitoring progress.
  3. Provide multiple means of engagement: Affective Networks, the “Why” of learning.
    1. Recruiting interest:
      1. Optimize individual choice and anatomy.
      2. Optimize relevance, value, and authenticity.
      3. Minimize threats and distractions.
    2. Sustaining effort & persistence:
      1. Heighten salience of goals and objectives.
      2. Vary demands and resources to optimize challenge.
      3. Foster collaboration and community.
      4. Increase mastery-oriented feedback.
    3. Self regulation:
      1. Promote expectations and beliefs that optimize motivation.
      2. Facilitate personal coping skills and strategies.
      3. Develop self-assessment and reflections.

The UDL principles, guidelines, and checkpoints can be easier to digest as a 3×3 matrix that CAST presents on its website:

3x3 matrix of principles and guidelines with checkpoints.
The UDL Guidelines matrix on the CAST website.

Conclusion

UDL puts a lot of focus on including learners with disabilities. In doing so, UDL acknowledges that by including people with disabilities, curriculum will naturally include more students by accepting each student’s own learning style, communication mode, and motivational carrot. Learning becomes more about strengthening learning techniques, and less about the thing learned or the rigid metrics desired by some educational systems. It’s people-first.

 

Accessibility Principles for the Physical World (Universal Design 2.0)

Universal design got its start in the physical world. As I noted in Accessibility Principles for ICT (WCAG), universal design principles can have an impact on the digital world, too. In the physical world, universal design focuses on making spaces available and welcoming to as many different types of people and abilities, as possible, without adaptation or specialized design. It aims for a one-size-fits-all design solution that embraces the social model of disability, which says that people only experience a disability when a design creates that barrier.

As a side note, I touched on the topic of universal design during Day 93: Designing an Accessible User Experience, Part 1 of my WAS certification journey. So many of these principles that revolve around access for all tend to overlap in ideas in order to make equitable access a reality.

The 7 principles of universal design are:

  1. equitable use
  2. flexibility in use
  3. simple and intuitive use
  4. perceptible information
  5. tolerance for error
  6. low physical effort
  7. size & space for approach & use

Equitable Use

The first principle’s design guidelines say that a design should be useful and marketable to people with diverse abilities by:

  • Providing the same means of use
  • Preventing segregation or stigmatization
  • Supplying privacy, security, and safety
  • Making an appealing design

Examples

  • automated sliding doors that open upon approach
  • public seating that is adaptable for a variety of people and abilities

Flexibility in Use

The second principle’s design guidelines say that a design should accommodate a wide range of preferences and abilities by:

  • Providing choices in methods of use
  • Accommodating right- or left-handed access and use
  • Facilitating the user’s accuracy and precision
  • Providing adaptability to the user’s pace

Examples

  • scissors that can be used by left- or right-handed people
  • ATM that has visual, tactile, and auditory feedback

Simple and Intuitive Use

The third principle’s design guidelines say that a design should be easy to understand how to use, regardless of a user’s past experiences, knowledge, language, or focus by:

  • Eliminating unnecessary complexity
  • Meeting user expectations and intuition
  • Accommodating a wide range of literacy and language skills
  • Arranging information by importance
  • Providing prompting and feedback throughout tasks

Examples

  • escalator
  • image-only instruction manual

Perceptible Information

The fourth principle’s design guidelines say that a design should communicate important information to a user, despite lighting conditions or user’s sensory abilities by:

  • Using multiple modes (pictorial, verbal, tactile) for presentation of essential information
  • Maximizing “legibility” (contrast, text) of essential information
  • Differentiating elements in ways that can be described
  • Providing compatibility with a variety of techniques or devices used by people with sensory limitations

Examples

  • thermostat with tactile, visual, and audible cues
  • airport announcements communicated via speaker and signage

Tolerance for Error

The fifth principle’s design guidelines say that a design should minimize hazards and consequences of accidental or unintended actions by:

  • Arranging elements to minimize hazards and errors: most used elements, most accessible; hazardous elements eliminated, isolated, or shielded
  • Providing warnings of hazards and errors
  • Providing fail safe features
  • Discouraging unconscious action in tasks that require vigilance

Examples

  • an undo feature in a software program
  • a double-cut key that can be inserted either way it’s turned

Low Physical Effort

The sixth principle’s design guidelines say that a design should be made to be used efficiently and comfortably with minimum fatigue by:

  • Allowing a user to maintain a neutral body position
  • Using reasonable operating forces
  • Minimizing repetitive actions
  • Minimizing sustained physical effort

Examples

  • lever door handle
  • touch lamps

Size and Space for Approach and Use

The seventh principle’s design guidelines say that a design should provide space and size for approach, reach, manipulation, and use for all body sizes, postures, and means of mobility by:

  • Providing a clear line of sight to important elements (seated or standing)
  • Making reach to all components comfortable (seated or standing)
  • Accommodating variations in hand and grip size
  • Providing adequate space for the use of assistive devices or personal assistance

Examples

  • curb cuts and wide sidewalks
  • wide gates and entryways

Additional Reading

Accessibility Principles for ICT (WCAG)

Accessibility is the successful access that people with disabilities have to content and spaces. As I mentioned at the end of Accommodation versus Inclusive Design, I concluded that accessibility is a mismatch between the design and a user’s needs. On the web (or with ICT – information and communication technology) we can create that match by starting with W3C’s web content accessibility guidelines (WCAG). The 4 principles of WCAG are:

  • perceivable: broadening the sensory experiences to include sight, sound, and touch,
  • operable: all interactive components and navigation are navigable and usable,
  • understandable: content, component functionality, and design are easy to understand, and
  • robust: content & functionality is compatible with a variety of browsers, devices, and assistive technologies.

Challenges on the web

I won’t go into further detail about all its success criteria just because I’ve written quite a bit about them while studying for the WAS exam. However, I do want to mention some common challenges that people face when on the web, and how accessible design can help designers and developers be aware of how to address these barriers.

Problem area
Solution(s)
Images
  • Use alternative text or a visible caption/description
Color
  • Supplement color-coding with other coding information (shapes, texture, etc.)
Contrast
  • Foreground color should stand out (high contrast) against the background color
Video & audio
  • Include captions and transcripts with video and audio files
  • Include audio description with video
Links
  • Use understandable text with intent, functionality, or destination of the hyperlink
Headings
  • Create a logical outline with the headings to make it well-structured and navigable
Keyboard access
  • Make each interactive component on the page reachable by the keyboard
  • All interactive components should create a logical tabbing order
  • Focus should be visible on interactive components
Tables
  • Assign headers to columns or rows
Forms
  • Explicitly assign a label to every form input
Dynamic JavaScript
  • Explicitly assign a name, role, state and/or properties
  • Assign point of focus when widgets are created
PDF documents
  • Create tags for all structures in a PDF

Universal design can help

Universal design creates products and environments that the vast majority of people can use, taking into account the natural physical diversity among people. Universal design doesn’t just think about people with disabilities, it thinks about a lot of people. By expanding our view from accessible design to universal design, we can make a more usable experience for a lot more people.

Stay tuned for my next post that will go further into universal design, its origins, and its solutions in the context of the physical world.

Additional reading

Accommodation versus Inclusive Design

While working through the “Universal Design for the Web” section of Deque’s CPACC prep course, I referred back to IAAP’s CPACC Body of Knowledge and felt like I was missing the beginning of their Part II: Accessibility and Universal Design section. I decided to follow some of their suggested resource links to find out more. Being the slightly over-studier that I am, I don’t want to overlook any part that may be on the exam. Not to mention, the topic of accommodating individuals versus designing with inclusion from the start is of interest to me anyhow. Should we be prepared to accommodate? Or should we start earlier in the design process to include more people, which expands beyond targeting just people with disabilities? Accessible design has its benefits, after all.

To fulfill my curiosity, I sought to answer some basic questions…

What is accommodation?

ADA.gov Title I says that a reasonable accommodation is “any modification or adjustment to a job, the job application process, or the work environment that will enable a qualified applicant or employee with a disability to participate in the application process, perform the essential functions of the job, or enjoy the benefits and privileges of employment.” Title I is meant to protect employees with disabilities against discrimination.

Title III of the ADA ensures that students with disabilities have equitable access. Specifically, accommodations for students:

  • are individualized to emphasize a person’s strengths and work around their weaknesses,
  • require documentation from a licensed clinician or professional who is trained to diagnose the disability,
  • cannot interfere with the skill or concept being taught, and
  • provide access to a learning environment to which all Americans are entitled.

Examples of accommodations in the workplace or at school:

  • conversion of formats, such as textbooks to e-texts
  • captioning and transcripts for videos
  • reading a test out loud for a student
  • large print or braille format
  • modifying the layout of a workspace

Accommodation is aimed at an individual, on demand, and often requires that a person disclose information about their disability to obtain assistance.

What is inclusive design?

The British Standards Institute (2005) defines inclusive design as:
“The design of mainstream products and/or services that are accessible to, and usable by, as many people as reasonably possible … without the need for special adaptation or specialised design.”

According to the Inclusive Design Research Centre (IDRC) of OCAD University in Toronto, inclusive design is:
“design that considers the full range of human diversity with respect to ability, language, culture, gender, age and other forms of human difference.”

Inclusive design has no formal principles, but the IDRC does chunk inclusive design into 3 dimensions:

  1. Recognize diversity & uniqueness: personalization and flexible configurations are available to create a one-size-fits-one solution;
  2. Inclusive process and tools: diverse designers & consumers;
  3. Broader beneficial impact: curb-cut effect & benefits of accessibility and usability for everyone.

Is inclusive design synonymous to universal design?

The philosophies of inclusive design and universal design appear to be the same, in which the intent is to make an environment or product usable to as many people as possible. Universal design got its start from architectural and industrial design by people working to make public spaces accessible and usable to as many people as possible. Inclusive design got its start through a product design approach to extend the reach of mainstream products to a wider audience.

Unlike inclusive design, universal design has defined 7 principles to further its philosophy:

  1. Equitable use,
  2. Flexibility in use,
  3. Simple & intuitive use,
  4. Perceptible information,
  5. Tolerance for error,
  6. Low physical effort, and
  7. Size & space for approach and use.

In short, no… inclusive design and universal design are not synonymous. After throwing it out there on Twitter, a few people seemed to agree with this idea:

Screen capture of tweet; full description in caption to follow.
Amy Carney tweets (on Dec. 1, 2019), “This makes me wonder: #A11y and #DesignTwitter, do you consider ‘inclusive design’ and ‘universal design’ as interchangeable terminology? 100% of 4 voters replied “No” to my Twitter poll.

Conclusion

Looking back at the origins of each aforementioned design philosophy, it’s clear that physical spaces have to find a “universal” solution (one size fits all) once those spaces are built. In digital spaces, we have the flexibility of taking the “inclusive” approach to tailor our product so that one size fits one. With that flexibility, we, as designers and developers, can broaden our constrained view of disabilities and open up possibilities for anyone who may have a hard time accessing our product for whatever reason; no documentation of disability required. In essence, accessibility is a match between the design and an individual’s needs.

When it comes down to it, inclusive and universal design can save time and money. Accommodation as an afterthought is often more expensive, though sometimes a necessity in specific circumstances. There are so many flexible processes that can be part of the design process, like captioning and good web markup, that can remove the need for on-demand accommodation and benefit a wider-than-intended audience. As the famous line from A Field of Dreams says, “if you build it, they will come.” Find your balance between inclusive design and accommodation, and you’ll find that your audience will appear.

Additional Reading

Benefits of Accessible Design

Accessible designs often benefit everyone. The most obvious group to benefit is people with disabilities. Independence and access is possible when public and digital spaces are built with accessibility in mind.

Organizations benefit from accessibility in several ways:

  • The organization stands out as one committed to equal opportunity and fairness;
  • The business product becomes more compatible/usable for more people;
  • Good markup, thoughtfully composed content, and text alternatives can improve search engine optimization (SEO);
  • Inclusivity increases customer base;
  • Funding eligibility from outside sources (like government) increases;
  • Chances of a lawsuit due to inaccessibility decreases.

In addition to people with disabilities gaining more independence, and businesses increasing engagement with their product, other groups in society often benefit from accessibility.  Some examples of accessible designs that have benefited people without disabilities:

  1. Curb cuts
  2. Elevators
  3. Dual height water fountains
  4. Automated doors

I would venture to guess that you have used most of the “features” I’ve listed. On a more dramatic note, independence for people with disabilities:

  1. Relieves a dependency burden from family and friends, and
  2. Increases interaction between people with and without disabilities, allowing for more friendships and meaningful companionship.

Accessible design creates better access for everyone, but that shouldn’t be our motivation. Access is a human right. Public and digital spaces should be accessible to people with disabilities. Accessible design isn’t a nice-to-have, it’s a must-have because it makes things possible for people with disabilities.

Additional Reading:

Day 100: WCAG and Motor Disabilities

Last official study day! I’ll continue to review my notes, WCAG, screen reader shortcuts, and work through Deque courses, but I will not feel obligated to post everyday after this. Summary of 100-day journey still to come.

A couple days ago, I covered WCAG and hearing impairments, so today I reviewed WCAG again to so how it benefits people with motor impairments that want to use the web.

Things I accomplished

What I reviewed

  • WCAG success criteria that benefit people with motor impairments;

What I learned from it

The following lists target WCAG success criteria that benefit people with motor impairments.

Level A

  • 1.3.2 Meaningful sequence
  • 2.1.1 Keyboard
  • 2.1.2 No keyboard trap
  • 2.1.4 Character key shortcuts (v2.1)
  • 2.2.1 Timing adjustable
  • 2.2.2 Pause, stop, hide
  • 2.4.1 Bypass blocks
  • 2.4.3 Focus order
  • 2.5.1 Pointer gestures (v2.1)
  • 2.5.2 Pointer cancellation (v2.1)
  • 2.5.4 Motion actuation (v2.1)
  • 3.2.1 On focus
  • 3.2.2 On input

Level AA

  • 1.3.4 Orientation
  • 1.4.13 Content on hover or focus (v2.1)
  • 2.4.5 Multiple ways
  • 2.4.7 focus visible
  • 3.3.4 Error prevention (legal, financial, data)

Level AAA

  • 2.1.3 Keyboard (no exception)
  • 2.2.3 No timing
  • 2.2.4 Interruptions
  • 2.2.5 Re-authenticating
  • 2.2.6 Timeouts (v2.1)
  • 2.5.5 Target size (v2.1)
  • 2.5.6 Concurrent input mechanisms (v2.1)
  • 3.2.5 Change on requesst
  • 3.3.6 Error prevention (all)

Day 99: Semantic Elements and Their Quirks

Today I worked on finishing a Deque course about semantic code. All my time got wrapped up in the fascinating aspects of which HTML is read aloud and easily navigable, and which elements are ignored by screen readers.

Things I accomplished

What I reviewed today

  • Semantic structures that screen readers (and sometimes everyone):
    • tables
    • lists
    • iframes
    • elements announced & unannounced
    • parsing & validity
  • Navigation keyboard shortcuts for screen readers;

What I learned from it

I’ve been mixing up the purpose to the caption element and the summary attribute for tables. Caption is the accessible name of the table, so it shows up in a list of tables provided by a screen reader. The summary attribute was deprecated in HTML5. Caption should be short, even when including a brief summary. Summary replacements include:

  • putting the table in a figure element, and using figcaption with table aria-labelledby to associate the table with the summary
  • adding an id to a separate paragraph and adding aria-describedby to the table element to point to that p id.

When using iframes, include a title attribute, and ensure the embedded page/content has a title element. Screen readers like JAWS vary in behavior as to which one they read. Also, as a note to myself, I need to start defining the type of content within tthe iframe title attribute, like starting the title with “Video”, so it’s clear what they are accessing.

HTML elements that we can’t rely on screen readers to read aloud, therefore, should provide additional cues for important information:

  • strong
  • em
  • q
  • code
  • pre
  • del
  • ins
  • mark

These have given me a lot to think about and stresses the importance of testing my sites on a few different screen readers and platforms.

Wrapping a code element with a pre element is appropriate, and helps the visual presentation of code blocks.

Day 98: WCAG and Hearing Impairments

Yesterday’s learning about how WCAG benefits people with visual impairments pushed me forward into more WCAG overview to see how it benefits people with hearing impairments (deaf and hard of hearing). Deafblind benefit from using the combined design techniques of visually impaired and hearing impaired.

Things I accomplished

What I reviewed today

  • Semantic structures that screen readers (and sometimes everyone):
    • links (WCAG 2.4.4, A & 2.4.9, AAA)
    • navigation between pages (WCAG 3.2.3, AA & 3.2.4, AA)
    • navigation on page
  • Navigation keyboard shortcuts for screen readers.
  • WCAG success criteria that benefit people with hearing impairments;

What I learned from it

Tips from Giles Colborne’s book Simple and Usable (as quoted in Web for Everyone:

  • simplicity is good science and good interface design
  • simple designs put complexity in its place
  • observe real people to learn what’s needed
  • designing for multiple devices supports accessibility

aria-describedby and aria-labelledby WILL access content that is inside a container hidden using aria-hidden="true".

aria-labelledby, aria-describedby, aria-label, and hidden text are some ways to let a screen reader user know of current page. Or use aria-current=”page” which has some support.

The following lists target WCAG success criteria that benefit people with visual impairments. The main concern for hard of hearing is to provide text or sign language alternatives to any sound provided.

Level A

  • 1.1.1 Non-text alternatives
  • 1.2.1 Audio-only & Video-only
  • 1.2.2 Captions (pre-recorded)
  • 1.2.3 Audio description or media alternative (pre-recorded)
  • 1.3.3 Sensory characteristics

Level AA

  • 1.2.2 Captions (live)

Level AAA

  • 1.2.6 Sign language (pre-recorded)
  • 1.2.8 Media alternatives (pre-recorded)
  • 1.2.9 Audio-only (live)

Day 97: WCAG and Visual Impairments

Yesterday’s learning about how WCAG benefits people with cognitive disabilities inspired me to look over WCAG again to see how it benefits people with visual impairments (blind and low vision).

Things I accomplished

What I reviewed today

  • Semantic structures that screen readers (and sometimes everyone):
    • page title (WCAG 2.4.2, A)
    • page and parts language (WCAG 3.1.1, A & 3.1.2, AA)
    • landmarks (WCAG 4.1.1, A)
    • headings (WCAG 1,3,1, A & 2.4.6, AA & 2.4.10, AAA)
    • links
  • Navigation keyboard shortcuts for screen readers.
  • WCAG success criteria that benefit people with visual impairments;

What I learned from it

The support among screen readers is better for the simple two-letter language codes (like “en” for English) than for the localized language codes (like “en-au” for Australian English).

Screen readers list forms only if marked as role="form" (the <form> element will be ignored in landmark lists).

The name of a link is calculated as follows (in order of precedence by screen readers):

  1. aria-labelledby
  2. aria-label
  3. Text contained between the opening <a> and closing </a> elements (including alt text on images)
  4. title attribute (note that this is considered a last resort method for screen readers to find something; it should not be considered a primary technique for giving names to links)

If headings have images, the alt text will be show up in the headings list. Linked images (whether HTML img or CSS background image) can be assigned aria-label or aria-described by. Spans can hide extra meaningful content for screen readers. All these alternatives make me wonder how that impacts people with cognitive disabilities or people who use speech recognition. It’s so important to design for more than one disability.

There are so many success criteria for this disability, compared to cognitive disabilities, but I imagine that’s because it is more objective and measurable. The following lists target WCAG success criteria that benefit people with visual impairments.

Level A

  • 1.1.1 Non-text alternatives
  • 1.2.1 Audio-only & Video-only
  • 1.2.3 Audio description or media alternative (pre-recorded)
  • 1.3.1 Info and relationships
  • 1.3.2 Meaningful sequences
  • 1.3.3 Sensory characteristics
  • 1.4.1 Use of color
  • 1.4.2 Audio control
  • 2.1.1 Keyboard
  • 2.1.2 No keyboard trap
  • 2.1.4 Character key shortcuts (v2.1)
  • 2.2.2 Pause, stop, hide
  • 2.4.1 Bypass blocks
  • 2.4.2 Page titled
  • 2.4.3 Focus order
  • 2.4.4 Link purpose (in context)
  • 3.1.1 Language of page
  • 3.2.1 On focus
  • 3.2.2 On input
  • 3.3.1 Error identification
  • 3.3.2 Labels or instructions
  • 4.1.1 Parsing
  • 4.1.2 Name, role, value

Level AA

  • 1.2.5 Audio description (pre-recorded)
  • 1.3.5 Identify input purposes (v2.1)
  • 1.3.4 Orientation (v2.1)
  • 1.4.3 Contrast (minimum)
  • 1.4.4 Resize text
  • 1.4.5 Images of text
  • 1.4.10 Reflow (v2.1)
  • 1.4.11 Non-text contrast (v2.1)
  • 1.4.12 Text spacing (v2.1)
  • 1.4.13 Content on hover or focus (v2.1)
  • 2.4.5 Multiple ways
  • 2.4.6 Headings and labels
  • 2.4.7 Focus visible
  • 3.1.2 Language of parts
  • 3.2.3 Consistent navigation
  • 3.2.4 Consistent identification
  • 3.3.3 Error suggestion
  • 3.3.4 Error prevention (legal, financial, data)
  • 4.1.3 Status messages (v2.1)

Level AAA

  • 1.2.7 Extended audio description
  • 1.2.8 Media alternatives (pre-recorded)
  • 1.3.5 Identify purpose (v2.1)
  • 1.4.6 Contrast (enhanced)
  • 1.4.8 Visual presentation
  • 1.4.9 Images of text (no exception)
  • 2.1.3 Keyboard (no exception)
  • 2.2.4 Interruptions
  • 2.4.8 Location
  • 2.4.9 Link purpose (link only)
  • 2.4.10 Section headings
  • 2.5.5 Target size (v2.1)
  • 2.5.6 Concurrent input mechanisms (v2.1)
  • 3.2.5 Change on request
  • 3.3.6 Error prevention (all)

Day 96: WCAG and Cognitive Disabilities

Even as I’m learning about design, it still comes down to me focusing more on people, their abilities, and the way they interact with the web. As usual, some learning leads to more questions, and more discoveries.

Things I accomplished

What I reviewed today

  • WCAG success criteria that benefit people with cognitive disabilities;
  • overview of ATAG, Part B (Authoring Tool Accessibility Guidelines):
    1. Fully automatic processes produce accessible content
    2. Authors are supported in producing accessible content
    3. Authors are supported in improving the accessibility of existing content
    4. Authoring tools promote and integrate their accessibility features
  • design considerations for various disability categories
  • accessibility-first mindset:
    • avoid exclusive design patterns
    • embrace diversity
    • create inclusive design

What I learned from it

The following lists target WCAG success criteria that benefit people with cognitive disabilities.

Level A

  • 2.5.1 Pointer gestures (v2.1)
  • 2.5.3 Label in Name (v2.1)
  • 2.5.4 Motion actuation (v2.1)
  • 3.3.1 Error identification
  • 3.3.2 Labels or instructions

Level AA

  • 1.3.4 Orientation (v2.1)
  • 1.3.5 Identify input purposes (v2.1)
  • 1.4.10 Reflow (v2.1)
  • 1.4.12 Text spacing (v2.1)
  • 1.4.13 Content on hover or focus (v2.1)
  • 2.5.6 Concurrent input mechanisms (v2.1)
  • 3.2.3 Consistent navigation
  • 3.2.4 Consistent identification
  • 3.3.3 Error suggestion
  • 3.3.4 Error prevention (legal, financial, data)

Level AAA

  • 1.3.6 Identify purpose (v2.1)
  • 2.2.6 Timeouts (v2.1)
  • 2.3.3 Animation from interactions (v2.1)
  • 3.1.3 Unusual words
  • 3.1.4 Abbreviations
  • 3.1.5 Reading level
  • 3.1.6 Pronunciation
  • 3.2.5 Change on request
  • 3.3.5 Help
  • 3.3.6 Error prevention (all)

Day 95: Designing an Accessible User Experience, Part 3

Today’s dedicated accessibility time was spent finishing walking through the topic of designing an accessible user experience, per continuation of Part 2.

Things I accomplished

  • Continued Deque’s “Designing an Accessible User Experience” course. 85% complete.
  • Continued reading A Web for Everyone. 8% complete.

What I reviewed today

  • Ability + Barrier = Disability;
  • Design + Accessibility = Inclusive Design;
  • UX for blind: audio-structural experience and interaction;
  • JAWS keystrokes (Insert + F3, Insert + Ctrl + R);
  • UX for deafblind: tactile-structural text-only;
  • UX for deaf: silent-visual;
  • Cognitive disabilities

What I learned from it

It’s usually best to keep the number of landmarks to a relatively short list, because part of the point of landmarks is to make it faster and easier to find things. The more landmarks there are, the less they help make things faster or easier

The most unique challenge for deafblindness is multimedia content. Solutions:

  • think text-first
  • create a simple design
  • use semantic structure
  • offer control over timing
  • use common words/phrases
  • apply screen reader techniques

WebVTT is one of the most versatile caption formats because users can set preferences like color, size, and font at system-level, which can trickle to browser-level.

WCAG 2.1 adds in some consideration for cognitive disabilities, but there is so much more to be considered, yet can’t be quantified as success criteria. Challenges to understand when considering a variety of traits under the cognitive disabilities category:

  • complex concepts
  • abstraction
  • sarcasm and satire
  • self versus others
  • problem-solving and critical thinking
  • speed
  • memory
  • attention
  • reading
  • speech and language
  • math
  • behavior
  • visual perception

Horton & Quesenbery constructed 9 design principles for incorporating accessibility into a website or application:

  1. people first: designing for differences
  2. clear purpose: well-defined goals
  3. solid structure: built to standards
  4. easy interaction: everything works
  5. helpful wayfinding: guides users
  6. clean presentation: supports meaning
  7. plain language: creates a conversation
  8. accessible media: supports all senses
  9. universal usability: creates delight

Best statement of the day

“The more you can think in terms of the semantic structure, the more successful you will be at creating a good user experience for screen reader users.”

Day 94: Designing an Accessible User Experience, Part 2

“Learning directly from users with disabilities can be one of the most valuable things you can do as a part of the design process.”

Today’s dedicated accessibility time was a continuation of Part 1 on the topic of designing an accessible user experience.

Things I accomplished

  • Continued Deque’s “Designing an Accessible User Experience” course. 67% complete.

What I reviewed today

  • A barrier is exclusion. Exclusion is the failure to meet an accessible design challenge;
  • Plan for accessibility from the beginning and throughout the project;
  • Common design failures:
    • no semantic markup
    • custom widgets without ARIA
    • custom widgets without keyboard focus management
    • poor color contrast
    • visual-only cues for form validation;
  • Test with real users;
  • Disability is a spectrum;
  • Accessible design is often inclusive;

What I learned from it

Referring to statistical probability in math, if you were to target your design at users who fall in the middle of the normal bell curve, you would meet the needs of only 68% of your users. Admittedly, designing for the edge cases requires more skill and planning than designing only for the normal user, but the return is much greater, too.

Best statements of the day

“Knowledge is power… and opportunity… and responsibility. ”

“People with disabilities are in the minority, but that doesn’t make their characteristics irrelevant to the majority.”

Related resource

Day 93: Designing an Accessible User Experience, Part 1

Now that the party is over (my presentations have been given), I’m back on track to going through WAS certification courses on Deque and reviewing information that’s pertinent to my upcoming exam in April. As of today, I’m officially one month away from taking IAAP’s Web Accessibility Specialist certification exam.

Things I accomplished

What I reviewed today

Websites that don’t follow accessibility guidelines and principles are often inaccessible, but they can still be inaccessible (unusable) if only the guidelines are followed and usability testing is not implemented.

Guidelines are a mix of objective (easily testable) and subjective (harder to test).

What I learned from it

Consideration of cognitive disabilities is most neglected when it comes to content creation and website development. Why? Measuring successful access is hard because it’s subjective.

Universal (Inclusive) Design

In 1997, a set of universal principles [PDF] was developed by architects to encourage inclusion of everyone’s needs in the design of buildings and products. Each principle has its own guidelines. The seven principles are:

  1. Equitable use: useful and marketable to people with diverse abilities;
  2. Flexibility in use: accommodates a wide range of individual preferences and abilities;
  3. Simple and intuitive use: easy to understand, regardless of user’s experience, knowledge, language skills, or current concentration level;
  4. Perceptible information: effectively communicates necessary information to the user, regardless of ambient conditions or the user’s sensory abilities;
  5. Tolerance for error: minimizes hazards and the adverse consequences of accidental or unintended actions;
  6. Low physical effort: can be used efficiently, comfortably, and with minimum fatigue;
  7. Size and space for approach and use: provides appropriate size and space for approach, reach, manipulation, and use, regardless of user’s body size, posture, or mobility;

These sound a lot like Web Content Accessibility Guidelines principles and criteria, don’t they?

After reading these, I’m reminded of why it can be so easy to confuse the terms “inclusive” and “accessibility”. Accessibility usually does benefit everyone, but is specifically focused on including a particular group of people (those with disabilities). However, inclusive design is a loftier goal that takes advantage of the fact that designing universally, or with a wider audience in mind, does benefit everyone. I, personally, need to correct myself to use each term appropriately.

An A-ha Moment

Content creators, designers, and developers (all creative people) must be open to feedback about their creation. If not, their product will always fail to be inclusive or accessible. Even people who have been mastering their craft need feedback. Otherwise, the product is just for them and no one else.

I still need to check myself and not take feedback or perceived criticism as a personal attack. Receiving another person’s perspective is actually a building block. My confidence lies in being adaptable and open to revisions for a better end-product, and mastering my craft of design. The joy of creating ultimately relies on the joy of sharing it with others. Very rarely am I a creating art for me, but rather I am hoping to design something that’s usable, beneficial, and enjoyable for other people.

Best statement of the day

“Setting a goal of making things “good enough” for compliance isn’t always good enough for real people. Push the boundaries to create experiences that people with disabilities actually enjoy, not just experiences they merely tolerate.”

The runner up quote from Deque

“Accessibility problems are the result of biased design decisions.”

From A Web for Everyone

“Instead of pretending that hidden away in a vault somewhere is a perfectly “normal” brain, to which all other brains must be compared … we need to admit that there is no standard brain…”