Coder Social home page Coder Social logo

centers-of-excellence's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

centers-of-excellence's Issues

Accessibillity: Duplicate banner landmarks (USWDS)

The Centers of Excellence website contains multiple <header> elements: one for the "This is a government website" text, and a second containing the logo and primary navigation. This may make it difficult for users of assistive technology to navigate the site.

Note: This error was captured by automated testing, using the aXe browser extension. See also "Page must not have more than one banner landmark".

Relevant Guidance: WAI ARIA 1.1: Banner

the author SHOULD mark no more than one element with the banner role.

Remediation Guidance:

Consolidate to at most one banner role element.

Accessibility: Image captions redundant with alternative text

The affected pages include captioned images which use the same text for the caption and for the images alternative text. Assistive technologies would announce each of these, which may be confusing because it is identical repeated information.

Affected pages:

Steps to Reproduce:

  1. Navigate to https://coe.gsa.gov/2018/08/03/cx-update-4.html
  2. Activate a screen reader (Cmd+F5 on macOS for VoiceOver)
  3. Navigate content to the first image
    • VO-RightArrow (Ctrl+Option+RightArrow) on macOS
  4. Continue navigating content

Expected result: No repeated information
Actual result: Repeated text "Hollis, Oklahoma"

Relevant guidance:

https://www.scottohara.me/blog/2019/01/21/how-do-you-figure.html

The figcaption should not repeat the content of the figure, or other content within the primary document.

an alt is meant to convey the important information an image represents. A figcaption should provide context to relate the figure (image) back to the primary document, or to call out a particular piece of information to pay attention to. If a figcaption takes the place of an alt, then this creates duplicate information for sighted users.

Remediation Guidance:

One of the following could be considered:

  • Provide a more descriptive alternative text to describe the image, unique from the caption
  • Remove the caption
  • Update the caption to relate back to the original document in a way which is distinct from the alternative text
  • Consider the image as "sufficiently described by the adjacent text" and assign empty alt (decorative). This may not be advisable, since assistive technology may skip the image and announce only the caption text, which could be confusing.

Per HTML 5.2 Embedded Content, it may also be possible that if constructed as a <figcaption>, assistive devices may also be able to infer the caption text:

If the src attribute is set and the alt attribute is not [...] the user agent should [...] provide caption information for the image, derived as follows: If the image is a descendant of a figure element that has a child figcaption element, and, ignoring the figcaption element and its descendants, the figure element has no Text node descendants other than inter-element white space, and no embedded content descendant other than the img element, then the contents of the first such figcaption element are the caption information

Warning: It is worth doing more testing for how this behaves with real assistive technology.

Accessibility: Empty anchor tags

Some pages include anchor (<a>) tags for which there is no content. This can cause confusion for a person using a screen reader device, or for keyboard usage, since the element can receive focus, but a name associated with the link cannot be determined.

Steps to Reproduce:

  1. Navigate to https://coe.gsa.gov/2018/05/21/da-update-1.html
  2. Tab through page content until reaching the "Connect" navigation link in the header
  3. Tab once more

Expected: The next focused element should be visible and named.
Actual: The focused element is a non-visible, unnamed link tag.

Affected pages:

...many others where anchor tags are constructed without an appropriate closing tag. In some cases, the closing tag appears that it may be added automatically, possibly by the static site generator tool in converting the markdown files.

WCAG Success Criteria (A): 4.1.2: Name, Role, Value

Relevant technique: HTML H91: Using HTML form controls and links

Remediation Guidance:

Content or an equivalent name should be provided for the link, and it should be visibly present in the page. It should be removed if it is not intended to be present, or it should be made to wrap content which it is intended to link.

From the code, it appears it may be intended that the link should be wrapping the image. Note that based on usage, this could also be related to #358. Currently, there is no closing tag for the link.

<img src="{{site.baseurl}}/images/data-analytics/tell-sonny.png" alt="Tell Sonny National Dashboard image" class="img-responsive">
<a href="{{site.baseurl}}/images/data-analytics/tell-sonny.png" target="_blank" rel="noopener noreferrer">

Accessibility: Home page call-to-action "Learn More" could be improved

The link text "Learn More" in the initial call-to-action on the Centers of Excellence home page could be improved, because it only makes sense in context of the containing hero callout, which is notably also not part of a single continuous paragraph or sentence.

Note that this may not be a violation of WCAG Level AA (Link Purpose (In Context)), but would be a failure of WCAG Level AAA (Link Purpose (Link Only)). For the purpose of Section 508 compliance, the latter does not strictly apply (refer to Revised 508 Standards, E205 Electronic Content). However, as noted in the failure linked below, the fact that the preceding text "Accelerating modernization across government" is not part of the same paragraph may make it difficult for the user to easily discover to what the link will relate.

