Editorial consistency - Keeping editorial style consistent just in general - e.g. making sure the top of the article always has a clearly marked summary paragraph, making sure bullets always start with a bolded definition. This also helps such groups. (CM)

Strapline

Ensure your interface provides a comparable experience for all users, so people can accomplish tasks in a way that suits their needs without undermining the quality of the content.

Description

Whether out of circumstance, choice, or context people are diverse. As people use different approaches and tools to read and operate interfaces, what the interface offers each user should be comparable in both value and quality.

Examples

• Editorial for alternatives - Having a basic alternative, whether it's alt text, a transcript, audio description, or sign language, makes the content accessible but to be equivalent it needs to capture the essence of the original.
• Ergonomic features: Providing synchronized closed captions makes your video accessible. But making them customizable, color coded, and repositionable provides a more comparable experience.
• Notifications: Notifications that appear in an interface are visually obvious but require proactive discovery by screen reader users. A comparable experience for blind users, can be achieved by using a live region. The notification then requires no explicit action on the part of the user.

Examples not included

An alternative (alt text, transcript, audio description, sign language etc) may not be an equivalent experience for someone who has never had sight as colors, styles, visual descriptions may be meaningless.

A hashtag can be used to promote the principles, and also provide a convenient way for people to provide feedback.

• Add translated text to placeholder filesDecide on hashtag
• Add translated text to placeholder filesAdd to site / blog post / talk.

Appreciate this is a minor thing! I just feel that the balloons make the top of the page feel quite "heavy"/dense; wondering if a light bright colour (maybe to match the existing TPG blue highlights) would help.

Meaning of 'content' - "Ensure people always have control over content and presentation. People should be able to access and interact with content in their preferred way." -> I don't understand what content means in this sentence. It could mean the UX, or interactions or it could mean literally the words / media being viewed. (JK)

Should we list "examples" or "scenarios".

Advantage of "scenarios" is that the suggested solutions could could be viewed more as possibilities, given the scenario.

Reference

• #48 Hashtag
• #43 Creativity and originality
• #42 principles not guidelines/checklist
• #40 Translations
• #14 Introduction
• #2 Resources

Keep focused

Strapline

Provide context-specific information and functionality in a clear and timely fashion.

Description

A site or application may provide lots of information and functionality. Each page within the site or app should have a single or primary purpose. People should be able to focus on one thing at a time. For complex interactions, features should be revealed progressively so as to not overwhelm.

Examples

• Keep task focused, progressively reveal features and content when needed not all in one go (now, next, always) e.g. CC button on/off always on player toolbar (now), CC customisation tools available via an 'advanced' button and panel (next), CC button always on via settings (always)
• Considered disabled users in context i.e. first time user, repeat user, super user, average user
• Consider the functional geography – primary content and text first, positioning and layout (now, next, always)
• Minimal viable interaction "Create the minimum viable interaction by providing the most valuable info as early as possible. @feather #a11y #aeasf” Jeffry Zeldman
• Keep it simple
• Be transparent, make sure the action or key content is clearly perceivable and understandable

Use design patterns and interactions that are familiar to people.

Description

Where there is an accepted design pattern or interaction it should be used. You can use alternative patterns and interactions, but make them a choice for how people use your site or application, not a requirement; always provide the familiar pattern or interaction as well. Take conventions and make them your own, rather than breaking with conventions entirely. It is important to offer choice when using unfamiliar patterns.

Examples:

• Links provided in a list to constitute page navigation
• Buttons being rectangular with a background color fill
• Labels appearing above or to the left of form fields rather than below or to the right
• List items being prepended using bullet symbols
• Font-size being proportionate to heading level
• Favor standard platform components over custom components
• Do not only apply non standard gestures or keyboard behavior to standard components (see #3)

Thanks for the opportunity to give feedback! What I think is so awesome about this list of principles is that it asks web creators to consider the big picture experience they're providing for their users (we know well that you can check off all the items on a WCAG checklist and maybe it's still not a great experience). Some folks are new to inclusive design, but are bringing with them an accessibility checklist mentality. For this audience it might be nice to explicitly mention in a couple sentences that these principles are meant to get you thinking about that big picture and making it a core part of your process (kudos on listing out all those "roles" by the way, I think that really does matter! Lots of misconceptions that this work is solely the responsibility of the devs...).

