Accessibility is the practice of making your websites _____ by as many people as possible — we traditionally think of this as being about people with disabilities, but really it also covers other groups such as those using mobile devices, or those with slow network connections.
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility
Accessibility is the practice of making your websites usable by as many people as possible — we traditionally think of this as being about people with disabilities, but really it also covers other groups such as those using mobile devices, or those with slow network connections.
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility
Designing inclusively doesn’t mean you’re making one thing for all people. You’re designing a ______ of waysfor everyone to _______ in an experience with a sense of belonging.
Designing inclusively doesn’t mean you’re making one thing for all people. You’re designing a diversity of waysfor everyone to participate in an experience with a sense of belonging.
https://www.microsoft.com/en-us/design/inclusive
The interactions we design with technology depend heavily on what we can ___, ___, ___, and ____. We can’t assume everyone has all of those senses fully enabled all the time. Web designers and developers can design and build for all senses.
Inclusivity: The interactions we design with technology depend heavily on what we can see, hear, say, and touch. We can’t assume everyone has all of those senses fully enabled all the time. Web designers and developers can design and build for all senses.
If we use our own ____ and _____ as a starting point, we end up with products designed for people of a specific gender, age, language ability, tech literacy, and physical ability. Those with specific access to money, time, and a social network
If we use our own abilities and biases as a starting point, we end up with products designed for people of a specific gender, age, language ability, tech literacy, and physical ability. Those with specific access to money, time, and a social network
Auditory: Don’t rely on _____ to convey information. Provide captions, audio description, or transcripts
Auditory: Don’t rely on sound to convey information. Provide captions, audio description, or transcripts
Visual: Users may have poor vision, vision loss, ____ _____ or sensitivity to _____ colours
Visual: Users may have poor vision, vision loss, colour blindness or sensitivity to bright colours
Physical: The ability to physically ______ may be painful or restricted in some users for reasons that may include pain, weak muscular control, missing limbs.
Physical: The ability to physically move may be painful or restricted in some users for reasons that may include pain, weak muscular control, missing limbs.
Cognitive/Neurological: Users may not process ______ the same way.
Cognitive/Neurological: Users may not process info the same way.
WCAG 2.0 operates under the FOUR principles:
1) Perceivable: Information and UI components are apparent
2) Operable: Able to interact with UI and navigation components
3) Understandable: Users know how to interact with content
4) Robust: Can be interpreted by and is functional across variety of user agents, including Assistive Technologies
Perceivable Examples:
- Text alternatives for non-text content
- Alternatives for time-based media (e.g., audio recordings, videos)
- Content can be presented in different ways without losing meaning or structure
- Sufficient contrast ratio between foreground and background colours
Perceivable Solutions:
-Ensure that there is sufficient contrast, ensure all img nodes have an alt attribute and provide captions or transcripts for audible media
Operable Examples:
- Keyboard accessibility
- Giving users enough time to read and use content
- Do not design content in a way that is known to cause seizures
- Provide navigation aids
Operable Solutions:
- Controls (links, buttons, form elements) are keyboard accessible:
- Clicking a button: Enter and Spacebar keys
- Clicking a link: Enter key
- Tab: Puts next control in focus
- Shift + Tab: Puts previous control in focus
- Radio buttons: Arrow keys
- Select input: Spacebar to show options, Arrow keys to scroll through options, Enter key to select an option
Understandable Examples:
- Text content is at an appropriate reading level, (Grade 7 or 8, unless intended for a specific audience)
- Interactions trigger predictable behaviours
- Help users avoid and correct mistakes
Understandable Solutions:
- Label your form inputs
- Avoid using placeholder text to label inputs or to provide additional information about expected values
Avoid making buttons look like links and making links look like buttons - Support different keyboard interactions
Use descriptive button or link text - Avoid “Learn more” or “Click here”
Avoid using jargon or technical language (unless it is appropriate for the audience)
Robust Examples:
- Valid and semantic HTML: Unique IDs, No duplicate attributes, No missing closing tags,
- Proper nesting
- Use proper attributes for form elements: name, for, value
Robust Solutions:
- Use semantic and valid HTML elements
- Maintain proper nesting structure
- Use valid attributes and values
- Provide fallbacks for older browsers
- Responsive layouts
In order for a Web page to conform to WCAG 2.0, all of the conformance requirements must be satisfied. There are 3 conformance levels: _, __, ___. Each principle has its own set of conformance criteria.
In order for a Web page to conform to WCAG 2.0, all of the conformance requirements must be satisfied. There are 3 conformance levels: A, AA, AAA. Each principle has its own set of conformance criteria.
__________ (ARIA) is a set of attributes that define ways to make Web content and Web applications (especially those developed with Ajax, JavaScript and more recent web technologies like Bootstrap) more ________ to people with disabilities.
Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make Web content and Web applications (especially those developed with Ajax, JavaScript and more recent web technologies like Bootstrap) more accessible to people with disabilities.
For example, ARIA enables accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more.
For example, ARIA enables accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more.
Aria attributes describe the _____ and/or _____ and _____ of complex components on a web page and improves the user experience of people using Assistive Technologies when HTML5 semantic elements aren’t _______ enough.
Aria attributes describe the role and/or state and properties of complex components on a web page and improves the user experience of people using Assistive Technologies when HTML5 semantic elements aren’t descriptive enough .
Even though aria attributes improve accessibility, if a semantic ______ element is available, use it!
Even though aria attributes improve accessibility, if a semantic HTML element is available, use it!