WCAG Success Criteria (AAA): 2.4.9: Link Purpose (Link Only)

Relevant Guidance:

https://webaim.org/techniques/hypertext/link_text

Links are more useful when they make sense out of context. Authors should avoid non-informative link phrases such as: [...] read more

https://www.nngroup.com/articles/learn-more-links/

the lack of descriptive keywords is a serious problem for accessibility. People who are visually impaired and using a screen reader or magnifier aren’t able to quickly glance back to the preceding-paragraph text to see what the Learn More link may refer to.

Relevant failure (AA): F63: Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link

If the context for the link is not provided in one of the following ways: [...] in the same sentence, paragraph, list item, or table cell as the link [...] via a suitable ARIA property such as aria-label or aria-labelledby [...] then the user will not be able to find out where the link is going with any ease.

Relevant failure (AAA): F84: Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text.

This failure describes a common condition where links such as "click here" or "more" are used as anchor elements where you need to have the surrounding text to understand their purpose and where there isn't any mechanism to make the destination clear by itself, such as a button to expand the link text.

Remediation Guidance:

The link text (or equivalent ARIA labelling) should describe where the link will navigate.

Accessibility: Heading levels increase by more than one

The affected pages are organized with heading levels jumping from h1 to h3, skipping h2.

Note: This error was captured by automated testing, using the aXe browser extension. See also "Heading levels should only increase by one".

Affected pages:

Relevant Resource: WAI Web Accessibility Tutorials: Headings

Skipping heading ranks can be confusing and should be avoided where possible: Make sure that a <h2> is not followed directly by an <h4>, for example. It is ok to skip ranks when closing subsections, for instance, a <h2> beginning a new section, can follow an <h4> as it closes the previous section.

Remediation Guidance:

If appropriate, use h2 as the heading level immediately following h1.

Accessibility: Invalid list markup on Press page

The "Press Mentions" page includes invalid list markup. This may affect the ability of assistive technology to interpret the list contents.

Note: This error was captured by automated testing, using the aXe browser extension. See also "<ul> and <ol> must only directly contain <li>, <script> or <template> elements".

Steps to Reproduce:

  1. Navigate to https://coe.gsa.gov/press/press.html
  2. Scroll to May 2019

Expected result: <ul> and <ol> only directly contain <li>, <script> or <template> elements.
Actual result: The text "ExecutiveBiz" under the second item is not part of the list item. The markup contains two separate lists for this section, when it is likely intended that there only be a single list.

Relevant Technique: HTML H48: Using ol, ul and dl for lists or groups of links

Relevant Code:

<h2>May 2019</h2>
<ul>
<li><a href="https://www.nextgov.com/it-modernization/2019/05/inside-usdas-farmer-first-approach-digital-transformation/157385/"> Inside USDA's Farmer-First Approach to Digital Transformation</a> (Nextgov)</li>
<li><a href="https://www.meritalk.com/articles/gsa-expects-to-complete-usda-coe-effort-next-year/"> GSA Aims to Complete USDA CoE Effort Next Year</a> (MeriTalk)</li>
</a> (ExecutiveBiz)</li>
</ul>
<ul>
<li><a href="https://blog.executivebiz.com/2019/05/opm-eyes-industry-partner-for-it-modernization-program/">OPM Eyes Industry Partner for IT Modernization Program</a> (ExecutiveBiz)</li>

Accessibility: Duplicate `main` element on "Affordable Housing" page

The "HUD Affordable Housing for Seniors Journey" page contains multiple wrapping <main> elements which use the same id attribute value. A page should ideally have at most a single main element, in order to allow a person to easily navigate using landmarks. In this case, it also appears that the wrapping main elements may not be intended, and instead an error in code.

Note: This error was captured by automated testing, using the aXe browser extension. See also "Ensures the document has at most one main landmark".

Relevant technique: ARIA11: Using ARIA landmarks to identify regions of a page

main: Main content in a document. In almost all cases a page will have only one role="main".

WCAG Success Technique (A): 4.1.1: Parsing

and any IDs are unique

Remediation Guidance:

Since this appears to be an error in code, the recommended solution is to remove the duplicate wrapping element.

Team Updates May 2023

Add New:

  • Eboni Freeman
  • Soni Meckem
  • Kwo Okoli
  • Nick Rampersad
    Update:
  • Bridget Fields - Update Bio
  • Jenny Linkedin
  • Olivia Name change