Description

The outcomes / purpose of a feature should be defined as the basis for following other design principles, particularly equivalent experience.

Examples

• A video might have the purpose of entertainment or education. The equivalent experience may be different.
• An image of an author might have the purpose of identification or for use in promotional material. Depending on the surrounding content the image could be considered decorative or content.

Feedback from @SteveALee, broken out from #23:

"I think the term editorial is not widely understood.">

Strapline

Help users focus on core tasks, features, and information by prioritizing them within the content and layout.

Description

Interfaces can be difficult to understand when core features are not clearly exposed and prioritized. A site or application may provide lots of information and functionality, but people should be able to focus on one thing at a time. Identify the core purpose of the interface, and then the content and features needed to fulfill that purpose.

Examples

• Keep task focused: Progressively reveal features and content when needed, not all in one go.
• Prioritizing tasks: An email application is principally for writing and reading email. The "compose" button is, therefore, present on all screens, and early in the focus order. The inbox is prioritized over other lists of email, such as "sent" and "spam" messages. Less used features such as tagging or organizing email into folders appear later in the focus order, as they will generally only be used when the primary task of reading the email is complete.
• Prioritizing content: The primary content on a news article page is the story, therefore it should come before other content, both visually and in the source order. Related content, such as similar articles, should follow it, and unrelated content after that.
• Prioritising editorial: Editorial for links, headings and buttons should put the primary text first. This applies to both visible and hidden text. This makes the text easy to scan both visually and audibly for screen reader users.

• Remove browser default outline
• Use TPG Gold for hover/focus
• Add a hover state for button, do not change the pointer as this is inconsistent

Being Consistent & Offering Choice - these principles may come into conflict. For example, if you offer many choices and you cannot keep those choices saves somewhere you can end up causing no end of confusion. To me (and perhaps other autistic users) a choice we make without being aware we made it just makes things seem inconsistent. I'm not sure how to resolve that situation, but wanted to raise it.(JK)

Since all of the content resides in the gh-pages branch, it would be helpful to make it the default branch you see when coming to the repos.

The README in master could also be updated to let interested users know that most of the work is happening in the gh-pages branch.

• Use a short word description at the start in bold.
• add one or two examples.
• add only the examples per principle.

My only other comment has to do with the first sentence in the "Be Consistent" section:
The Word "their" doesn't make sense to me in this context .
I think "the" works better, unless I'm missing something about who "their" refers to. (GG)

Strapline

Be selfless: put the needs of users over your convenience as a creator.

Description

It is your responsibility to prioritize the needs of your users over the needs of the business or the people who are creating the interface. When creating your interface you should never sacrifice accessibility or usability. The tools and technologies you choose should support this principle.

Examples

• Procure software that supports accessibility
• Use pattern libraries that support accessibility
• Reusable components - If you use a component from a pattern library consider the context of the page it is ultimately used in as this may mean it needs to be changed e.g. the heading levels used in a tab panel might change depending on the structure of the page it sits in.

Suggest separating the headings and the permalinks for different sections, so the link is located under/after the heading in each case.

Strap line

People use your interface in different situations. Make sure your interface delivers a valuable experience to people regardless of their circumstances.

Description

Your audience will include first time users, established users, users at work, users at home, users on the move, and users under pressure. All of these circumstances can have an impact. For those who already find interaction challenging, such as those with disabilities, this impact may make usage particularly difficult. Make provisions to lesson the impact of circumstantial conditions.

Examples

• Colour contrast - Good contrast lessens the impact of bright sunshine.
• Context sensitive help - Users may need help when they first encounter a complex form or interaction. This help may become redundant, even distracting, as a user becomes more familiar with the form or interaction. Context sensitive help provides the user with choice as to when they access help and better control over the page.
• Captions on the go - You're aware that the video content you are providing will be consumed on mobile devices, which means in public spaces. For smaller viewports, sound is switched off and captions activated by default. Users can consume the content without being antisocial.

Examples not included

