← FAQs and Troubleshooting

Accessibility

Table of Contents

All sites need to be accessible for all users and also meet compliance.

Learning About ADA

DQM Specific Resources

Things a Builder Should Do for ADA

  • Modals (and other hidden items that toggle to display) should have aria-hidden by default, and toggle upon display
  • Labels should include the for=“” attribute that matches the id=“” of the corresponding input
  • Add roles
    • navigation role=“navigation” ex role# “navigation”, role# “main”, etc.
    • main div role=“main”
  • Add alt tags to images
  • Checklist

Testing ADA

SortSite Scan Options

Use the following settings when scanning a site with SortSite.

When sending an RTF or document file of the scan results back to the Project Coordinator for a site, please delete all sections except for the “Accessibility” section from the file. This helps prevent confusion on the client’s part when the scan is provided to them.

Checkpoints

  • Errors
    • Check Errors and Broken Links and Don't Check page weight
  • Accessibility
    • Check all items
    • Set WCAG to WCAG 2.1 AA
    • At Compatibility: Check screen reader report
    • Reading Age: Advanced
  • Compatibility
    • Check Compatibility box and all under it except for Internet Explorer
  • Search
    • Check Search box, but ONLY check Robots.txt Guidelines box
    • Leave keywords box empty
  • Standards
    • Check Standards, Validate HTML 5, and Check for deprecated features boxes
  • Usability
    • Check Usability box

Blocks

  • Blocked Links box, add this: https://banno.com/* https://uat.banno.com/*
  • Uncheck Obey robots.txt

If you need to avoid scanning the Assets because of a huge PDF/file issue, add this: https://[domain]/assets/files/*

  • JavaScript DOM Changes: All
  • Link Following
    • Only select Check all links to external sites
  • Report - These can vary between people or projects.
    • Maximum pages shown for each issue: 200
      If you hit this limit, you know you have a site-wide issue, and you’ll have to run the report again after you’ve cleared it site-wide issue to see if anything else is hitting the checkpoint.
    • Maximum line numbers shown for each issue: 100
      The only thing that usually gets close to this limit is contrast issues.

Advanced

  • Timeouts
    • Server Load: 0.1 secs delay per page
    • Page Timeout: 00:20 seconds
  • Exploration
    • Explore entire site
  • User Agent
    • Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15

Web Solutions Stances on Specific Items

Bootstrap 4 “Focus” State

Question

Are the default focus states from Bootstrap 4 sufficient for ADA compliance despite Sortsite’s complaints?

Answer

Yes. However, DQM will flag it as a possible issue. We will be working with DQM to see if they can add the box shadow criteria to this automated check.

Relevant Information for Teams

Project Coordinators

Be able to explain these as false positives to the client upon sending Sortsite reports to clients.

Designers

N/A

Developers

Outline: 0; or Outline: none; will appear on reports as being a problem. Do not spend time “clearing” the report. This is not an issue for ADA, but rather a bug in Sortsite and how it is evaluating. The rule is that you must be able to visibly determine what has focus, and there are ways to do that other than with outline.
Note: The color of the outline/box-shadow needs to me a minimum 3:1 contrast ratio with the background color, so the browser’s default color may not be sufficient. Just FYI.

Landmarks

Question

Does everything need to be in a landmark?

Answer

Yes.

Relevant Information for Teams

Project Coordinators

When placing the <noscript><img alt=”“ …/></noscript> piece of the FB Pixel code in the Page Properties footer section, this may show up as “outside” of a landmark in some automated scanners (like SiteImprove). This is a moot issue, because users/screen readers aren’t meant to see this code anyway. It’s meant for Facebook to pick it up, not anyone else. If the client can’t accept that and NEEDS this fixed, the entire <noscript>…</noscript> must be put inside a <div role=“region” aria-label=“Scripts”> </div>

Designers

N/A

Developers

Only one header, footer, and role=“main” can be used on a page. The header and footer CANNOT be inside role=“main”. Articles and asides and modals (role=“dialog”) can be inside role=“main”. If content needs to be outside of the header, main, or footer for whatever reason (i.e. compliance, alert, sliders, modals), use role=“region” or

