Abbreviations
Abbreviations are a short form of a word, or a phrase largely used by more the majority of people.
NOTE:
- New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
- Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS and JavaScript (when needed), along with a working demo.
-
If the meaning of the abbreviation is same within the webpage:
-
An expansion followed by the abbreviation as simple text. i.e., Web Content Accessibility
Guidelines (WCAG) SHOULD be provided for the first occurrence.
-
This CAN be done in any one of the following ways.
- First use of abbreviation immediately or after the expanded form.
- Linking the abbreviation to its definition.
- Providing a glossary.
- Using a link for the abbreviation that points to the glossary.
-
This CAN be done in any one of the following ways.
-
An expansion followed by the abbreviation as simple text. i.e., Web Content Accessibility
Guidelines (WCAG) SHOULD be provided for the first occurrence.
-
If the meaning of the abbreviation is different within the same webpage.
-
An expansion SHOULD be provided for all the occurrences of abbreviation
within the webpage.
- This CAN be done by linking abbreviation to its definition or providing a simple text followed by the abbreviation.
-
An expansion SHOULD be provided for all the occurrences of abbreviation
within the webpage.
- A “Search” functionality CAN be provided through which users can search for the expansion of the abbreviations used across the website.
- An unconventional way to provide abbreviation CAN be accomplished by coding the abbreviation as a tooltip. For more information on creating an accessible tooltip, refer to the Tooltips & Toggletips component.
- The text that is defined as an abbreviation or its expansion SHOULD meet the contrast requirements.
- For standard text, the foreground and background color should meet the contrast requirement of 4.5:1 ratio.
- For large text i.e., 18pts or 14 pts and bold, the foreground and background color should meet the contrast requirement of 3:1 ratio.
-
Providing an abbreviation and expansion through
<abbr>element along with<title>attribute SHOULD be avoided as it’s not compatible with assistive technology such as screen readers.
A well-defined abbreviation benefits majorly the below users.
- People with cognitive disabilities
- People using screen readers
- People with low vision
<h2>Accessibility Guidance for Assessment</h2>
<h3>Overview</h3>
<p>
Support our mission and ensure our assessment products are accessible to all
learners, we have chosen to align our accessibility guidance and
recommendations to the Web Content Accessibility Guidelines (WCAG),
developed by the World Wide Web Consortium (W3C). The information presented
on this site is aligned with the (WCAG) Success Criteria, recommended for
Pearson Assessment products. Where possible, we have added assessment
considerations.
</p>
<h3>Internal and External Customer Resources</h3>
<p>
Since the <button class="tooltip_btn" id="tooltip_btn" type="button" aria-describedby="wai">(WAI)</button>
<span role="tooltip" class="tooltiptext" id="wai">Web Accessibility Initiative</span>
of the (W3C) is internationally recognized as a primary source for
accessibility guidelines, we align our resources with the ongoing education
efforts of WAI’s Accessibility Education and Outreach Working
Group (EOWG)
</p>
.tooltiptext {
display: none;
width: 8em;
background-color: #d4eae4;
color: #003057;
text-align: center;
border-radius: 6px;
padding: 5px 0;
font-size: 1rem;
position: absolute;
z-index: 1;
font-size: 1em;
padding: 0.5em;
}
.tooltip_btn:focus + .tooltiptext {
display: inline-block;
}
button:focus {
outline: 2px solid #003057;
outline-offset: 1px;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
margin: 0.4em;
}
const trigger = document.querySelector(".tooltip_btn");
const tooltip = document.querySelector('#wai');
trigger.addEventListener('mouseenter', () => {
tooltip.style.display = 'inline-block';
});
trigger.addEventListener('mouseleave', () => {
if (trigger === document.activeElement) {
tooltip.style.display = 'inline-block';
} else {
tooltip.style.display = 'none';
}
});
trigger.addEventListener('focus', function() {
tooltip.style.display = 'inline-block';
});
trigger.addEventListener('blur', function() {
tooltip.style.display = 'none';
});
trigger.addEventListener('keydown', function(e) {
if (event.key === 'Escape') {
tooltip.style.display = 'none';
}
});
tooltip.addEventListener('mouseenter', () => {
tooltip.style.display = 'inline-block';
});
tooltip.addEventListener('mouseleave', () => {
if (trigger === document.activeElement) {
tooltip.style.display = 'inline-block';
} else {
tooltip.style.display = 'none';
}
});
var toogle = document.getElementById("toogleid");
toogle.addEventListener('click', function() {
var tool1 = document.getElementById("tool1");
tool1.style.display = tool1.style.display === 'none' ? 'block' : 'none';
if(tool1.style.display === 'block'){
toogle.setAttribute('aria-pressed','true');
tool1.innerHTML='Learn more about how Pearson Assessments is addressing accessibility.';
}else{
toogle.setAttribute('aria-pressed','false');
tool1.innerHTML = "";
}
});
toogle.addEventListener('keyup', function (e) {
if (e.keyCode == 27) {
toogle.setAttribute('aria-pressed','false');
tool1.style.display = 'none';
tool1.innerHTML = "";
}
});
document.addEventListener('click', function (e) {
if (toogle !== e.target) {
toogle.setAttribute('aria-pressed','false');
tool1.style.display = 'none';
tool1.innerHTML = "";
}
});
toogle.addEventListener('blur', function (e) {
toogle.setAttribute('aria-pressed','false');
tool1.style.display = 'none';
tool1.innerHTML = "";
});
Accessibility Guidance for Assessment
Overview
Support our mission and ensure our assessment products are accessible to all learners, we have chosen to align our accessibility guidance and recommendations to the Web Content Accessibility Guidelines (WCAG), developed by the World Wide Web Consortium (W3C). The information presented on this site is aligned with the (WCAG) Success Criteria, recommended for Pearson Assessment products. Where possible, we have added assessment considerations.
Internal and External Customer Resources
Since the Web Accessibility Initiative of the (W3C) is internationally recognized as a primary source for accessibility guidelines, we align our resources with the ongoing education efforts of WAI’s Accessibility Education and Outreach Working Group (EOWG)