• Keyboard shortcuts - A first-time user will not be aware of the custom keyboard shortcuts you have implemented for them. You provide this information as a "tip" which can be dismissed permanently, reducing clutter on subsequent visits.
• Captions on the go - You're aware that the video content you are providing will be consumed on mobile devices, which means in public spaces. For smaller viewports, sound is switched off and captions activated by default. Users can consume the content without being antisocial.
• Plain language - A user who is tired, under pressure, is not fluent in the site's language, or has difficulties with reading may find complex language or long sentences particularly difficult to understand. Use plain language when possible, with short, concise sentences.

Design is an odd thing because you're part artist, part architect. A lot of designers push back on inclusive design because they think it will limit their ability to be creative. But really, you can be expressive and still follow these principles; there are probably plenty of ways to make things easier for people that are completely novel. It would be useful to address this concern somewhere. Is it a blog post linked to from this site? Perhaps some samples of projects that have done something interesting but still maintained the design principles? Or a principle section on finding the appropriate place for differentiation, with some examples given in bullet points?

To do

• Move content to inclusivedesignprinciples.org
• Publish blog post - Friday AM

Questions

• What should the timeline be?
• Heydon what is the hosting plan? We need this ASAP as it might take a day to swap over.

Talk about temporary, permanent, social and environmental (ref MS Inclusive Design Toolkik)
There is no clear cut profile of a blind/screenreader, deaf etc user.

Basically it’s a nice and concise description of the principles. My only suggestion would be to include more imagery - which is a lot easier to say than it is to find something suitable! This is also a personal preference, as I’m a very visual learner. For example, images helping jog my memory or to act as a method to easily scan the page.

The images could be very basic, such as using a set of icons with something simple for each pointer.

(TW)

The design looks good - but I wonder whether we could include some footprints in there too?

