Inclusive Digital Design

Design is not necessarily Inclusive (good will and best intentions will not achieve expectations). Design requires a roadmap or a strategic approach to achieve a unique expectation. It defines the specifications, plans, parameters, costs, activities, and processes to achieve that expectation. In this workshop session you will learn about the design principles, the design models to consider, The accessibility design components, and The User Interface and User Experience roles in the design process.

Inclusive Design

The Dialog: Design is not a monologue; it's a conversation.
  • Do you include people with disabilities in the design process?
  • Have you educated your designers to account for people with disabilities when creating new products?
  • Have you updated your processes and systems so that accessibility is embedded into products from the beginning?
  • Have you considered how AI can help your accessibility efforts?
    • Co-design outcome Report- Activity for Ideas And Outcomes
    The Project Scope: Product and service development must be carefully planned out.
  • Design: Accessibility assessment begins at the design level of a product life cycle. The page landscape must be perceivable, the content understandable, the objects operable, and the overall usability must be robust.
  • Development: In this phase, construct a standards-compliant website using materials from the Analysis and Design phases. Define accessibility techniques and remediation plans, prepare accessibility testing scenarios, and monitor accessibility remediation efforts, using the WCAG standards criteria, available automated testing tools, and usability testing requirements.
  • Functional Testing: Dynamic page rendering and operable functionality must be thoroughly tested before usability testing begins. Where native HTML5 cannot meet accessibility requirements, then ARIA coding can be implemented to achieve a defect free design.
  • Usability Testing: Coordinate groups of test participants who have different needs, skills sets, browser configuration options, and assistive technologies. The outcome of this phase is a remediation report describing user experience problems revealed in testing, and their solutions.
  • Product Documentation: Technical writer/editor must ensure product documentation and web content is accurate and accessible. The support and Training personnel must understand product accessibility features and able to work with end-users.
  • Evaluation Review: The evaluation review should be based on the project scope framework and the accepted conformance standard guidance. The initial review should focus on the general user experience. The evaluation process will help your organization build an accessibility maturity governance model.
  • Deployment and Support: Support costs can be significant, there may be customer satisfaction or legal risks associated with inappropriate application support. Under the legislative requirements, there are obligations and penalties for customer support.
    • Design Strategy: Good design is a cyclical process that involves Requirement Analysis, Design Principles, Development and Implementation, functional and user Testing, Evolution and Repeated iterations.
  • Global Trends: Predicting the global trend of technology for the next generation is easier than you might think. Accessibility challenges of today are the mainstream technologies of tomorrow. TechCrunch: Accessibility's nextgen breakthroughs will be literally in your head, Jim Fruchterman, October 2020
  • Purposeful: Purposeful equals Profitable. Increasing the usability of your products and services will increase your access to a larger consumer base. Reaching Every Customer Matters to your business. Increasingly, people are interested in buying from a purpose driven company, and will switch from one company to a purpose-driven one. Medium: 10 Ways Designers and Researchers Can Meaningfully Engage With Disabled People in 2023, by Alex Haagaard, Dec-2022
  • Innovation: Innovating is more profitable than litigating. Pursuing Inclusive Design lifts your brand image by showing you care about all consumers; existing customers and the new ones you are sure to attract. It is estimated that 1 in 4 people have a disability that impacts major life activities, and this number will increase over time as the population ages. This increase in consumers with disabilities has resulted in an increase of website accessibility lawsuits. Inclusive Design not only leads to better business risk protection, but it transforms what was previously a liability into a brand asset. An Innovation Historical Perspective
  • Values: Value sensitive design seeks to provide theory and method to account for human values in a principled and systematic manner throughout the design process. Central to this approach is engaging our moral and technical imaginations. Value sensitive design rests on a foundation of theoretical constructs, which frame its position on the relationship among tools, technology and human values. Value Sensitive Design Lab: Designing With Moral And Technical Imagination
    • Design With Stakeholders: The term stakeholder refers to anyone that has an interest in a project and can influence its success. It is important to identify stakeholders in a project as early as possible. However, Stakeholders may not all have the same objectives. So, it is important to identify areas of convergence and areas of difference between them and to manage individuals whose expectations are unlikely to be met.
    Stakeholder Assessment:
  • The likely impact of the development on the stakeholder.
  • The issues that they will have an interest in.
  • Their likely position regarding accessibility needs.
  • Their ability to influence the development and testing.
  • Their potential impact on the overall project regarding technical and experiences.
  • Potential mitigating actions regarding techniques and solutions.
    • Waterfall Design Philosophy: Is the Design philosophy based on the Technical Problem Solutions using the Waterfall software development cycle?
  • Software Requirement Analysis.
  • Preliminary Design.
  • Detailed Design.
  • Coding and Unit Testing.
  • Integration.
  • Testing.
    • Agile Design Philosophy: Is the Design philosophy based on the Reason Centric Solutions using the Agile software development cycle?
  • Individuals and interactions over processes and tools.
  • Working software over comprehensive documentation.
  • Customer collaboration over contract negotiation.
  • Responding to change over following a plan.
    • Design Planning: Accessible inclusive design resources:
    Design as a process (Wikipedia)
    Interaction Design Foundation: What are Design Principles?
    Interaction Design Foundation: How to Involve Stakeholders in Your User Research
    The Co-Design Toolkit - improving services with people with disability

    Bridging the Disability Divide

    The Bridge: Design is all around us, but for the most part it reflects the perception of the designer, and if the product or service fails your need then the design concepts are flawed. Design is the bridge that overcomes barriers between the delivery of information and the understanding knowledge that impacts life decisions.
    The single biggest problem in communication is the illusion that it has taken place.
    George Bernard Shaw, British playwright and Nobel Prize recipient
    Design Goals: Design flaws are the barriers that keep people from benefiting from products and services. You are designing for real people with solutions that reflect their communication experiences due to visual, hearing, cognitive, motor and other disabilities. When your team has a basic understanding of whom web accessibility affects and how it affects them, then your organization is enabled to create better communication experiences. That is, bridging the digital divide is about closing the gap between leadership understanding of Accessibility, and management implementation of Accessibility, through effective productivity, inclusion, and communication strategies.
    FreeCodeCamp: How to get your team on board with accessibility, James Rauhut
    Goals:
  • Performance: A stable, consistent, and fast access.
  • Security: A safe, risk free, and high quality delivery access.
  • Accessibility: A fully inclusive, easy to use, and productive access.
    • Accessibility Design Guidelines: A lived experience is gained through an interactive engagement with our environment with the appropriate knowledge.
    Accessibility Guidelines
  • Perceivable: Information and user interface components must be presentable to users in ways they can perceive. This means that users must be able to perceive the information being presented. User agents, like screen readers, require clearly defined HTML elements within a structured web page. The ARIA (Accessibility Rich Internet Application) Landmarks and a hierarchy of Headers should be used to define page regions and content context. The Banner, Navigation panel, Main section, and Footer are visually perceivable on a standard computer screen, but not necessarily on a screen reader device.
  • Operable: User interface components and navigation must be operable. This means that users must be able to operate the interface. All web page elements must be operable by a keyboard, speech input, and other non-mouse devices. Some of the Java scripts may not be keyboard accessible, and preventing non-mouse users from performing some functions. Many people do not use the mouse and rely on the keyboard to interact with the web. This requires keyboard access to all functionality, including form controls, input, and other user interface components.
  • Understandable: Information and the operation of user interface must be understandable. This means that users must be able to understand the information as well as the operation of the user interface. Page Titles must be unique and meaningful. Links and Buttons must have concise and clearly marked text labels. Images must have descriptive alternative text. The page foreground and background – and icons – must have contrasting colours for low vision users. The web page must have clearly defined user instructions, and a separation of information content.
  • Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, like browsers and assistive technologies. This means that users must be able to access the content as technologies advance. Meeting this requirement helps maximize compatibility with current and future user agents, like screen readers. In particular, it enables assistive technologies to process the content reliably, and to present or to operate it in different ways. This includes non-standard (scripted) buttons, input fields, and other controls. To deliver a desirable user experience, there must be a separation between web page design and user content. The web page may not render as expected in all browsers, and will not perform as expected in differing screen readers. A design utilizing style sheets and Java Script widgets may improve the robustness. Note, the Accessibility Rich Internet Application (ARIA) code should only be used on a web page if the native HTML code cannot implement the desired effect. ARIA code will not have any effect on older browsers.
  • Conformance: Conformance to a standard means that you meet or satisfy the requirements of the standard. In WCAG the requirements are the Success Criteria. To conform to WCAG, you need to satisfy the Success Criteria. In order to accommodate different situations that may require or allow greater levels of accessibility than others, WCAG has three levels of conformance. There are five requirements that must be met in order for content to be classified as conforming to WCAG.
    • Usability Design Guidelines: Inclusive design goals are based on the four core principles of globally accepted human rights.
    Usability Guidelines
  • Dignity:
    From information to knowledge (Knowledge is power).
  • Independence: From accessibility to usability (Usability is enabling).
  • Integration: From passive to active (Active is inclusive).
  • Equality: From chaos to stability (Stability is Satisfaction).
    • Universal Design: Universal design, which often refers to inclusive design, is broad-spectrum ideas meant to produce buildings, products and environments that are inherently accessible to older people, people without disabilities and people with disabilities. The design starts with an innovative idea and then molds it to meet specific human needs. Typically, universal design innovators create a technology solution and then create a market for that solution.
  • Equitable Use means everyone uses the same website, without a separate accessible site or an accessibility mode.
  • Flexibility in Use means people can operate websites using different input methods, such as touch, speech, gaze, a mouse, or a keyboard.
  • Simple and Intuitive Use means websites are straightforward, with clean layouts, consistent interaction, and clear information.
  • Perceptible Information means content is provided in text as well as visually or audibly, so that the information is accessible using different senses.
  • Tolerance for Error means interactions are designed to promote success and minimize risks, for example, by providing confirmations and feedback.
  • Low Physical Effort means people can efficiently operate websites using their preferred input device (such as a keyboard).
  • Size and Space for Approach and Use means the necessary tools to operate a website interface are visible and readily available.
    • Universal Design Resources: Universal Design (Wikipedia)
    Whole Building Design Guide: Beyond Accessibility to Universal Design
    Section508 U.S. General Services Administration: Universal Design and Accessibility
    Human Centered Design: Human Centered design is a creative approach to problem solving, and building a deep empathy with the people you are designing for. It is a process that starts with the people you are designing for and ends with new solutions that are tailor made to suit their needs. Typically, Human Centered design focuses largely on the production of interactive technology designed around the user's physical attributes rather than social problem solving. Every design challenge is an opportunity to make products and services better for everyone.
  • Increasing the productivity of users and the operational efficiency of organizations
  • Being easier to understand and use, thus reducing training and support costs
  • Increasing usability for people with a wider range of capabilities and thus increasing accessibility
  • Improving user experience
  • Reducing discomfort and stress
  • Providing a competitive advantage, for example by improving brand image
  • Contributing towards sustainability objectives
    • Human Centered Design Resources: Human-Centered Design (Wikipedia)
    UX Planet: Top 4 Principles of Human-Centered Design, by Nick Babich
    Microsoft video: Designing Experiences for People Who Are Blind

    The Design Challenge

    Design Goals: The design challenge is the deficit gap between the user abilities and the system capabilities. The goal is to bridge the gap, through inclusive design, that will create the best possible end-user experience. Good design is built upon effective performance, efficient security, and satisfying accessibility. Accessibility is a measurement of productivity, and productivity defines usability. Usability is concerned with user effectiveness, efficiency and satisfaction through multiple means of representation, multiple means of expression, and multiple means of engagement. That is, design must consider the physical and cognitive characteristics of people with a holistic user interface that incorporates vision, audio, and touch, so as to achieve the goal of full inclusion.
    You can have brilliant ideas, but if you can not get them across, your ideas won't get you anywhere.
    Lee Iacocca, American automotive business legend

  • Productivity that enables employees to be productive and satisfied.
  • Inclusion that integrates people, products, and services.
  • Communications that informs people, builds knowledge, and creates confidence.
    • Design Considerations:
  • Colour Contrast to Improve Visibility: Vision is one of the most commonly relied upon senses for navigating any personal computer or phone, and deteriorating vision is among the most common problems adults develop as they age.
  • Closed Captions to Communicate Beyond Audio: Hearing, like vision, is one of the most common senses to deteriorate with age, and audible noises are one of the most non-discrete forms of communication. Closed captions are necessary for people with hearing impairments, but text is also a more accurate and sometimes deeper form of communication for some environmental situations.
  • Keyboard Navigation to Minimize Motor Skill Burden: Basic human movement may deteriorate with age, but motor skills can limit a computer user's accessibility in some environmental situations. Keyboard strokes can be much faster and more accurate than a mouse or trackpad when you are in transit.
    • Design Components:
  • The user interface design
  • The User experience design
  • The graphic design
  • The content design
  • The component design
    • Accesssibility Design Resources: Integrating Accessibility Throughout Design, by Shawn Henry
    UX Collective: 5 ways good design breaks barriers, by Niwal Sheikh
    Alexwyrick: The 3 Most Critical Optimizations of Accesible Design
    Digital Service Standard alpha | Ontario.ca
    City Tech OpenLab: Reading Ease and Accessibility
    Gov.UK: How to create content that works well with screen readers
    User Interface Design: The User Interface (UI) Design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. UI brings together concepts from interaction design, visual design, and information architecture. Users become familiar with some commonly used interface elements that act in a certain way, so try to be consistent and predictable in your choices and their layout. Doing so will help with task completion, efficiency, and satisfaction. UI design typically refers to graphical, voice-controlled, touch gestures, and other user interactions. That is, the goal is to creating an intuitive user experience. UI design is a purely digital practice. It considers all the interactive elements of a product interface (including buttons, icons, spacing, typography, color schemes, and responsive design). So, UI design transfers the brand's strengths to a product's interface, making sure the design is consistent, coherent, and aesthetically pleasing.
    User Interface Principles: User interface design requires a good understanding of the user needs. The dynamic characteristics of a system are described in terms of the dialogue requirements contained in seven principles of part 10 of the ergonomics standard (ISO 9241 standard).
  • Clarity: The information content is conveyed quickly and accurately.
  • Discriminability: The displayed information can be distinguished accurately.
  • Conciseness: Users are not overloaded with extraneous information.
  • Consistency: A unique design, conformity with user's expectation.
  • Detectability: The user's attention is directed towards information required.
  • Legibility: Information is easy to read.
  • Comprehensibility: The meaning is clearly understandable, unambiguous, interpretable, and recognizable.
    • User Interface Components:
  • Input Controls: Buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date field.
  • Navigational Components: Breadcrumb, slider, search field, pagination, slider, tags, icons.
  • Informational Components: Tooltips, icons, progress bar, notifications, message boxes, modal windows.
  • Containers: Accordion, grids, regions.
    • User Interface Resources: User Interface (UI) Design (Wikipedia)
    WebDesigner Depot: 10 Essential Rules for UI Design
    the ISO 9241 standard
    User Experience Design: While User Experience (UX) is a conglomeration of tasks focused on optimization of a product for effective and enjoyable use; User Interface (UI) Design is its compliment, the look and feel, the presentation and interactivity of a product. In User Experience (UX) Design, it is vital to minimize users' cognitive loads and decision-making time. UX Design principles represent the accumulated wisdom of researchers and practitioners in design and related fields. When you apply them, you can predict how users will likely react to your design. To apply UX design principles effectively, you need a strong grasp of users' problems and a good understanding of how users will accept your solutions.
  • Keep users informed of system status with constant feedback.
  • Set information in a logical, natural order.
  • Ensure users can easily undo and redo actions.
  • Maintain consistent standards so users know what to do next without having to learn new toolsets.
  • Prevent errors if possible; Wherever you cannot do this, warn users before they commit to actions.
  • Do not make users remember information; Keep options visible.
  • Make systems flexible so novices and experts can choose to do more or less on them.
  • Design with aesthetics and minimalism in mind; Do not clutter with unnecessary items.
  • Provide plain-language error messages to pinpoint problems and likely solutions.
  • Offer easy-to-search troubleshooting resources, if needed.
    • User Experience Design Principles: A good user experience is one that meets a particular user's needs in the specific context where he or she uses the product. As a UX designer, you should consider the Why, What and How of product use.
    The Why involves the users' motivations for adopting a product, whether they relate to a task they wish to perform with it or to values and views which users associate with the ownership and use of the product.
    The What addresses the things people can do with a product; it is functionality. That is, your design principles should help your UX designers find ways to improve usability, influence perception, increase appeal, teach users and make effective design decisions in projects.
  • Meet the users needs: The foremost of all UX design principles is to focus on users throughout the design process. Thus, you need to learn what users are looking for in a design (through user testing and other methods). It is possible that a design may seem brilliant to you, but remember that you are not the user.
  • Know where you are in the design process: A lot of work goes into the UX design, and the design process can be overwhelming, so knowing your place in the process is significant. Knowing your design phase, and the tools used at each phase, will help you ask the right questions for user research. For instance, there is no point testing the color of a button if you are still figuring out where it should be placed in the design.
  • Have a clear hierarchy: It is easy to take hierarchy for granted, but it is a UX principle that ensures smooth navigation throughout a design. There are two chief hierarchies that you need to note. First comes the hierarchy that is associated with how content or information is organized throughout the design. For example, when you open a website or app, you will note the navigation bar that includes the main sections. This is the primary hierarchy. When you click or hover over this bar, you will note further sub-categories of content open up, taking you deeper into the app or site. These are the secondary menus.
  • Keep it consistent: Users expect products to share some similarities with other products they regularly use. This makes it easy for them to become familiar with the new product without any additional learning costs. The more familiar your design is to others, the faster users can learn to use it, which enhances their experience. Such consistency also makes the design process easier for the designers, as they do not have to reinvent the wheel every time they take on a new project.
  • Understand accessibility: An increasingly important rule from among the UX design basics is designing with accessibility in mind. That is, a designer's responsibility is to make sure that his design is usable for as many people as possible. This means that your design needs to be accessible to people with disabilities as well as those without disabilities.
  • Context is key: When designing, you need to take into account the user's context. Location is a commonly understood contextual factor. That is, are you designing for someone on the go or for someone sitting at a desk? Many behavioural factors (such as the user's emotional state, the device being used, the influence of other people, and much more) will give you Insight into the user's behavior.
  • Usability first: UX design is entirely focused on solving the users' problems, which makes usability of the design one of the most crucial user experience design principles. No matter how aesthetically pleasing your work may be, it will not strike a chord with the user unless it is safe and easy to use. Any site that is cluttered is bound to lose visitors. As a designer, your job is to make sure that each icon, button, and snippet of information that is present within the design has a purpose. Concentrate on clarity by bringing only useful features to the user's attention.
  • Less is more: For UX, the underlying aim of this is simple; Reducing the operational and cognitive costs of the users. In placing value on this, the design's usability and consistency improve. The less-is-more approach emphasizes simplicity as opposed to clutter or over-decoration in design.
    • User Experience Design Goals:
  • The user says I got what I need To give users what they need is the first goal of user experience design. Before using a product, people are mostly concerned about how useful it is and will the product solve their problem. Doing user research is a good way to find out users' demands, but objectively, it is hard to measure users' needs precisely. Thus, collecting users' feedback constantly and make use of data or other materials to follow your users' activities is also a key to meet users' demands.
  • The user says I did not have to think too much Most users want to achieve the task at hand in a most simple, direct and quick way; Without thinking too deeply. This shows the laziness nature of human beings. But laziness is also an important drive of technology development. As a UX designer, we have no reason to go against it unless we want to make products that are anti-human. So, master the art of user stories and simplify the operations by taking advantage of users' habits.
  • The user says I really enjoy using it Many products have similar functions, which can all meet the users' needs to some extent. So, when designing video player software, how many seconds should the black screen last to draw the users' attention, but never make them feel impatient? Why some social platforms only allow its users to access more functions after a period of time? Those are all questions that user experience designers should be concern about.
  • The user says I like the product enough for me to use it for the long term One important reason that Facebook became a huge social platform with over 200 million users is that FaceBook UX designers know the mental & psychological needs of users; people win others attention on Facebook, which they did not get in real life. Helping people to build a strong connection with the external world; enabling them to follow and be followed.
  • The user says The product is good enough to motivate me to become one of its promoters The inherent property of an excellent design is to mobilize its users. To mobilize your users and make them your promoters is an important user experience goal that good UX designers should set. As we all know, users are the best spokesmen of your products. Companies may seek help from all kinds of resources to promote their products, but none of them is as powerful as users. Building a relationship between the users and potential users, like including a Share Button or a Like Button, will improve attractiveness.
    • User Experience Design Resources: UXDesign: Curated stories on design, user experience, and product design
    Lollypop design Blog: 7 UX Design Principles to live by
    UX Planet Blog: Principles of UX Design
    UX and UI Comparison: It is important to understand that User Interface (UI) Design and User Experience (UX) Design do go hand-in-hand; you cannot have one without the other. However, you do not need to possess UI Design skills to be a UX Designer, and vice versa; UX and UI constitute separate roles with separate processes and tasks. The main difference is that the UX Design is all about the overall feel of the experience, while UI Design is all about the product interface functionality.
    UI is the saddle, the stirrups, and the reins. UX is the feeling you get being able to ride the horse.
    Dain Miller, Web Developer

  • UX design is all about identifying and solving user problems; UI design is all about creating intuitive, aesthetically-pleasing, interactive interfaces.
  • UX design usually comes first in the product development process, followed by UI. The UX designer maps out the bare bones of the user journey; the UI designer then fills it in with visual and interactive elements.
  • UX can apply to any kind of product, service, or experience; UI is specific to digital products and experiences.
    • The Difference Between UX And UI Design - A Layman's Guide
    The Graphical User Design: There are two interrelated factors driving accessible design:
  • Legibility: Legibility is determined by the specific typographic traits affecting recognition of letters and words. As we read, we identify the overall shapes of familiar words rather than processing individual letters and assembling them into phonetic groups. This allows us to process content much faster. The key typographic factors are shape, scale, and style.
  • Readability: Readability refers to the clarity and speed with which content can be digested over an expanse of text such as a paragraph or a page. Readability is related to a font's legibility but is also influenced by design and layout decisions. The chief factors determining whether text is readable are dimension, spacing and alignment. The readability of type can be improved by manipulating two key variables
    Font point size and width, and
    Line length and spacing.
    • Legibility, Project By Design Regression, In Partnership With Google Fonts, Mary Dyson
    WayFinding: The wayfinding process involves a series of decisions by which people moving through an environment can reach their desired destination. Those decisions are guided by architectural features and space planning elements, as well as by recognizable landmarks. They are also supported by signage and other graphic communications and, increasingly, by audible and tactile innovations that assist people with special needs. As people make their way through public buildings and other designed spaces, they have to navigate a complex series of paths and decision points. They should be able to do so easily, getting to and from their destinations without frustration, disorientation or anxiety. They should be able to complete their journeys successfully regardless of any differences in physical or cognitive ability, education or experience.
    The challenge is to engage audiences with full sight, and those with partial and complete vision loss. Key design features can include optimization for screen readers, user preference controls, simplified navigation, and ease of information retrieval to support greater accessibility. design techniques like; skip to content, text scaling and, changing contrast modes will enhance the user experience for all people.
    User Perception Resources: Braille Authority of North America: Guidelines and Standards for Tactile Graphics
    LightHouse for the Blind and Visually Impaired: Ten things to know about tactile graphics
    YouTube: Visual Communication Design Definition
    YouTube: BlindSquare, Painting a picture of the world through sound
    YouTube: Saher Galt, What do pictures SOUND like?
    The Content Design: Content decisions cannot be separated from the context in which the content will be used. That is, direct collaboration between content writers and User Interface designers is encouraged. Content must fit the design where it appears, and conversely User Interface designs must support the content displayed. Content depends on context, and context frames the content experience. Content Design requires all involved to consider how different elements should work together as a system.
    Anything online that conveys meaningful information is content, and content that can be clearly understood can be translated into knowledge. The duties of a Content Designer vary, depending upon the projects they are developing. Such as Animator for motion graphics, Writer for textual content, Instructional designer for educational content, and programmer for web and application driven content. The Content Strategy refers to the planning, development, and management of content, written or in other media.
    Designing a good website that accommodates a lot of content is a tricky balancing act to pull off. Does one attempt to present the user with all the information in a clean, organized manner, or reveal it bit-by-bit, in an effort to create an engaging breadcrumb trail that tugs the user along the road to enlightenment? Get it wrong, and you risk overwhelming your visitors, who will then leave without retaining any part of what they just read. Get it right, though, and you will have gained a new audience member who not only understands your message, but also might just bring a few friends with them when they return.
    Jason Amunwa, User Experience and Web Design Consultant

    (CIRA) study: Canadians are spending more time online each year Shopping, interacting with governments, logging onto social networks, reaching out to family and friends, and searching for jobs and soulmates. Discovering user needs is an important step in the Content Design process. Besides finding out who your users are, you have to find out how they behave, and what are their frustrations. What do you need to know to turn their frustration into satisfaction? Content Designers make information easy to find, simple to understand, and accessible to everyone.
    Content Design Principles: Content Design typically refers to the practice of developing front-end website elements. Content Designers select the right elements and organize them in an attractive and cohesive way in order to attract visitors. Web Content Designers utilize graphic arts concepts such as colour, size and space to design appealing and functional web pages. Content Designers are often involved in online marketing, and usually focus on animated graphics, texts, videos, and sound depending on the message and the target audience. Content Design tasks are accomplished by using a variety of methods, including content management systems, marketing strategies and Internet programming languages such as HTML, CSS, ARIA and JavaScript.
  • Purpose
  • Context
  • Accessibility
  • Clarity

    • Brevity
  • Relevance
  • Flexibility
    • Content Design Goals: The most important part of the Content Design process is the Discovery Phase. The Discovery Phase is all about doing thorough research into the assignment you have been given or the problem you are trying to solve. It is a journey into the minds of users to figure out their wants and needs. The Discovery Phase helps you to understand:
  • Who your audience is
  • What the user wants and needs
  • What language the user uses
  • Which channel the user uses
  • What the organization thinks it wants
  • What the organization really needs
  • How and what to prioritize
  • What you should communicate; When and where
    • Examples Of Content Design:
  • Text: Different types of document formats
  • Graphics: Static, Animated, and tactile
  • Audio/Video: Sounds and pictures
  • Page layout: Visual, auditory, and logical
    • The Component Design: Components are interactive building blocks for creating a user interface and beatiful products for a good user experience. Accessibility in design allows users of diverse abilities to navigate, understand, and use the product User Interface effectively. A web page Component can be anything that the user interacts with; like Menus, Calendars, video players, and shopping carts. The design must also consider the physical components; Like keyboard, mouse, video display, microphone, camera, and much more. Usability describes the quality of the user experience across the entire website. So, there is an implied essential partnership between the system components (operating platform, applications, assistive technology, and user knowledge), and project responsibility roles (Project management, Development, Architecture, Design, Content management, and testing), That must interact effectively for a good User experience.
  • Authoring Tools: Authoring tools are software and services that authors (web developers, designers, writers and others) use to produce web content. Although a web page may conform to the specified accessibility standard, it may not necessarily be usable by an assistive technology user. The web page development techniques used to create the dynamic structure and device interaction behaviour, will determine how usable the web page content is to an assistive technology user. to create an accessible Rich Internet Application developers and content managers must understand the interoperability of assistive technologies. Dynamic page rendering and operable functionality must be thoroughly tested before usability testing begins. Screen readers use shortcut keys to navigate around web pages, but in every case they rely on the web page code being in place to support them. So it is important to use elements to convey semantic document structure and to use them according to specification.
  • Evaluation Tools: Web accessibility evaluation tools are software programs or online services that help you determine if web content meets accessibility guidelines. That is, they automatically evaluate a web page structure according to a specified accessibility standard. Screen readers, browsers and other user agents like video players, that adhere to the specified standard will result in a good user experience. However, the specified standard must be accepted and adopted by all user agent developers, to make the web page evaluation tool results meaningful.
  • User Agent Tools: Everyone that is browsing the web has a user agent. This is the software that acts as the bridge between the user and the internet. When your browser loads a web page, it identifies itself as an agent when it retrieves the content you have requested, and the browser sends a host of information about the device and network that you are on. This is a set of data that allows web developers to customize the web experience. That is, the browser must understand the Application Protocol Interface (API) building blocks and command structure of the web page, so as to display meaningful information on the user device and allow the user to interact with the page elements. Screen readers are a form of assistive technology (AT) potentially useful to people who are blind, visually impaired, illiterate or learning disabled. Thus, the screen reader must understand the API structure of the browser, so as to present the web page information in a meaningful synthesized speech or braille output format. The benefit in coding for the screen reader user agent API, is that you are at the same time coding for search engine optimization and small screen smart devices.
    • Tool Component Resources: Authoring Tools To produce web content, static web pages, dynamic web applications.
    Evaluation Tools for Automated HTML checkers, colour checkers, conformance checkers, and user agents for manual testing.
    User Tools for Web browsers, media players, and assistive technologies.
    Web Accessibility Initiative (WAI): Essential Components of Web Accessibility
    Progressive Enhancement Design: Web pages created according to the principles of progressive enhancement are by their nature more accessible, because the strategy demands that basic content always be available, not obstructed by commonly unsupported or easily disabled scripting. Additionally, the sparse markup principle makes it easier for tools that read content aloud to find that content. Improved results with respect to search engine optimization (SEO) is another side effect of a progressive enhancement-based Web design strategy. Because the basic content is always accessible to search engine spiders, pages built with progressive enhancement methods avoid problems that may hinder search engine indexing.
    The Progressive enhancement strategy is an evolution of a previous web design strategy known as graceful degradation, wherein designers would create Web pages for the latest browsers that would also work well in older versions of browser software. Graceful degradation was supposed to allow the page to "degrade", or remain presentable even if certain technologies assumed by the design were not present, without being jarring to the user of such older software.
    In progressive enhancement a basic HTML markup document is created, geared towards the lowest common denominator of browser software functionality, and then the designer adds in functionality or enhancements to the presentation and behavior of the page, using modern technologies such as Cascading Style Sheets, Scalable Vector Graphics (SVG), or JavaScript. All such enhancements are externally linked, preventing data unusable by certain browsers from being unnecessarily downloaded.
  • Graceful Degradation: Graceful Degradation focuses on building the website for the most advanced/capable browsers. Testing in browsers deemed older or less capable usually takes place during the last quarter of the development cycle and is often restricted to the previous release of the major browsers. Under this paradigm, older browsers are expected to have a poor, but passable experience. Small fixes may be made to accommodate a particular browser. Because they are not the focus, little attention is paid beyond fixing the most egregious errors.
  • Progressive Enhancement: Progressive Enhancement focuses on the content. Content is the reason we create websites to begin with. Some sites disseminate it, some collect it, some request it, some manipulate it, and some even do all of the above, but they all require it. The design requires a separation between web page presentation and web page content.
    • Accessibility Scripting: Progressive Enhancement is based on a recognition that the core assumption behind Graceful Degradation that browsers always got faster and more powerful with devices with low-functionality browsers and serious bandwidth constraints. In addition, the rapid evolution of HTML and related technologies in the early days of the Web has slowed, and very old browsers have become obsolete, freeing designers to use powerful technologies such as CSS to manage all presentation tasks and JavaScript to enhance complex client-side behavior.
    Scripted interfaces must be accessible and WCAG compliant. It is important to keep in mind that some users disable JavaScript on their devices, or may be using technologies that do not fully support scripting. If your web page or application requires scripting, ensure that you account for users without JavaScript capability. This does not necessarily mean that all functionality must work without scripting, but you must avoid a confusing or non-functional presentation that may appear to function, but does not because of lack of JavaScript support.
  • Basic content should be accessible to all web browsers.
  • Basic functionality should be accessible to all web browsers.
  • Sparse, semantic markup contains all content.
  • Enhanced layout is provided by externally linked CSS and ARIA.
  • Enhanced behavior is provided by unobtrusive, externally linked JavaScript.
  • End-user web browser preferences are respected.
    • ARIA Dynamic Content: The Accessible Rich Internet Applications (ARIA) Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with HTML, JavaScript, and related technologies. Without ARIA certain functionality used in Web sites is not available to some users with disabilities, especially people who rely on screen readers and people who cannot use a mouse. ARIA addresses these accessibility challenges, by defining ways for functionality to be provided to assistive technology. With ARIA, developers can make advanced Web applications accessible and usable to people with disabilities.
    The ARIA provides a framework for adding attributes to identify features for user interaction, how they relate to each other, and their current state. The ARIA describes navigation techniques to mark regions and common Web structures as menus, primary content, secondary content, banner information, and other types of Web structures. The ARIA also includes technologies to map controls, live regions, and events to accessibility application programming interfaces, including custom controls used for rich Internet applications. The ARIA techniques apply to widgets such as buttons, drop-down lists, calendar functions, tree controls, expandable menus, and others.
    A web page containing JavaScript will typically be fully accessible if the functionality of the script is device independent (does not require only a mouse or only a keyboard), and the information (content) is available to assistive technologies. Although it is possible to use scripting to create an input element that causes a change of context (submit the form, open a new page, a new window) when the element is selected, but is the user aware of this action. This failure occurs when changing the selection of a radio button, a check box or an item in a select list causes a new window to open. Developers can instead use a submit button or clearly indicate the expected action.
    See WCAG Technique G80: Providing a submit button to initiate a change of context
    Scripting Challenges:
  • Embedded objects such as media players.
  • Device specific events, like mouse clicks.
  • Generic elements as interface controls.
  • Scripting elements to emulate links.
  • Scripted drop-down boxes.
  • Including the use of libraries and toolkit supports.
  • Inability or difficulty navigating using a keyboard or assistive technology.
  • Presentation of content or functionality that is not accessible to assistive technologies.
  • Lack of user control over automated content changes.
  • Altering or disabling the normal functionality of the user agent (browser) or triggering events that the user may not be aware of.
    • JavaScript Accessibility Resources: Cascading Style Sheet (CSS) Definition
    JavaScript Definition
    Accessible Rich Internet Applications (ARIA)
    Web Content Accessibility Guidelines (WCAG)
    UK Government: Building a resilient frontend using progressive enhancement, Service Manual
    WebAIM: Accessible Javascript
    Failure36 WCAG3.2.2: Failure due to automatically submitting a form and presenting new content without prior warning when the last field in the form is given a value.
    Failure37 WCAG3.2.2: Failure due to launching a new window without prior warning when the status of a radio button, check box or select list is changed.
    Failure42 WCAG1.3.1 and WCAG2.1.1: Failure due to using scripting events to emulate links in a way that is not programmatically determinable.
    Failure54 WCAG2.1.1: Failure due to using only pointing-device-specific event handlers (including gesture) for a function.
    Failure59 WCAG4.1.2: Failure due to using script to make div or span a user interface control in HTML.

    End Of Inclusive Design Presentation

    Thank you for your interest in creating more Inclusive Design for your products and services.