(with proper aria-label identification) to surround the content that will fall outside of other landmarks.

Tab Index

Question

What tabindex is appropriate?

Answer

Some items naturally have a tab order: links, anchors, buttons, inputs. However, divs and spans do not naturally receive a position in tab order. By default, items that naturally have a tab order, have a tabindex=“0”.
Tabindex=”-1“ will allow something to receive screen focus without adding it into the tab order. For instance, <div role=“main”> would not naturally be able to be skipped to, since it is a

which doesn’t naturally have a tab order. However, it is common to want to skip down to the “main” part of the website. Assigning a tabindex=”-1“ will make skipping to this landmark possible. The next focused item will be the next naturally tab ordered element (that inherits or has an explicit tabindex=“0”) within the code of the main landmark.

Relevant Information for Teams

Project Coordinators

N/A

Designers

N/A

Developers

0 and -1 are the only two valid ADA tabindexes that should be used. tabindex=“0” means you can use the tab button to select it at any time. Buttons, links, etc. all have this built in automatically, so they should not need a tabindex=“0”. Things like divs do not have tab-ability built in by default, so you can put tabindex=“0” on it to allow tab-ability. tabindex=”-1“ is used when you need to have something be focusable that isn’t normally, but you don’t necessarily need to be able to click on it. For example, when a modal is focused, you bring the focus down to the modal with tabindex=”-1“, to allow it to be accessible, even though you don’t need to actually click on the modal itself. Then when you press tab, you can work through the tab-able items inside of the modal. (When opening a modal like this, make sure upon closing it that the screen focus returns to the element that opened it.)

Use of Parallax and Navigating Up and Down the Site

Question

Does the use of Parallax cause ADA issues?

Answer

It can. You will want to make sure it does interfer with tabbing up and down through the site.

Relevant Information for Teams

Project Coordinators

When reviewing a site, if you lose sight of your cursor at any point, when tabbing, the developer will need to fix it.

Designers

N/A

Developers

Use tabbing as a check to make sure everything is working properly. As long as you can tab up and down and never lose site of the cursor, all is good.

Actionable Icons (i.e. Search Areas)

Question

Is an icon (such as a magnifying glass) acceptable as a collapse/modal toggle or submit button?

Answer

This only comes up on third-party and manual scans. However, we thought that adding a title attribute would fall under “do the right thing.” Even though it won’t fix the manual issue that comes up, it would be closer to being accessible for users. Chris tested it and it took less than 5 seconds to do. So we will start doing this on all new builds.

Relevant Information for Teams

Project Coordinators

N/A

Designers

N/A

Developers

Start adding this to all your new builds.

Alert Bar Placement

Question

Does the alert need to span the entire width of the design?

Answer

No. There are no visual requirements for alert placement or width/spanning.

Relevant Information for Teams

Project Coordinators

N/A

Designers

Carry on as usual

Developers

The order of the code needs match the visual order of the design. For example, if the alert is not present at the top left of the hero, the code for the alert needs to be placed after the hero code.

Hero Control Dots

Question

Must Hero Dots be placed in a specific area in order for them to be compliant?

Answer

Dots can technically be designed to be placed anywhere within the hero.

Relevant Information for Teams

Project Coordinators

N/A

Designers

Dots are naturally coded to come after the slider code, and therefore, designs should typically reflect placement of dots at the bottom of the hero. However, dots CAN be placed anywhere, so designers just must be aware that placing dots anywhere other than the bottom will result in more setup and coding for the developer in regards things that must be done for ADA. Dots can be any shape/size, but arrows alone are not acceptable.

Developers

Dots code needs to match the order that they visually appear. (I.e. if dots appear at the top of the hero, the code for the dots needs to be appended to the beginning/before the hero, rather than the natural state of after the hero slides)

Hero Pause/Play Buttons

Question

Do Hero Sliders require a pause/play buttons in order to be compliant?

Answer

If the slider autoplays, then technically, yes, it does need the play and pause buttons to be compliant.

Relevant Information for Teams

Project Coordinators

If a client requests an autoplay slider, let the designer know so they can add this into their design files.

Designers