Accessibility: YouTube embeds lack title

YouTube embed <iframe> elements lack a title, which is used by users to determine which frame to enter and explore in detail.

Note: This error was captured by automated testing, using the aXe browser extension. See also "Frames must have title attribute".

Affected pages:

WCAG Success Criteria (AA): 2.4.1: Bypass Blocks

Relevant resources:

https://dequeuniversity.com/rules/axe/3.3/frame-title

Screen reader users rely on a frame title to describe the contents of the frame. Navigating through frame and iframe elements quickly becomes difficult and confusing for users of this technology if the markup does not contain a title attribute.

https://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140408/H64

The objective of this technique is to demonstrate the use of the title attribute of the frame or iframe element to describe the contents of each frame. This provides a label for the frame so users can determine which frame to enter and explore in detail.

https://developer.paciellogroup.com/blog/2010/11/using-the-html-title-attribute/

Examples of title attribute use that are USEFUL: [...] Labeling frame or iframe elements:

https://adrianroselli.com/2017/08/inaccessible-youtube-embeds.html

Most of us in the accessibility biz (do we call it that? I think we call it that…) already know that YouTube’s default embed code is problematic. Specifically, the fact that the <iframe> does not have a title attribute is an automatic WCAG 2.0 AA failure.

https://www.davidmacd.com/blog/is-title-attribute-on-iframe-required-by-wcag.html

Remediation Guidance:

These YouTube embed codes are provided by YouTube, but are manually pasted into the contents of the pages. It could be possible to manually add the title attribute.

Update jQuery

We're stuck on a reeeeally old version of jQuery, and we should find out a) where we're using it, b) if we really need it. If b) is true, let's update. If not, let's rip it out.

Accessibility: Pages should have titles to describe purpose

Every page on the Centers of Excellence website currently uses the same title "GSA - IT Modernization Centers of Excellence". Ideally, the page should be titled as describing the content or topic of the individual page. This allows a user to identify the purpose of the web page they are visiting.

Steps to Reproduce:

  1. Navigate to https://coe.gsa.gov/about/team.html
  2. Observe page title

Expected: Page title should include subject of the page ("Our Team")
Actual: Page title is assigned constant value "GSA - IT Modernization Centers of Excellence"

WCAG Success Criteria (A): 2.4.2: Page Titled

Relevant technique: General G88: Providing descriptive titles for Web pages

Descriptive titles help users find content, orient themselves within it, and navigate through it. A descriptive title allows a user to easily identify what Web page they are using and to tell when the Web page has changed. The title can be used to identify the Web page without requiring users to read or interpret page content. Users can more quickly identify the content they need when accurate, descriptive titles appear in site maps or lists of search results. When descriptive titles are used within link text, they help users navigate more precisely to the content they are interested in.

The title of each Web page should: [...] Identify the subject of the Web page

Relevant code:

<title>GSA - IT Modernization Centers of Excellence</title>

Thumbnail for coe.gsa.gov is broken

When posting a link to the COE website in LinkedIn, the thumbnail preview that should show up does not with a broken image showing up in its place.

Accessibility: "Our Team" button tooltips accessibility

The tooltips shown when focusing or hovering images on the "Our Team" page suffer from a few accessibility issues:

  • Tooltip content shown on focus should be dismissible.
  • Tooltip content shown on focus should persist to allow the user to hover its content.
  • Tooltip content should be announced to assistive technology.

WCAG Success Criteria (AA): 1.4.13: Content on Hover or Focus

ensure that authors who cause additional content to appear and disappear [in coordination with keyboard focus or pointer hover] must design the interaction in such a way that users can: [...] dismiss it without disrupting their page experience.

Relevant technique: Client Side Script SCR39: Making content on focus or hover hoverable, dismissible, and persistent

Additional content that is displayed when a user moves the pointer over a trigger or moves the keyboard focus to the trigger (for example, a pop-up) must remain visible to allow users time to read and interact with the content and must allow the user to move the pointer over the additional content.

Relevant failure: F95: Failure of Success Criterion 1.4.13 due to content shown on hover not being hoverable

Additionally, I was not successful in having the tooltip text be announced using a combination of macOS Mojave (10.14.6), Safari (13.1.1), and VoiceOver. The JavaScript library in use (Tippy.js) does appear to support announcements via screen reader, and the demos work correctly in my testing. It is unclear to me if this is an issue of (a) using an out-of date version of the library, (b) the fact that the tooltip content is lengthy, or (c) the tooltip content contains complex markup.

Remediation guidance:

