"description":"Terms like “click here” and “read more” do not provide any context. Some people navigate using a list of all buttons or links on a page or view. When using this mode, the terms indicate what will happen if navigated to or activated.",
"wcagLevel":"A"
},
{
"title":"Use left-aligned text for left-to-right (<abbr>LTR</abbr>) languages, and right-aligned text for right-to-left (<abbr>RTL</abbr>) languages.",
"checkboxId":"use-ltr-rtl",
...
...
@@ -63,30 +55,13 @@
"description":"Some people need to increase the size of text to a point where they can read it. Do not stop them from doing this, even for web apps with a native app-like experience. Even native apps should respect Operating System settings for resizing text.",
"wcagLevel":"AA"
},
{
"title":"Use landmark elements to indicate important content regions.",
"description":"<a href='https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html'>Landmark regions</a> help communicate the layout and important areas of a page or view, and can allow quick access to these regions. For example, use the <code>nav</code> element to wrap a site's navigation, and the <code>main</code> element to contain the primary content of a page.",
"description":"Remove <code>tabindex</code> attribute values that aren't either <code>0</code> or <code>-1</code>. Elements that are inherently focusable, such as links or <code>button</code> elements, do not require a <code>tabindex</code>. Elements that are not inherently focusable should not have a <code>tabindex</code> applied to them outside of very specific use cases.",
"wcagLevel":"A"
},
{
"title":"Avoid using the <code>autofocus</code> attribute.",
"description":" People who are blind or who have low vision may be disoriented when focus is moved without their permission. Additionally, <code>autofocus</code> can be problematic for people with motor control disabilities, as it may create extra work for them to navigate out from the autofocused area and to other locations on the page/view.",
"description":"If you cannot, let the person using your site know the timeout exists ahead of time, and provide significant notice before the timer runs out.",
"description":"<a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title#Accessibility_concerns'>The <code>title</code> attribute has numerous issues</a>, and should not be used if the information provided is important for all people to access. An acceptable use for the <code>title</code> attribute would be labeling an <code>iframe</code> element to indicate what content it contains.",
"wcagLevel":"A"
}
]
},
...
...
@@ -116,14 +83,6 @@
"description":"Can a person navigating with a keyboard, <a href='https://axesslab.com/switches/'>switch</a>, voice control, or screen reader see where they currently are on the page?",
"wcagLevel":"AA"
},
{
"title":"Check to see that keyboard focus order matches the visual layout.",
"preface":"Heading elements (h1, h2, h3, etc.) help break up the content of the page into related “chunks” of information. They are incredibly important for helping people who use assistive technology to understand the meaning of a page or view.",
"tasks":[
{
"title":"Use heading elements to introduce content.",
"description":"The <code>h1</code> element should be used to communicate the high-level purpose of the page or view. Do not use the <code>h1</code> element for a heading that does not change between pages or views (for example, the site's name).",
"wcagLevel":"AA"
},
{
"title":"Heading elements should be written in a logical sequence.",
"description":"<a href='https://webdesign.tutsplus.com/articles/the-importance-of-heading-levels-for-assistive-technology--cms-31753'>The order of heading elements</a> should descend, based on the “depth” of the content. For example, a <code>h4</code> element should not appear on a page before the first <code>h3</code> element declaration. A tool such as <a href='/resources/#headingsmap'>headingsMap</a> can help you evaluate this.",
"description":"For example, don't jump from a <code>h2</code> to a <code>h4</code>, skipping a <code>h3</code> element. If heading levels are being skipped for a specific visual treatment, use CSS classes instead.",
"wcagLevel":"AA"
}
]
},
"lists":{
"preface":"Lists elements let people know a collection of items are related and if they are sequential, and how many items are present in the list grouping.",
"description":"Depending on <a href='https://www.w3.org/WAI/tutorials/tables/'>how complex your table is</a>, you may also consider using <code>scope=\"col\"</code> for column headers, and <code>scope=\"row\"</code> for row headers. Many different kinds of assistive technology still use the <code>scope</code> attribute to help them understand and describe the structure of a table.",
"wcagLevel":"A"
},
{
"title":"Use the <code>caption</code> element to provide a title for the table.",
"description":"The table's <code>caption</code> should describe what kind of information the table contains.",
"wcagLevel":"AA"
}
]
},
"forms":{
"preface":"Forms allow people to enter information into a site for processing and manipulation. This includes things like sending messages and placing orders.",
"tasks":[
{
"title":"All inputs in a form are associated with a corresponding <code>label</code> element.",
"description":"Use a <code>for</code>/<code>id</code> pairing to guarantee the highest level of browser/assistive technology support. ",
"wcagLevel":"A"
},
{
"title":"Use <code>fieldset</code> and <code>legend</code> elements where appropriate.",
"checkboxId":"use-fieldset-and-legend",
...
...
@@ -374,14 +272,6 @@
"description":"This provides a way for assistive technology users to quickly have a high-level understanding of what issues are present in the form. This is especially important for larger forms with many inputs. Make sure that each reported error also has a link to the corresponding field with invalid input.",
"wcagLevel":"A"
},
{
"title":"Associate input error messaging with the input it corresponds to.",
"description":"Techniques such as <a href='https://developer.paciellogroup.com/blog/2018/09/describing-aria-describedby/'>using <code>aria-describedby</code></a> allow people who use assistive technology to more easily understand the difference between the input and the error message associated with it.",
"wcagLevel":"A"
},
{
"title":"Make sure that error, warning, and success states are not visually communicated by just color.",
"checkboxId":"dont-use-just-color-for-states",
...
...
@@ -403,14 +293,6 @@
"description":"Unexpected video and audio can be distracting and disruptive, especially for certain kinds of cognitive disability such as ADHD. Certain kinds of autoplaying video and animation can be a trigger for vestibular and seizure disorders.",
"wcagLevel":"A"
},
{
"title":"Ensure that media controls use appropriate markup.",
"description":"Examples include making sure an audio mute button has <a href='https://www.w3.org/WAI/PF/aria/states_and_properties#aria-pressed'>a pressed toggle state</a> when active, or that a volume slider uses <code><input type=\"range\"></code>.",
"wcagLevel":"A"
},
{
"title":"Check to see that all media can be paused.",
"checkboxId":"pause-media",
...
...
@@ -442,30 +324,9 @@
}
]
},
"audio":{
"preface":"Audio-specific checks.",
"tasks":[
{
"title":"Confirm that transcripts are available.",
"description":" Transcripts allow people who cannot hear to still understand the audio content. It also allows people to digest audio content at a pace that is comfortable to them.",
"wcagLevel":"A"
}
]
},
"appearance":{
"preface":"How your website app content looks in any given situation.",
"tasks":[
{
"title":"Check your content in specialized browsing modes.",
"description":"Activate <a href='/posts/2020-01-23-operating-system-and-browser-accessibility-display-modes/'>modes such as Windows High Contrast or Inverted Colors</a>. Is your content still legible? Are your icons, borders, links, form fields, and other content still present? Can you distinguish foreground content from the background?",
"description":"Requiring someone to scroll horizontally can be difficult for some, irritating for all.",
"description":"Requiring someone to scroll horizontally can be difficult for some, irritating for all. There are some exceptions to this for example: tables, maps, and large graphs",