"Consider Circumstance" - Perhaps Situation would be a better word as its a group plural for a collection of circumstances. Its also a simpler word to read and understand. (Circumstance: 'a fact or condition connected with or relevant to an event or action.', Situation: "a set of circumstances in which one finds oneself; a state of affairs." (JK)

Translations - Providing translations where possible for major locale groups in the site’s target audience, and also if possible providing a mechanism to easily localise the content, preferably in a crowdsourced/open way. At Mozilla for example we use Pontoon: https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Localizing_with_Pontoon (CM)

Add a resources section:

• How to Design for Accessibility
• Microsoft Inclusive Design Toolkit
• Accessible UX Principles and Guidelines - A Web for Everyone
• Manifesto for Accessible User Experience
• The 7 principles of universal design
• The 10 principles of inclusive web design

Plain English - Keeping language as simple and free of jargon/idioms as possible so that it is understandable by more people, and more likely to be understood say by those with learning difficulties, or those for whom the language the copy is written in is not their first language. The general recommendation is to write for an 7th/8th grade reading level, which equates to about 13/14/15 year olds: https://expresswriters.com/successful-web-content-reading-levels-aim/ (CM)

@chaals is working on the French and Spanish translations. @Heydon can you setup two alternative docs for the translated content to be added straight into?

• Create two placeholder files for French and Spanish @IanPouncey
• Add translated text to placeholder files @chaals
• Add links to each language in the introduction. @iheni
• Add link rel="alternate" hreflang="... links in the header @chaals

Strapline

Consider the value of features and how they improve the experience for different users.

Description

Features should add value to the user experience by providing efficient and diverse ways to find and interact with content. Consider device features such as voice, geolocation, camera and vibration API's, and how integration with connected devices or a second screen could provide choice.

Examples

• Integration with connected devices or second screen - for example using voice interfaces to control multimedia, search for content, output from music or TV adds value for people who struggle to use other interfaces.
• Integration with platform API's - for example using the vibration API to make notifications for usable by deaf and hard of hearing people, or the geolocation API to make it easier for people to use location based services.
• Make task completion easier - Add a 'Show password' button to input fields so users can verify they have correctly inputted text, or add touch identification for password protected areas.

It would be good to acknowledge that this is a TPG project, somwehre in the published version of the principles.

Share with 2 or 3 end users for comment from various disability groups.

Offer choice

Strap line

Consider providing different ways for people to complete tasks, especially those that are complex or non standard.

Description

There is often more than one way to complete a task. You cannot assume what someone's preferred way might be. By providing alternatives for layout and task completion, you offer your audience choices that suit them given their circumstances at the time.

Examples

Multiple ways to complete an action - Where appropriate provide multiple ways to complete an action. For example, on mobile swipe to delete an item can be supported together with an edit button that allows you to select items then delete. An example of this is in iOS mail.

Layout - Where there are long lists of content consider offering a grid or list layout option. This supports people who may want larger images on screen or smaller rows.

Accessible alternatives - Alternative ways of presenting data, such as data tables for info graphics, should be available to all users, as an option rather than a hidden link just for screen reader users. Accessible alternatives can benefit not just a specific target group but all users as long as we offer the choice.

Old examples

1. Support multiple gestures to complete an action e.g. swipe to delete on mobile is supported together with an edit button that allows you to select items then delete. An example of this is in iOS mail.
2. Offer a grid or list layout for viewing information.
3. If an list of items on iOS have associated actions provide a long press to access the actions menu as well as accessing the action items via tap to reveal or something.
4. Provide multiple ways to navigate to content e.g. audio described content might be grouped in a category on Netflix, iPlayer etc but should also be labeled in search results, favorites and other categories. That way people are not forced to go to only the AD category page to find content.
5. If there is a drag and drop feature provide an alternative way to complete the task. For example text inputs to reorder elements or buttons to move content up or down in a list.
6. If an list of items on iOS have associated actions provide a long press to access the actions menu as well as accessing the action items via tap to reveal or something.
7. Pull to refresh on native iOS provided with a refresh button as an alternative. For users that are unfamiliar with the pull to refresh gesture, find the gesture difficult or don't know it's there the refresh button provides an alternative.
8. Accessible alternatives, such as data tables, for info graphics, should be available to all users, as a toggle/tab option rather than a hidden link just for screen reader users. Accessible alternatives can benefit not just a specific target group but all users as long as we offer the choice.
9. If there is a drag and drop feature provide an alternative way to complete the task such as buttons to move content up or down, or inputs to renumber the order of content. While drag and drop can be made fairly accessible it is a sub par experience for many users.
10. Provide multiple ways to find content via menus, search, favourites, last visited etc (move to choice)

Examples should have a consistent style of expression...

1. Remove "for example" inside examples.
2. Should headings be imperative? Descriptive? Is there a reason to have two different styles, such as distinguishing between things to consider and things to do always?

Strapline

Ensure people always has control. People should be able to access and interact with content in their preferred way.

Description

Do not suppress or disable the ability to change standard browser and platform settings such as orientation, font size, zoom, and contrast. In addition, avoid content changes that have not been initiated by the user unless there is a way to control it.

Example

• support pinch zoom, zoom, or text resizing
• support both portrait and landscape orientation
• Provide a play/stop button for animations such as news tickers, updating content etc.
• Allow users to opt into auto playing video and continuous playing video.
• Provide buttons to refresh content rather than infinite scrolling.

When we have written this we should pick a component or a page and apply the principles one by one to show how we can improve the page.

This is excellent and I think will be helpful..

• I think the term editorial is not widely understood.
• Be consistent - I really want to say 'avoid dark patterns' and link to [this rant] by Craig(https://www.sitepoint.com/annoying-web-dark-patterns) :)
• Give Control -> Make it Stop - add auto play videos as well as animations? Death to parallax!
• Offer choice - an example could be Search and Browse. Plus do NOT disable paste into passwords
• Prioritise content - How about adding - consider the users task / needs over your goal but perhaps too contentious. Certainly concidering the restrainst of small screen sizes is important both for people on small screens and a good experience on larger screes where you can easily add also sorts of cruft. Am so tempted to say 'Banks - this means no sales pitches all over the page' LOL
• Add Value - Add ' but do not assume all platform features will work for everyone' eg PE / PWA

HTH

This is probably nit-picky feedback, but when I first encountered one of the permalinks for a principle, I expected the link to go out to more details. I think the reason might be that hierarchy-wise, the text here is at the same level of the <h4> elements. It may help to have this link the same size as the body copy (or slightly smaller if you think that's appropriate), and perhaps the text could be "Shareable link to [section name]"

Touch targets for headings - First observation is a bit of a personal one. I tried tapping on the principle names and nothing happened. I then got a bit confused, closed the page, reopened it. Then clicked the plus arrows. A while later I spotted the expand all. A downward pointing arrow or making the words clickable would have helped me hugely. blush (JK)

Thanks to @Heydon for the preview of the principles; as I mentioned to him, I think they’re excellent.

I have a few very, very light thoughts:

• I found myself wondering a few times if the document would benefit from linking to explicit implementations/patterns that embody some of the recommended examples. Some of the examples are pretty self-explanatory (“Allow zoom”; “Prioritising content”), but others felt like they’d benefit from an example (“Consistent design patterns”; “Context sensitive help”; “Consistent page architecture”), links to relevant articles that explain key terms (“live region” in “Notifications”), or links that reinforce the argument (“Make it stop”).
  • Related to that, I am keenly interested to see the examples under “Offer choice”.
• The Captions on the go pattern is a brilliant idea. That said—and I may be showing my biases here—explicitly tying mobile devices to public consumption feels problematic. I wonder if it’d be possible to soften the language here. (e.g., “which may mean public spaces”) Or perhaps this pattern could be a default on all devices, regardless of viewport size?
• Is it worth referencing the “Consider situation” principle within “Add value”? I’m thinking here of users who might have opted out of the APIs mentioned here—whether by choice, device capability, or network error—and planning for that. (Yeah, yeah, this is a progressive enhancement argument, sorry. ☺️)

That’s really about all I could come up with. This is a wonderful document, and I’m honored to have gotten a preview. Thanks, all.

I'd love an additional principle having to do with making the interface efficient to use for everyone.
You imply this in a couple of spots, but I think it would really help to call it out with a couple of examples.
This principle is regularly violated when it comes to tab order/tab stops.
With many interfaces either items aren't grouped in a logical order or there are tab stops for so many items, that using the tab key to find an item of interest is impractical.
A few well-chosen hotkeys can really speed the process of completing interactive tasks. (GG)

Purely subjective, but: I usually browse with my browser maximised on a widescreen desktop. Currently, due to the font calculation using vw, the text ends up larger than what I'd like...I get a very claustrophobic feeling of just peeking through a letter-box at the page. This makes it difficult to read, and particularly to skim read (same issue I have with our current auto-generated CI reports). I usually end up zooming out to make it a bit more pleasant.

Current (note particularly how much bigger the text is compared to, say, the URL field in the browser's chrome)

Zoomed out, showing a bit more content/context when reading (though the ample margins/padding still make it quite disjointed)

Be Consistent

Strapline

Be consistent with conventions and with their application throughout your interface.

Description

Familiar interfaces borrow from well-established patterns. These should be used consistently within the interface to reinforce their meaning and purpose. This should be applied to functionality, behavior, editorial, and presentation. You should say the same things in the same way and users should be able to do the same things in the same way.

Examples

• Consistent design patterns - use consistent web and platform design patterns to help build familiarity and understanding.
• Consistent editorial - Use consistent editorial across platforms including editorial that is relied on by screen reader users such as text alternatives, headings, labels for buttons and so on. Keeping editorial style consistent in general is also important e.g. making sure the top of the article always has a clearly marked summary paragraph, making sure bullets always start with a bolded definition. [updated from #26]
• Consistent page architecture - use consistent page architecture across templates to help people scan and navigate key content.

Examples not included

• Use a consistent structure across pages
• Ensure elements with the same functionality are consistent across the product
• Use consistent typography, colors, iconography, shapes and focus indicators.

Editorial 'audience or users - I'm unsure if audience and users are used interchangeably or if they are intended to mean different things: "Ensure your interface provides a comparable experience for all users, so people can accomplish tasks in a way that suits their needs without undermining the quality of the content." Others use the term audience: "Your audience will include first time users, established users, users at work, users at home, users on the move, and users under pressure. All of these circumstances can have an impact.". (JK)