It may be worth reconsidering whether a tooltip is the ideal method to communicate this information, or if instead it could be displayed statically, optionally in combination with some activating event (clicking upon the image).

Press Add

Accessibillity: Duplicate unlabeled navigation landmarks

All pages of the Centers of Excellence website contain at least two <nav> elements: one in the header, and one in the footer. Users who navigate using landmarks may have difficulty distinguishing the purpose of the two elements.

Note: This error was captured by automated testing, using the aXe browser extension. See also "Landmarks must have a unique role or role/label/title (i.e. accessible name) combination".

Screenshot:

duplicate navigation landmark screenshot

Relevant Guidance: WAI-ARIA Authoring Practices: General Principles of Landmark Design

If a specific landmark role is used more than once on a page, provide each instance of that landmark with a unique label. There is one rare circumstance where providing the same label to multiple instances of a landmark can be beneficial: the content and purpose of each instance is identical.

In this instance, the two navigation elements contain differing content: One includes links to navigate the current site, whereas the footer navigation links to related external sites.

Remediation Guidance:

Consider assigning a unique label to the landmark elements.

Affordable Housing and Farm Loans "Show More" links do not expand sections

This bug was discovered in the course of an accessibility review. It appears that the "Show More" links on these two pages are intended to expand to show more information. The content does not expand, regardless of mode of interaction (click, keyboard, etc).

Steps to Reproduce:

  1. Navigate to one of the above links
  2. Scroll to the section with collapsed content and "Show More" buttons
  3. Click "Show More"

Expected behavior: The additional truncated content is shown.
Actual behavior: Nothing happens.

Remediation Guidance:

There is a JavaScript error on the page. It is possible that a script (jQuery) is not being loaded correctly.

farm-loans-scripts.js:2 Uncaught ReferenceError: $ is not defined
    at farm-loans-scripts.js:2

Menu links don't collapse on IE

