Did you know that more than a quarter of students in higher education are enrolled in at least one online course?
That’s right. According to the “Online Report Card: Tracking Online Education in the United States,” conducted by the Babson Survey Research Group, 28% of college students are in some way connected to online learning. In total, the survey found that approximately 5.8 million students across the country take online courses.
I bring those statistics up to stress the need for web accessibility. It matters. Higher education websites — whether they are geared specifically for online education or just to represent an institution as a whole —must meet specific guidelines in order to fulfill the needs of individuals with disabilities. These guidelines make sure all individuals are able to receive the same education and benefit from the same tools necessary to fulfill their educational needs.
By ensuring your website meets accessibility standards, visitors with disabilities should have no problem quickly finding and accessing the same information as non-disabled students.
There are Four Principals of Accessibility
Users must be able to perceive information that is being presented. It cannot be invisible to them.
The website must be operable. The user must be able to operate the user interface, components of the website and navigation, either with a screen reader or some other assisted reading device.
Users must be able to understand the content being presented to them as well as understand how to operate and navigate the website. Users should not be left in the dark and confused as to what they are to do next.
Content must be robust. This means your website must be compatible with accessibility devices such as screen readers. The website’s content must always be accessible as technologies advance.
Drupal 8 comes packed with loads of new web accessible features that help people with disabilities drastically improve their website navigation. With these features, forms, links, images and content can be made accessible more easily than ever before. Non-visual page elements can be clearly marked for screen readers to read. Forms can be labeled appropriately so they clearly make sense and are able to be filled out with the use of a keyboard.
Below are some of the most impactful accessibility features, all of which are part of Drupal 8 core and pertain specifically to making content more accessible for individuals who are blind or colorblind.
Alternative Text for Images
Drupal 8 now has a default “Alternative text” field for all images uploaded to a website. Since screen readers only read text-based content, alternative text allows someone who is blind to understand an image’s meaning with the descriptive text in this field.
Alternative text is not only best for people who rely on screen readers to navigate a website, but it is also important for search engine optimization (SEO) purposes.
HTML 5 elements for more Semantics
Drupal 8 uses HTML5 elements in its templates by default, which provides better semantics. Screen readers interpret elements such as <header> and <footer> to help users navigate webpages more easily and make sense of what content is on the screen reader. This offers a more organized structure for screen readers to navigate webpages.
Forms
In Drupal 8, there is an option to enable inline errors on a form rather than at the top of a page. Prior to Drupal 8, the errors were highlighted in red at the top of the page and form fields were highlighted in red, but that made it difficult for people who were colorblind to understand where the errors were. Also, radio buttons and checkboxes can now be embedded in field sets to group them together. This meets Web Content Accessibility Guidelines (WCAG) compliance. It also helps screen readers navigate forms more easily. By using accessible rich internet applications (ARIA) markup in a form, a user can easily interact with the form fields, distinguish if boxes are checked or if fields are required, etc.
Tabbing Order
Drupal 8 offers a JavaScript featured called “Tabbing Manager.” It enables a constrained tabbing order on a page for navigation with keyboards to guide users with a keyboard to the most important elements on a page.
Hidden, Invisible and On-focus Elements
Drupal 8 now offers accessibility-naming conventions to hide different elements on a page from sight but make them accessible by screen readers. It now standardizes generalized CSS classes for focus, invisible and hidden elements, which is a big accessibility enhancement.
Aural Alerts
Drupal provides a JavaScript method called “Drupal.announce()” that creates an “aria-live” element on a page. Users with visual impairment will not see animations, popups, and color changes on content. By using Drupal’s JavaScript method, screen readers can now read these visual elements on a page and will be aware when something like an alert box appears.
WAI-ARIA Markup
Drupal 8 comes packed with extensive support for ARIA markup. This is basically a set of attributes that can be added to HTML5 elements. WAI-ARIA, the accessible rich internet applications suite, as stated by W3C:
‘… defines a way to make web content and web applications more accessible to people with disabilities. It helps with dynamic content and advanced user interface controls that are developed with Ajax, HTML, JavaScript, and other related technologies’.
ARIA utilizes roles to distinguish pieces of content from one another and create an organized flow of content for screen readers. ARIA markup makes websites more accessible to people who need it.
jQuery UI
Drupal 8 is now working with jQuery UI and utilizing its dialog modal as part of core, which is web accessible. Users are now able to use the keyboard to interact with the dialog modal. The dialog user interface allows the user to use the keyboard to interact with the dialog modal and close it. There has been added support for high contrast as well.
There are a lot of great aspects about Drupal 8, but one of the most important is that by using Drupal 8, your website will be far more accessible to assistive technologies and the users who rely on them than ever before.
Duo is an accessibility sponsor of MidCamp, a Drupal camp in Chicago, IL.