Understanding accessibility guidelines: W3Schools
Marcus Ophir is a digital media developer and UX designer, who has worked extensively with web accessibility guidelines.
He also suffers from Usher Syndrome, a rare, progressive genetic condition that affects sight and hearing. Symptoms will vary from person to person, and may include blindness, partial blindness and tunnel vision, deafness and partial deafness.
We spoke to Marcus, and asked him to go through the accessibility advice provided by w3schools.com:
w3schools.com is a resources and tutorial platform, developed by the World Wide Web Consortium (W3C), to showcase the best practices and latest trends in web coding or programming language technologies, for both beginners and industry professionals.
The platform pools together the fundamental and practical information on what languages there are, how they are used, and provides the means for individuals to test any code to ensure it meets W3C standards.
The languages it covers include HTML5, CSS, JavaScript, .ASP, MySQL, PHP, SQL, W3CSS, .NET, and JQuery.
At the core, and a pivotal element of designing user interfaces and developing accessible websites, is understanding the W3Cs Web Content Accessibility Guidelines (WCAG) and Web Accessibility Initiative (WAI).
WCAG are the guidelines set out by the W3C. These are global standards demonstrating what is needed to build an accessible website.
WAI provides a wealth of comprehensive information on protocols to promote how the WWW is evolving, whilst ensuring stakeholders and practitioners stay within the WCAG guidelines.
As digital and media creatives, it is good practice to adhere to and apply these standards to your design and development approach. Websites that are fully WCAG and WAI compliant benefit everyone – both those with accessibility needs and those without.
Everyone must adhere to the guidelines and practise using labelling for all the essential elements that are components of a webpage. This is important because it ensures browsers and assistive aids such as screen readers operate seamlessly. W3Schools sets out how you can do this with a series of simple guides, including the following:
-
Semantic HTML:
Semantic HTML simply allows coders or developers to give names to components as it identifies them. For example, a button which provides functions like ‘Add to basket’ or ‘I agree’ should be labelled simply as a<button>, for example:<button>Add to basket</button>The advent of HTML5, together with other more recent developments, means that it is no longer necessary for a programmer to use excessively long and unnecessarily complex code to designate the different button operability. It is easier for modern browsers to recognise and understand the new simpler language terms.
-
Header tags:
Headings are defined with the
<h1>to<h6>tags, allowing control over elements on a web page.Use of the Header tag allows you to structure navigation, and shows the document structure and the relationships between different sections.
<h1>headings should be used for main headings, followed by<h2>headings, then the less important<h3>, and so on. -
Alternative Text:
The use of alt text provides additional information or description of an object on the web page. An example would be a photograph. A screen reader would be able to provide a description of the photograph for those not able to see it. For example, a photo of myself would have the following descriptive attribute:
<img src="img_marcus-ophir.jpg" alt="Marcus Ophir"> - The Language attribute:
This allows websites with multilingual capabilities and global reach to adequately cater for users speaking different languages. Major sites like Apple, Netflix, and Amazon offer this feature, for example:
<html lang="en">. - Clear language:
When it comes to developing what an end-user will interact with on a website, it is essential to take the necessary steps to ensure the wording used is not written in jargon, or using extensive abbreviations or abstract language. like screen readers, jargon can hinder their experience as screen readers won’t be able to read these clearly.For example, you might understand the text abbreviation w8 4 me means ‘wait for me’, however screen readers will interpret this literally as the individual letters and numbers w – 8 – 4 – me. It is good practice to always use the full word.
Introduction to UX and Accessible Design
Reach your personal and professional goals
Unlock access to hundreds of expert online courses and degrees from top universities and educators to gain accredited qualifications and professional CV-building certificates.
Join over 18 million learners to launch, switch or build upon your career, all at your own pace, across a wide range of topic areas.
