Graduate Program KB

Designing Application for Everyone

• Making sure our applications work for all people
• The goal is to deepen our understanding of inclusive design principles, the importance of accessibility and how we can achieve these in practice.

Inclusive Design

• Focuses on considering everyone's different abilities, preferences, and needs. Ensuring that as many people as possible can enjoy our designs.
• We bother with Inclusive Design for:
  • Diversity:
    • We want everyone to be able to to enjoy our apps.
    • It's important to recognize exclusion.
  • Learning:
    • It's a design process that puts people first.
    • Ensuring everyone can use our apps can mean new different problems to solve, to make us even better developers.
• Inclusive design is a mindset that can be adopted when you create your apps, it requires diligence and for you to consider a broad range of cases:
  • Mental and Physical disabilities.
  • Language barriers.
  • Visual or hearing impairments.
  • Color blindness.
  • Lack of equipment / resources.

Importance of Accessibility

• In a sense falls under inclusive design but also is it's own thing.
• Accessibility is based on the Web Content Accessibility Guidelines (WCAG).
• It is specifically centred around people with disabilities or impairments.
• Based on 4 principles:
  1. Perceivable: Information and UI elements must be presented in ways users can perceive (e.g. text alternatives for images.)
  2. Operable: Users must be able to interact with the interface (e.g. keyboard navigation, enough time to read and use content.)
  3. Understandable: Content and operation must be easy to understand (e.g. readable text, predictable behaviour.)
  4. Robust: Content must be compatible with a wide range of assistive technologies and remain accessible as technology evolves.
• Companies like Microsoft and IBM actively promote accessibility and provide their own tools to encourage developers to design apps following the above 4 principles.

Nuts and Bolts

• Below is how to actually implement some of the stuff.
• You can have a look at the repositories I created to demo some of these concepts:
  • Exclusive Design
  • Inclusive Design
  • Zoom Example
• Keyboard Accessibility:
  • Most modern frameworks handle majority of this automatically.
  • Standard HTML elements like buttons and links are automatically focus-able and can be tabbed to.
  • Sometimes when we need more complexity in our UI or custom components, we might need to enhance our keyboard accessibility.
  • A common example is having to manage focus when opening a modal:
    • If we open a modal and then close it, we'd expect the button we used to open it to be in focus.
    • Here is how we could achieve something like this:

        const Component = () => {
            const buttonRef = useRef(null)
            const handleClick = () => {
                //  handle opening and closing of the modal here
                buttonRef.current.focus()
            }
    
            return (
                <button ref={buttonRef} onClick={handleClick}>
                    FOCUS BUTTON
                </button>
            )
        }
    

• Audio accessibility:
  • Involves ensuring that our content can be delivered through speech well and effectively.
  • This involves using semantic HTML, labeling and having a logical structure.
    • Logical structure refers to things like header hierarchy.
  • Labels (label or aria-label) are necessary especially for forms to associate the input to the field.
  • We can capture dynamic changes in an element (like a notification) by adding an aria-live attribute.
  • Finally, common sense plays a big role, by this I mean having useful names for links and headers.

        <button aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    
        <label for="email">Email:</label>
        <input type="text" id="email" name="email"/>
    

• Design tips:
  • Use semantic HTML elements to convey structure and meaning.
  • Provide text alternatives for images, audio, and video content.
  • Ensure all interactive elements are keyboard accessible.
  • Maintain high color contrast for better readability.
  • Use clear, descriptive labels and ARIA roles where necessary.
  • Design with responsive layouts to ensure accessibility across devices (wasn’t really covered in this talk).
  • Prioritize simplicity and clarity in your design to accommodate diverse user needs.
  • Ensure content is understandable by users with varying levels of technical proficiency.
  • Consider cultural diversity by avoiding assumptions about language, symbols, and imagery.