Here is a screen shot of the menus that are all open when coming to the site using IE (I don't know what version of IE I am passing this along)

image

Accessibility: Insufficient contrast on focused navigation links (mobile)

For mobile users, or users who zoom the page to the point that mobile styles activate, focused navigation links which are contained within an expanded accordion parent are styled with an insufficient contrast of 2.1:1, failing to meet WCAG Level AA minimum of 4.5:1.

https://webaim.org/resources/contrastchecker/?fcolor=212121&bcolor=205493

Screenshots:

mobile menu focus contrast footer

mobile menu focus contrast

Steps to Reproduce:

  1. Navigate to https://coe.gsa.gov/
  2. Shrink the page or zoom to the point that mobile styles activate
  3. Tab to the "Menu" button
  4. Click the "Menu" button by pressing Space
  5. Tab to "About Us"
  6. Expand the collapsed menu items by pressing Space
  7. Tab to the next menu item

Expected result: Menu items are shown with sufficient contrast.
Actual result: There is insufficient contrast of the text on the background.

WCAG Success Criteria (AA): 1.4.3: Contrast (Minimum)

Relevant Technique: General G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text

Remediation Guidance:

It's assumed this navigation styling is largely inherited from use of U.S. Web Design System. USWDS (both v1 and v2) do not suffer from this problem, so it is possible it is an issue of:

  • An outdated version of USWDS is being used.
  • Improper usage of USWDS is preventing the styling from taking effect.

Accessibility: Linked images using CSS class "img-responsive" do not have focus indicator

For linked images where the image is assigned CSS class img-responsive, there is no visible indication when the link is focused.

Steps to Reproduce:

  1. Navigate to https://coe.gsa.gov/about/approach-team-structure.html
  2. Tab to navigate to the linked image under "How We Work"

Expected: Focus should be visible.
Actual: Focus is not visible.

WCAG Success Criteria (AA): 2.4.7: Focus Visible

Relevant technique: CSS C15: Using CSS to change the presentation of a user interface component when it receives focus

Relevant failure: F78: Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator

Remediation guidance:

Focus styling appears to be absent due to assignment of display: block on images of class name img-responsive.

Accessibility: Use semantic elements for emphasis

Many pages use <i> (italic) and <b> (bold) HTML elements to represent emphasized text. In cases where emphasis is intended, the semantic elements <em> and <strong> should be used instead.

Examples:

  • https://coe.gsa.gov/2019/04/10/cx-update-8.html
    • Once the design research is gathered and organized, we use CX methods to identify themes and patterns—a process we call “synthesis.” We then generate ideas for solutions— “ideation”—not in unstructured brainstorming, but using a proven framework to recombine ideas into often-unexpected ways. From there, CX practitioners create solution prototypes that we can rapidly test, evaluate, and refine.

  • https://coe.gsa.gov/coe/affordable-housing/
    • Illustrated the experience of a subset of HUD’s customers, as representative of experiences common to all citizens.

    • Facilitated HUD’s identification of opportunities and potential solutions for the new Office of Customer Experience’s consideration.

    • Demonstrated a human-centered way of working at HUD that improves customer experience and operational efficiency.

WCAG Success Criteria (A): 1.3.1: Info and Relationships

Relevant success criteria: HTML H49: Using semantic markup to mark emphasized or special text

This example shows how to use the em and strong elements to emphasize text. The em and strong elements were designed to indicate structural emphasis that may be rendered in a variety of ways (font style changes, speech inflection changes, etc.).

Practical Implications:

Many screen readers may in-fact treat <b> as <strong>, or not make stylistic or voice changes in response to the difference between the two elements, resulting in practically no effective difference.

https://accessibility.psu.edu/boldfacehtml/

Mainstream screen readers currently treat B/I tags identically to STRONG/EM tags. That is, they are ignored unless a user specifies that they be indicated. Some users report that announcing changes can be distracting.

In theory, screen readers could pronounce STRONG and EM in a different voice or style. However this rarely happens in practice (the same is true for B and I tags).

Remediation Guidance:

Prefer to use semantic HTML tags where emphasis is intended. In Markdown files, the ** syntax for bold will often be converted by Markdown processors defaulting to the <strong> tag.

Accessibility: Mobile navigation does not trap focus (USWDS)

For mobile users, or users who zoom the page to the point that mobile styles activate, the "Menu" button will present a dialog window for navigation and transition focus. However, focus is not constrained to the dialog and can escape to the rest of the page. This is in combination with a few other related issues noted below, all of which may not be specific to the Centers of Excellence website, but instead are inherited from its use of U.S. Web Design System.

Related issues:

Steps to Reproduce:

  1. Navigate to https://coe.gsa.gov/
  2. Shrink the page or zoom to the point that mobile styles activate
  3. Tab to the "Menu" button
  4. Click the "Menu" button by pressing Space
  5. Tab through the navigation items, and continue tabbing

Expected behavior: Tabbing is constrained to the navigation dialog.
Actual behavior: Tabbing escapes the dialog and continues to navigate the page.

Relevant Guidance:

https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html

Tab [...] When focus is on the last focusable element in the dialog, moves focus to the first focusable element in the dialog.

Remediation Guidance:

USWDS mobile navigation does include focus trapping behavior (uswds/uswds#2347). It could be that this is not taking place because one of either:

  • An outdated version of USWDS is being used.
  • Improper usage of USWDS is preventing the behavior from taking effect.

Security Policy violation SECURITY.md

This issue was automatically created by Allstar.

Security Policy Violation
Security policy not enabled.
A SECURITY.md file can give users information about what constitutes a vulnerability and how to report one securely so that information about a bug is not publicly visible. Examples of secure reporting methods include using an issue tracker with private issue support, or encrypted email with a published key.

To fix this, add a SECURITY.md file that explains how to handle vulnerabilities found in your repository. Go to https://github.com/GSA/centers-of-excellence/security/policy to enable.

For more information, see https://docs.github.com/en/code-security/getting-started/adding-a-security-policy-to-your-repository.


This issue will auto resolve when the policy is in compliance.

Issue created by Allstar. See https://github.com/ossf/allstar/ for more information. For questions specific to the repository, please contact the owner or maintainer.

Accessibility: Redundant text "link to" in alternative link text for mobile skip links

On affected pages at smaller (or zoomed) viewports, a link is shown which allows the user to skip to the overview section. The computed name of this link is "link to Overview section". The text "link to" is redundant, since assistive technology will likely announce it as a link, leading to duplicate announcement (see screenshot).

Affected pages:

Screenshot:

Screen reader announcing overview link

Relevant Resource: https://webaim.org/techniques/hypertext/

Links do not need to include "link" in the link text, because all users already know that the link is a link. This is more of an issue with graphics used as links. The alt text for a graphic does not need to say "link" or "link to." Otherwise, JAWS users will hear "link graphic link to Products," which is redundant.

Remediation Guidance:

Since these arrow links only adjust the viewport to the section immediately following, it is not clear they provide significant value. It may be worth considering to remove them.

Alternatively, the text could be revised to more clearly indicate that these behave as "skip links" (related to Success Criteria 2.4.1: Bypass Blocks). For example, "Skip to Overview Section".

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.