:format()//media/WCAG-2.1-accessibility-in-2019-for-higher-education-RQ.png)
In June 2018 the final version of WCAG 2.1 was launched bringing in new guidelines to make websites more accessible. In the first of our two-part post on accessibility, we take a look at what the latest accessibility guidelines mean for universities.
Website accessibility isn't just about doing the right thing but now has legal implications. In the US the last 2 years have seen lawsuits and OCR complaints, where Universities and Colleges are receiving complaints, being fined or having to settle out of court. Fines and settlements have ranged from $20,000 to over $100,000. This University of Washington webpage provides a wide range of examples from across the US with links to settlement documents.
In the EU, the imaginatively named Directive (EU) 2016/2012 has some very strict rules, which include mandatory WCAG 2.1 compliance for Public Sector Bodies including Universities and Colleges. If you are an EU University and you are unsure if it applies to you the legal definition is available here. The quick guideline seems to be that if you need to follow EU procurement rules then the Accessibility Directive applies to you. While WCAG isn't mentioned within that Directive, it references EU Standard "EN 301 549" which commonly replicates WCAG 2.1.
In the EU the link between timelines and conformance level is very clear:
- September 23rd 2019 - All new websites need to meet WCAG 2.1 standards
- September 23rd 2020 - All websites created before the 23rd September 2019 need to meet the WCAG 2.1 standards.
- June 23rd 2021 - All public mobile apps need to be accessible
While the courts in the US are using WCAG 2.0 as the baseline for compliance it is very likely that WCAG 2.1 will be used from a legal perspective as best practice.
Website accessibility has come a long way since BOBBY in 1995, and below we start to outline exactly what it means for websites in 2019 and onwards.
What is WCAG?
WCAG stands for Web Content Accessibility Guidelines and they are maintained by the World Wide Web Consortium (W3C). They exist in part to make it easier for people to use the web and to create a better user experience for a wider audience and supporting people with disabilities.
The different levels of conformance
In order to meet the needs of different groups and different situations, WCAG 2.1 is separated into three conformance levels.
1. Level A – some impact on the design
2. Level AA – medium impact on the design
3. Level AAA – high / extreme impact on design
Most universities opt to comply at a AA level which provides a balance between accessibility and the design integrity of the website. We've identified the conformance level for each of the new guidelines below for your interest.
Enter WCAG 2.1
WCAG 2.1 is the latest guidelines and if you want to view them in full they're available here.
You'll see the guidelines are extensive so we've simplified and distilled these down into 15 key updates (broken down into three categories) you need to be aware of for your university.
The majority of these updates will apply to your website if you're committed to conforming to a AA level of accessibility. We've simplified and distilled these down into three categories.
New guidelines relating to how users interact with your university website
#1 Viewing orientation (AA)
If your university has a modern responsive website you're likely to already comply, but this new guideline states that a site should not force users of mobile and tablet devices to view the website in a particular orientation - it should be fully capable in both vertical and horizontal orientations.
The University of Derby's website is a good example of a responsive website. Their graphics, layout, and text all resize and are accessible in different formats like horizontal and vertical viewing.
#2 Autofill functionality (AA)
The code for your university website should be set up so that any input fields such as those you'd find on forms have the capability for the user's browser to autofill based on data previously entered by the user.
This is a feature that benefits most users but is particularly handy for visitors whose first language differs from the primary language used on your site and also those with visual impairment.
A lot of Universities have at least one form on their site. Take, for example, Loyola University. They have a number of forms on the site. To meet accessibility guidelines those forms will autofill based on a user's previously saved details. Automatically filled forms can contribute to a positive experience, and therefore possible recruitment, of students whose first language is not English.
#3 Turning off animations (AAA)
Animations that are triggered by interactions must be able to be turned off unless they are essential for the functionality or content being shown.
#4 Complex gestures (A)
If your website supports gestures like pinch to zoom and swiping then there should be alternatives provided to users like single, double taps and long presses. For EU Universities online maps have been specifically excluded from the EU Directive.
#5 Motion triggers (A)
Functionality that is triggered by the movement of the device should provide an option to turn this off unless the motion is essential functionality. And any motion functionality should also be triggered through other standard options in the website interface.
A changing main banner, like this one on the University of Wollongong's site, is a good example of the use of the TAB-key to control the movement of content on a site. Each of the headings underneath this picture can be scrolled using TAB to chose and ENTER to select the content.
New guidelines relating to how your website is viewed
#1 Identifying interface items (AA)
The purpose of interface components, icons and content should be identified programmatically so that users of the site can understand what the interface element actually does.
This means items such as checkboxes, drop-down lists, social media buttons and date, and time pickers all need to be properly identified.
Like Loyola University above, most other Universities have a number of dropdowns and social media icons that all need to be identified for accessibility purposes. So, don't use a strange custom code to identify normal website components.
#2 Horizontal scrolling (AA)
Visitors to your site should under normal circumstances be able to view the full page content at a 320-pixel wide screen without having to scroll horizontally. Notable exceptions to this rule are maps, tables and large diagrams where this isn't necessarily feasible. Again, if your website isn't responsive then it won't comply!
#3 High contrast (AA)
The latest guidelines extend the recommended high contrast for regular text content, to text on buttons, infographics, and diagrams. There are some great "poor" examples listed on the Nielsen Norman Group website blog.
#4 Text spacing (AA)
Text should now be able to be increased to certain values without leading to the loss of functionality or loss of content.
#5 Controlling pop-up elements (AA)
This guideline has been introduced to state that users should be able to dismiss modal windows, tooltips, and pop-ups without moving the mouse cursor or current keyboard focus, and scroll to the content without making it disappear when the cursor is moved.
It is important to note, that almost every site now has a cookie policy pop up. Universities will need to understand how they can give control to users to be able to dismiss these and any other pop-ups which may include subscriptions and event information that colleges may be promoting.
#6 Labelling interface components (A)
Components should be able to be read by assistive technologies like screen readers and triggered by voice commands.
#7 Status messages (AA)
Content that is updated dynamically must be notified to screen reader users without it commanding a visual focus.
#8 Target size (AAA)
Clickable elements should now have a minimum height and width of at least 44 * 44 pixels unless there is a distinct rationale or contextual reason for a smaller hit area. This will involve a lot of testing for Universities as automated testing results may not provide perfect results.
New guidelines relating to devices and peripherals
#1 Keyboard shortcuts (A)
If a website supports keyboard shortcuts it should now be possible to turn them off or to change them by pressing keyboard keys like Ctrl, Alt, and Cmd. They should also only be active when a relevant element has the user's focus.
#2 Input devices (AAA)
Your website should not limit or disable devices like a mouse, keyboard, stylus, touch or voice input, or to limit user's options for which device they use to control the website. This advice extends into tablets were using a mouse was previously uncommon.
Developing a website accessibility philosophy
Compared to implementing new features, widgets, and content, accessibility measures can feel like a hidden activity with less direct impact. But meeting accessibility standards is no longer just about properly supporting a broad user base. In many jurisdictions, it is also a legal requirement with financial penalties.
This overview should be a good start to bring you up to speed with the latest additions to the accessibility guidelines. Look out for part 2 which is packed with advice for running an accessibility update project at your institution and the challenges we are seeing Universities and Colleges facing.