Quick Start Guides/Structure and Content

From Education & Outreach
The work on this deliverable has primarily moved to Github. If you can, leave your comments as issues there. This wiki page is still monitored.

This page captures the proposed content for the Quick Start guides. Each task area has a set of topics that should be succinct and actionable.

See Quick Start Guides/Requirements Analysis#Approach and Quick Start Guides/Design for more information on how this will be structured.

Examples of level of info

This section is for review of the level of information that we might want to include. If you have comments on specific wording, please put them in the sections below.

Developing Tips

Associate a label with all form elements

Associate the <label> with form elements using the for and id attributes. If there is not a visible label, provide a label and position it offscreen using CSS.

Example:
<label for="username">
<input id="username" type="text">

Learn more:

Designing Tips

Provide sufficient contrast between text and background colors

For each text foreground/background color combination, including buttons, provide sufficient contrast between the two colors. For text presented over a background image, use a sample of dominant colors or provide some way to make the text stand out. For other situations where objects are meant to be identifiable, such as graphs and diagrams, make adjacent elements have sufficient contrast.

Learn more:

Planning Tips

Secure buy-in from senior management

Support from management helps ensure budget and resources are available for accessibility activities. A strong business case, tailored to organizational goals, will help.

Learn more:

EOWG editing notes

Below are suggestions for formatting your ideas for rewording, [your comments that aren't a direct rewording], and your ideas for a new tip:

  • Tip from original draft
    • Reword: Suggestion for rewording the tip above {your name, dd MMM YYYY}
  • Tip from original draft
    • Comment on this tip that's not rewording {your name, dd MMM YYYY}
  • New:New tip suggestion {your name, dd MMM YYYY}

Designing

Visual or interface designers

Tips

  • Ensure color palette is high contrast
    • Reword: Provide sufficient contrast between text and background colors {Shawn, 1 May 2015}
    • For each text foreground/background color combination, including on buttons, check that the contrast between the two colors has sufficient contrast. For text presented over a background image take a sample of dominant colors or provide some way to make the text stand out.
      • Reword: For each text foreground/background color combination, including on buttons, check that the contrast between the two colors has sufficient contrast. For text presented over a background image take a sample of dominant colors or provide some way to make the text stand out. Additionally, for other situations where objects are meant to be identifiable such as graphs and diagrams, make adjacent elements have sufficient contrast. {Andrew, 7 May 2015}
      • Learn more:
        Accessibility Color Wheel, Color Oracle, Contrast Checker, Contrast Finder: Various tools that help in exploring color contrast
        Success Criteria 1.4.3 Contrast (Minimum): WCAG Success Criteria for color contrast
        Mr. Lee, Online shopper with color blindness: Describes how a user with color discrimination experiences the Web
  • Don't use color alone to signify meaning
  • Ensure links and interactive elements have a hover and focus styling
    • ✓ Reword: Ensure links and interactive elements have a hover and focus styling for mouse and keyboard interaction {Andrew, 7 May 2015}
    • is that the WCAG/UAAG requirement, or just a visible focus? {Shadi, }
      • This relates to a common problem in design where styling is provided for interactive elements but nothing for active interactive elements. So, partially related to 'visible focus' in as much as there needs to be design consideration for the styling {Kevin, 22 May 2015}
      • Additionally, we determined when we did the Easy Checks that SC 2.1.1 requiring keyboard equivalence is applicable here. If hover with a mouse creates a distinct focus indication, that same function must be made available by keyboard. Seems pretty straightforward to me {Sharron, 27 May 2015}
  • Provide navigation that allows easy access to other website pages and clear indication of location in website
  • Provide visible controls for audio and video players
    • Is it assumed that keyboard control is covered elsewhere or do we pompt for that specifically as it relates to media players? {Sharron, 27 May 2015}
  • Ensure form elements include clearly associated labels, with space for important instructions
  • Present form errors in a block above the form and make the fields in error extremely obvious
    • ✓ I needed to Google “salient” – probably a less known word by non-native speakers? {Eric, 1 May 2015}
    • "extremely" is too subjective, imo. Suggest: "...and make fields in error unambiguously clear" {Sharron, 27 May 2015}
  • Structure text to include headers, not be too wide, and in a good font size
    • This is 3 tips in one and I think should be separated {Shawn, 1 May 2015}
    • what is a "good" font size, again a subjective description. {Sharron, 27 May 2015}
  • Learn more about accessibility
    • This seems gratuitous. Without function related activity it will annoy readers. {Wayne, May 2015}
      • The aim with this particular item is to highlight that these tips are not the end-point, but the start. As such this aims to point people towards broader material. The wording is a place holder for the moment and perhaps does not convey this aim as well as it could. {Kevin, 7 May 2015}
  • New: Ensure that it is easy to distinguish between page sections {Eric, 1 May 2015}
  • New: Provide text alternatives or visible labels for icons {Eric, 1 May 2015}
  • New: something on images {Melody, Sharron, Vicki, 1 May 2015}
  • New: content should "linearize" when CSS is turned off {Paul, 7 May 2015}
    • This is certainly something to consider, but may be more suited as part of the development tips? {Kevin, 20 May 2015}
  • New: Ensure sufficient spacing is provided between active elements {Jon, 7 May 2015}

Developing

Front-end developer, or programmer.

Tips

  • Ensure good semantic mark-up; e.g. if it looks like a header, mark it up with a header element
    • ...if it looks or acts like a header...! {Wayne, May 2015}
  • Ensure all form elements have an associated label
  • Include HTML5 structural elements
    • ✓ Perhaps changing "Use HTML5 structural elements" to "Include HTML5 structural elements?" We have no idea what their requirements might be. {Jon, 7 May 2015}
  • Match the reading order and the code order
  • Use ARIA to provide meaning to non-standard interactive elements
  • Ensure that all interactive elements are keyboard accessible
  • Check your code validates
    • Unsure what "Check your code validates" means {Melody, 7 May 2015}
  • Learn more about accessibility
    • Actually I do think this is important. It just needs specifics {Wayne, 7 May 2015}
  • New: Responsive design {Lydia, 7 May 2015}
  • New: Discuss coding platform for mobile, desktop, etc if any {Lydia, 7 May 2015}
  • ✓ New: Run Easy Checks periodically to ensure basic accessibility {Wayne, 7 May 2015}

Authoring

Content author, content editor, or content manager.

  • ✓ Reword: Content author, content editor, or content manager. {Andrew, 7 May 2015}

Tips

  • Provide alternative text for all images
    • ✓ Provide the alternative text for any graphics you have included {Andrew, 7 May 2015}
    • ✓ Content authors with help from content managers should have primary responsibility for text alternatives, especially long descriptions. Presumably the author knows why an image is used and whether it is content or decoration {Wayne, 7 May 2015}
    • I have included this with a slightly modified form of Andrews suggestion {Kevin, 21 May 2015}
  • Keep it short and simple
  • Make all links clear, for example, avoid using 'click here' or 'more'
    • ✓ Reword: Make all links clear on their own, for example avoid avoid using 'click here' or 'more' {Andrew, 7 May 2015}
  • Provide short, meaningful headings to break-up long text blocks
  • Ensure that transcripts and captions are provided for audio/visual content
    • ✓ Reword: Ensure that transcripts and captions are provided for audio/visual content {Andrew, 7 May 2015}
  • Avoid using complex words and sentence structures
  • Use informative, unique page titles
  • File download link text should include file type and size
  • ✓ New: Expand all acronyms on their first use {Andrew, 7 May 2015}
  • Learn more about accessibility
  • Use consistent layout, format, and language between pages
    • ✓ New: When authoring content, provide consistent layout, format, and language between pages when appropriate. {Brent, 7 May 2015}

Evaluating

QA, tester, or evaluator.

Tips

  • Use Easy Checks for early quick reviews
  • Run evaluation sessions with real people
  • Review QA process to incorporate early evaluations
  • ✓ New: Select a suite of tools to assist automated and manual testing - see http://www.w3.org/WAI/ER/tools/index.html {Andrew, 7 may 2015}
  • Review evaluation methodology in line with WCAG-EM
  • Use a standard reporting template for evaluations
    • ✓ do we want to suggest that the WCAG-EM Report Tool is the only way? or do we say that or a similar or equivalent tool {Sharron, 7 May 2015}
  • Develop and maintain database of commonly identified issues
  • Learn more about accessibility

Advocating

Champion, or spokesperson.

Tips

  • Learn more about accessibility
  • Create awareness for accessibility through presentation and outreach
  • Develop accessibility business case
  • Secure management support for accessibility activities
  • Communicate accessibility wins
  • Create an internal and external feedback mechanism
  • Use Easy Checks to develop a general appreciation for key website accessibility
  • Actively seek input from people with disabilities
  • Align accessibility rationale with general organizational policies
    • ✓ New: Align accessibility rationale with general corporate policies {Sharron, 7 May 2015}

Project managing

Project managers or website owners

Tips

  • Secure buy-in from senior management
  • Provide accessibility awareness training
  • Appoint at least one accessibility specialist
  • Plan for regular accessibility checks
  • Create an accessibility policy
  • Provide a publicly available website accessibility statement
  • Involve users with disability in any usability testing
  • Learn more about accessibility

Feedback

This document was raised for general feedback in the 27 April Survey and discussed on 1 May meeting.

General points for discussion

  • Maybe change from role-based (eg. "tips for designers") to task-based (eg. "tips for designing")? {Shadi, 30 Apr 2015}
    User Experience Designer is also missing as an audience. {Melody, 27 Apr 2015}
    • Need to seek a balance between classifying every role and ensuring a clear distinction between relevant tips. How should we create this balance? {Kevin, 1 May 2015}
  • Is this going to be in depth enough for evaluators? There is a wide spread of skill between advocate and developer/evaluator. How do we bridge that? {Wayne, 30 Apr 2015}
    • There is certainly a difference in level of detail required depending on level of activity. Should the aim be to try to balance the tips across all activity areas, or within an area, or not at all? {Kevin, 1 May 2015}
  • Keep this resource a simple sign-post to existing resources, rather than try to re-develop existing content. {Shadi, 30 Apr 2015}
    I recall that the joys that everyone took in the biz card was it clarity and brevity. {Sharron, 30 Apr 2015}
    • This discussion point aims to explore what content should be included; the requirements have suggested a top, a short expansion paragraph, and optional example, benefits, and/or relevant resources {Kevin, 1 May 2015}

Focused points for discussion

  • Designer: Hover styling doesn't apply to touch devices. Was "active" styling meant? {Melody, 27 Apr 2015}
    • I deliberately used 'hover' and 'focus' as 'active' is sometimes taken to apply to mouse interactions only. I agree that 'active' would be more accurate, but the terminology may be lost on some. {Kevin, 28 Apr 2015}
  • Designer and Developer: Missing guidance for images {Melody, 27 Apr 2015}
    I believe authors should be responsible for non-text elements that require text (images, charts, etc). {Jon, 30 Apr 2015}
    • Someone needs to take responsibility for ensuring all imagery has appropriate alternative text. The difficulty is that the responsibility for this is likely to vary quite a bit. Perhaps a note of this is required in multiple places, possibly including Author? {Kevin, 28 Apr 2015}
  • Isn't it a bit redundant to recommend that people "Learn more about accessibility?" I mean, isn't that why they're here? {Jon, 30 Apr 2015}
    • The aim of this tip was to highlight that this was not the end of the journey but just the beginning, and to signpost to other more detailed resources. It might benefit with more clarification. {Kevin, 1 May 2015}
    • I like the "Learn more about accessibility?" section because in many cases someone might have received a shared link or email to the page from a colleague or consultant rather than finding this resource themselves while learning about accessibility. In that case, they see the link and are invited to go deeper into all the resources and learning available to them from W3C. {Brent, 27 May 2015}

Previous feedback

  • Also helps with... — Might be worth also including a short snippet that highlights the value this activity brings to a broader audience {Andrew/Kevin, 10 Apr 2015}
Retrieved from "https://www.w3.org/WAI/EO/wiki/index.php?title=Quick_Start_Guides/Structure_and_Content&oldid=12982"