WordPress.org

Make WordPress Accessible

Updates from February, 2014 Toggle Comment Threads | Keyboard Shortcuts

  • Joseph Karr O'Connor 9:59 am on February 27, 2014 Permalink  

    Accessibility Team Update: February 26, 2014 

    Contributor Day Activities

    We discussed activities that might be suitable for contributor days.

    Team member Graham Armfield will be leading the accessibility table at the UK Contributor Day in Manchester on Saturday, March 1, and will help refine this list based on that experience.

     
  • Rian Rietveld 6:42 pm on February 19, 2014 Permalink  

    Testing the Widgets Cutomizer 

    Summary

    Results below tested against WCAG 2.0 AA standards. Overall, the interface performed well, and the majority of fixes should be fairly easy to make in the long run. Tested using Safari, Chrome, Firefox, Voiceover and Wave (http://wave.webaim.org/toolbar/) on 3.8.1 running Twenty Fourteen with the plugin installed.

    • One “High” rated issue.
    • Four “Medium” rated issues.
    • Keyboard accessibility when accessing individual widgets needs
      improvement.
    • Overall, an a href is used to fire specific actions on the
      page, like expand accordions or show/hide other dialogues. Broadly speaking,
      the events should be fired with a button instead of an a
      href
      .
    • The page could be improved greatly by adding WAI-ARIA roles.

    Perceivable
    Web content is made available to the senses – sight,
    hearing, and/or touch

    Guideline 1.1
    Text Alternatives: Provide text alternatives for any
    non-text content

    Success Criteria WebAIM’s Recommendations Severity Recommendation
    1.1.1 Non-text
    Content

    (Level A)
    • All images, form image buttons, and image map hot spots have
      appropriate, equivalent alternative
      text
      .
    • Images that do not convey content, are decorative, or contain
      content that is already conveyed in text are given null alt text
      (alt=””) or implemented as CSS backgrounds. All linked images
      have descriptive alternative text.
    • Equivalent alternatives to complex images are provided in
      context or on a separate (linked and/or referenced via longdesc)
      page.
    • Form buttons have a descriptive value.
    • Form inputs have associated text
      labels
      .
    • Embedded multimedia is identified via accessible text.
    • Frames are appropriately titled.
    Pass on all criteria. No recommendations.

    Guideline 1.2
    Time-based Media: Provide alternatives for time-based
    media

    NOTE: If the audio or video is designated as an alternative to web
    content (e.g., an audio or sign language version of a web page, for
    example), then the web content itself serves as the alternative.

    >

    Success Criteria WebAIM’s Recommendations Severity Recommendation
    1.2.1
    Prerecorded Audio-only and Video-only

    (Level A)
    • A descriptive text transcript (including all relevant visual
      and auditory clues and indicators) is provided for non-live,
      web-based audio (audio podcasts, MP3 files, etc.).
    • A text or audio description is provided for non-live,
      web-based video-only (e.g., video that has no audio track).
    Pass Not applicable.
    1.2.2 Captions
    (Prerecorded)

    (Level A)
    • Synchronized captions are
      provided for non-live, web-based video (YouTube videos,
      etc.)
    Pass Not applicable.
    1.2.3 Audio
    Description or Media Alternative (Prerecorded)

    (Level A)
    Pass Not applicable.
    1.2.4
    Captions (Live)

    (Level AA)
    • Synchronized captions are provided for all live multimedia
      that contains audio (audio-only broadcasts, web casts, video
      conferences, Flash animations, etc.)
    Pass Not applicable.
    1.2.5
    Audio Description (Prerecorded)

    (Level AA)
    • Audio descriptions are provided for all video content
      NOTE: Only required if the video conveys content visually that is
      not available in the default audio track.
    Pass Not applicable.
    1.2.6 Sign Language
    (Prerecorded)

    (Level AAA)
    • A sign language video is provided for all media content that
      contains audio.
    Not applicable. Only testing for AA.
    1.2.7 Extended
    Audio Description (Prerecorded)

    (Level AAA)
    • When an audio description track cannot be added to video due
      to audio timing (e.g., no pauses in the audio), an alternative
      version of the video with pauses that allow audio descriptions is
      provided.
    Not applicable. Only testing for AA.
    1.2.8 Media
    Alternative (Prerecorded)

    (Level AAA)
    • A descriptive text transcript is provided for all
      pre-recorded media that has a video track.
    Not applicable. Only testing for AA.
    1.2.9
    Audio-only (Live)

    (Level AAA)
    • A descriptive text transcript (e.g., the script of the live
      audio) is provided for all live content that has audio.
    Not applicable. Only testing for AAA.

    Guideline 1.3
    Adaptable: Create content that can be presented in
    different ways (for example simpler layout) without losing information or
    structure

    Success Criteria WebAIM’s Recommendations Severity Recommendation

    1.3.1 Info and Relationships

    (Level A)
    • Semantic
      markup
      is used to designate headings (<h1>), lists
      (<ul>, <ol>, and <dl>), emphasized or special
      text (<strong>, <code>, <abbr>,
      <blockquote>, for example), etc. Semantic markup is used
      appropriately.
    • Tables
      are used for tabular data. Where necessary, data cells are
      associated with their headers. Data table captions and summaries
      are used where appropriate.
    • Text labels are associated with form input elements. Related
      form elements are grouped with fieldset/legend.
    Medium The “Find Widgets” search box has no associated label.
    1.3.2
    Meaningful Sequence

    (Level A)
    Pass No recommendations.

    1.3.3 Sensory Characteristics

    (Level A)
    • Instructions do not rely upon shape, size, or visual location
      (e.g., “Click the square icon to continue” or “Instructions are
      in the right-hand column”).
    • Instructions do not rely upon sound (e.g., “A beeping sound
      indicates you may continue.”).
    Pass No recommendations.

    Guideline 1.4
    Distinguishable: Make it easier for users to see and hear
    content including separating foreground from background

    Success Criteria WebAIM’s Recommendations Severity Recommendation
    1.4.1
    Use of Color

    (Level A)
    • Color is not used as the sole method of conveying content or
      distinguishing visual elements.
    • Color alone is not used to distinguish links from
      surrounding text unless the luminance contrast between the link
      and the surrounding text is at least 3:1 and an additional
      differentiation (e.g., it becomes underlined) is provided when
      the link is hovered over or receives focus.
    Pass No recommendations.
    1.4.2
    Audio Control

    (Level A)
    • A mechanism is provided to stop, pause, mute, or adjust
      volume for audio that automatically plays on a page for more than
      3 seconds.
    Pass Not applicable.
    1.4.3
    Contrast (Minimum)

    (Level AA)
    • Text and images of text have a contrast ratio of at least
      4.5:1.
    • Large text (over 18 point or 14 point bold) has a contrast
      ratio of at least 3:1
    Pass Not applicable.
    1.4.4
    Resize text

    (Level AA)
    • The page is readable and functional when the text size is
      doubled.
    Medium User cannot control the size of text because it is all fixed unit
    sizing (pixels). Although page zoom is an effective method for many
    users to enlarge text, it’s best practice to size in relative units
    like em to give the user ultimate control.
    Recommendation: With a user interface like the
    customzer, it would be a challenge, but begin designing and
    developing with relative unit font sizes.

    1.4.5 Images of Text

    (Level AA)
    • If the same visual presentation can be made using text alone,
      an image is not used to present that text.
    Pass Not recommendation.
    1.4.6 Contrast
    (Enhanced)

    (Level AAA)
    • Text and images of text have a contrast ratio of at least
      7:1.
    • Large text (over 18 point or 14 point bold) has a contrast
      ratio of at least 4.5:1
    Not applicable. Testing for AA only.
    1.4.7
    Low or No Background Audio

    (Level AAA)
    • Audio of speech has no or very low background noise so the
      speech is easily distinguished.
    Not applicable. Testing for AA only.

    1.4.8 Visual Presentation

    (Level AAA)
    • Blocks of text over one sentence in length:
      • Are no more than 80 characters wide.
      • Are NOT fully justified (aligned to both the left and the
        right margins).
      • Have adequate line spacing (at least 1/2 the height of
        the text) and paragraph spacing (1.5 times line
        spacing).
      • Have a specified foreground and background color. These
        can be applied to specific elements or to the page as a whole
        using CSS (and thus inherited by all other elements).
      • Do NOT require horizontal scrolling when the text size is
        doubled.
    Not applicable. Testing for AA only.
    1.4.9
    Images of Text (No Exception)

    (Level AAA)
    • Text is used within an image only for decoration (image does
      not convey content) OR when the information cannot be presented
      with text alone.
    Not applicable. Testing for AA only.

    Operable
    Interface forms, controls, and navigation are
    operable

    Guideline 2.1
    Keyboard Accessible: Make all functionality available
    from a keyboard

    Success Criteria WebAIM’s Recommendations Severity Recommendation
    2.1.1
    Keyboard

    (Level A)
    • All page functionality is available using the keyboard,
      unless the functionality cannot be accomplished in any known way
      using a keyboard (e.g., free hand drawing).
    • Page-specified shortcut keys and accesskeys (accesskey should
      typically be avoided) do not conflict with existing browser and
      screen reader shortcuts.
    High Cannot operate #avaialble-widgets link using
    keyboard alone. The enter key does not expand the widget for editing.
    Recommendation: Make the links expand via
    jQuery/jQuery UI.
    2.1.2 No
    Keyboard Trap

    (Level A)
    • Keyboard
      focus is never locked or trapped at one particular page element.
      The user can navigate to and from all navigable page elements
      using only a keyboard.
    Pass No recommendation.
    2.1.3
    Keyboard (No Exception)

    (Level AAA)
    • All page functionality is available using the keyboard.
    Not applicable. Testing for AA only.

    Guideline 2.2
    Enough Time: Provide users enough time to read and use
    content

    Success Criteria WebAIM’s Recommendations Severity Recommendation
    2.2.1
    Timing Adjustable

    (Level A)
    • If a page or application has a time limit, the user is given
      options to turn off, adjust, or extend that time limit. This is
      not a requirement for real-time events (e.g., an auction), where
      the time limit is absolutely required, or if the time limit is
      longer than 20 hours.
    Pass Not applicable.
    2.2.2 Pause, Stop,
    Hide

    (Level A)
    • Automatically moving, blinking, or scrolling content that
      lasts longer than 5 seconds can be paused, stopped, or hidden by
      the user. Moving, blinking, or scrolling can be used to draw
      attention to or highlight content as long as it lasts less than 5
      seconds.
    • Automatically updating content (e.g., automatically
      redirecting or refreshing a page, a news ticker, AJAX updated
      field, a notification alert, etc.) can be paused, stopped, or
      hidden by the user or the user can manually control the timing of
      the updates.
    Pass Not applicable.
    2.2.3 No
    Timing

    (Level AAA)
    • The content and functionality has no time limits or
      constraints.
    Not applicable. Testing for AA only.
    2.2.4
    Interruptions

    (Level AAA)
    • Interruptions (alerts, page updates, etc.) can be postponed
      or suppressed by the user.
    Not applicable. Testing for AA only.
    2.2.5
    Re-authenticating

    (Level AAA)
    • If an authentication session expires, the user can
      re-authenticate and continue the activity without losing any data
      from the current page.
    Not applicable. Testing for AA only.

    Guideline 2.3
    Seizures: Do not design content in a way that is known to
    cause seizures

    Success Criteria WebAIM’s Recommendations Severity Recommendation
    2.3.1 Three
    Flashes or Below Threshold

    (Level A)
    Pass No recommendation.
    2.3.2 Three
    Flashes

    (Level AAA)
    • No page content flashes more than 3 times per second.
    Not applicable. Only testing for AA.

    Guideline 2.4
    Navigable: Provide ways to help users navigate, find
    content, and determine where they are

    Success Criteria WebAIM’s Recommendations Severity Recommendation
    2.4.1
    Bypass Blocks

    (Level A)
    • A link is provided to skip navigation and
      other page elements that are repeated across web pages.
    • If a page has a proper heading structure, this may be
      considered a sufficient technique instead of a “Skip to main
      content” link. Note that navigating by headings is not yet
      supported in all browsers.
    • If a page uses frames and the frames are appropriately
      titled, this is a sufficient technique for bypassing individual
      frames.
    Pass No recommendation.
    2.4.2 Page
    Titled

    (Level A)
    • The web page has a descriptive and informative page
      title.
    Pass No recommendation.
    2.4.3
    Focus Order

    (Level A)
    • The navigation order of links, form elements, etc. is logical
      and intuitive.
    Pass No recommendation.
    2.4.4 Link
    Purpose (In Context)

    (Level A)
    • The purpose of each link (or form image button or image map
      hotspot) can be determined from the link text alone, or from the
      link text and its context (e.g., surrounding paragraph, list
      item, table cell, or table headers).
    • Links (or form image buttons) with the same text that go to
      different locations are readily distinguishable.
    Medium The arrows that expand each Customizer section do not announce in
    a screen reader. A screen reader user may have no idea they are
    expandable. Recommendation: Use a similar markup
    pattern to this accessible
    accordion
    that relies heavily on WAI-ARIA. The arrow links for
    #available-widgets do announce to screen readers, but
    only as “Link”. Essentially, these are empty links and have little
    semantic meaning. Recommendation: (Good) Put
    meaniful link text inside the a href to give it meaning.
    (Better and similar to above) Use a similar markup pattern to this
    accessible
    accordion
    that relies heavily on WAI-ARIA.
    2.4.5
    Multiple Ways

    (Level AA)
    • Multiple
      ways
      are available to find other web pages on the site – at
      least two of: a list of related pages, table of contents, site
      map, site search, or list of all available web pages.
    Pass Not applicable.
    2.4.6
    Headings and Labels

    (Level AA)
    • Page headings and labels for form and interactive controls
      are informative. Avoid duplicating heading (e.g., “More Details”)
      or label text (e.g., “First Name”) unless the structure provides
      adequate differentiation between them.
    Pass No recommendations.
    2.4.7
    Focus Visible

    (Level AA)
    • It is visually apparent which page element has the current
      keyboard focus (i.e., as you tab through the page, you can see
      where you are).
    Medium See above about #available-widgets links. User can
    see focus here, but not operate.
    2.4.8
    Location

    (Level AAA)
    • If a web page is part of a sequence of pages or within a
      complex site structure, an indication of the current page
      location is provided, for example, through breadcrumbs or
      specifying the current step in a sequence (e.g., “Step 2 of 5 –
      Shipping Address”).
    Not applicable. Only testing for AA.
    2.4.9 Link
    Purpose (Link Only)

    (Level AAA)
    • The purpose of each link (or form image button or image map
      hotspot) can be determined from the link text alone.
    • There are no links (or form image buttons) with the same text
      that go to different locations.
    Not applicable. Only testing for AA.
    2.4.10
    Section Headings

    (Level AAA)
    • Beyond providing an overall document structure, individual
      sections of content are designated using headings, where
      appropriate.
    Not applicable. Only testing for AA.

    Understandable
    Content and interface are understandable

    Guideline 3.1
    Readable: Make text content readable and
    understandable

    Success Criteria WebAIM’s Recommendations Severity Recommendation
    3.1.1 Language of
    Page

    (Level A)
    • The language of the page is identified using the HTML lang
      attribute (<html lang=”en”>, for example).
    Pass No recommendation.
    3.1.2 Language
    of Parts

    (Level AA)
    • The language of page content that is in a different language
      is identified using the lang attribute (e.g., <blockquote
      lang=”es”>).
    Not applicable. No recommendation.
    3.1.3 Unusual
    Words

    (Level AAA)
    • Words
      that may be ambiguous, unknown, or used in a very specific way
      are defined through adjacent text, a definition list, a glossary,
      or other suitable method.
    Not applicable. Only testing for AA.
    3.1.4
    Abbreviations

    (Level AAA)
    • Expansions for abbreviations are provided by expanding or
      explaining the definition the first time it is used, using the
      <abbr> element, or linking to a definition or glossary.
      NOTE: WCAG 2.0 gives no exception for regularly understood
      abbreviations (e.g., “HTML” on a web design site must always be
      expanded).
    Not applicable. Only testing for AA.
    3.1.5 Reading
    Level

    (Level AAA)
    • A more understandable alternative is provided for content
      that is more advanced than can be reasonably read by a person
      with roughly 9 years of primary education.
    Not applicable. Only testing for AA.
    3.1.6
    Pronunciation

    (Level AAA)
    • If the pronunciation of a word is vital to understanding that
      word, its pronunciation is provided immediately following the
      word or via a link or glossary.
    Not applicable. Only testing for AA.

    Guideline 3.2
    Predictable: Make Web pages appear and operate in
    predictable ways

    Success Criteria WebAIM’s Recommendations Severity Recommendation
    3.2.1
    On Focus

    (Level A)
    • When a page element receives focus, it does not result in a
      substantial change to the page, the spawning of a pop-up window,
      an additional change of keyboard focus, or any other change that
      could confuse or disorient the user.
    Pass No recommendation.

    3.2.2 On Input

    (Level A)
    • When a user inputs information or interacts with a control,
      it does not result in a substantial change to the page, the
      spawning of a pop-up window, an additional change of keyboard
      focus, or any other change that could confuse or disorient the
      user unless the user is informed of the change ahead of
      time.
    Pass No recommendation.

    3.2.3 Consistent Navigation

    (Level AA)
    • Navigation links that are repeated on web pages do not change
      order when navigating through the site.
    Pass Not applicable.

    3.2.4 Consistent Identification

    (Level AA)
    • Elements that have the same functionality across multiple web
      pages are consistently identified. For example, a search box at
      the top of the site should always be labeled the same way.
    Pass No recommendation.

    3.2.5 Change on Request

    (Level AAA)
    • Substantial changes to the page, the spawning of pop-up
      windows, uncontrolled changes of keyboard focus, or any other
      change that could confuse or disorient the user must be initiated
      by the user. Alternatively, the user is provided an option to
      disable such changes.
    Pass No recommendation.

    Guideline 3.3
    Input Assistance: Help users avoid and correct
    mistakes

    Success Criteria WebAIM’s Recommendations Severity Recommendation
    3.3.1 Error
    Identification

    (Level A)
    • Required form elements or form elements that require a
      specific format, value, or length provide this information within
      the element’s label.
    • If utilized, form
      validation
      errors are presented in an efficient, intuitive,
      and accessible manner. The error is clearly identified, quick
      access to the problematic element is provided, and user is
      allowed to easily fix the error and resubmit the form.
    Pass No recommendation.
    3.3.2 Labels or
    Instructions

    (Level A)
    • Sufficient labels, cues, and instructions for required
      interactive elements are provided via instructions, examples,
      properly positioned form labels, and/or fieldsets/legends.
    Pass No recommendation.
    3.3.3 Error
    Suggestion

    (Level AA)
    • If an input error is detected (via client-side or server-side
      validation), provide suggestions for fixing the input in a timely
      and accessible manner.
    Not applicable. No recommendation.
    3.3.4 Error
    Prevention (Legal, Financial, Data)

    (Level AA)
    • If the user can change or delete legal, financial, or test
      data, the changes/deletions can be reversed, verified, or
      confirmed.
    Not applicable. No recommendation.
    3.3.5
    Help

    (Level AAA)
    • Provide instructions and cues in context to help in form
      completion and submission.
    Not applicable. Only testing AA.
    3.3.6
    Error Prevention (All)

    (Level AAA)
    • If the user can submit information, the submission is
      reversible, verified, or confirmed.
    Not applicable. Only testing AA.

    Robust
    Content can be used reliably by a wide variety of user
    agents, including assistive technologies

    Guideline 4.1
    Compatible: Maximize compatibility with current and
    future user agents, including assistive technologies

    Success Criteria WebAIM’s Recommendations Severity Recommendation
    4.1.1
    Parsing

    (Level A)
    Pass This passes, but a few instances of div
    class="customize-control-content"
    give the error of “Element
    div not allowed as child of element label in this context.” This is
    unrelated to the Widget Customizer worth noting.
    4.1.2 Name, Role,
    Value

    (Level A)
    • Markup is used in a way that facilitates accessibility. This
      includes following the HTML/XHTML specifications and using forms,
      form labels, frame titles, etc. appropriately.
    Pass No recommendations.
     
  • Joseph Karr O'Connor 10:46 am on February 15, 2014 Permalink  

    Accessibility Team Update: February 12, 2014 

    Admin Screen Audit

    We continue to test 3.8.1 admin screens for keyboard accessibility, here are the screens left to check. If you want to pitch in and help out, Tweet to @WPAccessibility or comment here and we’ll get you the details. It sure is fun painting this fence, said Tom Sawyer.

    • Toolbar: Howdy [user] – Edit My Profile, Log Out
    • Dashboard: Home, Updates
    • Appearance: Themes, Menus, Header, Editor
    • Plugins: Installed Plugins, Add New, Editor
    • Settings: General, Writing, Reading, Discussion, Media, Permalinks

    Theme Accessibility Review

    @joedolson reports that there are currently four themes going through the optional theme accessibility review process. @accessiblejoe reports that a Cities theme, a church/congregation theme, Nashville, by Anna Belle Leiserson @faithandweb is heading toward completion. We noted that Accessible Zen by @davidakennedy is already in the directory, and that his Alexandria team is starting work on an accessible government theme. The Los Angeles accessible theme team is working on an accessible business/ecommerce theme. We’re seeing some good progress on the review process and production of themes.

    The CSUN Conference

    If you are going to the International Technology and Persons With Disabilities Conference in March we invite you to join accessibility team members when we present Roadmap For Making WordPress Accessible and don’t miss the @WPAccessibility Tweetup in the hour before Tommy Edison, @BlindFilmMaker, delivers the keynote address in the evening on Tuesday March 18.

     
  • Joe Dolson 11:14 pm on February 8, 2014 Permalink
    Tags: ,   

    Want to participate in reviewing WordPress themes for the accessibility-ready tag? There’s a trac keyword for that! Themes awaiting an accessibility-ready review.

     
  • Graham Armfield 10:54 am on February 4, 2014 Permalink
    Tags: ah-o2, help,   

    AH-O2 Accessibility Testing 

    I’ve been doing some accessibility testing with version 0.4.0 of the AH-O2 plugin which adds tooltips to some links and input fields within the admin area where it’s felt appropriate.

    I’ve commented on my findings directly into the Docs blog. You can see my comments here: https://make.wordpress.org/docs/2014/02/04/ah-o-update-3-february-2014/

     
  • Joseph Karr O'Connor 11:24 am on February 1, 2014 Permalink  

    Accessibility Team Update: January 29, 2014 

    Testing Continues

    Discussion about testing continued this week with a question about generating tickets to address test findings. We will not pursue creating tickets until we have completed testing all admin screens. Reference was made to outstanding accessibility tickets and how they can be viewed. We will be looking for patterns in addition to specific issues. An example of this is an early finding that effective visual focus indication for keyboard-only users is inconsistent. This is a general pattern, not limited to any one screen.

    Team Leads

    The accessibility team discussed team leads and the consensus of the group is that Joseph Karr O’Connor @accessiblejoe will remain as the team rep and the very capable Amanda Rush @arush will step up as the alternate team rep.

     
c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel
Skip to toolbar