Talk to the client to determine if they will want autoplay on or off. If they choose on, include this/these buttons in your design files.

Developers

If you do not see a pause/play button in the design files, turn off automatic start on slider by default. If you do see a pause/play button in the design files, you will need to build it out and turn autoplay to on. Use this to help get it implemented: https://snippets.cacher.io/snippet/28c39bcb20899b9c1b5b

Hero Dots

Question

Do Hero Sliders require dots?

Answer

Required, no. Suggested, yes.

Relevant Information for Teams

Project Coordinators

N/A

Designers

The preferred solution is to include dots in design whenever possible.

Developers

If the design does not include dots, we should still code the slider to have dots and set the opacity to 0, and upon focus make the opacity 1. (The same way that the compliance.mustache links are show-only-on-focus.)

“Hidden” Descriptive Paragraphs on How to Operate Slider

Question

Is a descriptive paragraph (about how to operate a slider) required to be ADA compliant?

Answer

This is not an issue that is being flagged by Sortsite or DQM and is only coming up on manual, third-party scans. However, there is minimal effort required on our end to put this on every site, so we will start doing that.

Relevant Information for Teams

Project Coordinators

N/A

Designers

N/A

Developers

It will be a .sr-only element that will come before the carousel. Optionally, a shows-only-on-focus skip link could come after this description in order to jump past the slider. The description should include how many slides are in the slider, the methods that will operate the slider, and whether the information/links in the slider can be found elsewhere on the page or within the site.

Overuse of Uppercase/All Caps

Question

Is it a bad practice to have multiple words be uppercase?

Answer

Generally speaking, you would not want to have more than 3 consective words be uppercase. Howevever, there may be legitimate times that this is done. In those cases, it is best to have a style created for the text.

Relevant Information for Teams

Project Coordinators

Advise clients to keep the use of uppercase text to 3 or less consective words. If that is not possible, work with the developer to create a style for the client to use.

Designers

Advise clients to keep the use of uppercase text to 3 or less consective words. If that is not possible, work with the developer to create a style for the client to use.

Developers

Use a CSS style for anything that will need to be uppercase and have more than 3 words.

H1 Placement

Question

Can any content come before an H1?

Answer

Not inside of the role=“main” section. An H1 must be the first thing inside of a role=“main” section.

Relevant Information for Teams

Project Coordinators

N/A

Designers

Try to keep H1s as the first thing on the page, if possible–but not required, as dev can work around it.

Developers

If content, such as a banner with text, visually comes before the H1 in the design, the hero will need to be outside of the role=“main” and inside a general landmark (a section/role=“region with an aria-label) so that the H1 CAN be the first thing in the role=“main”. (This is not a great solution; as a side effect of this hero placement, the hero will not be able to contain ANY headings since they would be out of order compared to the page’s H1. Build hero text with styles in this situation.)

Classes Using “heading”

Question

DQM used to flag any class name that had the word heading in it. But now it does not. Did something change?

Answer

Yes, even though there is a legitimate ADA reason that DQM was looking for this, we asked DQM to hide this issue so we don’t have to deal with it in the future. (DQM was finding the accordion titles, which were always false positives.) It’ll only ever be a manual review issue otherwise, dealt with on a case-by-case basis.

Relevant Information for Teams

Project Coordinators

N/A

Designers

N/A

Developers

N/A

Question

Is a visual indicator required for menus and dropdowns with flyouts?

Answer

This only comes up on third-party and manual scans. As of now, we will not be adjusting our standards to address these questions as they do not show up on Sortsite or DQM.

Relevant Information for Teams

Project Coordinators

N/A

Designers

If this is requested as a part of a third party ADA case, a visual indicator will need to be added through the design.

Developers

If this is mentioned as unacceptable to a third party, we will address it with their preferred solution as a billable item.

Question

Do all links need to have underlines?

Answer

It depends. When a link is in a

Relevant Information for Teams

Project Coordinators

Advise clients on making sure links are handled properly given the above information.

Designers

Links in subad areas will need some additional design (either look like a button or the addition of a carrot). If there is no way to add anything visually, talk to the developer about making it be coded in a